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

Answer 3

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.

Answer 4

1. Use latex formating to write it.
2. Then simply translate the latex to mathml.
3. View source. Render your data.

Your alternative is to use a cumbersome interface with a pre-defined list of buttons and input boxes to click on. This is better for an audience that isn't used to higher-level academic work.

For the slider question, I would use: google charts or rapheal JS

Answer 5

For the second question I'd do the same and use the jQuery range slider as Haim suggested.

For the first question I assume you would want to extend this to shapes other than just a square. You might want the user to pick 7/8ths of a pizza or similar. jQuery selectables and resizables might work for a square problem, but would be very difficult to implement (and use) for a pizza (or similar). I would use the html <map> tag (see here at W3schools) and bind a javacsript command to when each area within the map is clicked.

For example if you created a map interactively with http://www.carlosag.net/Tools/XMap/ (or similar) then bind each area to something like:

<area ... onclick="javascript:if (typeof(pizza[0])=='undefined'){pizza[0] = 1/8;}else{pizza[0] = 0;}">
<area ... onclick="javascript:if (typeof(pizza[1])=='undefined'){pizza[1] = 1/8;}else{pizza[1] = 0;}">
<area ... onclick="javascript:if (typeof(pizza[2])=='undefined'){pizza[2] = 1/8;}else{pizza[2] = 0;}">

where

<script>
var pizza = new Array();

Array.prototype.sum = function() {
  return (! this.length) ? 0 : this.slice(1).sum() +
      ((typeof this[0] == 'number') ? this[0] : 0);
}; // borrowed from http://www.gscottolson.com/weblog/2007/12/09/sum-array-prototype-for-javascript/

</script>

when the form is submitted you would just send pizza.sum()! Granted this can be written a bit more elegantly into a function which would include highlighting the selected areas, but :-)