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 相关文章推荐
通过length属性判断jquery对象是否存在
Oct 18 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 Javascript
jQuery之动画效果大全
Nov 09 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
基于vue手写tree插件的那点事儿
Aug 20 Javascript
JS实现简单打字测试
Jun 24 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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
php截取后台登陆密码的代码
2012/05/05 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
Element Input组件分析小结
2018/10/11 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
微信小程序开发之转发分享功能
2019/10/22 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
基于python指定包的安装路径方法
2018/10/27 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
公务员政审材料
2014/12/23 职场文书
任命通知范文
2015/04/21 职场文书
党员承诺书范文2015
2015/04/27 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
mysql配置SSL证书登录的实现
2021/09/04 MySQL