Question

我正在进行在线测验。我从http://www.flashbynight.com/tutes/mcqquiz/获取了这段代码，我更改了它并且工作正常。

当用户点击正确的答案时，我设法突出显示它，但如果用户点击了错误的答案，我试图突出显示正确答案时会出现问题。

有什么想法吗？

谢谢！

$( document ).ready(function(){ 

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

  $.getJSON('preguntas.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;
    }
     numberOfQuestions=questionBank.length; 

    displayQuestion();
    })//gtjson

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

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

    $(stage).append('<div class="questionText">'+questionBank[questionNumber][0]+'</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>');



    $('.option').click(function(){ // when clicking on an answer

    $(this).css( "border", "3px solid #FC0");

     if(questionLock==false){questionLock=true; 

     //correct answer
     if(this.id==rnd){
        $(this).css( "border", "3px solid #FC0"); // I can highlight the answer when it is correct
      $(stage).append('<div class="feedback1">¡BIEN!</div>');
      score++;
      }

     //wrong answer 
    if(this.id!=rnd){
        $(stage).append('<div class="feedback2">UPS</div>');

       // I think I should put the code here, but I don´t know how to access the correct answer in order to highlight it 

     }

      setTimeout(function(){changeQuestion()},2000);
     }})
     }//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"},"fast", function() {$(stage2).css('right','-800px');$(stage2).empty();});
  $(stage2).hide();
  $(stage).show();
  $(stage).animate({"right": "+=800px"},"fast", function() {questionLock=false;});

}//change question



function displayFinalSlide(){

    $(stage).append('<div class="questionText">Felicidades, has terminado el cuestionario<br><br>Número de preguntas: '+numberOfQuestions+'<br>Respuestas correctas: '+score+'</div>');

}//display final slide

});

Answer 1

你可以尝试一下吗？

根据我收集的内容，rnd是正确答案的ID，因此通过$('#' + rnd)，它应该有针对性地回答并应用适当的CSS。

if(this.id!=rnd){
    $(stage).append('<div class="feedback2">UPS</div>');

    // highlight correct answer
    $('#' + rnd).css( "border", "3px solid #FC0");

 }

我看到的唯一缺点是答案在不同的问题（或代码描述的阶段）中具有相同的id，而id应该是唯一的，因此您可能需要重构一下，以使其有效。

如果将id更改为某个班级，那么这样做会更好，我认为您可以执行$(stage + ' .option.' + class);或$(stage').find('.option.' + class);等{{1} }}是正确答案的编号，class，1或2，但您应该能够通过执行3来确定具体问题的正确答案。即使它仍然无效，也要让你的意图更清晰。

Answer 2

你有HTML吗？您需要使用正确答案的标记的id来选择它，然后使用相同的.css方法突出显示它。你需要：

$("#ID_of_Correct_Answer").css( "border", "3px solid #FC0");

这应该在你怀疑应该去的地方。但是，您需要包含正确答案的HTML标记的ID。

Answer 3

只需将此代码放入incorrect answer即可。

if(this.id!=rnd){
   $(stage).append('<div class="clearfix"></div><div class="col-md-12 feedback2">WRONG ANSWER</div><div class="col-md-12 quiz-answer">Correct Answer is : '+questionBank[questionNumber][1]+'</div>');
  }

在线jQuery和json测验，突出正确答案

3 个答案: