|
界面实现
无论是WEX还是BEX,开发各种客观题模块都是最常见的。但是,最近在利用业余时间想开发一个学生使用的小型客观题系统时遇到了麻烦。首先,在论坛上搜索到了大量相似问题。问题或者过于简单,或者过于特殊。且看一下本人提供的客观题界面,我相信这种设计思路还是与大多数应用需求相一致的。
这是单选题界面,再看多选题界面,如下:
注意:我每一个小题旁边放置的按钮是便于学生自我测试时看参考答案时使用的。这个小功能设计比较简单(我使用的是PopOver组件,其内的span对应的bind-text令其等于 $model.singleData.val("fAnswer")类似的内容即可实现即时地查看对应小题的答案)。
问题
在开发类似于上面的系统时注意到不少像我这样的初学者存在与我十分类似的困惑。
(补注:这样人可能以前有JAVA,C#,VB等UI开发经验,但遗憾的是,这些软件开发思路与X5中的H5开发思想发生了重大变化--不知大伙与我意见一致否?)
归纳起来,问题有:
1,list组件的onClick 事件中 如何得到 list某一行的id? 地址:http://doc.wex5.com/comps-list/。
2,如何在list组件中放置radio组件或者radioGroup组件实现类似于我实现的上述选择题界面?
3,在上面界面前提下,在用户做过好几个小题后,如果对比答案(比较库中正确与错误的答案,检查其做题效果如何)?
补充
由于我上述小系统比较简单,所以暂时只考虑使用本地json方式存储试题内容,单选,多选,判断等都各自对应一个JSON文件。例如,单选题文件singleData.json类似于如下结构:
[
{"fCode":"0401",
"fTrunk":"在数据库表格中唯一标识一条记录的是( )。",
"fChoiceA":"A.主键",
"fChoiceB":"B.候选键",
"fChoiceC":"C.索引",
"fChoiceD":"D.关键字",
"fAnswer":"A"
},
{"fCode":"0402",
"fTrunk":"下列哪一种不属于ACCESS 2010的数据类型( )。",
"fChoiceA":"A.数字",
"fChoiceB":"B.文本",
"fChoiceC":"C.附件",
"fChoiceD":"D.插件",
"fAnswer":"D"
},
{"fCode":"0403",
"fTrunk":"下列哪一种不属于ACCESS 2010的关系表达式中的逻辑运算符( )。",
"fChoiceA":"A.And",
"fChoiceB":"B.Not",
"fChoiceC":"C.Or",
"fChoiceD":"D.Else",
"fAnswer":"D"
},
{"fCode":"0404",
"fTrunk":"ACCESS 2010六大对象不可以( )。",
"fChoiceA":"A.删除",
"fChoiceB":"B.隐藏",
"fChoiceC":"C.创建",
"fChoiceD":"D.创建快捷方式",
"fAnswer":"D"
},
............
]
多选题文件结构类似于:
[
{"fCode":"0401",
"fTrunk":"数据库管理系统主要包含以下功能( )。",
"fChoiceA":"A.数据定义",
"fChoiceB":"B.数据操纵",
"fChoiceC":"C.数据库运行管理",
"fChoiceD":"D.数据库建立和维护",
"fChoiceE":"E.数据通信功能",
"fAnswer":"ABCDE"
},
{"fCode":"0402",
"fTrunk":"数据库管理系统的简称是( )。",
"fChoiceA":"A.DB",
"fChoiceB":"B.DBMS",
"fChoiceC":"C.ORDBS",
"fChoiceD":"D.RDBS",
"fChoiceE":"E.DDL",
"fAnswer":"B"
},
{"fCode":"0403",
"fTrunk":"关系是具有如下特征的二维表( )。",
"fChoiceA":"A.行存储实体数据",
"fChoiceB":"B.列存储实体属性",
"fChoiceC":"C.每列具有唯一名称且数据类型一致",
"fChoiceD":"D.列的顺序任意,行的顺序也任意",
"fChoiceE":"E.任意两行内容不能完全重复",
"fAnswer":"ABCDE"
},
{"fCode":"0404",
"fTrunk":"ACCESS 2010六大对象包括( )。",
"fChoiceA":"A.表",
"fChoiceB":"B.查询",
"fChoiceC":"C.窗体",
"fChoiceD":"D.宏",
"fChoiceE":"E.模块",
"fAnswer":"ABCDE"
},
{"fCode":"0405",
"fTrunk":"ACCESS 2010中查询分为两大类型,它们是( )。",
"fChoiceA":"A.选择查询",
"fChoiceB":"B.删除查询",
"fChoiceC":"C.操作查询",
"fChoiceD":"D.生成表查询",
"fChoiceE":"E.SQL查询",
"fAnswer":"AC"
}
]
加载上述试题内容的方式官方DEMO中大量提供类似代码,直接使用即可(下面是我加载单选内容的代码):
Model.prototype.singleDataCustomRefresh = function(event){
var singleData = event.source;
$.ajax({
type: "GET",
url: require.toUrl('./json/singleData.json'),
dataType: 'json',
async: false,
cache: false,
success: function(data){
singleData.loadData(data);//将返回的数据加载到data组件
},
error: function(){
throw justep.Error.create("加载数据失败");
}
});
};
至于设置单选题对应数据组件singleData的limit等属性小问题及radio和radioGroup组件的常见属性设置在此小不赘述了(我使用的是radioGroup组件设计单选题界面)。
|
|