CODEWITHSUNDEEP
jqueryjson
Julen Linazasoro
Julen Linazasoro

Reputation: 35

Online jQuery and json quiz, highlight correct answer

I´m making an online quiz. I took this code from http://www.flashbynight.com/tutes/mcqquiz/ I changed it and it is working fine.

When the user clicks on the right answer I managed to highlight it, but the trouble comes when I try to highlight the correct answer if the user has clicked in an incorrect answer.

Any ideas?

Thanks!!

$( 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

});

Upvotes: 0

Views: 1026

Answers (3)

animax technology
animax technology

Reputation: 1

Just put this code to incorrect answer.It will work

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>');
  }

Upvotes: 0

martincarlin87
martincarlin87

Reputation: 11062

Can you give this a try?

From what I've gathered, rnd is the id of the correct answer, so by doing $('#' + rnd), it should hopefully target the correct answer and apply the appropriate CSS.

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

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

 }

The only drawback I see is that the answers have the same id in the different questions (or stages as they are described by the code) and ids should be unique so you might have to refactor a bit in order to make this valid.

If the ids were changed to a class then that would work better and I think you'd be able to do something like $(stage + ' .option.' + class); or $(stage').find('.option.' + class); where class is the number of the correct answer, 1, 2 or 3 but you should be able to target the right answer for the specific question by doing $(stage + ' #' + rnd); aswell to make your intentions clearer even though it's still invalid.

Upvotes: 1

jnel899
jnel899

Reputation: 583

Do you have the html? You need to use the id of the tag of the correct answer to select it and then highlight it using the same .css method. You need:

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

This should be in the place you suspect it should go. However, you need to ID of the HTML tag that holds the correct answer.

Upvotes: 0

Related Questions