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 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
vue实现移动端悬浮窗效果
Dec 01 Javascript
vue下载二进制流图片操作
Oct 26 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中动态显示签名和ip原理
2007/03/28 PHP
介绍php设计模式中的工厂模式
2008/06/12 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
利用php生成验证码
2017/02/23 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
Add a Table to a Word Document
2007/06/15 Javascript
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
Python实现快速计算词频功能示例
2018/06/25 Python
python数据分析:关键字提取方式
2020/02/24 Python
python自定义函数def的应用详解
2020/06/03 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
python热力图实现简单方法
2021/01/29 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
写给老婆的检讨书
2014/02/21 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python