diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte index d7828e9..f1240d5 100644 --- a/src/components/Footer.svelte +++ b/src/components/Footer.svelte @@ -4,32 +4,32 @@ - - diff --git a/src/components/Header.svelte b/src/components/Header.svelte index 406826e..361bbd7 100644 --- a/src/components/Header.svelte +++ b/src/components/Header.svelte @@ -399,10 +399,6 @@ color: #6b7280; /* gray */ } - .achievement-block { - margin-left: auto; - } - @media (max-width: 700px) { .header-row { grid-template-columns: 1fr auto auto; diff --git a/src/pages/FlagQuiz.svelte b/src/pages/FlagQuiz.svelte index fc33fa9..2089140 100644 --- a/src/pages/FlagQuiz.svelte +++ b/src/pages/FlagQuiz.svelte @@ -33,6 +33,9 @@ let timerDuration = 2000; // 2 seconds let timerStartTime = 0; + // Force component re-render key to prevent button state persistence + let questionKey = 0; + // Scoring let score = { correct: 0, total: 0, skipped: 0 }; let gameStats = { correct: 0, wrong: 0, total: 0, skipped: 0 }; @@ -206,6 +209,26 @@ // Cancel any active auto-advance timer cancelAutoAdvanceTimer(); + // Increment question key to force complete re-render and clear button states + questionKey++; + + // Remove focus from any previously focused buttons and ensure clean state + if (typeof document !== 'undefined') { + // Use setTimeout to ensure DOM updates are complete + setTimeout(() => { + const activeElement = document.activeElement; + if (activeElement && activeElement.tagName === 'BUTTON') { + activeElement.blur(); + } + // Force removal of any residual button states + const buttons = document.querySelectorAll('.option, .flag-option'); + buttons.forEach(button => { + button.blur(); + button.classList.remove('selected', 'correct', 'wrong'); + }); + }, 0); + } + // Randomly choose question type questionType = Math.random() < 0.5 ? 'flag-to-country' : 'country-to-flag'; @@ -647,7 +670,7 @@ Flag -
+
{#each currentQuestion.options as option, index}
-
+
{#each currentQuestion.options as option, index}