Integer Addition and Subtraction

Prompt

Code in html, css, and javascript an interactive math simulation that is self-contained, complete, and embeddable. This simulation is for late elementary and early middle school and junior high school students who are learning to add and subtract integers. Add Addition and Subtraction tabs at the top of the area so students can select which operation they are working on. Create an input area where the player can input the numerical expression to be solved. For example, -3 + 4. Create a well of circular counters with red representing positives and yellow representing negatives. Make the well have an unlimited supply of both colors. Player will drag the number of circles to the work area to represent the digits in the expression. In the example problem -3 would be 3 yellow counter circles and 4 would be 4 red counters. Add a Cross Out Zero Pairs button by which the red circles would be canceled by an equal number of yellows. Make the layout look similar to the attached image. Add another input area for the player to key in their proposed answer. Provide a happy tone if correct and a sad sound if incorrect. Clear the area for another equation. For the Subtraction tab, add another input area for the player to rewrite the subtraction problem as an addition problem while changing the sign of the second digit. Thus, 4 -(-5) would become 4 + 5. Maintain the well for counters. Player drags the corresponding counters to the work area. Cross out Zero Pairs. Player inputs proposed answer. Use the same sounds for correct and incorrect. Use a navy blue, white, black, and gray theme for a professional look. 

Iteration 

Fix the alignment so that when player drops the yellow counters, they align with the reds.

Iteration 2

Make the fonts for each area fit. For example, the word opposite is too large for the input area in the subtraction.

Iteration 3

When dragging counters into the work area, ensure that the first number is on top and the second number is below.

Iteration 4

When adding counters, always put the second number on the bottom row. Change the code to match that request.

Iteration 5

Create two regions in the drag and drop area with the first number area on top and the second area drop zone on the bottom.

Iteration 6

Revise the code to be html, css, and javascript to be self-contained, complete, and embeddable.