jQuery实现的测试答题功能

2015年03月29日 12:18helloweba.com 作者:月光光 标签:jQuery 

有时在网页中要加入一个在线测试功能,例如在线调查,在线测试各类知识等应用,这类应用需要用到很多前后端技能。今天我给大家分享一个基于jQuery的前端应用——测试答题功能。

jQuery实现的测试答题功能

HTML

首先载入jquery库文件和quiz.js以及所需的CSS样式文件styles.css。

<script src="jquery.js"></script>
<script src="quiz.js"></script>
<link rel="stylesheet" href="styles.css" />

然后在需要放置测试题的位置加入div#quiz-container。

<div id="quiz-container"></div>

jQuery

首先,我们定义题目和答案选项,question是题目,answers是答案选项,correctAnswer是正确答案。可以看出定义的init是一个json数据格式。

var init={'questions':[{'question':'jQuery是什么?','answers':['JavaScript库','CSS库','PHP框架','以上都不是'],'correctAnswer':1},{'question':'找出不同类的一项?','answers':['写字台','沙发','电视','桌布'],'correctAnswer':3},{'question':'国土面积最大的国家是:','answers':['美国','中国','俄罗斯','加拿大'],'correctAnswer':3},{'question':'月亮距离地球多远?','answers':['18万公里','38万公里','100万公里','180万公里'],'correctAnswer':2}]};

接下来,我们直接调用quiz.js提供的插件方法,然后打开页面是不是可以看到已经在页面上生成了一个在线测试项目。

$(function(){
	$('#quiz-container').jquizzy({
        questions: init.questions
    });
});

那么,要修改定制测试题样式布局,可以到quiz.js和styles.css两文件中做适当修改。

疑问

到这里,细心的朋友就会发现,问题来了:

1、直接将题目的正确答案标记在js代码中,是不是不安全?正规的测试项目答案是不是应该在后台判断,以免有人查看源代码直接获取正确答案。

2、如何与后台交互?比如测试答题前先验证身份,答题完后将结果发送给后台。

我想说的是,这是一个前端代码演示项目,真正的应用答案是不会出现在前端代码中的;quiz.js其实已经有与后台ajax交互的接口,我们会在后面的文章中做详细介绍,文章标题我已经想好了:如何使用jQuery+PHP+MySQL来实现一个在线测试项目,敬请关注。

声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/296.html

11条评论

  • 大饼冰兵

    没有用,一片空白

  • Sinosoft

    求分享一下,多选该怎么改一下

  • 同求,可以共享一下解决方案吗

  • 万 部 A 片高清 国产日韩 hTTp://T.CN/Rt8jUdO

    [给力]

  • 请问如何改,实现点击一个题目出现一次弹窗结果

  • 可以答对一题在正确答案出现对号,答错出现×,并给出正确答案,用户点击进入下一题,这样怎么改呢

  • 多项选择该怎么该代码呢?

  • 谢谢提醒,已更新。

  • 範例 index.html 內調用js名稱有誤
    src="quiz.js" -> src="jquiz.js"
    更完後世界都美好了起來 神插件

  • 可以换个浏览器试下

  • 为什么下载的是一个超链接?不是源码呢