头像

超炫jQuery测试答题功能

来源:http://www.sucaihuo.com/js/39.html 素材火管理员 2015-04-08 07:08浏览(9084) 收藏

今天我给大家分享一个炫酷的测试答题功能,你可以放在自己的网站来做在线调查或在线测试。
超炫jQuery测试答题功能
分类:其它特效 > 动画效果 难易:中级

程序员,你不是一个人;网站开发QQ群:698377651,在线充值,或联系QQ3401083589直接充值

查看演示 下载资源: 1519 下载资源 下载积分: 106 积分

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 
    }); 
});
最新交易
评论8
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3401083589

  • 头像 7楼
    02-05 09:18
    攻***员
    有意思,直接拿来用做项目中
  • 头像 6楼
    01-07 18:37
    lu***芬
    不错 挺好的酷炫 666 喜欢
  • 头像 5楼
    10-15 00:06
    出***发
    怎么设置成单选或多选,搞不懂。
  • 头像 4楼
    07-19 10:42
    桃***呀
    页面简洁大方
  • 头像 3楼
    06-24 16:14
    kf***cu
    已经下载,多谢。
  • 头像 板凳
    08-11 18:15
    94***99
    这个是JS做,要用数据库的孩子别下错了
  • 头像 椅子
    06-05 12:27
    哎***槽
    挺好玩的
  • 头像 沙发
    04-29 09:59
    na***ve
    很有意思,下载。
1 2