Cómo representar símbolos matemáticos y capturar la entrada del usuario para el mismo

Question

1. Cómo se captura la entrada del usuario relacionada con las fracciones matemáticas. Asumiendo que me gustaría presentar un cuadrado simple y pedirle al usuario que seleccione 3/4 de un cuadrado. ¿Qué tipo de control de UI deberíamos usar para representar primero un cuadrado (con 4 bloques iguales adentro) y tener un mecanismo para capturar la entrada del usuario?

2. Suponiendo que desea dibujar una escala de 1 metro de largo y tiene marcas por cada 10 cm (por ejemplo, 10, 20, 30 ... 90, 100). Nos gustaría que el usuario trazara 40 cm en la escala. ¿Qué tipo de controles de interfaz de usuario están disponibles que nos ayudarán a dibujar tales entradas y capturar la respuesta de los estudiantes?

¿Existen herramientas o bibliotecas que podamos utilizar para crear tales soluciones? Nuestro medio ambiente se basa en (java, richfaces, jQuery ...)

Answer 1

Si bien es posible hackear juntos controles HTML o jQuery para dibujar y detectar clics en rectángulos, si va a dibujar sus propios gráficos con fuentes, símbolos, escala y rotación, finalmente tendrá que pasar a una API de gráficos Sugiero usar el elemento HTML5 Canvas.

Canvas es el método aprobado por el W3C para agregar gráficos interactivos a las páginas web y es compatible con todos los navegadores modernos, incluido IE con un plug-in.

Un capítulo gratuito de Dive into HTML5 muestra cómo crear un juego HTML5 jugable utilizando solo JavaScript en un elemento Canvas.

Answer 2

sobre la pregunta número 2

uso jQuery deslizador gama plug-in como:

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

Answer 3

Para la pregunta 1, se puede explorar las Interacciones de jQuery UI para ideas, específicamente, Resizable, Selectable y Sortable.

Realmente depende de cómo quiera presentar la pregunta. Por ejemplo, puede hacer un control Resizable para un cuadrado y hacer que el ancho y el alto se puedan redimensionar proporcionalmente. O puede dividir un cuadrado en varias regiones Seletable (por ejemplo, cuadrados más pequeños).

Answer 4

1. Utilice el formateado de látex para escribirlo.
2. Luego simply translate the latex to mathml.
3. View source. Renderice sus datos de .

Su alternativa es utilizar una interfaz engorrosa con una lista predefinida de botones y cuadros de entrada para hacer clic en. Esto es mejor para una audiencia que no está acostumbrada a trabajos académicos de alto nivel.

Para la pregunta deslizante, me gustaría utilizar: google charts o rapheal JS

Answer 5

Para la segunda pregunta que me gustaría hacer lo mismo y utilizar el control deslizante jQuery rango como se sugiere Haim.

Para la primera pregunta, supongo que desea extender esto a formas que no sean solo un cuadrado. Es posible que desee que el usuario elija 7/8ths de una pizza o similar. Los elementos seleccionables y rescatables de jQuery podrían funcionar para un problema cuadrado, pero sería muy difícil de implementar (y usar) para una pizza (o similar). Utilizaría la etiqueta html <map> (see here at W3schools) y vincularía un comando javacsript a cada área del mapa en la que se hace clic.

Por ejemplo, si ha creado un mapa interactivo con http://www.carlosag.net/Tools/XMap/ (o similar) y luego se unen cada área a algo como:

<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;}"> 

donde

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

cuando se envía el formulario que le acaba de enviar pizza.sum()! De acuerdo, esto se puede escribir de una manera un poco más elegante en una función que incluiría resaltar las áreas seleccionadas, pero :-)