<!-- CSS -->
<style>
/* Alle Input-Felder verstecken */
input[type="text"], textarea {
display: none !important;
}
/* Layout für Instruktionsseiten */
.instructions, .results {
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
max-width: 800px;
margin: 0 auto;
line-height: 1.3;
font-size: 14px;
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 800px;
}
.instructions h1, .instructions h2 {
margin: 10px 0;
font-size: 24px;
}
.instructions p {
margin: 4px 0;
padding: 0;
}
.results {
background-color: #f8f9fa;
border-radius: 8px;
padding: 30px;
}
/* Layout für Stimuli */
.flanker-stimulus {
font-size: 64px;
font-family: 'Courier New', monospace;
letter-spacing: 10px;
text-align: center;
margin: 0;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.fixation {
font-size: 64px;
color: #999;
text-align: center;
margin: 0;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.response-screen {
font-size: 20px;
text-align: center;
color: #666;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.feedback-correct, .feedback-incorrect, .feedback-timeout {
font-size: 28px;
font-weight: bold;
text-align: center;
margin: 0;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.feedback-correct { color: #28a745; }
.feedback-incorrect { color: #dc3545; }
.feedback-timeout { color: #fd7e14; }
#experiment-container {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
#content {
width: 100%;
height: 100%;
position: relative;
}
.progress-indicator {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: #999;
}
.save-status {
background-color: #d4edda;
border: 2px solid #28a745;
border-radius: 8px;
padding: 15px;
margin: 15px 0;
text-align: center;
font-size: 14px;
}
.save-status.warning {
background-color: #fff3cd;
border-color: #ffc107;
}
.save-status.error {
background-color: #f8d7da;
border-color: #dc3545;
}
</style>
<!-- Audio -->
<audio id="background-music" preload="auto" loop></audio>
<!-- Container -->
<div id="experiment-container">
<div id="content">Experiment wird geladen…</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const musicConditions = ['alpha', 'klassik', 'keine'];
const randomizedConditions = musicConditions.sort(() => Math.random() - 0.5);
let currentConditionIndex = 0;
const musicURLs = {
alpha: '
https://www.soscisurvey.de/MusikAufmerksamkeit/Alpha_Waves_Aligned_to_Bach_FadeOut.mp3',
klassik: '
https://www.soscisurvey.de/MusikAufmerksamkeit/Bach_Praeludium_C_Dur_BWV846.mp3',
keine: null
};
const stimuli = [
{ arrows: '← ← ← ← ←', correct: 'ArrowLeft', type: 'congruent' },
{ arrows: '→ → → → →', correct: 'ArrowRight', type: 'congruent' },
{ arrows: '→ → ← → →', correct: 'ArrowLeft', type: 'incongruent' },
{ arrows: '← ← → ← ←', correct: 'ArrowRight', type: 'incongruent' }
];
const FIXATION_DURATION = 500;
const STIMULUS_DURATION = 175;
const RESPONSE_DURATION = 1000;
const FEEDBACK_DURATION = 600;
const ITI_DURATION = 800;
const totalTrials = 30;
let currentTrial = 0;
let trialOrder = [];
let results = [];
let currentKeyListener = null;
let musicStarted = false;
const contentDiv = document.getElementById('content');
// KOMPAKTE SPEICHERFUNKTION - NUR WICHTIGSTE DATEN
function saveCompactData(data) {
console.log('{EM_FLOPPY_DISK} Starte kompakte Speicherung...');
// NUR ZUSAMMENFASSUNG SPEICHERN (viel kürzer!)
const summary = {};
randomizedConditions.forEach(condition => {
const condData = data.filter(r => r.condition === condition);
const validTrials = condData.filter(r => r.response !== null);
const correctTrials = condData.filter(r => r.correct);
const accuracy = validTrials.length > 0 ?
Math.round((correctTrials.length / validTrials.length) * 100) : 0;
const congruentCorrect = correctTrials.filter(r => r.stimulus_type === 'congruent');
const incongruentCorrect = correctTrials.filter(r => r.stimulus_type === 'incongruent');
const congruentRT = congruentCorrect.length > 0 ?
Math.round(congruentCorrect.reduce((sum, r) => sum + r.rt, 0) / congruentCorrect.length) : 0;
const incongruentRT = incongruentCorrect.length > 0 ?
Math.round(incongruentCorrect.reduce((sum, r) => sum + r.rt, 0) / incongruentCorrect.length) : 0;
summary[condition] = {
acc: accuracy,
trials: condData.length,
cong_rt: congruentRT,
incong_rt: incongruentRT,
flanker: incongruentRT - congruentRT
};
});
// SEHR KURZE DATEN
const compactData = {
total: data.length,
order: randomizedConditions.join(','),
time: new Date().toISOString().slice(0,16), // Kurzes Datum
summary: summary
};
const jsonString = JSON.stringify(compactData);
console.log('{EM_BAR_CHART} Kompakte Daten:', jsonString.length, 'Zeichen');
console.log('{EM_BAR_CHART} Inhalt:', compactData);
if (typeof sosci !== 'undefined') {
try {
// NUR EINE VARIABLE MIT KOMPAKTEN DATEN
sosci.setVar('flanker_data', jsonString);
// ZUSÄTZLICH: Einzelne wichtige Werte
sosci.setVar('flanker_total_trials', data.length);
sosci.setVar('flanker_completion', new Date().toISOString().slice(0,16));
console.log('{EM_WHITE_HEAVY_CHECK_MARK} Kompakte Speicherung erfolgreich');
return true;
} catch (error) {
console.error('{EM_CROSS_MARK} Speicherfehler:', error);
return false;
}
} else {
console.warn('{EM_WARNING}️ SoSci Survey nicht verfügbar');
return false;
}
}
function showBreakScreen(callback) {
let remaining = 10; // Kurz für Testing
function updateTimer() {
contentDiv.innerHTML = `
<div class="instructions">
<h2>Pause</h2>
<p>Bitte machen Sie jetzt eine Pause.</p>
<p>Der nächste Durchgang startet in <strong>${remaining}</strong> Sekunden automatisch.</p>
</div>
`;
remaining--;
if (remaining >= 0) {
setTimeout(updateTimer, 1000);
} else {
callback();
}
}
updateTimer();
}
function startMusic() {
const cond = randomizedConditions[currentConditionIndex];
const audio = document.getElementById('background-music');
if (musicURLs[cond] && !musicStarted) {
audio.src = musicURLs[cond];
audio.volume = 0.3;
audio.loop = true;
audio.load();
audio.play().then(() => {
console.log('{EM_MUSICAL_NOTE} Musik gestartet:', cond);
musicStarted = true;
}).catch((e) => {
console.warn('{EM_PROHIBITED} Musikfehler:', e);
});
}
}
function stopMusic() {
const audio = document.getElementById('background-music');
if (audio) {
audio.pause();
musicStarted = false;
}
}
function showWelcome() {
const cond = randomizedConditions[currentConditionIndex];
const conditionText = cond === 'alpha' ? 'Alpha-Wellen-Musik' : cond === 'klassik' ? 'Klassische Musik' : 'Keine Musik';
contentDiv.innerHTML = `
<div class="instructions">
<h1>Flanker Test</h1>
<p><strong>Bedingung: ${conditionText}</strong></p>
<p>Sie werden fünf Pfeile sehen und sollen auf den <strong>mittleren Pfeil</strong> reagieren.</p>
<p><strong>Tasten:</strong></p>
<p>← Linke Pfeiltaste | Rechte Pfeiltaste →</p>
<p><strong>Wichtig:</strong> Die Pfeile erscheinen nur sehr kurz!</p>
<p>Reagieren Sie so schnell und genau wie möglich.</p>
<p><strong>Drücken Sie eine beliebige Taste, um zu beginnen.</strong></p>
${cond !== 'keine' ? '<p><em>(Die Musik startet automatisch mit den ersten Stimuli)</em></p>' : ''}
</div>
`;
addKeyListener(() => showInstructions());
}