温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jQuery在线问卷答题系统代码

发布时间:2020-06-10 20:59:39 来源:网络 阅读:1032 作者:qianc8115 栏目:web开发

jQuery在线问卷答题系统代码是一款实用的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两文件中做适当修改。
codego.net 代码摘抄

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI