add time problems, some animation fixes

Author: jspann21

animations.js

@@ -48,4 +48,4 @@ class AnimationSystem {
 }
 
 // Export a single instance to be used across all problems
-const animationSystem = new AnimationSystem(); 
+export const animationSystem = new AnimationSystem(); 

customary-units-three-numbers.html

@@ -42,7 +42,7 @@ <h1>Fun Math Problems! 🎨</h1>
         Customary Units of Length: Using 3 One or Two Digit Numbers
     </div>
     <div class="stars" id="stars-container"></div>
-    <script src="animations.js"></script>
-    <script src="customary-units-three-numbers.js"></script>
+    <script src="animations.js" type="module" defer></script>
+    <script src="customary-units-three-numbers.js" type="module" defer></script>
 </body>
 </html> 

customary-units-three-numbers.js

@@ -1,3 +1,5 @@
+import { animationSystem } from './animations.js';
+
 // Problem generator functions
 function generateProblem() {
     // Names array to cycle through

customary-units-up-to-100.html

@@ -42,7 +42,7 @@ <h1>Fun Math Problems! 🎨</h1>
         Customary Units of Length: Up to 100
     </div>
     <div class="stars" id="stars-container"></div>
-    <script src="animations.js"></script>
-    <script src="customary-units-up-to-100.js"></script>
+    <script src="animations.js" type="module" defer></script>
+    <script src="customary-units-up-to-100.js" type="module" defer></script>
 </body>
 </html> 

customary-units-up-to-100.js

@@ -1,3 +1,5 @@
+import { animationSystem } from './animations.js';
+
 // Problem generator functions
 function generateProblem() {
     // Names array to cycle through

index.html

@@ -34,6 +34,15 @@ <h2 class="topic-title">Word Problems</h2>
             </div>
         </div>
 
+        <div class="topic-section">
+            <h2 class="topic-title">Time</h2>
+            <div class="problem-links">
+                <a href="time-problems.html" class="problem-link">
+                    ⏰ Telling Time Problems
+                </a>
+            </div>
+        </div>
+
         <div class="topic-section">
             <h2 class="topic-title">More Topics Coming Soon!</h2>
             <div class="problem-links">

length-word-problems.html

@@ -42,7 +42,7 @@ <h1>Fun Math Problems! 🎨</h1>
         Length Word Problems
     </div>
     <div class="stars" id="stars-container"></div>
-    <script src="animations.js"></script>
-    <script src="length-word-problems.js"></script>
+    <script src="animations.js" type="module" defer></script>
+    <script src="length-word-problems.js" type="module" defer></script>
 </body>
 </html> 

length-word-problems.js

@@ -1,3 +1,5 @@
+import { animationSystem } from './animations.js';
+
 // Scratchpad functionality
 class Scratchpad {
     constructor(canvas) {
@@ -282,149 +284,124 @@ let currentProblemIndex = 0;
 const problems = [];
 const totalProblems = 50;
 
-// Generate all problems at start
-for (let i = 0; i < totalProblems; i++) {
-    problems.push(generateProblem());
-}
+// Removed DOM element getters, initialization, problem generation loop, handlers from global scope
+
+// Event listeners
+document.addEventListener('DOMContentLoaded', () => {
+    // Moved initialization code inside DOMContentLoaded
+
+    // DOM elements
+    const problemText = document.getElementById('problem-text');
+    const optionsContainer = document.getElementById('options-container');
+    const prevButton = document.getElementById('prev-btn');
+    const nextButton = document.getElementById('next-btn');
+
+    // Scratchpad elements
+    const scratchpadArea = document.getElementById('scratchpad-area');
+    const scratchpadCanvas = document.getElementById('scratchpad');
+    const toggleScratchpadBtn = document.getElementById('toggle-scratchpad');
+    const closeScratchpadBtn = document.getElementById('close-scratchpad');
+    const undoBtn = document.getElementById('undo-btn');
+    const redoBtn = document.getElementById('redo-btn');
+    const clearBtn = document.getElementById('clear-btn');
+
+    // Generate all problems at start
+    for (let i = 0; i < totalProblems; i++) {
+        problems.push(generateProblem());
+    }
 
-// DOM elements
-const problemText = document.getElementById('problem-text');
-const optionsContainer = document.getElementById('options-container');
-const prevButton = document.getElementById('prev-btn');
-const nextButton = document.getElementById('next-btn');
-
-// Scratchpad elements
-const scratchpadArea = document.getElementById('scratchpad-area');
-const scratchpadCanvas = document.getElementById('scratchpad');
-const toggleScratchpadBtn = document.getElementById('toggle-scratchpad');
-const closeScratchpadBtn = document.getElementById('close-scratchpad');
-const undoBtn = document.getElementById('undo-btn');
-const redoBtn = document.getElementById('redo-btn');
-const clearBtn = document.getElementById('clear-btn');
-
-// Initialize scratchpad
-const scratchpad = new Scratchpad(scratchpadCanvas);
-
-// Scratchpad control handlers
-toggleScratchpadBtn.onclick = () => {
-    scratchpadArea.classList.add('open');
-    toggleScratchpadBtn.style.display = 'none';
-    requestAnimationFrame(() => {
-        scratchpad.initialize();
-    });
-};
+    // Initialize scratchpad
+    const scratchpad = new Scratchpad(scratchpadCanvas);
+    scratchpad.initialize(); // Initialize scratchpad dimensions and context
 
-closeScratchpadBtn.onclick = () => {
-    scratchpadArea.classList.remove('open');
-    toggleScratchpadBtn.style.display = 'block';
-};
+    // Scratchpad control handlers
+    toggleScratchpadBtn.onclick = () => {
+        scratchpadArea.classList.toggle('open');
+        toggleScratchpadBtn.textContent = scratchpadArea.classList.contains('open') ? '❌ Close Scratchpad' : '📝 Open Scratchpad';
+        if (scratchpadArea.classList.contains('open')) {
+             scratchpad.setCanvasSize(); // Ensure canvas size is correct when opened
+        }
+    };
 
-undoBtn.onclick = () => scratchpad.undo();
-redoBtn.onclick = () => scratchpad.redo();
-clearBtn.onclick = () => scratchpad.clear();
+    closeScratchpadBtn.onclick = () => {
+        scratchpadArea.classList.remove('open');
+        toggleScratchpadBtn.textContent = '📝 Open Scratchpad';
+    };
 
-// Event handlers
-function handleOptionClick(option, index) {
-    const selectedAnswer = parseInt(option.textContent);
-    
-    if (selectedAnswer === currentProblem.answer) {
-        animationSystem.handleCorrectAnswer(option, optionsContainer.getElementsByClassName('option'), () => {
-            if (currentProblemIndex < totalProblems - 1) {
-                currentProblemIndex++;
-                displayProblem();
+    undoBtn.onclick = () => scratchpad.undo();
+    redoBtn.onclick = () => scratchpad.redo();
+    clearBtn.onclick = () => scratchpad.clear();
+
+    // Event handlers
+    function handleOptionClick(option, index) {
+        const selectedAnswer = parseInt(option.textContent);
+        
+        // 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();
+                // }
+            });
+        } else {
+            animationSystem.handleWrongAnswer(option);
+        }
+    }
+
+    function displayProblem() {
+        currentProblem = problems[currentProblemIndex];
+        problemText.textContent = currentProblem.text;
+        
+        const options = optionsContainer.getElementsByClassName('option');
+        // Ensure options container is cleared if structure changes (though unlikely here)
+        // optionsContainer.innerHTML = ''; 
+        Array.from(options).forEach((option, index) => {
+            // Check if currentProblem.options exists and has enough elements
+            if (currentProblem.options && currentProblem.options.length > index) {
+                option.textContent = currentProblem.options[index];
+                option.className = 'option'; // Reset classes
+                option.disabled = false;
+                option.onclick = () => handleOptionClick(option, index);
+            } else {
+                // Handle cases where there might be fewer options than buttons
+                option.style.display = 'none'; // Hide unused buttons
             }
         });
-    } else {
-        animationSystem.handleWrongAnswer(option);
+        
+        // Ensure all buttons are visible initially if needed
+        Array.from(options).forEach(opt => { if(opt.style.display === 'none') opt.style.display = ''; });
+
+        // Update navigation buttons
+        prevButton.disabled = currentProblemIndex === 0;
+        // Allow next button even if it's the last generated problem (user might want to re-answer?)
+        // nextButton.disabled = currentProblemIndex === totalProblems - 1; 
+        nextButton.disabled = false; // Allow clicking next to generate potentially new (if logic changes) or cycle
     }
-}
 
-function displayProblem() {
-    currentProblem = problems[currentProblemIndex];
-    problemText.textContent = currentProblem.text;
-    
-    const options = optionsContainer.getElementsByClassName('option');
-    Array.from(options).forEach((option, index) => {
-        option.textContent = currentProblem.options[index];
-        option.className = 'option';
-        option.disabled = false;
-        option.onclick = () => handleOptionClick(option, index);
-    });
-
-    // Update navigation buttons
-    prevButton.disabled = currentProblemIndex === 0;
-    nextButton.disabled = currentProblemIndex === totalProblems - 1;
-}
-
-// Navigation handlers
-prevButton.onclick = () => {
-    if (currentProblemIndex > 0) {
-        currentProblemIndex--;
-        displayProblem();
-    }
-};
+    // Navigation handlers
+    prevButton.onclick = () => {
+        if (currentProblemIndex > 0) {
+            currentProblemIndex--;
+            displayProblem();
+        }
+    };
 
-nextButton.onclick = () => {
-    if (currentProblemIndex < totalProblems - 1) {
-        currentProblemIndex++;
+    nextButton.onclick = () => {
+        // Simple loop back for now, could regenerate problems
+        currentProblemIndex = (currentProblemIndex + 1) % totalProblems;
         displayProblem();
-    }
-};
+        // if (currentProblemIndex < totalProblems - 1) {
+        //     currentProblemIndex++;
+        //     displayProblem();
+        // }
+    };
 
-// Initialize the first problem
-displayProblem();
+    // Initialize the first problem
+    displayProblem();
 
-// Initialize animation system if it doesn't exist
-// This is needed because animations.js creates the animationSystem instance
-if (typeof animationSystem === 'undefined') {
-    class AnimationSystem {
-        constructor() {
-            this.starsContainer = document.getElementById('stars-container');
-        }
-    
-        // Create a star element with random properties
-        createStar() {
-            const star = document.createElement('div');
-            star.className = 'star';
-            star.textContent = '⭐';
-            star.style.left = Math.random() * window.innerWidth + 'px';
-            star.style.fontSize = `${Math.random() * 20 + 20}px`; // Random size between 20-40px
-            star.style.animationDuration = `${Math.random() * 1.5 + 0.5}s`; // Random duration between 0.5-2s
-            return star;
-        }
-    
-        // Handle correct answer animation
-        handleCorrectAnswer(selectedOption, allOptions, callback) {
-            // Disable all options
-            Array.from(allOptions).forEach(option => {
-                option.disabled = true;
-                option.onclick = null;
-            });
-    
-            // Add correct class to the selected option
-            selectedOption.classList.add('correct');
-    
-            // Create and animate stars
-            const numStars = 10; // Consistent number of stars for all problems
-            for (let i = 0; i < numStars; i++) {
-                const star = this.createStar();
-                this.starsContainer.appendChild(star);
-                setTimeout(() => {
-                    star.remove();
-                }, 2000);
-            }
-    
-            // Wait for animation to complete before moving to next problem
-            setTimeout(callback, 1000);
-        }
-    
-        // Handle wrong answer animation
-        handleWrongAnswer(option) {
-            option.classList.add('wrong');
-            setTimeout(() => option.classList.remove('wrong'), 500);
-        }
-    }
-    
-    // Create a global instance
-    window.animationSystem = new AnimationSystem();
-} 
+    // Removed the redundant AnimationSystem check/definition block
+}); 

metric-units-length.html

@@ -40,7 +40,7 @@ <h1>Fun Math Problems! 🎨</h1>
         Appropriate Metric Unit of Length
     </div>
     <div class="stars" id="stars-container"></div>
-    <script src="animations.js"></script>
-    <script src="metric-units-length.js"></script>
+    <script src="animations.js" type="module" defer></script>
+    <script src="metric-units-length.js" type="module" defer></script>
 </body>
 </html> 

metric-units-length.js

@@ -1,3 +1,5 @@
+import { animationSystem } from './animations.js';
+
 // Scratchpad functionality
 class Scratchpad {
     constructor(canvas) {