超炫jQuery在线答题、问答特效、调查问卷效果
程序员文章站
2022-05-23 23:42:07
...
今天我给大家分享一个炫酷的测试答题功能,你可以放在自己的网站来做在线调查或在线测试。
若是想看更多js特效、网站源码、js教程请 访问 http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载。
若是想看更多js特效、网站源码、js教程请 访问 http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载。
1、
首先引入jquery库文件和答题插件及样式。
接着我们在div#quiz_area放置答题列表。
2、
然后我们定义题目和答案选项,question:题目,answers:答案选项,correctAnswer:正确答案。下面我们展示下这个json数据。
var init={'questions':[{'question':'你听到一首喜欢的新歌,会很有兴趣了解什么?','answers':['这首歌创作的故事','这首歌是谁写的歌词','这首歌是谁写的曲子','这首歌是谁唱的'],'correctAnswer':1},{'question':'请选出你最喜爱的一项','answers':['电脑','洗衣机','空调','抽纸'],'correctAnswer':3},{'question':'请选择下面一种颜色来形容你们的爱情:','answers':['紫色','紫色','红色','白色'],'correctAnswer':3},{'question':'渴望的旅行看你爱情成熟度','answers':['一望无际的草原','舞厅、电动、娱乐场所','是一条没有人迹的小路','可以欣赏蔚蓝天空的地方'],'correctAnswer':2}]};
3、
最后我们调用quiz.js生成一个在线测试项目,既简单又酷哦^_^
$(function(){
$('#quiz_area').jquizzy({
questions: init.questions
});
});
查看该特效演示及免费下载,请访问 http://www.sucaihuo.com/js/39.html AD:真正免费,域名+虚机+企业邮箱=0元
上一篇: 关于similar_text的点子
下一篇: photoshop扣图