如何为自定义练习创建自定义Flex组件?

时间:2020-03-06 14:41:04  来源:igfitidea点击:

该组件的目的是在以下示例中测试学生在给定主题上的知识,即地理。给学生一段文本,里面缺少单词。他/她必须填写(在这种情况下键入)遗漏的单词,因此这种测试/练习称为空缺填充。练习中可能有几个句子,多个空缺如下所示:

伦敦是________地区,也是_____________最大的城市地区。伦敦是两千年的重要定居点,其历史可以追溯到___________成立。

该组件必须能够显示文本中带有"浮动"间隙的文本。这些差距将与TextInput控件具有相似的行为。学生提交答案后,组件将返回键入的单词,然后将这些单词与预期答案进行比较。

该组件应该能够显示文本,并且间隙可以动态地从文本中导出所有必需的参数。间隙的位置可以用特殊标记(例如#10)标记,该标记将标记间隙在文本中的位置以及间隙的大小(字符数)。

因此,上面的文本在加载到组件中之前可能看起来像这样:

伦敦是第15大城市中的第10大城市。伦敦是两千年的重要定居点,其历史可以追溯到#8#成立。

解决方案

我想我们可能拥有一个Canvas,并动态添加Labels和TextInputs。这里的问题是知道换行到哪里。我不确定如何从设置的文本轻松计算基于文本的控件的宽度,但是必须可行。

我想知道是否有一个布局控件可以为我们做到这一点,但我只能看到HBox和VBox过于严格。创建或者查找通用的自动包装布局控件将很有用。

我们需要一个支持流布局的容器。它不是标准Flex框架的一部分,但是我们可以在此处(出色的FlexLib的一部分)和此处(独立的实现)中找到一些可行的实现。

FlowBox是必经之路。我们可以使用horizo​​ntalGap来控制文本和输入间距之间的间距。

说到编码方式,我有一个javascript版本,我们可以随意查看。渲染,填空数据的编码。这是通用学习活动生成器的宠物项目的一部分。

从那以后,我开始使用Flex。我已经在Flex中提供了学习活动的样本。我们不会在其中找到空缺,但可以找到足够"接近"的"输入"答案。

全部开源。但是请注意,我在学习Flex的时候写了这篇文章……这是学习各种技术的借口。该代码几乎肯定会得到改进。

如果我们想出一些不错的方法,请考虑参与eduforge上的练习者项目