超炫jQuery测试答题功能

超炫jQuery测试答题功能

今天我给大家分享一个炫酷的测试答题功能,你可以放在自己的网站来做在线调查或在线测试。

淘建站为您提供更多_其它特效_动画效果_答题_quiz,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 208 次

下载资源

6 积分

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。

HTML

首先引入jquery库文件和答题插件及样式。

<link rel="stylesheet" href="styles.css" /> 
<script src="jquery.js"></script> 
<script src="quiz.js"></script>

接着我们在div#quiz_area放置答题列表。

jQuery

然后我们定义题目和答案选项,question:题目,answers:答案选项,correctAnswer:正确答案。下面我们展示下这个json数据。

var init={'questions':[{'question':'你听到一首喜欢的新歌,会很有兴趣了解什么?','answers':['这首歌创作的故事','这首歌是谁写的歌词','这首歌是谁写的曲子','这首歌是谁唱的'],'correctAnswer':1},{'question':'请选出你最喜爱的一项','answers':['电脑','洗衣机','空调','抽纸'],'correctAnswer':3},{'question':'请选择下面一种颜色来形容你们的爱情:','answers':['紫色','紫色','红色','白色'],'correctAnswer':3},{'question':'渴望的旅行看你爱情成熟度','answers':['一望无际的草原','舞厅、电动、娱乐场所','是一条没有人迹的小路','可以欣赏蔚蓝天空的地方'],'correctAnswer':2}]};

最后我们调用quiz.js生成一个在线测试项目,既简单又酷哦^_^

$(function(){ 
    $('#quiz_area').jquizzy({ 
        questions: init.questions 
    }); 
});

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/39.html
超炫jQuery测试答题功能 希望对你有帮助,感谢您的支持!
  • html5手机微信逗比测试游戏源码

    html5手机微信逗比测试游戏源码

  • 方言等级考试游戏源码下载_方言等级测试微信游戏源码下载

    方言等级考试游戏源码下载_方言等级测试微信游戏源码下载

  • js text文本框身高体重健康值测试表单代码

    js text文本框身高体重健康值测试表单代码

  • 带进度条和时间的jQuery仿牛客网在线答题代码

    带进度条和时间的jQuery仿牛客网在线答题代码

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2