css实现的在线答疑功能
有时会在网页上添加在线测试功能,如在线调查、在线测试和其他知识应用。这样的应用需要大量的前端技巧。今天我要分享一个jQuery的前端应用mdash;mdash;考试答案的功能。
源下载:单击此下载
HTML
首先,加载了jQuery库文件和quiz.js和所需的CSS样式文件styles.css。
复制代码代码如下所示:
然后添加div容器#测验的位置,你需要将测试问题。
复制代码代码如下所示:
jQuery
首先,我们定义题目和答案选项,问题是标题,答案是答案选项和答案是正确的答案。可以看出,定义init是一个JSON数据格式。
复制代码代码如下所示:
VaR init = { { { 'question 'questions ':':什么is'jquery答案:{ 'javascript图书馆,'css图书馆''php框架,以上都不是},{ 1 },'correctanswer:'question ':'一',找出不同类型of'answers:{书桌、沙发、电视、桌布}:3 },{ 'question ','correctanswer ':'土地面积最大的国家:'answers ':'中国' {美国、俄罗斯,' ',' }加拿大,'correctanswer:3 },{ 'question:从地球到月球吗回答{'18号:万公里,000公里的100万公里,'180'} } } } 2 'correctanswer:万公里;
下一步,我们称之为直接提供quiz.js插件的方法,然后打开页面,我们可以看到,一个在线测试项目已在页面生成。
复制代码代码如下所示:
$(函数(){())
$(#测试容器)。Jquizzy({
问题:init.questions
});
});
然后,修改自定义试题风格的布局,你可以到quiz.js和styles.css两文件作适当的修改。
怀疑
在这里,细心的朋友会发现问题来了:
1,在代码中直接标记js代码的正确答案是否不安全正式测试项目的答案是它是否应该在后台进行判断,以便直接查看源代码以得到正确的答案。
2。如何与背景互动例如,测试前的标识进行测试,结果在回答完成后发送到后台。
我想说的是,这是一个前端代码示范工程中的应用,答案是真的没有出现在前面的代码;quiz.js实际上与Ajax界面背景,我们将详细介绍在这篇文章后,我想有文章的标题。如:如何使用mysql来实现一个在线考试项目,请大家注意。