jQuery实现的在线答题功能


Posted in Javascript onApril 12, 2015

有时在网页中要加入一个在线测试功能,例如在线调查,在线测试各类知识等应用,这类应用需要用到很多前后端技能。今天我给大家分享一个基于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来实现一个在线测试项目,敬请关注。

查看演示 下载源码

以上所述就是本文的全部内容了,希望大家能喜欢。

Javascript 相关文章推荐
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
微信小程序自定义组件
Aug 16 Javascript
js中如何完美的解析数据
Mar 18 Javascript
Vue动态获取width的方法
Aug 22 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
TypeScript中的方法重载详解
Apr 12 Javascript
关于layui flow loading占位图的实现方法
Sep 21 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 #Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 #Javascript
jQuery插件pagination实现分页特效
Apr 12 #Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 #Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 #Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 #Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 #Javascript
You might like
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
php生成zip文件类实例
2015/04/07 PHP
php图片上传类 附调用方法
2016/05/15 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
js过滤数组重复元素的方法
2010/09/05 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
Python sys.path详细介绍
2013/10/17 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
环境科学专业个人求职信
2013/09/26 职场文书
一名女生的自荐信
2013/12/08 职场文书
公司董事长职责
2013/12/12 职场文书
心得体会范文
2014/01/04 职场文书
运动会口号大全
2014/06/07 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
音乐之声观后感
2015/06/04 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
68句权威创业名言
2019/08/26 职场文书
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android