-
How do you capture user input related to mathematical fractions. Assuming I would like to present a simple square and ask the user to select 3/4ths of a square. What kind of UI control should we use to first all represent a square (with 4 equal blocks inside) and to have a mechanism to capture user input.
-
Assuming you would like to draw a scale which is 1 meter long and and you have markings for every 10 cm (e.g. 10, 20, 30 …90, 100). We would like the user to plot 40 cm on the scale. What kind of UI controls are available which will help us in drawing such inputs and capturing student response.
Are there any tools or libraries which we can use to build such solutions? Our environment is based on (java, richfaces, jquery …)
While it is possible to hack together HTML or jQuery controls to draw and detect clicks on rectangles, if you are going to draw your own graphics with fonts, symbols, scale and rotation, you are eventually going to have to move to a graphics API. I suggest using the HTML5 Canvas element.
Canvas is the W3C-approved method for adding interactive graphics to web pages and is supported by all modern browsers, including IE with a plug-in.
A free chapter from Dive into HTML5 shows how to create a playable HTML5 game using only JavaScript in a Canvas element.