Math Visualizer

{"name":"Math Essentials - Problem Set 4","description":"F - First\nO - Outer\nI - Inner\nL - Last","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/euof2018kubipiff835n","view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-06-12T15:36:43.144850Z","updated_at":"2025-06-12T15:36:43.144853Z","user_id":414,"status":"DELETED","parent_id":8167,"id":8209,"user":{"photo":null,"email":"behrhorst.tutoring@gmail.com","recess_id":null,"created_at":"2025-03-11T19:37:03.391989Z","reset_token":null,"stripe_customer_id":"cus_S6wSh6SNX3iMQT","seats":0,"username":"sbehrho","id":414,"password_hash":"$2b$12$uMvSliTo7BxGfk2ZGQDyuO38ruZVaRf/3H3v1tqEWDHuG92Q94VtK","updated_at":"2025-03-11T19:37:03.391995Z","reset_token_expiry":null,"subscription_status":"active"},"code":{"script.js":"// script.js\n// Consider local storage for remembering which problem user was on\n// Try latex for problems using radical and radicands\nlet problems = [\n { problem: \"(x+1)(x+2) =\", answer: \"x^2 + 3x + 2\" }, // Store as string for evaluation\n { problem: \"(x+2)(x+3) =\", answer: \"x^2 + 5x + 6\" },\n { problem: \"(x+1)(x-2) =\", answer: \"x^2 - x - 2\" },\n { problem: \"(x-2)(x-3) =\", answer: \"x^2 - 5x + 6\" },\n { problem: \"(2x+1)(x+2) =\", answer: \"2x^2 +5x + 2\" },\n { problem: \"(2x-2)(x-2) =\", answer: \"2x^2 - 6x + 4\" },\n { problem: \"(2x+3)(x-2) =\", answer: \"2x^2 - x - 6\" },\n { problem: \"(2x+1)(2x-1) =\", answer: \"4x^2 - 1\" },\n //{ problem: \"(a+b)(a+b) =\", answer: \"a^2 + 2ab + b^2\" },\n //{ problem: \"(a+b)(a-b) =\", answer: \"a^2 - b^2\" },\n { problem: \"(x^2+1)(x^2+1) =\", answer: \"x^4 + 2x^2 + 1\" },\n { problem: \"(x^2+1)(x^2-1) =\", answer: \"x^4 - 1\" },\n { problem: \"5(x+2) =\", answer: \"5x + 10\" },\n { problem: \"4x(x+1) =\", answer: \"4x^2 + 4x\" },\n { problem: \"7(x-3) =\", answer: \"7x - 21\" },\n { problem: \"-5(x-3) =\", answer: \"-5x + 15\" },\n { problem: \"-2x(x + 1) =\", answer: \"-2x^2 - 2x\" },\n { problem: \"10(3x+2) =\", answer: \"30x + 20\" },\n { problem: \"6(2x-1) =\", answer: \"12x - 6\" },\n { problem: \"-8(2x-1) =\", answer: \"-16x + 8\" }\n];\n\nlet currentProblemIndex = 0;\nlet correctAnswers = []; // Array to store correct answers\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n noLoop(); // No need to continuously draw\n displayProblem();\n}\n\nfunction displayProblem() {\n let problemElement = document.getElementById(\"problem-display\");\n let problemText = problems[currentProblemIndex].problem;\n problemElement.innerHTML = superscriptFormat(problemText); // Display current problem\n document.getElementById(\"result-display\").innerHTML = \"\"; // Clear previous results\n document.getElementById(\"answer-input\").value = \"\"; // Clear input box\n}\n\nfunction superscriptFormat(problem) {\n return problem.replace(/\\^(\\-?\\d+)/g, \"^$1\");\n}\n\n// Function to evaluate expressions with variables\nfunction evaluateExpression(expression, variableValue) {\n let evaluatedExpression = expression.replace(/x/g, variableValue);\n return eval(evaluatedExpression); // Use eval to calculate the answer\n}\n\n// Listen for the Enter key to process the answer\ndocument.getElementById(\"answer-input\").addEventListener(\"keypress\", function (event) {\n if (event.key === \"Enter\") {\n let userInput = document.getElementById(\"answer-input\").value; // Get input as string\n let correctAnswer = problems[currentProblemIndex].answer;\n\n // Assume x = 1 for evaluation\n let variableValue = 1;\n\n if (evaluateExpression(userInput, variableValue) === evaluateExpression(correctAnswer, variableValue)) {\n addCorrectAnswer(problems[currentProblemIndex]); // Pass the entire problem object\n displayResult(); // Display the complete problem and answer without alert\n } else {\n document.getElementById(\"result-display\").innerHTML = \"Try again!\";\n }\n }\n});\n\n// Function to add a correct answer to the left panel\nfunction addCorrectAnswer(problem) {\n correctAnswers.push(problem); // Add the problem object to the array\n updateAnswerList(); // Update the displayed list\n}\n\n// Function to update the left panel with correct answers in superscript format\nfunction updateAnswerList() {\n let answerList = document.getElementById(\"answer-list\");\n answerList.innerHTML = correctAnswers.map(item => {\n return `

${superscriptFormat(item.problem)} ${superscriptFormat(item.answer)}

`;\n }).join(''); // Create list items\n}\n\n// Function to display the complete problem and answer\nfunction displayResult() {\n let resultDisplay = document.getElementById(\"result-display\");\n resultDisplay.innerHTML = ''; // Clear previous results first\n\n // Display the \"Great Job!\" message\n resultDisplay.innerHTML += 'Great Job!
';\n\n // Display the complete problem and answer\n resultDisplay.innerHTML += superscriptFormat(problems[currentProblemIndex].problem + \" \" + problems[currentProblemIndex].answer);\n \n // Check if all problems have been completed\n if (correctAnswers.length === problems.length) {\n resultDisplay.innerHTML += '
Congratulations on completing the problem set!';\n } else {\n // Add spacebar message\n resultDisplay.innerHTML += '
Press spacebar to get the next problem';\n }\n}\n\n// Listen for spacebar to load the next problem\ndocument.addEventListener(\"keydown\", function (event) {\n if (event.code === \"Space\") {\n currentProblemIndex = (currentProblemIndex + 1) % problems.length; // Loop back to first problem\n displayProblem(); // Display the next problem\n }\n});","style.css":"body {\r\n margin: 0;\r\n}\r\n\r\n.container {\r\n display: flex; /* Use Flexbox to organize sections */\r\n justify-content: space-between; /* Space between sections */\r\n height: 100vh; /* Full height of the viewport */\r\n}\r\n\r\n.left-section, .center-section, .right-section {\r\n flex: 1; /* Each section takes equal space */\r\n padding: 20px; /* Add padding for spacing */\r\n}\r\n\r\n.left-section {\r\n background-color: #f0f0f0; /* Light background for left section */\r\n}\r\n\r\n.center-section {\r\n background-color: #ffffff; /* White background for center section */\r\n display: flex;\r\n flex-direction: column; /* Stack children vertically */\r\n}\r\n\r\n.upper-central {\r\n flex: 1; /* Take up one third of the center section */\r\n display: flex;\r\n align-items: center; /* Center content vertically */\r\n justify-content: center; /* Center content horizontally */\r\n background-color: #f0f0f0; /* Set background color to match left and right panels */\r\n}\r\n\r\n.lower-central {\r\n flex: 2; /* Take up two thirds of the center section */\r\n display: flex;\r\n flex-direction: column; /* Stack children vertically */\r\n align-items: center; /* Center content horizontally */\r\n}\r\n\r\n.right-section {\r\n background-color: #f0f0f0; /* Light background for right section */\r\n}\r\n\r\n#problem-display {\r\n font-size: 32px; /* Increased font size for the problem */\r\n margin: 20px 0; /* Adjust vertical space as needed */\r\n}\r\n\r\ninput {\r\n font-size: 20px;\r\n margin: 10px 0;\r\n}\r\n\r\n#result-display {\r\n font-size: 24px; /* Increased font size for the result and spacebar message */\r\n margin-top: 20px;\r\n text-align: center; /* Center the text horizontally */\r\n}\r\n\r\n/* Styles for the answer list */\r\n#answer-list {\r\n list-style-type: none; /* Remove bullet points */\r\n padding: 0; /* Remove default padding */\r\n font-size: 24px; /* Increased font size for correct answers */\r\n}\r\n\r\n#answer-list li {\r\n margin-bottom: 10px; /* Add vertical space between answers */\r\n}\r\n\r\n.right-section img {\r\n max-width: 100%; /* Ensure the image does not exceed the width of the container */\r\n max-height: 100%; /* Ensure the image does not exceed the height of the container */\r\n object-fit: contain; /* Maintain aspect ratio while fitting the image */\r\n}","index.html":"\n\n\n\n \n \n Math Visualizer\n \n \n \n\n\n\n

Correct Answer List

\n $\"Math$ \n

\n \n

\n $\"Binomials\"$ \n

\n\n \n\n\n"},"chat_history":[{"message":"","project_id":8209,"created_at":"2025-06-10T19:34:12.506829Z","output_tokens":null,"sender":"client_script","code_id":250516,"deleted":0,"input_tokens":null,"id":147924},{"message":"

Add your new assets to the code

\n\n```javascript\nfunction preload() {\n\n\tMath_E_4_Header = loadImage(\"@asset('Math_E_4_Header')\");\n}\n```","project_id":8209,"created_at":"2025-06-10T20:01:19.824682Z","output_tokens":null,"sender":"server_script","code_id":250622,"deleted":0,"input_tokens":null,"id":147957},{"message":"

Add your new assets to the code

\n\n```javascript\nfunction preload() {\n\n\tMath_Essentials_4 = loadImage(\"@asset('Math_Essentials_4')\");\n}\n```","project_id":8209,"created_at":"2025-06-10T20:02:00.539840Z","output_tokens":null,"sender":"server_script","code_id":250622,"deleted":0,"input_tokens":null,"id":147958},{"message":"

Add your new assets to the code

\n\n```javascript\nfunction preload() {\n\n\tBinomials_temp = loadImage(\"@asset('Binomials_temp')\");\n}\n```","project_id":8209,"created_at":"2025-06-10T20:05:59.062365Z","output_tokens":null,"sender":"server_script","code_id":250644,"deleted":0,"input_tokens":null,"id":147961}],"assets":[{"project_id":8209,"creator":null,"cloudinary_id":"iorsubkxcshtjuti7ccy","deleted":false,"id":75598,"created_at":"2025-06-10T20:05:58.549243Z","name":"Binomials_temp","resource_type":"image","tags":null},{"project_id":8209,"creator":null,"cloudinary_id":"euof2018kubipiff835n","deleted":false,"id":75597,"created_at":"2025-06-10T20:01:59.953248Z","name":"Math_Essentials_4","resource_type":"image","tags":null},{"project_id":8209,"creator":null,"cloudinary_id":"feqxv8bwkwyd2m1oolzx","deleted":false,"id":75596,"created_at":"2025-06-10T20:01:18.474035Z","name":"Math_E_4_Header","resource_type":"image","tags":null},{"project_id":8209,"creator":null,"cloudinary_id":"zml0lspqsg2uwdc1lxuc","deleted":false,"id":75595,"created_at":"2025-06-10T19:06:33.111667Z","name":"Math_Essentials_1","resource_type":"image","tags":null},{"project_id":8209,"creator":null,"cloudinary_id":"wxmf66u4asbhrptqdfkm","deleted":false,"id":75594,"created_at":"2025-06-10T19:06:33.110511Z","name":"Exponent_Rules","resource_type":"image","tags":null},{"project_id":8209,"creator":null,"cloudinary_id":"h3x6mttgj1eamageckru","deleted":false,"id":75593,"created_at":"2025-06-10T19:06:33.109473Z","name":"Math_1_Header","resource_type":"image","tags":null},{"project_id":8209,"creator":null,"cloudinary_id":"ttgdpzfvpxyg3jycsosf","deleted":false,"id":75592,"created_at":"2025-06-10T19:06:33.108360Z","name":"Math_Essentials_1_N","resource_type":"image","tags":null}],"messages_sent":0,"comments":[],"steps":[]}