Как представлять математические символы и захватывать пользовательский ввод для одного и того же

Question

1. Как вы фиксируете пользовательский ввод, связанный с математическими дробями. Предполагая, что я хотел бы представить простой квадрат и попросить пользователя выбрать 3/4 части квадрата. Какой вид управления пользовательским интерфейсом мы должны использовать, чтобы сначала представить квадрат (с 4 равными блоками внутри) и иметь механизм для захвата ввода пользователя.

2. Предполагается, что вы хотите нарисовать шкалу длиной 1 метр, и у вас есть отметки на каждые 10 см (например, 10, 20, 30 ... 90, 100). Мы бы хотели, чтобы пользователь нанес 40 см на шкале. Какие виды элементов управления пользовательского интерфейса доступны, которые помогут нам в получении таких входных данных и захвата ответов учащихся.

Существуют ли какие-либо инструменты или библиотеки, которые мы можем использовать для создания таких решений? Наша среда основана на (java, richfaces, jquery ...)

Answer 1

о вопросе № 2

используйте плагин jquery range, например:

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

Answer 2

В вопросе 1 вы можете изучить взаимодействия jQuery UI для идей, в частности, Изменяемый размер , Выбираемый и Сортируемый .

Это действительно зависит от того, как вы хотите задать вопрос.Например, вы можете создать элемент управления Resizable для квадрата и пропорционально изменить размеры ширины и высоты.Или вы можете разделить квадрат на несколько Seletable областей (например, меньшие квадраты).

Answer 3

1. Используйте форматирование латекса, чтобы написать это.
2. Тогда просто переведите латекс в MathML .
3. Просмотр источника . Визуализировать ваш данные.

Ваша альтернатива - использовать громоздкий интерфейс с предопределенным списком кнопок и полей ввода для нажатия. Это лучше для аудитории, не привыкшей к академической работе более высокого уровня.

Для вопроса о слайдере я бы использовал: Google Maps или Rapheal JS

Answer 4

Хотя существует возможность взломать элементы управления HTML или jQuery для рисования и обнаружения щелчков на прямоугольниках, если вы собираетесь рисовать собственную графику со шрифтами, символами, масштабом и поворотом, в конечном итоге вам придется перейти графический API. Я предлагаю использовать элемент HTML5 Canvas .

Canvas - это одобренный W3C метод добавления интерактивной графики на веб-страницы, который поддерживается всеми современными браузерами, включая IE с плагином.

В бесплатной главе Погружение в HTML5 показано, как создать играбельную HTML5-игру, используя только JavaScript в элементе Canvas.

Answer 5

Для второго вопроса я бы сделал то же самое и использовал бы бегунок диапазона jQuery, как предложил Хаим.

По первому вопросу, который я предполагаю, вы захотите расширить его до форм, отличных от квадрата. Вы можете захотеть, чтобы пользователь выбрал 7/8 от пиццы или аналогичной. jQuery selectables и resizables могут работать для квадратной задачи, но будет очень трудно реализовать (и использовать) для пиццы (или аналогичной). Я бы использовал тег html <map> ( см. Здесь, в W3schools ) и связывал команду javacsript с каждым щелчком мыши по каждой области на карте.

Например, если вы создали карту в интерактивном режиме с помощью http://www.carlosag.net/Tools/XMap/ (или аналогичной), затем свяжите каждую область с чем-то вроде:

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

, где

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

при отправке формы вы просто отправите pizza.sum()! Конечно, это можно записать более элегантно в функцию, которая будет включать выделение выделенных областей, но: -)