javascript - 创建条件 if/else 语句以显示最终测验分数结果-6ren

javascript - 创建条件 if/else 语句以显示最终测验分数结果

转载作者：行者123 更新时间：2023-12-03 00:22:07

对Java不太熟悉。不过，我正在尝试使用 javascript 创建在线测验，其中测验结果使用条件 if/else 语句显示为百分比。如果测试分数为 70% 或更高，请单击此处。否则，如果测试分数低于 70%，请点击此处重复测试。这是我到目前为止所得到的，显然没有结果:

var quiztitle = "Quiz";


 var quiz = [
        {
            "question" : "Q1: What colour is the sky?",
            "choices" : [
                                    "Blue",
                                    "Red",
                                    "Pink",
                                    "Green"
                                ],
            "correct" : "Blue",
            
        },
        {
            "question" : "Q2: What colour is mustard?",
            "choices" : [
                                    "Blue",
                                    "Yellow",
                                    "Green",
                                    "Red"
                                ],
            "correct" : "Yellow",
        },
        {
            "question" : "Q3: What colour is grass?",
            "choices" : [
                                    "Blue",
                                    "Yellow",
                                    "Red",
                                    "Green"
                                ],
            "correct" : "Green",
        },
     

    ];


 var currentquestion = 0,
     score = 0,
     submt = true,
     picked;

 jQuery(document).ready(function ($) {


     function htmlEncode(value) {
         return $(document.createElement('div')).text(value).html();
     }


     function addChoices(choices) {
         if (typeof choices !== "undefined" && $.type(choices) == "array") {
             $('#choice-block').empty();
             for (var i = 0; i < choices.length; i++) {
                 $(document.createElement('li')).addClass('choice choice-box').attr('data-index', i).text(choices[i]).appendTo('#choice-block');
             }
         }
     }

      function nextQuestion() {
         submt = true;
         $('#submitbutton').css('display','none');
		 $('#form1').css('display','none');
         $('#explanation').empty();
         $('#question').text(quiz[currentquestion]['question']);
         $('#pager').text('Question ' + Number(currentquestion + 1) + ' of ' + quiz.length);
         addChoices(quiz[currentquestion]['choices']);
         setupButtons();


     }


     function processQuestion(choice) {
         if (quiz[currentquestion]['choices'][choice] == quiz[currentquestion]['correct']) {
             $('.choice').fadeIn(700, function() {
				 $('.choice').eq(choice).css({
                 'background-color': '#6C0',
				 'color': '#ffffff',
				 'font-weight': '300',
  				 'font-size': '20px',
				 'padding' : '20px'
             });
			 });
             $('#explanation').fadeIn(700, function() {
				  $('#explanation').html('<div class="correct"><i class="fal fa-check" style="font-family:FontAwesome; padding:30px 10px 30px 0;"></i> Correct!</div> ' + htmlEncode(quiz[currentquestion]['explanation']));
				  });
             score++;
         } else {
             $('.choice').eq(choice).css({
                 'background-color': '#ff0000',
				 'color': '#ffffff',
				 'font-weight': '300',
  				 'font-size': '20px',
				 'padding' : '20px'
             });
             $('#explanation').fadeIn(700, function() {
				 $('#explanation').html('<div class="wrong"><i class="fal fa-times" style="font-family:FontAwesome; padding:30px 10px 30px 0;"></i> Incorrect.</div> ' + htmlEncode(quiz[currentquestion]['explanation']));
			 });
         }
         currentquestion++;
         $('#submitbutton').fadeIn(700, function() {
			 $('#submitbutton').html('NEXT QUESTION').on('click', function () {
             if (currentquestion == quiz.length) {
                 endQuiz();
             } else {
                 $(this).text('NEXT QUESTION').css({
                 
                 }).off('click');
                 nextQuestion();
             }
         });
         $('#submitbutton').show();
		 });
     }


     function setupButtons() {
         $('.choice').fadeIn(700, function() {
			 $('.choice').on('mouseover', function () {
             $(this).css({
                 'background-color': '#f1cb00',
				 'color': '#005596',
				 'font-weight': '300',
  				 'font-size': '20px',
				 'padding' : '20px'
             });
			 });
         });
         $('.choice').fadeIn(700, function() {
			 $('.choice').on('mouseout', function () {
             $(this).css({
                 'background-color': '#e1e1e1',
				 'color': '#005596',
				 'font-weight': '300',
  				 'font-size': '20px',
				 'padding' : '20px'
              });
			  });
         })
         $('.choice').fadeIn(700, function() {
			 $('.choice').on('click', function () {
             if (submt) {
                 submt = false;
                 picked = $(this).attr('data-index');
                 $('.choice').removeAttr('style').off('mouseout mouseover');
                 $(this).css({
                 
                 });
                 $('.choice').css({
                     'cursor': 'default'
                 });
                 
                 processQuestion(picked);
                 $('#submitbutton').css({
				 'padding' : '20px'
                 });
				 
             }
			  });
         })
     }


     function endQuiz() {
         $('#explanation').empty();
         $('#question').empty();
		 $('.pager').hide();
         $('#choice-block').empty();
         $('#submitbutton').remove();
         $(document.createElement('h2')).css({
			 'line-height' : '20px',
			 'text-align' : 'center'
         }).text(Math.round(score / quiz.length * 100) + '%').insertAfter('#question');
		 
		 
		 $('#form1').show();
     }
	 



     function init() {
         //add title
         if (typeof quiztitle !== "undefined" && $.type(quiztitle) === "string") {
             $(document.createElement('header')).text(quiztitle).appendTo('#frame');
         } else {
             $(document.createElement('header')).text("Quiz").appendTo('#frame');
         }

         //add pager and questions
         if (typeof quiz !== "undefined" && $.type(quiz) === "array") {
             //add pager
             $(document.createElement('p')).addClass('pager').attr('id', 'pager').text('Question 1 of ' + quiz.length).appendTo('#frame');
             //add first question
             $(document.createElement('h2')).addClass('question').attr('id', 'question').text(quiz[0]['question']).appendTo('#frame');
             
             $(document.createElement('p')).addClass('explanation').attr('id', 'explanation').html('&nbsp;').appendTo('#frame');

             //questions holder
             $(document.createElement('ul')).attr('id', 'choice-block').appendTo('#frame').css({
				'padding-top' : '20px'
              })//add choices
             addChoices(quiz[0]['choices']);
             
             //add submit button
             $(document.createElement('div')).addClass('choice-box').attr('id', 'submitbutton').text('NEXT QUESTION').css({
                 
             }).appendTo('#frame');

             setupButtons();
             $('#submitbutton').hide();
			 $('#form1').hide();
         }
     }

     init();
 });

 
  header {
	background: #005596;
	color:#ffffff;
	padding:20px;
	overflow:auto;
	font-size:21pt;
	margin-bottom:40px;
	-webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
	}
 
.correct {
	color:#6C0; font-family:Tahoma, sans-serif; font-weight:500; font-size: 26pt; text-align:left; padding:30px 0 10px 30px;
}

.wrong {
	color:#ff0000; font-family:Tahoma, sans-serif; font-weight:500; font-size: 26pt; text-align:left; padding:30px 0 10px 30px;
	}
	
  ol, ul {
      list-style:none;
	  list-style-position:inside;
	  
  }
  
  
  
  
  p.pager {
      margin:5px 0 5px;
      font-weight:500;
	  font-size:2em;
	  line-height:2em;
      color:#999;
  }
  
  
  #choice-block {
      display:block;
      list-style:none;
      margin:-20px 15px 0 -15px;
      padding:0;
  }
  
  #submitbutton {
      -webkit-appearance: none;
  -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
  border:none;
  appearance:none;
  background:#005596;
	display:inline-block;
	text-decoration:none;
	padding: 12px;
		font-family: Tahoma, sans-serif;
		font-size: 14pt;
		color: #FFF;
		font-weight:bold;
		margin-top:20px;
  }
  #submitbutton:hover {
	  background-color:#f1cb00;
		text-decoration:none;
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		-ms-transition: 0.3s;
		-o-transition: 0.3s;
		transition: 0.3s;
  }
  
   #Submit {
      -webkit-appearance: none;
  -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
  border:none;
  appearance:none;
  background:#005596;
	display:inline-block;
	text-decoration:none;
	padding: 20px;
		font-family: Tahoma, sans-serif;
		font-size: 14pt;
		color: #FFF;
		font-weight:bold;
		margin-top:20px;
  }
  #Submit:hover {
	  background-color:#f1cb00;
		text-decoration:none;
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		-ms-transition: 0.3s;
		-o-transition: 0.3s;
		transition: 0.3s;
  }
  
  
  .choice-box {
      display:block;
      text-align:left;
      margin:8px auto;
      color: #005596;
	  font-weight: 300;
  	  font-size: 20px;
	  padding: 20px;
      cursor:pointer;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
	  background:#e1e1e1;
  }
  
 @media only screen and (max-width: 900px) { 
 .correct {
	padding:20px 0 0 0;
}

.wrong {
	padding:20px 0 0 0;
	}

 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id = "frame" role = "content" >

最佳答案

我已经更新了代码。也许这就是您所需要的，但是这不是此应用程序的最佳实现。

这是一个single-page application当然，您可以使用 jQuery，但还有更好的解决方案。最好的方法是使用其中一种框架(例如 Angular、Vue.js、React 等)。我强烈建议您获取有关框架的更多信息并开始使用它们。

我认为Vue.js入门阈值较低，建议阅读the doc ，但是每个框架都有自己的优点。

一些链接:

var quiztitle = "Quiz";


var quiz = [{
    "question": "Q1: What colour is the sky?",
    "choices": [
      "Blue",
      "Red",
      "Pink",
      "Green"
    ],
    "correct": "Blue",

  },
  {
    "question": "Q2: What colour is mustard?",
    "choices": [
      "Blue",
      "Yellow",
      "Green",
      "Red"
    ],
    "correct": "Yellow",
  },
  {
    "question": "Q3: What colour is grass?",
    "choices": [
      "Blue",
      "Yellow",
      "Red",
      "Green"
    ],
    "correct": "Green",
  },


];


var currentquestion = 0,
  score = 0,
  submt = true,
  picked;

jQuery(document).ready(function($) {


  function htmlEncode(value) {
    return $(document.createElement('div')).text(value).html();
  }


  function addChoices(choices) {
    if (typeof choices !== "undefined" && $.type(choices) == "array") {
      $('#choice-block').empty();
      for (var i = 0; i < choices.length; i++) {
        $(document.createElement('li')).addClass('choice choice-box').attr('data-index', i).text(choices[i]).appendTo('#choice-block');
      }
    }
  }

  function nextQuestion() {
    submt = true;
    $('#submitbutton').css('display', 'none');
    $('#form1').css('display', 'none');
    $('#explanation').empty();
    $('#question').text(quiz[currentquestion]['question']);
    $('#pager').text('Question ' + Number(currentquestion + 1) + ' of ' + quiz.length);
    addChoices(quiz[currentquestion]['choices']);
    setupButtons();


  }


  function processQuestion(choice) {
    if (quiz[currentquestion]['choices'][choice] == quiz[currentquestion]['correct']) {
      $('.choice').fadeIn(700, function() {
        $('.choice').eq(choice).css({
          'background-color': '#6C0',
          'color': '#ffffff',
          'font-weight': '300',
          'font-size': '20px',
          'padding': '20px'
        });
      });
      $('#explanation').fadeIn(700, function() {
        $('#explanation').html('<div class="correct"><i class="fal fa-check" style="font-family:FontAwesome; padding:30px 10px 30px 0;"></i> Correct!</div> ' + htmlEncode(quiz[currentquestion]['explanation']));
      });
      score++;
    } else {
      $('.choice').eq(choice).css({
        'background-color': '#ff0000',
        'color': '#ffffff',
        'font-weight': '300',
        'font-size': '20px',
        'padding': '20px'
      });
      $('#explanation').fadeIn(700, function() {
        $('#explanation').html('<div class="wrong"><i class="fal fa-times" style="font-family:FontAwesome; padding:30px 10px 30px 0;"></i> Incorrect.</div> ' + htmlEncode(quiz[currentquestion]['explanation']));
      });
    }
    currentquestion++;
    $('#submitbutton').fadeIn(700, function() {
      $('#submitbutton').html('NEXT QUESTION').on('click', function() {
        if (currentquestion == quiz.length) {
          endQuiz();
        } else {
          $(this).text('NEXT QUESTION').css({

          }).off('click');
          nextQuestion();
        }
      });
      $('#submitbutton').show();
    });
  }


  function setupButtons() {
    $('.choice').fadeIn(700, function() {
      $('.choice').on('mouseover', function() {
        $(this).css({
          'background-color': '#f1cb00',
          'color': '#005596',
          'font-weight': '300',
          'font-size': '20px',
          'padding': '20px'
        });
      });
    });
    $('.choice').fadeIn(700, function() {
      $('.choice').on('mouseout', function() {
        $(this).css({
          'background-color': '#e1e1e1',
          'color': '#005596',
          'font-weight': '300',
          'font-size': '20px',
          'padding': '20px'
        });
      });
    })
    $('.choice').fadeIn(700, function() {
      $('.choice').on('click', function() {
        if (submt) {
          submt = false;
          picked = $(this).attr('data-index');
          $('.choice').removeAttr('style').off('mouseout mouseover');
          $(this).css({

          });
          $('.choice').css({
            'cursor': 'default'
          });

          processQuestion(picked);
          $('#submitbutton').css({
            'padding': '20px'
          });

        }
      });
    })
  }


  function endQuiz() {
    $('#explanation').empty();
    $('#question').empty();
    $('.pager').hide();
    $('#choice-block').empty();
    $('#submitbutton').remove();

    /**
    * Added by Max
    */
        const percents = Math.round(score / quiz.length * 100);

        let $link = $(document.createElement('a'))
        .css({
        'line-height': '20px',
        'text-align': 'center'
      });
    const $percents = $(document.createElement('h2'))
      .css({
        'line-height': '20px',
        'text-align': 'center'
      })
      .text(percents + '%');

        if (percents >= 70) {
      $link.text('Click here');
      $link.attr('href', 'https://google.com');
    } else {
      $link.text('Click here to repeat test');
      $link.attr('href', '#0')
      $link.on('click', ($event) => {
        $event.preventDefault();
        
            clearContent();
        init();
      });
    }  

        $('#question').append($percents);
    $('#question').append($link);
    
    /**
    * End Added by Max
    */

    $('#form1').show();
  }

  // Added by Max
    function clearContent () {
    currentquestion = 0;
    score = 0;
    submt = true;
    picked = undefined;

    $('#frame').empty();
  }


  function init() {
    //add title
    if (typeof quiztitle !== "undefined" && $.type(quiztitle) === "string") {
      $(document.createElement('header')).text(quiztitle).appendTo('#frame');
    } else {
      $(document.createElement('header')).text("Quiz").appendTo('#frame');
    }

    //add pager and questions
    if (typeof quiz !== "undefined" && $.type(quiz) === "array") {
      //add pager
      $(document.createElement('p')).addClass('pager').attr('id', 'pager').text('Question 1 of ' + quiz.length).appendTo('#frame');
      //add first question
      $(document.createElement('h2')).addClass('question').attr('id', 'question').text(quiz[0]['question']).appendTo('#frame');

      $(document.createElement('p')).addClass('explanation').attr('id', 'explanation').html('&nbsp;').appendTo('#frame');

      //questions holder
      $(document.createElement('ul')).attr('id', 'choice-block').appendTo('#frame').css({
        'padding-top': '20px'
      }) //add choices
      addChoices(quiz[0]['choices']);

      //add submit button
      $(document.createElement('div')).addClass('choice-box').attr('id', 'submitbutton').text('NEXT QUESTION').css({

      }).appendTo('#frame');

      setupButtons();
      $('#submitbutton').hide();
      $('#form1').hide();
    }
  }

  init();
});

header {
   background: #005596;
   color: #ffffff;
   padding: 20px;
   overflow: auto;
   font-size: 21pt;
   margin-bottom: 40px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
 }

 .correct {
   color: #6C0;
   font-family: Tahoma, sans-serif;
   font-weight: 500;
   font-size: 26pt;
   text-align: left;
   padding: 30px 0 10px 30px;
 }

 .wrong {
   color: #ff0000;
   font-family: Tahoma, sans-serif;
   font-weight: 500;
   font-size: 26pt;
   text-align: left;
   padding: 30px 0 10px 30px;
 }

 ol,
 ul {
   list-style: none;
   list-style-position: inside;
 }

 p.pager {
   margin: 5px 0 5px;
   font-weight: 500;
   font-size: 2em;
   line-height: 2em;
   color: #999;
 }

 #choice-block {
   display: block;
   list-style: none;
   margin: -20px 15px 0 -15px;
   padding: 0;
 }

 #submitbutton {
   -webkit-appearance: none;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   border: none;
   appearance: none;
   background: #005596;
   display: inline-block;
   text-decoration: none;
   padding: 12px;
   font-family: Tahoma, sans-serif;
   font-size: 14pt;
   color: #FFF;
   font-weight: bold;
   margin-top: 20px;
 }

 #submitbutton:hover {
   background-color: #f1cb00;
   text-decoration: none;
   -webkit-transition: 0.3s;
   -moz-transition: 0.3s;
   -ms-transition: 0.3s;
   -o-transition: 0.3s;
   transition: 0.3s;
 }

 #Submit {
   -webkit-appearance: none;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   border: none;
   appearance: none;
   background: #005596;
   display: inline-block;
   text-decoration: none;
   padding: 20px;
   font-family: Tahoma, sans-serif;
   font-size: 14pt;
   color: #FFF;
   font-weight: bold;
   margin-top: 20px;
 }

 #Submit:hover {
   background-color: #f1cb00;
   text-decoration: none;
   -webkit-transition: 0.3s;
   -moz-transition: 0.3s;
   -ms-transition: 0.3s;
   -o-transition: 0.3s;
   transition: 0.3s;
 }

 .choice-box {
   display: block;
   text-align: left;
   margin: 8px auto;
   color: #005596;
   font-weight: 300;
   font-size: 20px;
   padding: 20px;
   cursor: pointer;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   background: #e1e1e1;
 }

 @media only screen and (max-width: 900px) {
   .correct {
     padding: 20px 0 0 0;
   }
   .wrong {
     padding: 20px 0 0 0;
   }
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="frame" role="content">

关于javascript - 创建条件 if/else 语句以显示最终测验分数结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54271167/

文章推荐： javascript - JS - 这个输入元素来自哪里(amCharts)？

文章推荐： azure Cli - 将多个订阅设置为默认

文章推荐： javascript - 如何修复 ClearInterval

java - 想要创建 if 语句，然后是几个 else-if 语句，最后是一个 "capture-all"else-语句
创建一个“海盗对话”，可以选择左手或右手。我希望它对“左”和“右”的不同拼写做出积极的回答(正如您将在代码中看到的那样)，但是，当我为所有非“右”或“左”的输入添加最终的“else”代码时，它给了我一
VBS教程：VBScript 语句-With 语句
With 语句对一个对象执行一系列的语句。 With object statements End With 参数 object 必需的部分
VBS教程：语句-While...Wend 语句
While...Wend 语句当指定的条件为 True 时，执行一系列的语句。 While condition &nbsp； Version [stat
python - 在同一行上创建 for 语句，但不在下一个输入上创建 for 语句
所以我正在处理的代码有一个小问题。 while True: r = input("Line: ") n = r.split() if r == " ":
javascript - 嵌套 if 语句 - 如何重构条件以在迭代时使用一个 if 语句
我有一个对象数组: var contacts = [ { "firstName": "Akira", "lastName": "Laine", "number"
c - 在函数中有两个return 语句，将执行哪个return 语句？
int main() { int f=fun(); ... } int fun() { return 1; return 2; } 在上面的程序中，当从main函数中调用一个
ios - Switch 语句 VS If 语句
我的项目中有很多 if 语句、嵌套 if 语句和 if-else 语句，我正在考虑将它们更改为 switch 语句。其中一些将具有嵌套的 switch 语句。我知道就编译而言，switch 语句通常更
VBS教程：VBScript 语句-Rem 语句
Rem 语句包含程序中的解释性注释。 Rem comment 或 ' comment comment 参数是需要包含的注释文本。在 Rem 关键字和 comment 之间应有一个空格。
VBS教程：VBScript 语句-ReDim 语句
ReDim 语句在过程级中声明动态数组变量并分配或重新分配存储空间。 ReDim [Preserve] varname(subscripts) [, varname(subscripts)]
VBS教程：VBScript 语句-Randomize 语句
Randomize 语句初始化随机数生成器。 Randomize [number] number 参数可以是任何有效的数值表达式。说明 Randomize 使用 number 参数初始
VBS教程：VBScript 语句-Public 语句
Public 语句定义公有变量并分配存储空间。在 Class 块中定义私有变量。 Public varname[([subscripts])][, varname[([subscripts])
VBS教程：VBScript 语句-Sub 语句
Sub 语句声明 Sub 过程的名称、参数以及构成其主体的代码。 [Public [Default]| Private] Sub name [( arglist )]
VBS教程：VBScript 语句-Set 语句
Set 语句将对象引用赋给一个variable或property，或者将对象引用与事件关联。 Set objectvar = {objectexpression | New classname
javascript - 我在一个 for 循环中有两个 if 语句，为什么有时会在第一个语句之前运行第二个 if 语句？
我有这个代码块，有时第一个 if 语句先运行，有时第二个 if 语句先运行。我不确定为什么会这样，因为我认为 javascript 是同步的。 for (let i = 0; i < dataObje
javascript - 为什么这段代码不起作用？ Javascript if 语句，else if 语句
这是一个 javascript 代码，我想把它写成这样:如果此人回答是，则回复“那很酷”，如果此人回答否，则回复“我会让你开心”，如果此人回答的问题包含"is"或“否”，请说“仅键入”是或否，没有任何
java - 短 if 语句 "inside"短 if 语句
这是我的任务，我尝试仅使用简短的 if 语句来完成此任务，我得到的唯一错误是使用“(0.5<=ratio<2 )”，除此之外，构造正确吗？ Scanner scn = new Scanner(
postgresql - SELECT 语句中的 SQL 语句 If 语句
有没有办法在 select 语句中使用 if 语句？我不能在这个中使用 Case 语句。实际上我正在使用 iReport 并且我有一个参数。我想要做的是，如果用户没有输入某个参数，它将选择所有实例。
java - switch 语句 vs if 语句，哪个对性能更好？
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: If vs. Switch Speed 我将以 C++ 为例，但我要问的问题不是针对特定语言的。我的意思是一
VBS教程：VBScript 语句-Property Set 语句
Property Set 语句在 Class 块中，声明名称、参数和代码，这些构成了将引用设置到对象的 Property 过程的主体。 [Public | Private] Pro
VBS教程：VBScript 语句-Property Let 语句
Property Let 语句在 Class 块中，声明名称、参数和代码等，它们构成了赋值（设置）的 Property 过程的主体。 [Public | Private] Prop

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 创建条件 if/else 语句以显示最终测验分数结果