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实现图片模糊过滤效果
Nov 19 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 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设计模式中工厂模式详细介绍
2013/05/15 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
php检查页面是否被百度收录
2015/10/28 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
jquery获取节点名称
2015/04/26 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
Vue的轮播图组件实现方法
2018/03/03 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
javascript History对象原理解析
2020/02/17 Javascript
python中pygame模块用法实例
2014/10/09 Python
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
python画折线图的程序
2018/07/26 Python
Python OS模块实例详解
2019/04/15 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
python实现超市商品销售管理系统
2019/11/22 Python
Python换行与不换行的输出实例
2020/02/19 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
Java程序员面试90题
2013/10/19 面试题
宣传工作经验材料
2014/06/02 职场文书
关于做家务的心得体会
2016/01/23 职场文书
Nginx反向代理配置的全过程记录
2021/06/22 Servers