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弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
JS中递归函数
Jun 17 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
AngularJS表单验证功能
Oct 19 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
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
python实现从web抓取文档的方法
2014/09/26 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
工程管理造价应届生求职信
2013/11/13 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
女性健康讲座主持词
2015/07/04 职场文书
毕业感言怎么写
2015/07/31 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
小数乘法教学反思
2016/02/22 职场文书
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript