How to represent mathematical symbols and capture user input for the same

Question

1. 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.

2. 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 ...)

Answer 1

about question number 2

use jquery range slider plugin like :

http://jqueryui.com/demos/slider/#rangemax

Answer 2

For question 1, you can explore the Interactions of jQuery UI for ideas, specifically, the Resizable, Selectable, and Sortable.

It really depends how you want to present the question. For example, you could make a Resizable control for a square, and make the width and height resizable proportionally. Or you could divide a square into several Seletable regions (e.g. smaller squares).