From e67e9f324894a79592bab6947583f97da3c8a35b Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Mon, 3 Mar 2025 11:56:22 +0100 Subject: Better design --- index.html | 240 +++++++++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 193 insertions(+), 47 deletions(-) diff --git a/index.html b/index.html index 9433a8d..8d0f905 100644 --- a/index.html +++ b/index.html @@ -4,75 +4,167 @@ - Morse Code Game + Morse Hero -

Morse Code Game

+

Morse Hero

-

Click the button below to start the game and initialize audio

+

Learn Morse code the fun way! Listen to the sound and pick the correct character.

-
Score: 0 / 0
+
Score: 0 / 0
@@ -107,12 +244,14 @@
-
+
@@ -171,7 +310,7 @@ optionButtons.forEach(button => { button.addEventListener('click', function () { - checkAnswer(button.textContent); + checkAnswer(button); }); }); @@ -182,11 +321,11 @@ function newRound() { // Clear feedback feedbackElement.textContent = ''; - feedbackElement.className = 'feedback'; - // Enable all option buttons + // Reset all buttons to default state optionButtons.forEach(button => { button.disabled = false; + button.classList.remove('correct', 'incorrect'); }); // Generate a random character @@ -227,7 +366,7 @@ } // Check the user's answer - function checkAnswer(selectedChar) { + function checkAnswer(selectedButton) { // Disable all buttons optionButtons.forEach(button => { button.disabled = true; @@ -236,16 +375,23 @@ totalPlayed++; totalElement.textContent = totalPlayed; + const selectedChar = selectedButton.textContent; + if (selectedChar === currentChar) { // Correct answer score++; scoreElement.textContent = score; - feedbackElement.textContent = 'Correct!'; - feedbackElement.className = 'feedback correct'; + selectedButton.classList.add('correct'); } else { - // Wrong answer - feedbackElement.textContent = 'Wrong! The correct answer was ' + currentChar; - feedbackElement.className = 'feedback incorrect'; + // Wrong answer - mark selected button as incorrect + selectedButton.classList.add('incorrect'); + + // Find and highlight the correct button + optionButtons.forEach(button => { + if (button.textContent === currentChar) { + button.classList.add('correct'); + } + }); } // Start a new round after a delay -- cgit v1.3.1