Refactor code to remove unused scratchpad functionality and animations.js references across multiple problem pages. Implement shared scratchpad setup for improved consistency and maintainability.

Author: jspann21

README.md

@@ -1,50 +1,55 @@
 # Math Problems
 
-Access the page here: https://jspann21.github.io/Math_Problems/
+**Live site:** https://jspann21.github.io/Math_Problems/
 
-I created this site so that my daughter doesn't have to watch 30-second ads or pay a subscription to practice math
-problems. My plan is to expand the quantity and types of problems over time.
+I created this site so that my daughter doesn't have to watch 30-second ads or pay a subscription to practice math problems. My plan is to expand the quantity and types of problems over time.
 
-A JavaScript-based project that generates math problems with interactive options and a built-in scratchpad for drawing
-and annotating solutions. The project uses HTML, CSS, and vanilla JavaScript to display problems, handle user
-interactions, and provide a fun, dynamic learning experience.
+Ad-free math practice pages built with static HTML/CSS/JavaScript, deployed on GitHub Pages.
 
-## Features
+## Usage
 
-- Interactive math problems with multiple-choice options
-- Scratchpad for handwritten notes and drawings
-- Undo, redo, and clear functions in the scratchpad
-- Animated stars for correct answers
-- Responsive design and touch support for mobile devices
+Visit the live site and pick a topic from the homepage. Each problem page shows a question with multiple-choice answers. Use **Previous** and **Next** to move between problems. Open the **scratchpad** to work out solutions on a drawing canvas (undo, redo, clear). Use the **Home** button to return to the topic list.
 
-## Usage
+## Problem Types
 
-1. Open the index.html file in your browser.
-2. The first math problem will display with multiple-choice options.
-3. Use the scratchpad on the side to work out your solutions:
-    * Click on the Toggle Scratchpad button to open it.
-    * Use your mouse or touch to draw on the canvas.
-    * Use the Undo, Redo, and Clear buttons to manage your drawing.
-4. Select an answer option to check if your answer is correct. Animated stars will appear for correct answers.
-5. Navigate between problems using the provided navigation buttons.
+- **Customary Units of Length:** Using 3 One or Two Digit Numbers, Units Up to 100, Appropriate Metric Unit of Length
+- **Word Problems:** Length Word Problems
+- **Basic Operations:** Addition & Subtraction (0–20), Flashcards: Add & Subtract (0–20)
+- **Time:** Telling Time Problems, Read Clock Time (Minute Tick Marks)
 
-## Project Structure
+## Current Stack
 
-* index.html — Main entry point of the application.
-* script.js — Contains the logic for math problems, event handlers, and the scratchpad.
-* styles.css — Styles for the application layout and elements.
-* README.md — Project documentation file.
+- Static HTML pages for each problem type
+- Shared ES modules for animations, scratchpad, and utilities
+- Data-driven homepage catalog (`site-catalog.js` + `index.js`)
+- Single global stylesheet (`styles.css`) with reusable design tokens
 
-## Contributing
+## Local Development
 
-Contributions are welcome. To contribute:
+Use any static file server from the repo root:
 
-1. Fork the repository.
-2. Create a new branch for your feature or bugfix.
-3. Commit your changes with clear commit messages.
-4. Open a pull request for review.
+```bash
+python -m http.server 8000
+```
 
-## License
+Then open `http://localhost:8000`.
 
-This project is open source and available under the MIT License.
+## Project Structure
 
+- `index.html`: homepage shell
+- `index.js`: renders topic cards from catalog data
+- `site-catalog.js`: single source of truth for homepage links/topics
+- `shared.js`: shared scratchpad + utility functions
+- `animations.js`: reusable correct/wrong answer feedback
+- `*.html` + matching `*.js`: individual problem pages and logic
+- `styles.css`: global and page-specific styling
+
+## Add A New Page
+
+1. Create `your-topic.html` and `your-topic.js`.
+2. Reuse existing page structure and include module scripts.
+3. Import shared helpers in your script:
+   - `setupScratchpad()` for scratchpad controls
+   - `shuffleArray()` and other shared utilities as needed
+4. Add your page link to `site-catalog.js` in the correct topic section.
+5. Commit and push to `main` for GitHub Pages deployment.

addition-subtraction-0-20-flashcards.html

@@ -43,10 +43,8 @@ <h1>⚡ Flashcards: Add & Subtract (0-20)</h1>
     <div class="problem-type">
         Addition & Subtraction (0-20) Flashcards
     </div>
-    <!-- Stars container might not be relevant here, but kept for consistency -->
+    <!-- Kept for consistency if celebration animations are added later -->
     <div class="stars" id="stars-container"></div>
-    <!-- animations.js included for potential future use or consistency -->
-    <script src="animations.js" type="module" defer></script>
     <script src="addition-subtraction-0-20-flashcards.js" type="module" defer></script>
 </body>
-</html> 
+</html> 

addition-subtraction-0-20.html

@@ -39,7 +39,6 @@ <h1>🔢 Addition & Subtraction (0-20)</h1>
         Addition & Subtraction (0-20) Problems
     </div>
     <div class="stars" id="stars-container"></div>
-    <script src="animations.js" type="module" defer></script>
     <script src="addition-subtraction-0-20.js" type="module" defer></script>
 </body>
-</html> 
+</html>