Master Math Facts

{"name":"Master Math Facts","description":"The practice dojo for the four basic operations.\n\nType your answers and press 'Enter' to submit.\n\nTry to get your average time as low as possible!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/ew23lrfa8afdgyqt3v8i","view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-02-14T19:09:27.709506Z","updated_at":"2025-02-14T19:09:27.709508Z","user_id":5,"status":"PRIVATE","parent_id":5579,"id":5816,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let selectedOperations = [];\n\nlet currentProblem = \"\";\n\nlet correctAnswer = 0;\n\nlet history = [];\n\nlet userInput = \"\";\n\nlet feedback = \"\";\n\nlet currentStreak = 0;\n\nlet maxStreak = 0;\n\nlet timer = 0;\n\nlet startTime = 0;\n\n// Timer for the current problem\nlet totalTime = 0;\n\n// Total time spent on all problems\nlet problemCount = 0;\n\nlet problemTimes = [];\n\nfunction setup() {\n createCanvas(windowWidth, window.innerHeight); // Use window.innerHeight for the canvas height\n background(75, 0, 130); // Dark purple with RGB values\n updateSelectedOperations();\n generateProblem();\n}\n\nfunction draw() {\n // Clear background\n background(75, 0, 130); // Dark purple with RGB values\n\n timer = (millis() - startTime) / 1000; // Calculate the elapsed time in seconds\n\n let averageTime = problemTimes.length > 0 ? (problemTimes.reduce((a, b) => a + b) / problemTimes.length).toFixed(2) : 0;\n\n\n\n // Update the history display\n textSize(24);\n fill(255);\n textAlign(LEFT);\n let historyY = 100; // Starting Y position for history\n for (let i = 0; i < history.length; i++) {\n text(history[i].problem + \" = \" + history[i].answer, 50, historyY + i * 30);\n }\n\n // Display current and maximum streak in the top right corner\n textSize(24);\n fill(255);\n textAlign(RIGHT);\n text(\"Current Streak: \" + currentStreak, width - 50, 30);\n text(\"Max Streak: \" + maxStreak, width - 50, 60);\n\n // Display the timer underneath the streaks\n text(\"Time: \" + timer.toFixed(2) + \" seconds\", width - 50, 90);\n text(\"Avg Time: \" + averageTime + \" seconds\", width - 50, 120);\n\n\n\n // Display the current problem\n textSize(48);\n textAlign(CENTER, CENTER);\n text(\"Solve: \" + currentProblem, width / 2, height / 2 - 50);\n\n // Display the user input\n textSize(32);\n text(\"Your Answer: \" + userInput, width / 2, height / 2 + 50);\n\n // Ensure feedback emoji is displayed\n textSize(48);\n textAlign(CENTER, CENTER);\n fill(255); // Set the fill color to white\n text(feedback, width / 2, height / 2 + 150); // Display feedback emoji\n}\n\nfunction updateSelectedOperations() {\n selectedOperations = [];\n if (document.getElementById('addition').checked) selectedOperations.push('addition');\n if (document.getElementById('subtraction').checked) selectedOperations.push('subtraction');\n if (document.getElementById('multiplication').checked) selectedOperations.push('multiplication');\n if (document.getElementById('division').checked) selectedOperations.push('division');\n}\n\nfunction keyPressed() {\n if (keyCode >= 48 && keyCode <= 57) { // Check if key is a number (0-9)\n userInput += key; // Append the number to user input\n } else if (keyCode === BACKSPACE) {\n userInput = userInput.slice(0, -1); // Remove the last character\n } else if (keyCode === ENTER) {\n checkAnswer(); // Call checkAnswer on Enter\n } else if (keyCode === UP_ARROW) {\n frog()\n }\n}\n\nfunction generateProblem() {\n updateSelectedOperations(); // Update operations before generating the problem\n if (selectedOperations.length === 0) return; // Don't generate if no operations are selected\n\n let operation = random(selectedOperations);\n let num1, num2;\n\n // Get maximum values from the input fields\n let maxAddition = parseInt(document.getElementById('maxAddition').value);\n let maxSubtraction = parseInt(document.getElementById('maxSubtraction').value);\n let maxMultiplication = parseInt(document.getElementById('maxMultiplication').value);\n let maxDivision = parseInt(document.getElementById('maxDivision').value);\n\n switch (operation) {\n case 'addition':\n num1 = floor(random(1, maxAddition + 1));\n num2 = floor(random(1, maxAddition + 1));\n currentProblem = `${num1} + ${num2}`;\n correctAnswer = num1 + num2;\n break;\n case 'subtraction':\n num1 = floor(random(1, maxSubtraction + 1));\n num2 = floor(random(1, num1)); // Ensure num1 is larger\n currentProblem = `${num1} - ${num2}`;\n correctAnswer = num1 - num2;\n break;\n case 'multiplication':\n num1 = floor(random(1, maxMultiplication + 1));\n num2 = floor(random(1, maxMultiplication + 1));\n currentProblem = `${num1} × ${num2}`;\n correctAnswer = num1 * num2;\n break;\n case 'division':\n num2 = floor(random(1, maxDivision + 1));\n correctAnswer = floor(random(1, maxDivision + 1));\n num1 = num2 * correctAnswer; // Ensure whole numbers\n currentProblem = `${num1} ÷ ${num2}`;\n break;\n }\n\n // Reset user input and timer for the new problem\n userInput = \"\";\n startTime = millis(); // Start the timer for the new problem\n timer = 0; // Reset the timer variable\n}\n\nfunction checkAnswer() {\n const userAnswer = parseInt(userInput); // Parse the user input to an integer\n\n // Add the current problem and correct answer to history\n history.unshift({ problem: currentProblem, answer: correctAnswer });\n // Limit history to the last 5 problems\n if (history.length > 5) {\n history.pop();\n }\n\n // Calculate the time spent on the current problem\n let timeSpent = (millis() - startTime) / 1000; // Time taken in seconds\n problemTimes.push(timeSpent); // Store the time taken for this problem\n\n // Provide feedback based on the answer\n if (currentProblem.includes('÷')) {\n // For division, check if num1 / num2 equals the user answer\n let parts = currentProblem.split(' ÷ ');\n let leftNum = parseInt(parts[0]);\n let rightNum = parseInt(parts[1]);\n if (leftNum / rightNum === userAnswer) {\n feedback = \"😀\"; // Set feedback emoji for correct answer\n currentStreak++; // Increase current streak\n // Update max streak if current streak is greater\n if (currentStreak > maxStreak) {\n maxStreak = currentStreak;\n }\n } else {\n feedback = \"😞\"; // Set feedback emoji for incorrect answer\n currentStreak = 0; // Reset current streak\n }\n } else {\n // For other operations, compare directly\n if (userAnswer === correctAnswer) {\n feedback = \"😀\"; // Set feedback emoji for correct answer\n currentStreak++; // Increase current streak\n // Update max streak if current streak is greater\n if (currentStreak > maxStreak) {\n maxStreak = currentStreak;\n }\n } else {\n feedback = \"😞\"; // Set feedback emoji for incorrect answer\n currentStreak = 0; // Reset current streak\n }\n }\n\n // Calculate average time based on the problemTimes array\n let averageTime = problemTimes.length > 0 ? (problemTimes.reduce((a, b) => a + b) / problemTimes.length).toFixed(2) : 0;\n\n // Update the problem count\n problemCount++; // Increment problem count\n\n // Generate the next problem\n generateProblem();\n\n // Clear user input for the next answer\n userInput = '';\n}\nm","style.css":"#problemContainer {\n display: flex;\n flex-direction: column;\n /* Stack elements vertically */\n align-items: center;\n /* Center horizontally */\n justify-content: center;\n /* Center vertically if needed */\n height: calc(100vh - 150px);\n /* Fill the remaining height */\n}\n\ninput[type=\"text\"] {\n font-size: 24px;\n /* Font size for input */\n padding: 10px;\n /* Padding for input */\n margin-bottom: 10px;\n /* Space below input */\n}\n\nbody {\n margin: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n background-color: #4B0082;\n /* Dark purple background */\n color: white;\n /* White text color */\n}\n\ncanvas {\n display: block;\n}\n\n#input-section {\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n#historyDisplay {\n font-size: 24px;\n margin: 10px;\n max-height: 150px;\n overflow-y: auto;\n width: 80%;\n color: white;\n /* White text color */\n}\n\n#currentProblemDisplay {\n font-size: 48px;\n margin-bottom: 20px;\n}\n\ninput[type=\"text\"],\ninput[type=\"number\"] {\n font-size: 24px;\n padding: 10px;\n margin-bottom: 10px;\n color: black;\n /* Black text color for input */\n}\n\nbutton {\n font-size: 24px;\n padding: 10px;\n}\n\n#operation-selection label {\n font-size: 20px;\n /* Increase the font size for labels */\n}\n\n#operation-selection input[type=\"checkbox\"] {\n transform: scale(1.5);\n /* Scale up the checkbox size for better visibility */\n}\n\n#operation-selection {\n width: 100%;\n background-color: rgba(255, 255, 255, 0.1);\n /* Slightly transparent white for settings */\n padding: 20px;\n /* Increase padding around the selection area */\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n display: flex;\n /* Use flexbox for better alignment */\n justify-content: center;\n /* Center the contents */\n}\n\n#operation-selection table {\n width: auto;\n /* Allow the table to adjust based on content */\n border-spacing: 15px;\n /* Add space between columns */\n font-size: 20px;\n /* Set the base font size for the table */\n text-align: left;\n /* Align text to the left for better readability */\n}\n\n#operation-selection td {\n padding: 10px;\n /* Add padding to table cells for spacing */\n vertical-align: middle;\n /* Align items in the middle vertically */\n}\n\ninput[type=\"number\"] {\n width: 60px;\n /* Set a fixed width for the input */\n font-size: 16px;\n /* Adjust font size for better visibility */\n}","index.html":"\n\n\n\n \n \n Master Math Facts\n \n \n\n\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n Addition\n \n	\n Max Factor:\n \n	\n \n Subtraction\n \n	\n Max Factor:\n \n
\n \n Multiplication\n \n	\n Max Factor:\n \n	\n \n Division\n \n	\n Max Factor:\n \n

\n\n \n\n\n"},"chat_history":[],"assets":[{"project_id":5816,"creator":null,"cloudinary_id":"ew23lrfa8afdgyqt3v8i","deleted":false,"id":59562,"created_at":"2025-02-14T19:09:27.717702Z","name":"screenshot","resource_type":"image","tags":null}],"messages_sent":0,"comments":[],"steps":[]}