Merk-Karussell<\/title>\r\n <style>\r\n \/* --- Base Styles --- *\/\r\n #merk-karussell-game {\r\n font-family: sans-serif; background-color: #fff; padding: 25px; border-radius: 12px;\r\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); text-align: center; width: 100%;\r\n max-width: 500px; min-height: 450px; display: flex; flex-direction: column;\r\n justify-content: space-between; margin: 20px auto; box-sizing: border-box;\r\n }\r\n\r\n \/* --- Start Screen Elements --- *\/\r\n #mk-start-screen { margin-bottom: 20px; }\r\n #mk-start-info { font-size: 1.1em; color: #555; margin-bottom: 15px; min-height: 20px; }\r\n .mk-select-label { display: block; margin-bottom: 10px; font-weight: bold; color: #333; }\r\n .mk-select { padding: 8px 12px; font-size: 1em; border-radius: 5px; border: 1px solid #ccc; margin-bottom: 20px; }\r\n #mk-highscore-display { \/* Style shared below *\/ }\r\n\r\n \/* --- Gameplay Elements --- *\/\r\n #mk-gameplay-elements { display: none; }\r\n\r\n \/* Info Area During Gameplay *\/\r\n #mk-game-info { font-size: 1.1em; color: #555; margin-bottom: 15px; min-height: 40px; }\r\n\r\n \/* Memorize Phase Display *\/\r\n #mk-memorize-words {\r\n font-size: 1.8em; font-weight: bold; color: #333; padding: 20px 0; min-height: 100px;\r\n display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px;\r\n display: none;\r\n }\r\n #mk-memorize-words span {\r\n display: inline-block; padding: 5px 10px; background-color: #e0e0e0; border-radius: 5px;\r\n }\r\n\r\n \/* Timer circle *\/\r\n #mk-timer-container {\r\n position: relative;\r\n width: 50px;\r\n height: 50px;\r\n margin: 0 auto 15px;\r\n display: none;\r\n }\r\n #mk-timer-circle {\r\n transform: rotate(-90deg);\r\n transform-origin: center;\r\n }\r\n #mk-timer-circle circle {\r\n \/* ANPASSUNG: r=22 => Umfang ~138 *\/\r\n stroke-dasharray: 138;\r\n stroke-dashoffset: 0;\r\n fill: none;\r\n stroke: #FFBE00;\r\n stroke-width: 6;\r\n transition: stroke-dashoffset 0.1s linear;\r\n }\r\n #mk-timer-text {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n font-size: 14px;\r\n font-weight: bold;\r\n color: #333;\r\n }\r\n\r\n \/* Grid Selection Phase *\/\r\n #mk-selection-grid {\r\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; justify-content: center;\r\n margin: 15px auto; max-width: 400px; padding: 10px; display: none;\r\n }\r\n .mk-word-cell {\r\n background-color: #f0f0f0; padding: 15px 5px; font-size: 16px; font-weight: bold;\r\n border: 2px solid #bdbdbd; border-radius: 8px; cursor: pointer;\r\n transition: background-color 0.2s, border-color 0.2s, transform 0.1s;\r\n display: flex; justify-content: center; align-items: center; min-height: 50px;\r\n user-select: none; -webkit-tap-highlight-color: transparent;\r\n }\r\n .mk-word-cell:hover:not(.disabled) { background-color: #e0e0e0; }\r\n .mk-word-cell:active:not(.disabled) { transform: scale(0.95); }\r\n .mk-word-cell.selected { background-color: #FFBE00; color: #000; border-color: #e6a700; }\r\n .mk-word-cell.correct { background-color: #90ee90; border-color: #5dbb5d; color: #000; }\r\n .mk-word-cell.incorrect { background-color: #ffcccb; border-color: #ff8a8a; color: #000; }\r\n .mk-word-cell.missed { border: 3px dashed #FFBE00; }\r\n .mk-word-cell.disabled { cursor: default; opacity: 0.7; }\r\n\r\n \/* Results Area (Round Feedback) *\/\r\n #mk-results {\r\n font-size: 1.1em; font-weight: bold; margin-top: 15px; padding: 10px;\r\n border-radius: 8px; background-color: #eee; min-height: 30px; display: none;\r\n }\r\n\r\n \/* Score & Highscore Display *\/\r\n .mk-score-container {\r\n display: flex; justify-content: space-around; align-items: center; margin-top: 15px;\r\n font-weight: bold; flex-wrap: wrap; gap: 10px;\r\n }\r\n #mk-score-display, #mk-highscore-display {\r\n font-size: 1.1em; color: #333; background-color: #eee; padding: 8px 15px; border-radius: 6px;\r\n }\r\n #mk-highscore-display { background-color: #d6eaf8; }\r\n #mk-score-display { display: none; }\r\n\r\n \/* Yellow Button Style *\/\r\n .mk-game-button {\r\n background-color: #FFBE00; color: #000; font-weight: bold; padding: 12px 25px;\r\n border: none; border-radius: 6px; font-size: 1.1em; cursor: pointer;\r\n transition: background-color 0.2s; margin-top: 20px;\r\n }\r\n .mk-game-button:hover:not(:disabled) { background-color: #e6a700; }\r\n .mk-game-button:disabled { background-color: #cccccc; cursor: default; color: #666; }\r\n\r\n \/* Control Buttons Container *\/\r\n #mk-button-controls { min-height: 50px; }\r\n #mk-submit-button, #mk-next-button, #mk-new-game-button { display: none; }\r\n\r\n \/* Responsive Adjustments *\/\r\n @media (min-width: 480px) {\r\n .mk-word-cell { padding: 20px 10px; font-size: 18px; }\r\n #mk-selection-grid { gap: 15px; }\r\n #mk-memorize-words { font-size: 2em; }\r\n }\r\n @media (min-width: 768px) {\r\n .mk-word-cell { font-size: 20px; }\r\n #mk-memorize-words { font-size: 2.2em; }\r\n }\r\n @media (max-width: 480px) {\r\n .mk-score-container { flex-direction: column; gap: 5px; }\r\n #mk-selection-grid { gap: 8px; }\r\n .mk-word-cell { font-size: 14px; padding: 12px 4px; }\r\n #mk-memorize-words { font-size: 1.6em; }\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"merk-karussell-game\">\r\n\r\n \r\n <div id=\"mk-start-screen\">\r\n <div id=\"mk-start-info\">Willkommen beim Merk-Karussell!<\/div>\r\n <label class=\"mk-select-label\" for=\"mk-rounds-select\">W\u00e4hlen Sie die Anzahl der Runden:<\/label>\r\n <select id=\"mk-rounds-select\" class=\"mk-select\">\r\n <option value=\"3\">3 Runden<\/option>\r\n <option value=\"5\" selected>5 Runden<\/option>\r\n <option value=\"7\">7 Runden<\/option>\r\n <option value=\"10\">10 Runden<\/option>\r\n <\/select>\r\n \r\n <label class=\"mk-select-label\" for=\"mk-time-select\">Merkzeit pro Runde:<\/label>\r\n <select id=\"mk-time-select\" class=\"mk-select\">\r\n <option value=\"3\">3 Sekunden<\/option>\r\n <option value=\"5\">5 Sekunden<\/option>\r\n <option value=\"10\" selected>10 Sekunden<\/option>\r\n <option value=\"15\">15 Sekunden<\/option>\r\n <\/select>\r\n \r\n <div class=\"mk-score-container\">\r\n <div id=\"mk-highscore-display\">Highscore: 0<\/div>\r\n <\/div>\r\n <button id=\"mk-start-button\" class=\"mk-game-button\">Spiel starten<\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"mk-gameplay-elements\">\r\n <div id=\"mk-game-info\"><\/div>\r\n \r\n \r\n <div id=\"mk-timer-container\">\r\n <svg id=\"mk-timer-circle\" width=\"50\" height=\"50\">\r\n <circle cx=\"25\" cy=\"25\" r=\"22\"><\/circle>\r\n <\/svg>\r\n <div id=\"mk-timer-text\">10<\/div>\r\n <\/div>\r\n \r\n <div id=\"mk-memorize-words\"><\/div>\r\n <div id=\"mk-selection-grid\" class=\"word-grid\"><\/div>\r\n <div id=\"mk-results\"><\/div>\r\n <div class=\"mk-score-container\">\r\n <div id=\"mk-score-display\">Punkte: 0<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"mk-button-controls\">\r\n <button id=\"mk-submit-button\" class=\"mk-game-button\">Auswahl pr\u00fcfen<\/button>\r\n <button id=\"mk-next-button\" class=\"mk-game-button\">N\u00e4chste Runde<\/button>\r\n <button id=\"mk-new-game-button\" class=\"mk-game-button\">Neues Spiel<\/button>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n \/\/ --- Configuration ---\r\n const WORDS_TO_SHOW = 6;\r\n const TOTAL_GRID_WORDS = 9;\r\n const PAUSE_TIME_MS = 300;\r\n const POINTS_PER_CORRECT = 10;\r\n const BONUS_ALL_CORRECT = 20;\r\n const HIGHSCORE_KEY_MK = \"merkKarussellHighScore_v3\"; \r\n\r\n \/\/ --- Word List ---\r\n const ALL_WORDS = [\r\n \"Apfel\", \"Lampe\", \"Zug\", \"Uhr\", \"Fisch\", \"Rose\", \"Haus\", \"Auto\", \"Buch\", \"Stuhl\", \"Tisch\", \"Fenster\",\r\n \"Hund\", \"Katze\", \"Maus\", \"Vogel\", \"Baum\", \"Blume\", \"Sonne\", \"Mond\", \"Stern\", \"Wolke\", \"Fluss\", \"See\",\r\n \"Berg\", \"Fahrrad\", \"Schiff\", \"Flugzeug\", \"Ball\", \"Pferd\", \"Kuh\", \"Schaf\", \"Ente\", \"Musik\", \"Radio\",\r\n \"Bild\", \"Foto\", \"Tasse\", \"Glas\", \"L\u00f6ffel\", \"Gabel\", \"Messer\", \"Teller\", \"Jacke\", \"Hose\", \"Schuh\"\r\n ];\r\n\r\n \/\/ --- Game State ---\r\n let gameActive = false;\r\n let currentPhase = 'idle';\r\n let score = 0;\r\n let currentRound = 0;\r\n let totalRounds = 5;\r\n let memorizeTimeSeconds = 10;\r\n let highScore = 0;\r\n let targetWords = [];\r\n let gridWords = [];\r\n let selectedWords = new Set();\r\n let memorizeTimer = null;\r\n let pauseTimer = null;\r\n let circleTimer = null;\r\n let timeRemaining = 0;\r\n\r\n \/\/ --- DOM Elements ---\r\n let startScreen = document.getElementById('mk-start-screen');\r\n let startInfo = document.getElementById('mk-start-info');\r\n let gameplayElements = document.getElementById('mk-gameplay-elements');\r\n let roundsSelect = document.getElementById('mk-rounds-select');\r\n let timeSelect = document.getElementById('mk-time-select');\r\n let gameInfo = document.getElementById('mk-game-info');\r\n let memorizeWordsDisplay = document.getElementById('mk-memorize-words');\r\n let selectionGrid = document.getElementById('mk-selection-grid');\r\n let resultsDisplay = document.getElementById('mk-results');\r\n let scoreDisplay = document.getElementById('mk-score-display');\r\n let highScoreDisplay = document.getElementById('mk-highscore-display');\r\n let startButton = document.getElementById('mk-start-button');\r\n let submitButton = document.getElementById('mk-submit-button');\r\n let nextButton = document.getElementById('mk-next-button');\r\n let newGameButton = document.getElementById('mk-new-game-button');\r\n let buttonControls = document.getElementById('mk-button-controls');\r\n let timerContainer = document.getElementById('mk-timer-container');\r\n let timerCircle = document.querySelector('#mk-timer-circle circle');\r\n let timerText = document.getElementById('mk-timer-text');\r\n\r\n \/\/ --- Helper Functions ---\r\n function shuffleArray(array) {\r\n const newArray = [...array];\r\n for (let i = newArray.length - 1; i > 0; i--) {\r\n const j = Math.floor(Math.random() * (i + 1));\r\n [newArray[i], newArray[j]] = [newArray[j], newArray[i]];\r\n }\r\n return newArray;\r\n }\r\n \r\n function getRandomWords(source, count, exclude = []) {\r\n const available = source.filter(word => !exclude.includes(word));\r\n const shuffled = shuffleArray(available);\r\n return shuffled.slice(0, count);\r\n }\r\n \r\n function loadHighScore() {\r\n try {\r\n const storedScore = localStorage.getItem(HIGHSCORE_KEY_MK);\r\n highScore = storedScore ? parseInt(storedScore, 10) : 0;\r\n updateHighScoreDisplay();\r\n } catch (e) {\r\n console.error(\"Error loading highscore:\", e);\r\n highScore = 0;\r\n }\r\n }\r\n \r\n function saveHighScore() {\r\n try {\r\n if (score > highScore) {\r\n highScore = score;\r\n localStorage.setItem(HIGHSCORE_KEY_MK, highScore.toString());\r\n updateHighScoreDisplay();\r\n resultsDisplay.innerHTML += \"<br>\ud83c\udf89 Neuer Highscore!\";\r\n }\r\n } catch (e) {\r\n console.error(\"Error saving highscore:\", e);\r\n }\r\n }\r\n \r\n function updateHighScoreDisplay() {\r\n highScoreDisplay.textContent = `Highscore: ${highScore}`;\r\n }\r\n \r\n function getFeedbackText(correctSelections, totalToShow, incorrectSelections) {\r\n if (correctSelections === totalToShow && incorrectSelections === 0) {\r\n return \"Super! Sie haben sich an alle Begriffe erinnert!\";\r\n } else if (correctSelections >= totalToShow * 0.8) {\r\n return \"Sehr gut! Sie haben sich an die meisten Begriffe erinnert!\";\r\n } else if (correctSelections >= totalToShow * 0.5) {\r\n return \"Gut gemacht! Sie haben sich an mehr als die H\u00e4lfte der Begriffe erinnert.\";\r\n } else if (correctSelections >= totalToShow * 0.3) {\r\n return \"Sie haben sich an einige Begriffe erinnert.\";\r\n } else {\r\n return \"Versuchen Sie, sich st\u00e4rker zu konzentrieren.\";\r\n }\r\n }\r\n \r\n \/\/ Timer-Funktion (Dekrementierung und optische Anzeige)\r\n function updateCircleTimer() {\r\n \/\/ Abbruch, wenn nicht mehr aktiv oder wir nicht in der Merk-Phase sind\r\n if (!gameActive || currentPhase !== 'memorizing') {\r\n if (circleTimer) {\r\n clearInterval(circleTimer);\r\n circleTimer = null;\r\n }\r\n return;\r\n }\r\n \r\n \/\/ Wenn die Zeit aufgebraucht ist, Timer stoppen\r\n if (timeRemaining <= 0) {\r\n timerText.textContent = 0; \/\/ optional: 0 f\u00fcr eine Sekunde anzeigen\r\n clearInterval(circleTimer);\r\n circleTimer = null;\r\n return;\r\n }\r\n \r\n \/\/ Berechne den Anteil verbleibender Zeit und setze Stroke-Offset\r\n const totalTime = memorizeTimeSeconds;\r\n const percentage = timeRemaining \/ totalTime;\r\n const dashoffset = 138 * (1 - percentage); \/\/ Umfang ~138\r\n \r\n timerCircle.style.strokeDashoffset = dashoffset;\r\n timerText.textContent = timeRemaining;\r\n \r\n timeRemaining--; \/\/ Dekrement\r\n }\r\n \r\n function clearAllTimers() {\r\n if (memorizeTimer) {\r\n clearTimeout(memorizeTimer);\r\n memorizeTimer = null;\r\n }\r\n if (pauseTimer) {\r\n clearTimeout(pauseTimer);\r\n pauseTimer = null;\r\n }\r\n if (circleTimer) {\r\n clearInterval(circleTimer);\r\n circleTimer = null;\r\n }\r\n }\r\n \r\n function removeGridClickHandlers() {\r\n const cells = selectionGrid.querySelectorAll('.mk-word-cell');\r\n cells.forEach(cell => {\r\n const clonedCell = cell.cloneNode(true);\r\n cell.parentNode.replaceChild(clonedCell, cell);\r\n });\r\n }\r\n \r\n function resetToStartScreen() {\r\n console.log(\"Resetting to start screen\");\r\n gameActive = false;\r\n clearAllTimers();\r\n removeGridClickHandlers();\r\n \r\n \/\/ Buttons ggf. neu klonen, damit alte Listener wegfallen\r\n let clonedStartButton = startButton.cloneNode(true);\r\n startButton.parentNode.replaceChild(clonedStartButton, startButton);\r\n startButton = clonedStartButton;\r\n \r\n let clonedSubmitButton = submitButton.cloneNode(true);\r\n submitButton.parentNode.replaceChild(clonedSubmitButton, submitButton);\r\n submitButton = clonedSubmitButton;\r\n \r\n let clonedNextButton = nextButton.cloneNode(true);\r\n nextButton.parentNode.replaceChild(clonedNextButton, nextButton);\r\n nextButton = clonedNextButton;\r\n \r\n let clonedNewGameButton = newGameButton.cloneNode(true);\r\n newGameButton.parentNode.replaceChild(clonedNewGameButton, newGameButton);\r\n newGameButton = clonedNewGameButton;\r\n \r\n \/\/ UI zur\u00fccksetzen\r\n gameplayElements.style.display = 'none';\r\n buttonControls.style.display = 'none';\r\n timerContainer.style.display = 'none';\r\n \r\n startScreen.style.display = 'block';\r\n \r\n currentPhase = 'idle';\r\n score = 0;\r\n currentRound = 0;\r\n \r\n memorizeWordsDisplay.innerHTML = '';\r\n selectionGrid.innerHTML = '';\r\n resultsDisplay.innerHTML = '';\r\n \r\n startButton.textContent = \"Spiel starten\";\r\n startButton.disabled = false;\r\n startButton.addEventListener('click', startGame);\r\n \r\n console.log(\"Reset complete, ready for new game\");\r\n }\r\n \r\n \/\/ --- Game Flow ---\r\n function showStartScreen() {\r\n console.log(\"Showing Start Screen\");\r\n gameActive = false;\r\n clearAllTimers();\r\n \r\n currentPhase = 'idle';\r\n gameplayElements.style.display = 'none';\r\n buttonControls.style.display = 'none';\r\n startScreen.style.display = 'block';\r\n timerContainer.style.display = 'none';\r\n \r\n startInfo.textContent = \"Willkommen beim Merk-Karussell!\";\r\n loadHighScore();\r\n startButton.textContent = \"Spiel starten\";\r\n startButton.disabled = false;\r\n \r\n startButton.addEventListener('click', startGame);\r\n console.log(\"Start button click listener set to startGame\");\r\n }\r\n\r\n function startGame() {\r\n console.log(\"Starting Game\");\r\n gameActive = true;\r\n clearAllTimers();\r\n \r\n try {\r\n \/\/ Anzahl Runden \/ Merkzeit aus Auswahllisten holen\r\n totalRounds = parseInt(roundsSelect.value, 10);\r\n memorizeTimeSeconds = parseInt(timeSelect.value, 10);\r\n \r\n score = 0;\r\n currentRound = 0;\r\n \r\n startScreen.style.display = 'none';\r\n gameplayElements.style.display = 'block';\r\n buttonControls.style.display = 'block';\r\n \r\n scoreDisplay.textContent = `Punkte: ${score}`;\r\n scoreDisplay.style.display = 'block';\r\n \r\n \/\/ Buttons zun\u00e4chst ausblenden\r\n submitButton.style.display = 'none';\r\n nextButton.style.display = 'none';\r\n newGameButton.style.display = 'none';\r\n \r\n submitButton.addEventListener('click', evaluateSelection);\r\n \r\n \/\/ Starte die erste Runde\r\n prepareRound();\r\n } catch (e) {\r\n console.error(\"Error in startGame:\", e);\r\n gameActive = false;\r\n alert(\"Ein Fehler ist aufgetreten. Bitte laden Sie die Seite neu.\");\r\n }\r\n }\r\n\r\n function prepareRound() {\r\n if (!gameActive) return;\r\n clearAllTimers();\r\n \r\n try {\r\n currentRound++;\r\n console.log(`Preparing Round ${currentRound}\/${totalRounds}`);\r\n currentPhase = 'preparing';\r\n \r\n \/\/ UI bereinigen\r\n resultsDisplay.style.display = 'none';\r\n resultsDisplay.innerHTML = '';\r\n selectionGrid.style.display = 'none';\r\n selectionGrid.innerHTML = '';\r\n memorizeWordsDisplay.innerHTML = '';\r\n memorizeWordsDisplay.style.display = 'none';\r\n timerContainer.style.display = 'none';\r\n submitButton.style.display = 'none';\r\n nextButton.style.display = 'none';\r\n newGameButton.style.display = 'none';\r\n selectedWords.clear();\r\n \r\n \/\/ Anzeige: \u201eRunde x \/ y\u201c\r\n gameInfo.textContent = `Runde ${currentRound} \/ ${totalRounds}`;\r\n \r\n \/\/ Zuf\u00e4llige Zielw\u00f6rter\r\n targetWords = getRandomWords(ALL_WORDS, WORDS_TO_SHOW);\r\n console.log(\"Target words:\", targetWords);\r\n \r\n \/\/ Kurze Verz\u00f6gerung, dann Merkphase starten\r\n memorizeTimer = setTimeout(() => {\r\n if (gameActive) showMemorizationPhase();\r\n }, 100);\r\n } catch (e) {\r\n console.error(\"Error in prepareRound:\", e);\r\n gameActive = false;\r\n resetToStartScreen();\r\n }\r\n }\r\n\r\n function showMemorizationPhase() {\r\n if (!gameActive) return;\r\n \r\n try {\r\n console.log(\"Showing Memorization Phase\");\r\n currentPhase = 'memorizing';\r\n \r\n gameInfo.textContent = \"Merken Sie sich die untenstehenden Begriffe\";\r\n \r\n memorizeWordsDisplay.style.display = 'flex';\r\n memorizeWordsDisplay.innerHTML = targetWords.map(word => `<span>${word}<\/span>`).join('');\r\n \r\n timerContainer.style.display = 'block';\r\n \r\n \/\/ Timer initialisieren\r\n timeRemaining = memorizeTimeSeconds;\r\n timerText.textContent = timeRemaining;\r\n timerCircle.style.strokeDashoffset = 0;\r\n \r\n if (circleTimer) clearInterval(circleTimer);\r\n updateCircleTimer(); \/\/ Sofort erster Durchlauf\r\n circleTimer = setInterval(updateCircleTimer, 1000);\r\n \r\n \/\/ Nach Ablaufen der Zeit -> direkt zur Auswahlphase (mit minimaler Pause)\r\n memorizeTimer = setTimeout(() => {\r\n if (gameActive) {\r\n pauseTimer = setTimeout(() => {\r\n if (gameActive) showSelectionPhase();\r\n }, PAUSE_TIME_MS);\r\n }\r\n }, memorizeTimeSeconds * 1000);\r\n } catch (e) {\r\n console.error(\"Error in showMemorizationPhase:\", e);\r\n gameActive = false;\r\n resetToStartScreen();\r\n }\r\n }\r\n\r\n function showSelectionPhase() {\r\n if (!gameActive) return;\r\n \r\n try {\r\n console.log(\"Showing Selection Phase\");\r\n currentPhase = 'selecting';\r\n \r\n memorizeWordsDisplay.style.display = 'none';\r\n timerContainer.style.display = 'none';\r\n \r\n gameInfo.textContent = \"Finden Sie die Begriffe, die Sie sich soeben gemerkt haben\";\r\n \r\n const distractorCount = TOTAL_GRID_WORDS - WORDS_TO_SHOW;\r\n const distractors = getRandomWords(ALL_WORDS, distractorCount, targetWords);\r\n gridWords = shuffleArray([...targetWords, ...distractors]);\r\n console.log(\"Grid words:\", gridWords);\r\n \r\n selectionGrid.innerHTML = '';\r\n gridWords.forEach(word => {\r\n const cell = document.createElement('div');\r\n cell.classList.add('mk-word-cell');\r\n cell.textContent = word;\r\n cell.dataset.word = word;\r\n cell.addEventListener('click', handleWordSelection);\r\n selectionGrid.appendChild(cell);\r\n });\r\n \r\n selectionGrid.style.display = 'grid';\r\n submitButton.style.display = 'inline-block';\r\n submitButton.disabled = false;\r\n selectedWords.clear();\r\n } catch (e) {\r\n console.error(\"Error in showSelectionPhase:\", e);\r\n gameActive = false;\r\n resetToStartScreen();\r\n }\r\n }\r\n\r\n function handleWordSelection(event) {\r\n if (!gameActive || currentPhase !== 'selecting') return;\r\n try {\r\n const cell = event.currentTarget;\r\n if (!cell || !cell.dataset || !cell.dataset.word) return;\r\n \r\n const word = cell.dataset.word;\r\n if (selectedWords.has(word)) {\r\n selectedWords.delete(word);\r\n cell.classList.remove('selected');\r\n } else {\r\n selectedWords.add(word);\r\n cell.classList.add('selected');\r\n }\r\n } catch (e) {\r\n console.error(\"Error in handleWordSelection:\", e);\r\n }\r\n }\r\n\r\n function evaluateSelection() {\r\n if (!gameActive || currentPhase !== 'selecting') {\r\n console.warn(\"Evaluate called outside selecting phase:\", currentPhase);\r\n return;\r\n }\r\n \r\n try {\r\n console.log(`Evaluating Round ${currentRound} of ${totalRounds}`);\r\n currentPhase = 'feedback';\r\n submitButton.disabled = true;\r\n submitButton.style.display = 'none';\r\n \r\n let correctSelections = 0;\r\n let incorrectSelections = 0;\r\n let roundScore = 0;\r\n \r\n removeGridClickHandlers();\r\n \r\n const cells = selectionGrid.querySelectorAll('.mk-word-cell');\r\n cells.forEach(cell => {\r\n cell.classList.add('disabled');\r\n \r\n const word = cell.dataset.word;\r\n const wasSelected = selectedWords.has(word);\r\n const isTarget = targetWords.includes(word);\r\n \r\n cell.classList.remove('selected');\r\n \r\n if (wasSelected && isTarget) {\r\n cell.classList.add('correct');\r\n correctSelections++;\r\n }\r\n else if (wasSelected && !isTarget) {\r\n cell.classList.add('incorrect');\r\n incorrectSelections++;\r\n }\r\n else if (!wasSelected && isTarget) {\r\n cell.classList.add('missed');\r\n }\r\n });\r\n \r\n const feedbackText = getFeedbackText(correctSelections, WORDS_TO_SHOW, incorrectSelections);\r\n gameInfo.textContent = feedbackText;\r\n \r\n roundScore = correctSelections * POINTS_PER_CORRECT;\r\n let resultMessage = `Runde ${currentRound}: ${correctSelections} von ${WORDS_TO_SHOW} richtig (${incorrectSelections} Fehler). Punkte: +${roundScore}`;\r\n if (correctSelections === WORDS_TO_SHOW && incorrectSelections === 0) {\r\n roundScore += BONUS_ALL_CORRECT;\r\n resultMessage += ` + ${BONUS_ALL_CORRECT} Bonus = ${roundScore}! Perfekt!`;\r\n } else {\r\n resultMessage += `.`;\r\n }\r\n \r\n score += roundScore;\r\n scoreDisplay.textContent = `Punkte: ${score}`;\r\n resultsDisplay.innerHTML = resultMessage;\r\n resultsDisplay.style.display = 'block';\r\n \r\n if (currentRound < totalRounds) {\r\n console.log(\"Setting up for next round\");\r\n nextButton.textContent = `N\u00e4chste Runde (${currentRound + 1}\/${totalRounds})`;\r\n nextButton.style.display = 'inline-block';\r\n nextButton.disabled = false;\r\n \r\n \/\/ Vorherige Listener entfernen\r\n const newNextButton = nextButton.cloneNode(true);\r\n nextButton.parentNode.replaceChild(newNextButton, nextButton);\r\n nextButton = newNextButton;\r\n \r\n nextButton.addEventListener('click', () => {\r\n if (gameActive) prepareRound();\r\n });\r\n } else {\r\n console.log(\"Game ended. Calling endGame function.\");\r\n endGame();\r\n }\r\n } catch (e) {\r\n console.error(\"Error in evaluateSelection:\", e);\r\n gameActive = false;\r\n resetToStartScreen();\r\n }\r\n }\r\n\r\n function endGame() {\r\n try {\r\n console.log(\"Ending Game\");\r\n currentPhase = 'finished';\r\n clearAllTimers();\r\n \r\n gameInfo.textContent = `Spiel beendet! Gesamtpunktzahl: ${score}`;\r\n resultsDisplay.innerHTML += `<br><b>Endstand: ${score}<\/b>`;\r\n saveHighScore();\r\n \r\n nextButton.style.display = 'none';\r\n submitButton.style.display = 'none';\r\n \r\n newGameButton.textContent = \"Neues Spiel\";\r\n newGameButton.style.display = 'inline-block';\r\n newGameButton.disabled = false;\r\n \r\n newGameButton.addEventListener('click', resetToStartScreen);\r\n } catch (e) {\r\n console.error(\"Error in endGame:\", e);\r\n gameActive = false;\r\n resetToStartScreen();\r\n }\r\n }\r\n\r\n \/\/ --- Initial Setup ---\r\n showStartScreen();\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5035324 e-flex e-con-boxed e-con e-parent\" data-id=\"5035324\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-00829a4 elementor-widget elementor-widget-heading\" data-id=\"00829a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Wie funktioniert Merk-Karussell?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d3f2a70 elementor-widget-mobile__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"d3f2a70\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p class=\"whitespace-pre-wrap break-words\">Das Merk-Karussell ist ein unterhaltsames Ged\u00e4chtnisspiel, bei dem Sie Ihre Merkf\u00e4higkeit trainieren k\u00f6nnen.<\/p><h2 class=\"text-xl font-bold text-text-100 mt-1 -mb-0.5\">Spielvorbereitung<\/h2><p class=\"whitespace-pre-wrap break-words\">W\u00e4hlen Sie zun\u00e4chst die Anzahl der Runden und die Merkzeit pro Runde aus. Je k\u00fcrzer die Merkzeit, desto anspruchsvoller wird das Spiel. Mit einem Klick auf „Spiel starten“ beginnt die Herausforderung.<\/p><h2 class=\"text-xl font-bold text-text-100 mt-1 -mb-0.5\">Spielablauf<\/h2><p class=\"whitespace-pre-wrap break-words\">In jeder Runde durchlaufen Sie drei Phasen:<\/p><p class=\"whitespace-pre-wrap break-words\"><strong>1. Merkphase:<\/strong> Sie sehen 6 zuf\u00e4llige Begriffe, die Sie sich einpr\u00e4gen m\u00fcssen. Ein gelber Zeitkreis zeigt Ihnen, wie viel Zeit noch verbleibt.<\/p><p class=\"whitespace-pre-wrap break-words\"><strong>2. Auswahlphase:<\/strong> Anschliessend erscheinen 9 Begriffe, aus denen Sie die 6 zuvor gezeigten ausw\u00e4hlen m\u00fcssen. Tippen Sie auf die Begriffe, an die Sie sich erinnern, und best\u00e4tigen Sie mit „Auswahl pr\u00fcfen“.<\/p><p class=\"whitespace-pre-wrap break-words\"><strong>3. Ergebnisphase:<\/strong> Das Spiel zeigt Ihnen Ihr Ergebnis: richtige Begriffe (gr\u00fcn), falsche Auswahlen (rot) und \u00fcbersehene Begriffe (gelb umrandet). Pro richtigem Begriff erhalten Sie 10 Punkte. Haben Sie alle 6 Begriffe korrekt und keine falschen ausgew\u00e4hlt, gibt es einen Bonus von 20 Punkten.<\/p><h2 class=\"text-xl font-bold text-text-100 mt-1 -mb-0.5\">Spielende<\/h2><p class=\"whitespace-pre-wrap break-words\">Nach der letzten Runde sehen Sie Ihre Gesamtpunktzahl. Erreichen Sie einen neuen Highscore, wird dieser gespeichert. Mit „Neues Spiel“ k\u00f6nnen Sie sofort eine weitere Runde starten.<\/p><p class=\"whitespace-pre-wrap break-words\">Tipp: Versuchen Sie, die Begriffe in Gruppen oder mit einer kleinen Geschichte zu verkn\u00fcpfen \u2013 das erleichtert das Merken erheblich!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Merk-Karussell Merk-Karussell Willkommen beim Merk-Karussell! W\u00e4hlen Sie die Anzahl der Runden: 3 Runden5 Runden7 Runden10 Runden Merkzeit pro Runde: 3 Sekunden5 Sekunden10 Sekunden15 Sekunden Highscore: 0 Spiel starten 10 Punkte: 0 Auswahl pr\u00fcfen N\u00e4chste Runde Neues Spiel Wie funktioniert Merk-Karussell? Das Merk-Karussell ist ein unterhaltsames Ged\u00e4chtnisspiel, bei dem Sie Ihre Merkf\u00e4higkeit trainieren k\u00f6nnen. Spielvorbereitung W\u00e4hlen […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1467,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"content-type":"","iawp_total_views":2323,"footnotes":""},"class_list":["post-5970","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Merk-Karussell<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fahrtauglich.ch\/fr\/praxisportal\/merk-karussell\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Merk-Karussell\" \/>\n<meta property=\"og:description\" content=\"Merk-Karussell Merk-Karussell Willkommen beim Merk-Karussell! W\u00e4hlen Sie die Anzahl der Runden: 3 Runden5 Runden7 Runden10 Runden Merkzeit pro Runde: 3 Sekunden5 Sekunden10 Sekunden15 Sekunden Highscore: 0 Spiel starten 10 Punkte: 0 Auswahl pr\u00fcfen N\u00e4chste Runde Neues Spiel Wie funktioniert Merk-Karussell? Das Merk-Karussell ist ein unterhaltsames Ged\u00e4chtnisspiel, bei dem Sie Ihre Merkf\u00e4higkeit trainieren k\u00f6nnen. Spielvorbereitung W\u00e4hlen […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fahrtauglich.ch\/fr\/praxisportal\/merk-karussell\/\" \/>\n<meta property=\"og:site_name\" content=\"Fahrtauglich\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-12T07:59:18+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/praxisportal\\\/merk-karussell\\\/\",\"url\":\"https:\\\/\\\/fahrtauglich.ch\\\/praxisportal\\\/merk-karussell\\\/\",\"name\":\"Merk-Karussell\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/#website\"},\"datePublished\":\"2025-04-06T13:35:53+00:00\",\"dateModified\":\"2025-04-12T07:59:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/praxisportal\\\/merk-karussell\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/fahrtauglich.ch\\\/praxisportal\\\/merk-karussell\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/praxisportal\\\/merk-karussell\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/fahrtauglich.ch\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Praxisportal\",\"item\":\"https:\\\/\\\/fahrtauglich.ch\\\/praxisportal\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Merk-Karussell\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/#website\",\"url\":\"https:\\\/\\\/fahrtauglich.ch\\\/\",\"name\":\"Fahrtauglich\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/fahrtauglich.ch\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/#organization\",\"name\":\"Fahrtauglich\",\"url\":\"https:\\\/\\\/fahrtauglich.ch\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/fahrtauglich.ch\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/cropped-Logo-2.jpg\",\"contentUrl\":\"https:\\\/\\\/fahrtauglich.ch\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/cropped-Logo-2.jpg\",\"width\":307,\"height\":188,\"caption\":\"Fahrtauglich\"},\"image\":{\"@id\":\"https:\\\/\\\/fahrtauglich.ch\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Monsieur carrousel","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fahrtauglich.ch\/fr\/praxisportal\/merk-karussell\/","og_locale":"fr_FR","og_type":"article","og_title":"Merk-Karussell","og_description":"Merk-Karussell Merk-Karussell Willkommen beim Merk-Karussell! W\u00e4hlen Sie die Anzahl der Runden: 3 Runden5 Runden7 Runden10 Runden Merkzeit pro Runde: 3 Sekunden5 Sekunden10 Sekunden15 Sekunden Highscore: 0 Spiel starten 10 Punkte: 0 Auswahl pr\u00fcfen N\u00e4chste Runde Neues Spiel Wie funktioniert Merk-Karussell? Das Merk-Karussell ist ein unterhaltsames Ged\u00e4chtnisspiel, bei dem Sie Ihre Merkf\u00e4higkeit trainieren k\u00f6nnen. Spielvorbereitung W\u00e4hlen […]","og_url":"https:\/\/fahrtauglich.ch\/fr\/praxisportal\/merk-karussell\/","og_site_name":"Fahrtauglich","article_modified_time":"2025-04-12T07:59:18+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fahrtauglich.ch\/praxisportal\/merk-karussell\/","url":"https:\/\/fahrtauglich.ch\/praxisportal\/merk-karussell\/","name":"Monsieur carrousel","isPartOf":{"@id":"https:\/\/fahrtauglich.ch\/#website"},"datePublished":"2025-04-06T13:35:53+00:00","dateModified":"2025-04-12T07:59:18+00:00","breadcrumb":{"@id":"https:\/\/fahrtauglich.ch\/praxisportal\/merk-karussell\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fahrtauglich.ch\/praxisportal\/merk-karussell\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fahrtauglich.ch\/praxisportal\/merk-karussell\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/fahrtauglich.ch\/"},{"@type":"ListItem","position":2,"name":"Praxisportal","item":"https:\/\/fahrtauglich.ch\/praxisportal\/"},{"@type":"ListItem","position":3,"name":"Merk-Karussell"}]},{"@type":"WebSite","@id":"https:\/\/fahrtauglich.ch\/#website","url":"https:\/\/fahrtauglich.ch\/","name":"Fahrtauglich","description":"","publisher":{"@id":"https:\/\/fahrtauglich.ch\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fahrtauglich.ch\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/fahrtauglich.ch\/#organization","name":"Fahrtauglich","url":"https:\/\/fahrtauglich.ch\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/fahrtauglich.ch\/#\/schema\/logo\/image\/","url":"https:\/\/fahrtauglich.ch\/wp-content\/uploads\/2024\/08\/cropped-Logo-2.jpg","contentUrl":"https:\/\/fahrtauglich.ch\/wp-content\/uploads\/2024\/08\/cropped-Logo-2.jpg","width":307,"height":188,"caption":"Fahrtauglich"},"image":{"@id":"https:\/\/fahrtauglich.ch\/#\/schema\/logo\/image\/"}}]}},"jetpack_sharing_enabled":true,"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"fahrtauglich.ch","author_link":"https:\/\/fahrtauglich.ch\/fr\/blog\/author\/mintcream-quetzal-259960-hostingersite-com\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"Merk-Karussell Merk-Karussell Willkommen beim Merk-Karussell! W\u00e4hlen Sie die Anzahl der Runden: 3 Runden5 Runden7 Runden10 Runden Merkzeit pro Runde: 3 Sekunden5 Sekunden10 Sekunden15 Sekunden Highscore: 0 Spiel starten 10 Punkte: 0 Auswahl pr\u00fcfen N\u00e4chste Runde Neues Spiel Wie funktioniert Merk-Karussell? Das Merk-Karussell ist ein unterhaltsames Ged\u00e4chtnisspiel, bei dem Sie Ihre Merkf\u00e4higkeit trainieren k\u00f6nnen. Spielvorbereitung W\u00e4hlen\u2026","_links":{"self":[{"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/pages\/5970","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/comments?post=5970"}],"version-history":[{"count":15,"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/pages\/5970\/revisions"}],"predecessor-version":[{"id":6012,"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/pages\/5970\/revisions\/6012"}],"up":[{"embeddable":true,"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/pages\/1467"}],"wp:attachment":[{"href":"https:\/\/fahrtauglich.ch\/fr\/wp-json\/wp\/v2\/media?parent=5970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}