CSS+jQuery实现的在线答题功能


Posted in HTML / CSS onApril 25, 2015

有时在网页中要加入一个在线测试功能,例如在线调查,在线测试各类知识等应用,这类应用需要用到很多前后端技能。今天我给大家分享一个基于jQuery的前端应用——测试答题功能。

CSS+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来实现一个在线测试项目,敬请关注。

HTML / CSS 相关文章推荐
使用CSS3实现字体颜色渐变的实现
Mar 09 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 #HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 #HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 #HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 #HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 #HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 #HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 #HTML / CSS
You might like
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
php 缓存函数代码
2008/08/27 PHP
PHP session有效期问题
2009/04/26 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
javascript 全等号运算符使用说明
2010/05/31 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
canvas时钟效果
2017/02/16 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
人机交互程序 python实现人机对话
2017/11/14 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
python处理document文档保留原样式
2019/09/23 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
Eclipse面试题
2014/03/22 面试题
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
兼职业务员岗位职责
2014/01/01 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
详解python字符串驻留技术
2021/05/21 Python
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript