开发前端软件素材源码教程下载网站

全部
网站模板
网页特效
网站源码
素材资源
建站学院
软件工具
mysql mysql 微信 微信 小程序 苹果 dedecms 修真图
当前位置：首页 > 网页特效 > 其他 >  jQuery 响应式动态测验插件 Quiz.js

jQuery 响应式动态测验插件 Quiz.js

  • 源码大小：57.85KB
  • 所需积分：1积分
  • 源码编号：19JP-3564
  • 浏览次数：589次
  • 最后更新：2023年06月27日
  • 所属栏目：其他
我要下载
加入收藏
本站默认解压密码：19jp.com 或 19jp_com

最新资源

[软件工具] 雷神网游加速器 免费体验
[软件工具] 360极速浏览器X 64位
[免扣元素] 541款水果无底图PNG素材高像素高清水果图片免扣素材水果坚果
[软件工具] 正则表达式生成工具 v2.1 绿色免费版
[软件工具] 取色软件Pipette v21.5.5 中文绿色版 取色器
[后台模板] 基于bootstrap后台管理模板
[后台模板] 紫色渐变OA系统后台模板
[公司企业] 数字科技企业机构HTML5模板
[公司企业] 房产物业公司Bootstrap模板
[后台模板] 后台数据统计Bootstrap5模板

简介

Javascript测验在网站和博客上正成为一种流行趋势。它们为您提供了一种吸引访问者与您的网站互动的方式，并展示您对HTML、CSS和Javascript的了解。

在本教程中，我将指导您使用问答jQuery插件创建一个响应迅速、动态、设计精美、多语言的问答。答案保存在cookie中，问答可以通过url中的哈希完全导航。

如何使用它:

1.在文档中加载所需的jQuery库和Bootstrap 4框架。

  1. <link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
  2. <script src="/path/to/cdn/jquery.min.js"></script>
  3. <script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

2.下载并加载jQuery quiz.js插件的文件。

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

3.创建一个空的DIV容器来容纳测验。

  1. <div id="example"></div>

4.用JSON定义您自己的问答问题和答案，如下所示。

  1. // quiz.json
  2. [{
  3.   "questions": [{
  4.     "question": "What's my favorite color?",
  5.     "description": "Optional Description",
  6.     "answers": [{
  7.       "answer": "Red",
  8.       "alert": "<strong>The answer is incorrect.</strong> See <a href=\"#\"> for details!</a>",
  9.       "true": 0
  10.     },
  11.     {
  12.       "answer": "Black",
  13.       "alert": "<strong>Exactly!</strong> See <a href=\"#\"> for details!</a>",
  14.       "true": 1
  15.     },
  16.     {
  17.       "answer": "Blue",
  18.       "alert": "<strong>The answer is incorrect.</strong> See <a href=\"#\"> for details!</a>",
  19.       "true": 0
  20.     }]
  21.   },
  22.   {
  23.     "question": "What is my favorite programming language?",
  24.     "description": null,
  25.     "answers": [{
  26.       "answer": "PHP",
  27.       "alert": "<strong>The answer is incorrect.</strong> See <a href=\"#\"> for details!</a>",
  28.       "true": 0
  29.     },
  30.     {
  31.       "answer": "C++",
  32.       "alert": "<strong>The answer is incorrect.</strong> See <a href=\"#\"> for details!</a>",
  33.       "true": 0
  34.     },
  35.     {
  36.       "answer": "JavaScript",
  37.       "alert": "<strong>Exactly!</strong> See <a href=\"#\"> for details!</a>",
  38.       "true": 1
  39.     }]
  40.   },
  41.   {
  42.     "question": "What is my favorite country?",
  43.     "description": null,
  44.     "answers": [{
  45.       "answer": "UK",
  46.       "alert": "<strong>Exactly!</strong> See <a href=\"#\"> for details!</a>",
  47.       "true": 1
  48.     },
  49.     {
  50.       "answer": "US",
  51.       "alert": "<strong>The answer is incorrect.</strong> See <a href=\"#\"> for details!</a>",
  52.       "true": 0
  53.     },
  54.     {
  55.       "answer": "France",
  56.       "alert": "<strong>The answer is incorrect.</strong> See <a href=\"#\"> for details!</a>",
  57.       "true": 0
  58.     }]
  59.   },
  60.   {
  61.     "question": "Who is my favorite celebrity?",
  62.     "description": null,
  63.     "answers": [{
  64.       "answer": "Johnny Depp",
  65.       "alert": "<strong>The answer is incorrect.</strong> See <a href=\"#\"> for details!</a>",
  66.       "true": 0
  67.     },
  68.     {
  69.       "answer": "Emma Watson",
  70.       "alert": "<strong>The answer is incorrect.</strong> See <a href=\"#\"> for details!</a>",
  71.       "true": 0
  72.     },
  73.     {
  74.       "answer": "Arnold Schwarzenegger",
  75.       "alert": "<strong>Exactly!</strong> See <a href=\"#\"> for details!</a>",
  76.       "true": 1
  77.     }]
  78.   }],
  79.   "params": {
  80.     "intro": 1,
  81.     "intromessage": "A jQuery plugin that lets you create responsive and beautiful quizzes on the page. "
  82.   }
  83. }]

5.初始化插件并在页面上生成一个测试。

  1. $(document).ready(function(){
  2.   $('#example').quiz({
  3.  
  4.     // path to JSON
  5.     quizJson: "quiz.json",
  6.  
  7.     // handle results
  8.     onResults: function(good, total){
  9.       var perc = good / total;
  10.       var alert = $('<div class="alert"></div>')
  11.         .prependTo(this);
  12.       if(perc == 0){
  13.         alert.addClass('alert-danger')
  14.           .html('All wrong! You didn't get an answer right.');
  15.       } else if(perc > 0 && perc <= 0.25){
  16.         
  17.         alert.addClass('alert-danger')
  18.           .html('Poor result! You just got it right ' + good + ' answers on ' + total + '. Try again.');
  19.       } else if(perc > 0.25 && perc <= 0.5){
  20.         
  21.         alert.addClass('alert-danger')
  22.           .html('Just sufficient! You got it right ' + good + ' answers on ' + total + '. You can do better.');
  23.       } else if(perc > 0.5 && perc <= 0.75){
  24.         
  25.         alert.addClass('alert-success')
  26.           .html('Discreet result! You got it right ' + good + ' answers on ' + total + '. Try again.');
  27.       } else if(perc > 0.75 && perc < 1){
  28.         
  29.         alert.addClass('alert-success')
  30.           .html('Good result! You got it right ' + good + ' answers on ' + total + '. We are almost there.');
  31.       } else if(perc == 1){
  32.         
  33.         alert.addClass('alert-success')
  34.           .html('Congratulations, you have answered all the questions!');
  35.       }
  36.     }
  37.     
  38.   }); 
  39. });

6.指定答案选择cookie将被设置为过期的天数。默认值：3600（以秒为单位）。

  1. $('#example').quiz({
  2.   cookieExpire: 7200,
  3. });

7.确定是否隐藏下一个/上一个按钮。默认值：false。

  1. $('#example').quiz({
  2.   hidePrevBtn: true,
  3.   hideRestartBtn: true,
  4. });

8.启用/禁用渐变过渡。默认值：true。

  1. $('#example').quiz({
  2.   fade: true,
  3. });

9.设置问题的数量。默认值：false（无限制）。

  1. $('#example').quiz({
  2.   numQuestions: 5,
  3. });

10.自定义问题模板。

  1. $('#example').quiz({
  2.   // Templates
  3.   introTpl: '<div class="quiz_intro">' 
  4.     // Quiz title
  5.     + '<h2><%this.title%></h2>' 
  6.     // Quiz description
  7.     + '<%if(this.description){%>' 
  8.     + '<p><%this.description%></p>' 
  9.     + '<%}%>' 
  10.     // end if
  11.     + '</div>',
  12.   questionTpl: '<div class="' + FLEX_CLASS + '">' 
  13.     + '<div class="' + NUM_CLASS + '">' 
  14.     // Quiz num question
  15.     + '<%this.question.num%>' 
  16.     + '.</div>' 
  17.     + '<div class="' + FLEXFILL_CLASS + '">'
  18.     + '<h2>' 
  19.     // Quiz question
  20.     + '<%this.question.question%>' 
  21.     + '</h2>' 
  22.     // Quiz question description
  23.     + '<%if(this.question.description){%>' 
  24.     + '<p>' 
  25.     + '<%this.question.description%>' 
  26.     + '</p>' 
  27.     + '<%}%>'
  28.     // end if 
  29.     // Cycle answers
  30.     + '<%for(var index in this.answers){%>'
  31.     + '<div class="quiz_radiogroup">' 
  32.     // Quiz radio
  33.     + '<input type="radio" id="answer-<%this.answers[index].num%>" ' 
  34.     + 'name="question<%this.question.id%>" ' 
  35.     + 'value="<%this.answers[index].num%>" ' 
  36.     
  37.     // This data (quiz-name and quiz-value) are mandatory
  38.     + 'data-quiz-name="question<%this.question.id%>" ' 
  39.     + 'data-quiz-value="<%this.answers[index].num%>"'
  40.     // § mandatory
  41.     
  42.     + '<%this.answers[index].checked%>>' 
  43.     + '<label for="answer-<%this.answers[index].num%>"><span></span> ' 
  44.     // Answer label
  45.     + '<%this.answers[index].answer%>' 
  46.     + '</label>' 
  47.     + '</div>'
  48.     + '<%}%>' 
  49.     // end for
  50.     + '</div>' 
  51.     + '</div>',
  52.   resultsTpl: '<div class="' + FLEX_CLASS + '">' 
  53.     + '<div class="' + NUM_CLASS + '">' 
  54.     // Quiz num question
  55.     + '<%this.question.num%>' 
  56.     + '.</div>' 
  57.     + '<div class="' + FLEXFILL_CLASS + '">'
  58.     + '<h2>' 
  59.     // Quiz question
  60.     + '<%this.question.question%>' 
  61.     + '</h2>' 
  62.     // Quiz question description
  63.     + '<%if(this.question.description){%>' 
  64.     + '<p>' 
  65.     + '<%this.question.description%>' 
  66.     + '</p>' 
  67.     + '<%}%>' 
  68.     // end if 
  69.     // Answer
  70.     + '<%if(this.answer){%>' 
  71.     + '<div class="' + RESPONSE_CLASS + '">' 
  72.     + '<strong>' 
  73.     // Answer num
  74.     + '<%this.answer.num + 1%>'
  75.     + '.</strong> ' 
  76.     // Answer
  77.     + '<%this.answer.answer%>' 
  78.     + '</div>' 
  79.     // Correct response
  80.     + '<%if(this.answer.true == 1){%>' 
  81.     + '<div class="' + ALERT_CLASS + ' quiz_success">' 
  82.     + THUMBSUP_ICO 
  83.     // Answer alert
  84.     + '<%this.answer.alert%>' 
  85.     + '</div>' 
  86.     // Else wrong response
  87.     + '<%} else{%>' 
  88.     + '<div class="' + ALERT_CLASS + ' quiz_fail">' 
  89.     + THUMBSDOWN_ICO 
  90.     // Answer alert
  91.     + '<%this.answer.alert%>' 
  92.     + '</div>'
  93.     + '<%}%>' 
  94.     // end if 
  95.     + '<%}%>' 
  96.     // end if 
  97.     + '</div>' 
  98.     + '</div>',
  99.   startBtnTpl: '<button class="' + BTN_CLASS + '">' 
  100.     // Button start
  101.     + '<%this.messages.start%>' 
  102.     + PLAY_ICO 
  103.     + '</button>',
  104.   prevBtnTpl: '<button class="' + BTN_CLASS + '">' 
  105.     + BACKWARD_ICO 
  106.     // Button previous
  107.     + '<%this.messages.prev%>' 
  108.     + '</button>',
  109.   nextBtnTpl: '<button class="' + BTN_CLASS + '">' 
  110.     // Button next
  111.     + '<%this.messages.next%>' 
  112.     + FORWARD_ICO 
  113.     + '</button>',
  114.   resultBtnTpl: '<button class="' + BTN_CLASS + '">' 
  115.     // Button go to results
  116.     + '<%this.messages.results%>' 
  117.     + FORWARD_ICO 
  118.     + '</button>',
  119.   restartBtnTpl: '<button class="' + BTN_CLASS + '">' 
  120.     + REPEAT_ICO 
  121.     // Button restart
  122.     + '<%this.messages.restart%>' 
  123.     + '</button>',
  124.   modalBtnTpl: '<button class="' + BTN_CLASS + '" data-dismiss="modal">' 
  125.     + REPEAT_ICO 
  126.     // Button restart (modal)
  127.     + '<%this.messages.restart%>' 
  128.     + '</button>',
  129.   progressTpl: false
  130. });

11.将测验信息本地化。

  1. $.quiz('localization', {
  2.   start: 'Start',
  3.   prev: 'Back',
  4.   next: 'Forward',
  5.   results: 'Go to results',
  6.   restart: 'Back to the top',
  7.   error: 'Error',
  8.   errmsg: [
  9.     'Please choose an answer',
  10.     'Some questions have not been answered. Please, back to the top to answer all questions'
  11.   ]
  12. });

12.或者在页面上包含您选择的语言JS。

  1. <script src="./dist/i18n/messages_de.js"></script>
  2. <script src="./dist/i18n/messages_es.js"></script>
  3. <script src="./dist/i18n/messages_fr.js"></script>
  4. <script src="./dist/i18n/messages_it.js"></script>
  5. <script src="./dist/i18n/messages_nl.js"></script>
  6. <script src="./dist/i18n/messages_pt.js"></script>

更新日志：

2022-05-22

  • 2.0版本

2022-02-26

  • 添加测验模板并随机化问题

预览截图

相关热词： Quiz.js测验动态响应jQuery插件
上一篇：用户友好 谷歌字体选择器在jQuery 谷歌字体选择器.js
下一篇：倒计时条和平滑动画创建Toast通知

网站首页 | 关于我们 | 免责声明 | 网站建设 | 在线工具 | 网站地图

版权声明：本站发布的资源部分自互联网，所有资源版权归原作者所有。如果有侵犯到您的权益，请联系本站删除，谢谢合作！

Copyright 2018-2025 ©19jp.com All Rights Reserved. 陕ICP备16002142号-1