分享一款基于jQuery在线问卷答题系统代码是一款实用的jQuery答题插件,点击下一题切换带有淡入淡出效果。实现的效果图如下:

在线预览   源码下载

实现的代码。

html代码:

  <div class="demo">
<div id='quiz-container'>
</div>
</div>

js代码:

   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}] };

        $(function () {
$('#quiz-container').jquizzy({
questions: init.questions
});
});

via:http://www.w2bc.com/Article/32596

基于jQuery在线问卷答题系统代码的更多相关文章

  1. 基于jQuery右下角旋转环状菜单代码

    基于jQuery右下角旋转环状菜单代码.这是一款固定在页面的右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css来制作动画效果.效果图如下: 在线预览    ...

  2. 基于jQuery垂直多级导航菜单代码

    基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="ce&q ...

  3. 基于jQuery图片自适应排列显示代码

    基于jQuery图片自适应排列显示代码.这是一款基于jquery.flex-images插件实现的类似谷歌图片流效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  4. 基于jQuery左右滑动切换图片代码

    分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="v_ou ...

  5. 基于jquery右侧悬浮加入购物车代码

    分享一款基于jquery右侧悬浮加入购物车代码.这是一款基于jQuery实现的仿天猫右侧悬浮加入购物车菜单代码. 在线预览   源码下载 实现的代码: <!--左侧产品parabola.js控制 ...

  6. 基于jQuery实现文字倾斜显示代码

    这是一款基于jQuery实现文字倾斜显示,这是一款基于jQuery实现的超酷动态文字显示效果.适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. ...

  7. (转)passwordStrength 基于jquery的密码强度检测代码使用介绍

    使用很简单. 代码如下: $('#pass').passwordStrength();  XHTML 代码如下: <p><label>请输入密码:</label>  ...

  8. 课程设计-基于SSM的在线课程教学系统代码-基于java的线上课程资源共享论坛系统

    注意:该项目只展示部分功能,如需了解,评论区咨询即可. 1.开发环境 开发语言:Java 后台框架:SSM 前端框架:vue 数据库:MySQL 设计模式:MVC 架构:B/S 源码类型: Web 编 ...

  9. jquery css3问卷答题卡翻页动画效果

    这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...

随机推荐

  1. 4、第一个JAVA程序(Hello World)

    第一步: 新建一个文本文档,在里面输入内容 public class HelloWorld { public static void main(String[] args){ System.out.p ...

  2. servlet Servlet例子

    Servlet是sun公司提供的一门用于开发动态web资源的技术.   Sun公司在其API中提供了一个servlet接口(参看J2EE API文档),用户若想使用Java程序开发一个动态web资源, ...

  3. 微信小程序-自定义底部导航

    代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  4. Oracle创建库

    oracle创建表空间 SYS用户在CMD下以DBA身份登陆: 在CMD中打sqlplus /nolog 然后再 conn / as sysdba --如果路径不存在则要创建路径 --创建临时表空间 ...

  5. C#线程访问winform窗体控件

    参考地址:http://www.cnblogs.com/jason-liu-blogs/archive/2012/09/08/2677008.html 添加: public Form() { Init ...

  6. js replaceChild

    //父亲元素.replaceChild(新,旧) 1 <ul id="city"> <li id="bj">北京</li> ...

  7. Ubuntu12.04设置屏幕分辨率

    Ubuntu屏幕分辨率设置 Table of Contents 1 概述 2 设置前 3 设置 4 参考 1 概述 我的Ubuntu12.04不知道被我怎么折腾了一番,屏幕的分辨率错乱了,没有办法找到 ...

  8. mybatis报错 Specified class is an interface

    本文转自:http://blog.csdn.net/u014331288/article/details/53869303 1.错误原因 Caused by: org.springframework. ...

  9. Foundations of Machine Learning: The Margin Explanation for Boosting's Effectiveness

    Foundations of Machine Learning: The Margin Explanation for Boosting's Effectiveness 在这一节,我们要回答的一个问题 ...

  10. 【js】with 语句

    with 语句 为语句设定默认对象. with (object)   statements 参数 object 新的默认对象. statements 一个或多个语句,object 是该语句的默认对象. ...