测验多种选择如何使选项非随机化

时间:2016-09-05 13:09:54

标签: javascript jquery html json

我有一个由其他人制作的多项选择测验,但他现在无法帮助我。我是编码的新手。我希望我的选择有序。现在,当我输入选项时,选项1将始终是正确答案,代码将自动随机化选项,因此当我的学生进行测验时,正确的权利并不总是选项1。有人可以帮助我,以便选项将与我将它们放入代码中的顺序相同,同时它还可以检测到正确的答案吗?谢谢!

使用Javascript:

$(document).ready(function () {

var questionNumber=0;
var questionBank=new Array();
var stage="#game1";
var stage2=new Object;
var questionLock=false;
var numberOfQuestions;
var score=0;


    $.getJSON('activity.json', function(data) {

    for(i=0;i<data.quizlist.length;i++){ 
        questionBank[i]=new Array;
        questionBank[i][0]=data.quizlist[i].question;
        questionBank[i][1]=data.quizlist[i].option1;
        questionBank[i][2]=data.quizlist[i].option2;
        questionBank[i][3]=data.quizlist[i].option3;
        questionBank[i][4]=data.quizlist[i].option4;
        questionBank[i][5]=data.quizlist[i].option5;
    }
     numberOfQuestions=questionBank.length; 


    scrambleDatabase();
    displayQuestion();
    })//gtjson


fillDB();

 function scrambleDatabase(){
for(i=0;i<60;i++){ 
var rnd1=Math.floor(Math.random()*questionBank.length);
var rnd2=Math.floor(Math.random()*questionBank.length);

var temp=questionBank[rnd1];
questionBank[rnd1]=questionBank[rnd2];
questionBank[rnd2]=temp;

}//i

 }//scdb

function displayQuestion(){
 var rnd=Math.random()*3;
rnd=Math.ceil(rnd);
 var q1;
 var q2;
 var q3;
 var q4;
 var q5;


if(rnd==1){q1=questionBank[questionNumber][1];q2=questionBank[questionNumber][2];q3=questionBank[questionNumber][3];q4=questionBank[questionNumber][4];q5=questionBank[questionNumber][5];}
if(rnd==2){q2=questionBank[questionNumber][1];q3=questionBank[questionNumber][2];q1=questionBank[questionNumber][3];q4=questionBank[questionNumber][4];q5=questionBank[questionNumber][5];}
if(rnd==3){q3=questionBank[questionNumber][1];q4=questionBank[questionNumber][2];q5=questionBank[questionNumber][3];q1=questionBank[questionNumber][4];q2=questionBank[questionNumber][5];}
if(rnd==4){q4=questionBank[questionNumber][1];q5=questionBank[questionNumber][2];q1=questionBank[questionNumber][3];q2=questionBank[questionNumber][4];q3=questionBank[questionNumber][5];}
if(rnd==5){q5=questionBank[questionNumber][1];q1=questionBank[questionNumber][2];q2=questionBank[questionNumber][3];q3=questionBank[questionNumber][4];q4=questionBank[questionNumber][5];}

$(stage).append('<div class="questionText"><img src="play.png"></br>What sound is this?</div><div id="1" class="option">'+q1+'</div><div id="2" class="option">'+q2+'</div><div id="3" class="option">'+q3+'</div><div id="4" class="option">'+q4+'</div><div id="5" class="option">'+q5+'</div>');

$('.option').click(function(){
  if(questionLock==false){questionLock=true;    
  //correct answer
  if(this.id==rnd){
 $(stage).append('<div class="feedback1"><img src="happy.png">CORRECT</div>');
     currentSoundName="sounds/correct.mp3";
    $("#dummy")[0].innerHTML='<audio id="correcttag"     src='+currentSoundName+' autobuffer="autobuffer"></audio>';
   $('#correcttag')[0].play();  
   score++;
   }
     //wrong answer 
      if(this.id!=rnd){
   $(stage).append('<div class="feedback2"><img    src="sad.png">WRONG</div>');
     currentSoundName="sounds/incorrect.mp3";
   $("#dummy")[0].innerHTML='<audio id="correcttag"     src='+currentSoundName+' autobuffer="autobuffer"></audio>';
   $('#correcttag')[0].play();  

 }
    setTimeout(function(){changeQuestion()},1000);
 }})

 currentSoundName="sounds/"+questionBank[questionNumber][0];

  $('.questionText').click(function(){ 
  $("#dummy")[0].innerHTML='<audio id="audiotag" src='+currentSoundName+' autobuffer="autobuffer"></audio>';
$('#audiotag')[0].play();                               


})

}//display question



function changeQuestion(){

    questionNumber++;

if(stage=="#game1"){stage2="#game1";stage="#game2";}
    else{stage2="#game2";stage="#game1";}

if(questionNumber<numberOfQuestions){displayQuestion();}else{displayFinalSlide();}

 $(stage2).animate({"right": "+=800px"},"slow", function() {$(stage2).css('right','-800px');$(stage2).empty();});
 $(stage).animate({"right": "+=800px"},"slow", function() {questionLock=false;});
}//change question




function displayFinalSlide(){

    $(stage).append('<div class="questionText">You have finished the quiz!<br><br>Total questions: '+numberOfQuestions+'<br>Correct answers: '+score+'</div>');

}//display final slide






});//doc ready

HTML:

<!DOCTYPE html>
<head>

<title>Quiz</title>
<link href="main.css"rel="stylesheet"type="text/css"/>
<meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="jquery.js"></script>
<script src="controller.js"></script>

</head>
<body>

<div id="topbar">Quiz</div>
<div class="spacer"></div>

<div id="navContent">

<div id="game1"></div>
<div id="game2"></div>
</div>


<span id="dummy"></span>

</body>
</html>

我的问题数据库是一个像这样的json文件: JSON:

{"quizlist":[

{
"question":"ba.mp3",
"option1":"a",
"option2":"b",
"option3":"c",
"option4":"d",
"option5":"e"
}

1 个答案:

答案 0 :(得分:0)

我会进行以下编辑。

首先编辑您的问题数据库json文件,以包含正确答案的额外字段(使用答案编号):

{"quizlist":[

{
"question":"ba.mp3",
"answer":2,
"option1":"a",
"option2":"b",
"option3":"c",
"option4":"d",
"option5":"e"
}

然后将此答案读入您的数据库阵列:

questionBank[i][0]=data.quizlist[i].question;
questionBank[i][1]=data.quizlist[i].option1;
questionBank[i][2]=data.quizlist[i].option2;
questionBank[i][3]=data.quizlist[i].option3;
questionBank[i][4]=data.quizlist[i].option4;
questionBank[i][5]=data.quizlist[i].option5;
questionBank[i][6]=data.quizlist[i].answer;

然后删除随机化答案的部分,只需将答案读入订单中的变量并将正确答案存储在rnd中(我会重命名此变量):

function displayQuestion(){

var q1 = questionBank[questionNumber][1];
var q2 = questionBank[questionNumber][2];
var q3 = questionBank[questionNumber][3];
var q4 = questionBank[questionNumber][4];
var q5 = questionBank[questionNumber][5];
var rnd = questionBank[questionNumber][6];

$(stage).append('<div class="questionText"><img src="play.png"></br>What sound is this?</div><div id="1" class="option">'+q1+'</div><div id="2" class="option">'+q2+'</div><div id="3" class="option">'+q3+'</div><div id="4" class="option">'+q4+'</div><div id="5" class="option">'+q5+'</div>');

那应该这样做

编辑:这不是我首选的生成多项选择测验的方法,但它应该通过对现有代码的最小编辑为您提供所需的内容。