How to compare quiz app answer with the correct answer?

I’m making a quiz app and I’m at the step where I need to compare after every answer if that answer is correct or not. If the answer is correct or not I want to add a class to a pin (a div with a background colored grey) to change it’s background(red or green, depending on the answer). I have a pin for every question and 10 question totally.

Before answer pin:
enter image description here

After answer, pin would be red or green:
enter image description here
enter image description here

My code:

$('.answer_buttons a').on('click', function(e) {
  e.preventDefault();
  $('.answer_buttons').fadeOut('slow', function() {
    $('.answer_buttons').fadeIn('slow');
  });
  //$('.answer_buttons').fadeToggle();
  //go to next question and add value to hidden inputs
  if ($('.selected').hasClass('last')) {
    $('.selected')
      .find('input')
      .val($(this).hasClass('nu') ? 'nu' : 'da')
      .end();
    $('form').submit();
    //console.log('LAST');
  } else {
    //console.log('FIRST');
    $('.selected')
      .find('input')
      .val($(this).hasClass('nu') ? 'nu' : 'da')
      .end()
      .removeClass('selected')
      .hide()
      .nextAll('.question').first().show().addClass('selected');

  }
  //add to array
  var myQuestions = [];
  var obj = {};
  $('input[type="hidden"]').each(function() {
    obj[this.name] = this.value;
  });
  myQuestions.push(obj);
  JSON.stringify(myQuestions);
  console.log(obj);
  /*$.ajax({
					type: "POST",
					url: 'salveaza_raspunsuri.php',
					data: { raspunsuri: myQuestions },
					success: function(msj){
						//alert('test');
						console.log(msj);
					}
			});*/
});
<form action="final.php" method="post">
  <input name="intr_id" value="0" type="hidden">
  <p class="question selected" id="intreb_1">
    <input name="intr1" value="" type="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</p>
  <p class="question " id="intreb_2">
    <input name="intr2" value="" type="hidden">Sed tempus hendrerit orci, sed interdum quam rhoncus quis?</p>
  <p class="question " id="intreb_3">
    <input name="intr3" value="" type="hidden">Interdum et malesuada fames ac ante ipsum primis in faucibus?</p>
  <p class="question " id="intreb_4">
    <input name="intr4" value="" type="hidden">Suspendisse hendrerit, nibh eu fringilla finibus, lacus lectus elementum nunc, sed molestie sapien orci id erat?</p>
  <p class="question " id="intreb_5">
    <input name="intr5" value="" type="hidden">Sed tempus hendrerit orci, sed interdum quam rhoncus quis?</p>
  <p class="question " id="intreb_6">
    <input name="intr6" value="" type="hidden">Interdum et malesuada fames ac ante ipsum primis in faucibus?</p>
  <p class="question " id="intreb_7">
    <input name="intr7" value="" type="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</p>
  <p class="question " id="intreb_8">
    <input name="intr8" value="" type="hidden">Sed tempus hendrerit orci, sed interdum quam rhoncus quis?</p>
  <p class="question " id="intreb_9">
    <input name="intr9" value="" type="hidden">Interdum et malesuada fames ac ante ipsum primis in faucibus?</p>
  <p class="question  last" id="intreb_10">
    <input name="intr10" value="" type="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</p>
  <div class="answer_buttons">
    <a class="nu" href="">No</a>
    <a class="da" href="">Yes</a>
  </div>
</form>

<div class='global_road'>
  <div class='pin' id='pin1'></div>
  <div class='pin' id='pin2'></div>
  <div class='pin' id='pin3'></div>
  <div class='pin' id='pin4'></div>
  <div class='pin' id='pin5'></div>
  <div class='pin' id='pin6'></div>
  <div class='pin' id='pin7'></div>
  <div class='pin' id='pin8'></div>
  <div class='pin' id='pin9'></div>
  <div class='pin' id='pin10'></div>
</div>

The PHP code:

$intrebari = array( 1 => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit?',
                        2 => 'Sed tempus hendrerit orci, sed interdum quam rhoncus quis?',
                        3 => 'Interdum et malesuada fames ac ante ipsum primis in faucibus?',
                        4 => 'Suspendisse hendrerit, nibh eu fringilla finibus, lacus lectus elementum nunc, sed molestie sapien orci id erat?',
                        5 => 'Sed tempus hendrerit orci, sed interdum quam rhoncus quis?',
                        6 => 'Interdum et malesuada fames ac ante ipsum primis in faucibus?',
                        7 => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit?',
                        8 => 'Sed tempus hendrerit orci, sed interdum quam rhoncus quis?',
                        9 => 'Interdum et malesuada fames ac ante ipsum primis in faucibus?',
                        10 => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit?'
    );
    $rasp_corecte = array( 1 => 'da',
                         2 => 'nu',
                         3 => 'da',
                         4 => 'nu',
                         5 => 'da',
                         6 => 'nu',
                         7 => 'nu',
                         8 => 'nu',
                         9 => 'da',
                         10 => 'da'
    );


Source: ajax

Leave a Reply