body.html
Changed around line 1
+
+
MathAze
+
Make Learning Math Fun with Mazes!
+
+
+
+
+
Select Age Group
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
How to Play
+
+ Select your age group
+ Click "Generate New Maze"
+ Solve math problems to find the correct path
+ Start from "START" and reach "FINISH"
+ Only move through correct answers!
+
+
+
+
+
+
+ About
+ Contact
+
+
Made with love for young mathematicians
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://mathaze.scroll.pub
+ metaTags
+ description Create fun math mazes for kids of different ages to practice arithmetic skills
+ keywords math, maze, kids, education, arithmetic, learning, practice
+ editButton /edit.html
+ title MathAze - Fun Math Maze Creator for Kids
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # mathaze.scroll.pub
+ Website generated by Claude from prompt: simple math maze creator for kids to train on math - allow multiple ages selection so it can create something per age.
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ let selectedAge = null;
+ const generateButton = document.getElementById('generateMaze');
+ const printButton = document.getElementById('printMaze');
+ const mazeGrid = document.getElementById('mazeGrid');
+
+ // Age group selection
+ document.querySelectorAll('.age-buttons button').forEach(button => {
+ button.addEventListener('click', () => {
+ document.querySelectorAll('.age-buttons button').forEach(btn => {
+ btn.classList.remove('selected');
+ });
+ button.classList.add('selected');
+ selectedAge = button.dataset.age;
+ generateButton.disabled = false;
+ printButton.disabled = false;
+ });
+ });
+
+ // Generate maze based on age group
+ generateButton.addEventListener('click', () => {
+ createMaze(selectedAge);
+ });
+
+ // Print maze
+ printButton.addEventListener('click', () => {
+ window.print();
+ });
+
+ function createMaze(ageGroup) {
+ const config = getMazeConfig(ageGroup);
+ const maze = generateMazeData(config);
+ displayMaze(maze);
+ }
+
+ function getMazeConfig(ageGroup) {
+ const configs = {
+ '5-6': {
+ size: 3,
+ operations: ['+'],
+ maxNumber: 10
+ },
+ '7-8': {
+ size: 4,
+ operations: ['+', '-'],
+ maxNumber: 20
+ },
+ '9-10': {
+ size: 5,
+ operations: ['+', '-', '*'],
+ maxNumber: 50
+ },
+ '11-12': {
+ size: 6,
+ operations: ['+', '-', '*', '/'],
+ maxNumber: 100
+ }
+ };
+ return configs[ageGroup];
+ }
+
+ function generateMazeData(config) {
+ const maze = [];
+ for (let i = 0; i < config.size; i++) {
+ const row = [];
+ for (let j = 0; j < config.size; j++) {
+ row.push(generateMathProblem(config));
+ }
+ maze.push(row);
+ }
+ return maze;
+ }
+
+ function generateMathProblem(config) {
+ const operation = config.operations[Math.floor(Math.random() * config.operations.length)];
+ let num1, num2, answer;
+
+ switch (operation) {
+ case '+':
+ num1 = Math.floor(Math.random() * config.maxNumber);
+ num2 = Math.floor(Math.random() * (config.maxNumber - num1));
+ answer = num1 + num2;
+ return `${num1} + ${num2} = ${answer}`;
+ case '-':
+ num1 = Math.floor(Math.random() * config.maxNumber);
+ num2 = Math.floor(Math.random() * num1);
+ answer = num1 - num2;
+ return `${num1} - ${num2} = ${answer}`;
+ case '*':
+ num1 = Math.floor(Math.random() * Math.sqrt(config.maxNumber));
+ num2 = Math.floor(Math.random() * Math.sqrt(config.maxNumber));
+ answer = num1 * num2;
+ return `${num1} × ${num2} = ${answer}`;
+ case '/':
+ num2 = Math.floor(Math.random() * Math.sqrt(config.maxNumber)) + 1;
+ answer = Math.floor(Math.random() * Math.sqrt(config.maxNumber));
+ num1 = num2 * answer;
+ return `${num1} ÷ ${num2} = ${answer}`;
+ }
+ }
+
+ function displayMaze(maze) {
+ mazeGrid.style.gridTemplateColumns = `repeat(${maze.length}, 1fr)`;
+ mazeGrid.innerHTML = '';
+
+ maze.forEach((row, i) => {
+ row.forEach((cell, j) => {
+ const cellElement = document.createElement('div');
+ cellElement.className = 'maze-cell';
+ cellElement.textContent = cell;
+ mazeGrid.appendChild(cellElement);
+ });
+ });
+ }
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #4a90e2;
+ --secondary-color: #f39c12;
+ --background-color: #f5f6fa;
+ --text-color: #2c3e50;
+ --success-color: #2ecc71;
+ --error-color: #e74c3c;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ background-color: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+ }
+
+ header {
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ padding: 2rem;
+ text-align: center;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+
+ h1 {
+ font-size: 3.5rem;
+ margin-bottom: 0.5rem;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+ }
+
+ .tagline {
+ font-size: 1.2rem;
+ opacity: 0.9;
+ }
+
+ main {
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+ }
+
+ .age-selector {
+ text-align: center;
+ margin-bottom: 2rem;
+ }
+
+ .age-buttons {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ flex-wrap: wrap;
+ margin-top: 1rem;
+ }
+
+ button {
+ padding: 0.8rem 1.5rem;
+ border: none;
+ border-radius: 25px;
+ background-color: var(--primary-color);
+ color: white;
+ cursor: pointer;
+ transition: transform 0.2s, background-color 0.2s;
+ font-size: 1rem;
+ }
+
+ button:hover {
+ transform: translateY(-2px);
+ background-color: #357abd;
+ }
+
+ button:disabled {
+ background-color: #ccc;
+ cursor: not-allowed;
+ }
+
+ .maze-container {
+ background: white;
+ padding: 2rem;
+ border-radius: 15px;
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+ }
+
+ .maze-controls {
+ display: flex;
+ gap: 1rem;
+ margin-bottom: 1rem;
+ justify-content: center;
+ }
+
+ #mazeGrid {
+ display: grid;
+ gap: 0.5rem;
+ margin: 2rem 0;
+ min-height: 400px;
+ }
+
+ .maze-cell {
+ background: white;
+ border: 2px solid var(--primary-color);
+ border-radius: 8px;
+ padding: 1rem;
+ text-align: center;
+ transition: background-color 0.3s;
+ cursor: pointer;
+ }
+
+ .maze-cell:hover {
+ background-color: rgba(74, 144, 226, 0.1);
+ }
+
+ .instructions {
+ margin-top: 3rem;
+ padding: 2rem;
+ background: white;
+ border-radius: 15px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ }
+
+ .instructions h2 {
+ color: var(--primary-color);
+ margin-bottom: 1rem;
+ }
+
+ .instructions ol {
+ padding-left: 1.5rem;
+ }
+
+ footer {
+ margin-top: 4rem;
+ padding: 2rem;
+ background: var(--text-color);
+ color: white;
+ text-align: center;
+ }
+
+ footer nav {
+ margin-bottom: 1rem;
+ }
+
+ footer a {
+ color: white;
+ text-decoration: none;
+ margin: 0 1rem;
+ }
+
+ footer a:hover {
+ text-decoration: underline;
+ }
+
+ @media (max-width: 768px) {
+ h1 {
+ font-size: 2.5rem;
+ }
+
+ .age-buttons {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .maze-controls {
+ flex-direction: column;
+ }
+
+ button {
+ width: 100%;
+ }
+ }