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

Question

1. 如何捕获与数学分数相关的用户输入。假设我想展示一个简单的正方形，并要求用户选择正方形的3/4。我们应该使用什么样的UI控件来首先表示一个正方形（其中有四个相等的块）并具有捕获用户输入的机制。

2. 假设您想绘制一个长1米的刻度尺，每10厘米就有一个标记（例如10、20、30...90、100）。我们希望用户在刻度上标出40厘米。有哪些可用的UI控件可以帮助我们绘制这样的输入并捕捉学生的响应。

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

- user339108

Answer 1

关于第二个问题

使用像这样的jquery范围滑块插件：

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

- Haim Evgi

Answer 2

对于问题1，您可以探索jQuery UI的交互以获取想法，具体来说是Resizable、Selectable和Sortable。

这真的取决于您想要如何呈现问题。例如，您可以为正方形制作一个可调整大小的Resizable控件，并使宽度和高度成比例。或者您可以将正方形分成几个Seletable区域（例如较小的正方形）。

- William Niu

---

可调整大小并具有网格捕捉功能的组件将非常适合您的需求。请参考 http://jqueryui.com/demos/resizable/#snap-to-grid。 - Tom

Answer 3

虽然可以通过HTML或jQuery控件来拼凑出绘制和检测矩形点击的功能，但如果您要使用字体、符号、比例和旋转来绘制自己的图形，最终您将不得不转向图形API。我建议使用HTML5 Canvas元素。

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

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

- Dour High Arch

Answer 4

1. 使用Latex格式编写。
2. 然后将Latex翻译成MathML。
3. 查看源代码。呈现您的数据。

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

对于滑块问题，我会使用： 谷歌图表 或 Rapheal JS

- Incognito

Answer 5

对于第二个问题，我会像Haim建议的那样使用jQuery范围滑块。

对于第一个问题，我假设您想要将其扩展到除正方形以外的其他形状。您可能希望用户选择7/8的比萨饼或类似物品。jQuery可选和可调整大小可能适用于正方形问题，但对于比萨饼（或类似物品）来说，实现（和使用）将非常困难。我会使用html <map>标签（请参见W3schools），并绑定一个javascript命令，以便在单击地图中的每个区域时执行该命令。

例如，如果您使用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()！尽管这可以写成一个更加优雅的函数，其中包括突出显示所选区域，但是:-)

- Andy Casey