commit 0b634befd8033cd9db637585cb1fbd2327855d1b
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 11:20:07 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..828f81e
--- /dev/null
+++ b/body.html
@@ -0,0 +1,44 @@
+<header>
+ <h1>MathAze</h1>
+ <p class="tagline">Make Learning Math Fun with Mazes!</p>
+</header>
+
+<main>
+ <section class="age-selector">
+ <h2>Select Age Group</h2>
+ <div class="age-buttons">
+ <button data-age="5-6">Ages 5-6</button>
+ <button data-age="7-8">Ages 7-8</button>
+ <button data-age="9-10">Ages 9-10</button>
+ <button data-age="11-12">Ages 11-12</button>
+ </div>
+ </section>
+
+ <section class="maze-container">
+ <div class="maze-controls">
+ <button id="generateMaze" disabled>Generate New Maze</button>
+ <button id="printMaze" disabled>Print Maze</button>
+ </div>
+ <div id="mazeGrid"></div>
+ </section>
+
+ <section class="instructions" aria-label="How to play">
+ <h2>How to Play</h2>
+ <ol>
+ <li>Select your age group</li>
+ <li>Click "Generate New Maze"</li>
+ <li>Solve math problems to find the correct path</li>
+ <li>Start from "START" and reach "FINISH"</li>
+ <li>Only move through correct answers!</li>
+ </ol>
+ </section>
+</main>
+
+<footer>
+ <nav>
+ <a href="#about">About</a>
+ <a href="#contact">Contact</a>
+ <a href="#privacy">Privacy Policy</a>
+ </nav>
+ <p>Made with love for young mathematicians</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..1356364
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,10 @@
+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
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..5e20ae1
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# 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.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..ebc1155
--- /dev/null
+++ b/script.js
@@ -0,0 +1,115 @@
+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);
+ });
+ });
+ }
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..547cae1
--- /dev/null
+++ b/style.css
@@ -0,0 +1,173 @@
+: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%;
+ }
+}