Question

如何捕获与数学分数相关的用户输入。假设我想呈现一个简单的方块并要求用户选择一个正方形的3/4。我们应该使用什么样的UI控件来首先表示一个正方形（内部有4个相等的块）并且有一个捕获用户输入的机制。
假设您想绘制一个1米长的刻度，并且每隔10厘米就有一个标记（例如10,20,30 ... 90,100）。我们希望用户在刻度上绘制40厘米。有哪些UI控件可用于帮助我们绘制此类输入并捕获学生的响应。

我们可以使用任何工具或库来构建此类解决方案吗？我们的环境基于（java，richfaces，jquery ......）

Answer 1

关于问题2

使用jquery range滑块插件，如：

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

Answer 2

对于问题1，您可以探索jQuery UI与想法的交互，特别是Resizable，Selectable和Sortable。

这真的取决于你想要提出的问题。例如，您可以对正方形进行Resizable控制，并使宽度和高度按比例调整大小。或者你可以将一个正方形划分为几个Seletable区域（例如较小的正方形）。

Answer 3

虽然可以将HTML或jQuery控件组合在一起来绘制和检测矩形上的点击，但如果要用字体，符号，缩放和旋转绘制自己的图形，最终将不得不转移到图形API。我建议使用HTML5 Canvas元素。

Canvas是W3C批准的用于向网页添加交互式图形的方法，并且得到所有现代浏览器的支持，包括带插件的IE。

Dive into HTML5的免费章节展示了如何在Canvas元素中仅使用JavaScript创建可玩的HTML5游戏。

Answer 4

使用乳胶成型来书写。
然后simply translate the latex to mathml。
View source。渲染你的数据。

您可以选择使用带有预定义按钮和输入框列表的繁琐界面来点击。对于不习惯高级学术工作的观众来说，这是更好的。

对于滑块问题，我会使用： google charts 或rapheal JS

Answer 5

对于第二个问题，我会做同样的事情并使用jim范围滑块，就像Haim建议的那样。

对于第一个问题，我假设您希望将其扩展到除正方形之外的形状。您可能希望用户选择比萨饼或类似食物的7/8。 jQuery selectables和resizables可能适用于方形问题，但是很难实现（和使用）披萨（或类似）。我会使用html <map>标记（see here at 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()！当然，这可以更优雅地写入一个功能，其中包括突出显示所选区域，但是： - ）

如何表示数学符号并捕获相同的用户输入

5 个答案: