auto-proceed on correct answer

Author: jspann21

customary-units-three-numbers.js

@@ -461,13 +461,19 @@ clearBtn.onclick = () => scratchpad.clear();
 
 // Event handlers
 function handleOptionClick(option, index) {
-    const selectedAnswer = parseInt(option.textContent);
+    const selectedAnswer = currentProblem.options[index];
+    const isCorrect = selectedAnswer === currentProblem.answer;
 
-    if (selectedAnswer === currentProblem.answer) {
-        animationSystem.handleCorrectAnswer(option, optionsContainer.getElementsByClassName('option'), () => {
+    const allOptions = optionsContainer.querySelectorAll('.option');
+    if (isCorrect) {
+        animationSystem.handleCorrectAnswer(option, allOptions, () => {
+            // Auto-proceed to the next problem
             if (currentProblemIndex < totalProblems - 1) {
                 currentProblemIndex++;
-                displayProblem();
+                displayProblem(); 
+            } else {
+                console.log("Reached end of problems.");
+                // Optionally disable next button or handle end state
             }
         });
     } else {

customary-units-up-to-100.js

@@ -465,13 +465,19 @@ clearBtn.onclick = () => scratchpad.clear();
 
 // Event handlers
 function handleOptionClick(option, index) {
-    const selectedAnswer = parseInt(option.textContent);
-    
-    if (selectedAnswer === currentProblem.answer) {
-        animationSystem.handleCorrectAnswer(option, optionsContainer.getElementsByClassName('option'), () => {
+    const selectedAnswer = currentProblem.options[index];
+    const isCorrect = selectedAnswer === currentProblem.answer;
+
+    const allOptions = optionsContainer.querySelectorAll('.option');
+    if (isCorrect) {
+        animationSystem.handleCorrectAnswer(option, allOptions, () => {
+            // Auto-proceed to the next problem
             if (currentProblemIndex < totalProblems - 1) {
                 currentProblemIndex++;
-                displayProblem();
+                displayProblem(); 
+            } else {
+                console.log("Reached end of problems.");
+                // Optionally disable next button or handle end state
             }
         });
     } else {

length-word-problems.js

@@ -339,13 +339,15 @@ document.addEventListener('DOMContentLoaded', () => {
         // Prevent clicking after answer
         if(option.disabled) return;
 
-        if (selectedAnswer === currentProblem.answer) {
-            animationSystem.handleCorrectAnswer(option, optionsContainer.getElementsByClassName('option'), () => {
-                 // Don't auto-advance, let user click next
-                // if (currentProblemIndex < totalProblems - 1) {
-                //     currentProblemIndex++;
-                //     displayProblem();
-                // }
+        const correctIndex = currentProblem.options.indexOf(currentProblem.answer);
+        const isCorrect = index === correctIndex;
+        
+        const allOptions = optionsContainer.querySelectorAll('.option');
+        if (isCorrect) {
+            animationSystem.handleCorrectAnswer(option, allOptions, () => {
+                // Auto-proceed to the next problem using modulo logic
+                currentProblemIndex = (currentProblemIndex + 1) % totalProblems;
+                displayProblem(); 
             });
         } else {
             animationSystem.handleWrongAnswer(option);

metric-units-length.js

@@ -426,11 +426,22 @@ clearBtn.onclick = () => scratchpad.clear();
 function handleOptionClick(option, index) {
     const problem = problems[currentProblem];
 
-    if (index === problem.correct) {
-        animationSystem.handleCorrectAnswer(option, optionsContainer.getElementsByClassName('option'), () => {
+    const correctIndex = problem.correct;
+    const isCorrect = index === correctIndex;
+    
+    // Use the animation system
+    const allOptions = optionsContainer.querySelectorAll('.option');
+    if (isCorrect) {
+        animationSystem.handleCorrectAnswer(option, allOptions, () => {
+            // Automatically load the next problem after the animation
             if (currentProblem < problems.length - 1) {
                 currentProblem++;
                 displayProblem();
+            } else {
+                 // Optional: Handle end of problems, maybe disable next? Or loop?
+                 // For now, just log or do nothing if already at the end.
+                 console.log("Reached end of problems.");
+                 // Consider disabling next button here if desired: nextButton.disabled = true;
             }
         });
     } else {

time-problems.js

@@ -391,6 +391,9 @@ function handleClockNumberClick(selectedNumberElement, clickedNumber) {
 
              const clockFace = optionsContainer.querySelector('.clock-face');
              if(clockFace) clockFace.appendChild(minuteHand);
+             
+             // Automatically load the next problem
+             generateAndShowNewProblem();
         });
     } else {
         // Use handleWrongAnswer, just passing the clicked number element
@@ -427,7 +430,8 @@ function handleSimpleOptionClick(selectedOption) {
 
     if (isCorrect) {
         animationSystem.handleCorrectAnswer(selectedOption, elementsToDisable, () => {
-            // REMOVED: setTimeout(displayProblem, 1500); 
+            // Automatically load the next problem
+            generateAndShowNewProblem(); 
         });
     } else {
         animationSystem.handleWrongAnswer(selectedOption);