Math Visualizer

{"name":"Math Essentials - Problem Set 4 New Revision","description":"F - First\nO - Outer\nI - Inner\nL - Last","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/euof2018kubipiff835n","view_count":2,"fork_count":1,"expires_at":null,"created_at":"2025-06-11T19:53:28.032661Z","updated_at":"2025-06-11T19:53:28.032662Z","user_id":414,"status":"PRIVATE","parent_id":8209,"id":8220,"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\nlet problems = [\n { problem: \"(x+1)(x+2) =\", answer: \"x^2 + 3x + 2\" },\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: \"(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\nfunction evaluateExpression(expression, variableValue) {\n let evaluatedExpression = expression.replace(/x/g, variableValue);\n return eval(evaluatedExpression); // Use eval to calculate the answer\n}\n\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 let variableValue = 1; // Assume x = 1 for evaluation\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\nfunction addCorrectAnswer(problem) {\n correctAnswers.push(problem); // Add the problem object to the array\n updateAnswerList(); // Update the displayed list\n}\n\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\nfunction displayResult() {\n let resultDisplay = document.getElementById(\"result-display\");\n resultDisplay.innerHTML = ''; // Clear previous results first\n\n resultDisplay.innerHTML += 'Great Job!
';\n\n resultDisplay.innerHTML += superscriptFormat(problems[currentProblemIndex].problem + \" \" + problems[currentProblemIndex].answer);\n\n if (correctAnswers.length === problems.length) {\n resultDisplay.innerHTML += '
Congratulations on completing the problem set!';\n } else {\n resultDisplay.innerHTML += '
Press \"Next\" to get the next problem';\n }\n}\n\n// Add event listener for the \"Next\" button\ndocument.getElementById(\"next-button\").addEventListener(\"click\", function() {\n currentProblemIndex = (currentProblemIndex + 1) % problems.length; // Loop back to first problem\n displayProblem(); // Display the next problem\n});","style.css":"/* style.css */\r\nbody {\r\n margin: 0;\r\n}\r\n\r\n.container {\r\n display: flex;\r\n justify-content: space-between;\r\n height: 100vh;\r\n}\r\n\r\n.left-section, .center-section, .right-section {\r\n flex: 1;\r\n padding: 20px;\r\n}\r\n\r\n.left-section {\r\n background-color: #f0f0f0;\r\n}\r\n\r\n.center-section {\r\n background-color: #ffffff;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.upper-central {\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: #f0f0f0;\r\n}\r\n\r\n.lower-central {\r\n flex: 2;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center; /* Change this to center to keep it in the middle */\r\n}\r\n\r\n#problem-display {\r\n font-size: 32px;\r\n margin: 20px 0;\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;\r\n margin-top: 20px;\r\n text-align: center;\r\n}\r\n\r\n#answer-list {\r\n list-style-type: none;\r\n padding: 0;\r\n font-size: 24px;\r\n}\r\n\r\n#answer-list li {\r\n margin-bottom: 10px;\r\n}\r\n\r\n.right-section img {\r\n max-width: 100%;\r\n max-height: 100%;\r\n object-fit: contain;\r\n}\r\n\r\n/* Style for the \"Next\" button */\r\n#next-button {\r\n font-size: 24px;\r\n margin-top: 20px;\r\n padding: 10px 20px;\r\n background-color: #007BFF;\r\n color: white;\r\n border: none;\r\n cursor: pointer;\r\n border-radius: 5px;\r\n}\r\n\r\n#next-button:hover {\r\n background-color: #0056b3;\r\n}","index.html":"\n\n\n\n\n \n \n Math Visualizer\n \n \n \n\n\n\n

Correct Answer List

\n $\"Math$ \n

\n \n

\n \n \n

\n $\"Binomials\"$ \n

\n\n \n\n\n"},"chat_history":[{"message":"Let's get started!\n Errors:\n","project_id":8220,"created_at":"2025-06-11T19:53:31.046306Z","output_tokens":null,"sender":"client_script","code_id":251313,"deleted":0,"input_tokens":null,"id":148348},{"message":"Great! Could you tell me more about your project idea? What kind of project are you building, and do you have any specific features in mind that you'd like to add or improve?","project_id":8220,"created_at":"2025-06-11T19:53:31.469904Z","output_tokens":43,"sender":"ai","code_id":251313,"deleted":0,"input_tokens":4888,"id":148349},{"message":"Instead of pressing spacebar to get a new problem, I want to have a \"Next\" button to press with mouse. This should be located near the bottom of the lower center section","project_id":8220,"created_at":"2025-06-11T19:54:58.038599Z","output_tokens":null,"sender":"human","code_id":251313,"deleted":0,"input_tokens":null,"id":148354},{"message":"We can definitely add a \"Next\" button to your project to navigate through the problems. Let's create a button and position it near the bottom of the lower center section. Here's how we can implement this:\n\n1. Add the \"Next\" button to your HTML file.\n2. Update the CSS to style the button.\n3. Modify the JavaScript to handle the button click event.\n\nLet's go through these steps:\n\n```html\n\n\n\n\n\n \n \n Math Visualizer\n \n \n \n\n\n\n

Correct Answer List

\n $\"Math$ \n

\n \n

\n \n \n

\n $\"Binomials\"$ \n

\n\n \n\n\n\n```\n\n```css\n/* style.css */\nbody {\n margin: 0;\n}\n\n.container {\n display: flex;\n justify-content: space-between;\n height: 100vh;\n}\n\n.left-section, .center-section, .right-section {\n flex: 1;\n padding: 20px;\n}\n\n.left-section {\n background-color: #f0f0f0;\n}\n\n.center-section {\n background-color: #ffffff;\n display: flex;\n flex-direction: column;\n}\n\n.upper-central {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #f0f0f0;\n}\n\n.lower-central {\n flex: 2;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n}\n\n#problem-display {\n font-size: 32px;\n margin: 20px 0;\n}\n\ninput {\n font-size: 20px;\n margin: 10px 0;\n}\n\n#result-display {\n font-size: 24px;\n margin-top: 20px;\n text-align: center;\n}\n\n#answer-list {\n list-style-type: none;\n padding: 0;\n font-size: 24px;\n}\n\n#answer-list li {\n margin-bottom: 10px;\n}\n\n.right-section img {\n max-width: 100%;\n max-height: 100%;\n object-fit: contain;\n}\n\n/* Style for the \"Next\" button */\n#next-button {\n font-size: 24px;\n margin-top: 20px;\n padding: 10px 20px;\n background-color: #007BFF;\n color: white;\n border: none;\n cursor: pointer;\n border-radius: 5px;\n}\n\n#next-button:hover {\n background-color: #0056b3;\n}\n```\n\n```javascript\n// script.js\n// Add event listener for the \"Next\" button\ndocument.getElementById(\"next-button\").addEventListener(\"click\", function() {\n currentProblemIndex = (currentProblemIndex + 1) % problems.length;\n displayProblem();\n});\n```\n\n### Explanation:\n- **HTML**: Added a `