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 相关文章推荐
JScript内置对象Array中元素的删除方法
Mar 08 Javascript
return false;和e.preventDefault();的区别
Jul 11 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
node实现定时发送邮件的示例代码
Aug 26 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
php自定义apk安装包实例
2014/10/20 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
以windows service方式运行Python程序的方法
2015/06/03 Python
Python上下文管理器和with块详解
2017/09/09 Python
Python实现PS滤镜功能之波浪特效示例
2018/01/26 Python
Django添加feeds功能的示例
2018/08/07 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
Python中一般处理中文的几种方法
2019/03/06 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
网络方面基础面试题
2012/11/16 面试题
环境工程求职简历的自我评价范文
2013/10/24 职场文书
高级工程师岗位职责
2013/12/15 职场文书
管理心得体会
2013/12/28 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
2015年重阳节主持词
2015/07/04 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
比较node.js和Deno
2021/04/27 Javascript