Problem I. 405. (May 2016)
I. 405. The drag-and-drop feature proves to be useful in many situations. It is included in HTML 5 and in the newest browsers as well. Create a webpage draganddrop.html to teach elementary arithmetic by using the drag-and-drop operation; you should handle the addition and subtraction of integers having at most two digits.
Upon loading the page, or after submitting a correct solution, some random positive or negative integers with at most two digits should appear together with the plus, minus and equality signs. The user first needs to create an exercise by dragging appropriate elements into the five dashed boxes in the middle of the screen. The user should be able to place a number (out of the 8 random numbers) into the \(\displaystyle 1^\mathrm{st}\), \(\displaystyle 3^\mathrm{rd}\) and \(\displaystyle 5^\mathrm{th}\) boxes; and an arithmetic operation or the equality sign into the \(\displaystyle 2^\mathrm{nd}\) and \(\displaystyle 4^\mathrm{th}\) boxes. The boxes for/containing the arithmetic operations and the equality sign should be highlighted by using the same color. Your page should check the syntax of the exercise, and only the appropriate elements should be allowed to be dropped; for example, it should not happen that there are 0 or 2 equality signs.
Your page should notify the user when a proper exercise has been created. After a few seconds the unused elements should disappear, and 8 numbers should appear instead; one of them should be the solution of the equation.
The user should drag the appropriate number into the empty box. A wrong solution should be rejected. The page should acknowledge when the correct solution has been submitted, then create the next task.
You should only use HTML5, CSS or JavaScript elements. Your page should not contain (links to) existing JavaScript or other extensions.
The full source of the webpage (together with a list of the name and version number of the supported browsers) should be submitted in a compressed file i405.zip.
(10 pont)
Deadline expired on June 10, 2016.
Statistics:
0 student sent a solution.
Problems in Information Technology of KöMaL, May 2016