0

I am stuck and need some help with organizing my code. The idea is to have jQuery looping 5 select elements. Each select element should have only one answer - selected (user answer) which is not multiple. As there are 5 select elements, there should be 5 correct answers. I created an array to store the object of correct answers and use it in the loop. It is important to keep the order of the elements : e.g. "E flat" should be accepted as a correct answer only in select element "#note_1", "C sharp" - in "#note_2" and so on. I have created a working solution for each correct answer and a separate select element (e.g. "#note_1" etc) but now I try to make this code "dryer" in order to avoid copying it several times (e.g. 5) and changing only criteria of the correct answer and select element. There is something wrong with my logic. Probably I have to use another array of select elements (e.g. ["note_1", "note_2", "note_3", "note_4", "note_5"] and loop through select elements AND options inside them at the same time. Unfortunately it makes things worse as the number of errors just gets multiplied by 5. There is something wrong with the way how I iterate through the elements. That's what I have so far: http://jsfiddle.net/LearnForever/2x054ra5/7/. Thank you.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js"> </script>  

 </head>

<body>

<select id="note_1" class="task_1_b_options">
  <option value="-">None</option>
  <option value="A">A</option>
  <option value="A sharp">A sharp</option>
  <option value="A flat">A flat</option>
  <option value="B">B</option>
  <option value="B sharp">B sharp</option>
  <option value="B flat">B flat</option>
  <option value="C">C</option>
  <option value="C sharp">C sharp</option>
  <option value="C flat">C flat</option>
  <option value="D">D</option>
  <option value="D sharp">D sharp</option>
  <option value="D flat">D flat</option>
  <option value="E">E</option>
  <option value="E sharp">E sharp</option>
  <option value="E flat">E flat</option>
  <option value="F">F</option>
  <option value="F sharp">F sharp</option>
  <option value="F flat">F flat</option>
  <option value="G">G</option>
  <option value="G sharp">G sharp</option>
  <option value="G flat">G flat</option>

<select>          

  <select id="note_2" class="task_1_b_options">
  <option value="-">None</option>  
  <option value="A">A</option>
  <option value="A sharp">A sharp</option>
  <option value="A flat">A flat</option>
  <option value="B">B</option>
  <option value="B sharp">B sharp</option>
  <option value="B flat">B flat</option>
  <option value="C">C</option>
  <option value="C sharp">C sharp</option>
  <option value="C flat">C flat</option>
  <option value="D">D</option>
  <option value="D sharp">D sharp</option>
  <option value="D flat">D flat</option>
  <option value="E">E</option>
  <option value="E sharp">E sharp</option>
  <option value="E flat">E flat</option>
  <option value="F">F</option>
  <option value="F sharp">F sharp</option>
  <option value="F flat">F flat</option>
  <option value="G">G</option>
  <option value="G sharp">G sharp</option>
  <option value="G flat">G flat</option>

  <select>          

  <select id="note_3" class="task_1_b_options">
  <option value="-">None</option>  
  <option value="A">A</option>
  <option value="A sharp">A sharp</option>
  <option value="A flat">A flat</option>
  <option value="B">B</option>
  <option value="B sharp">B sharp</option>
  <option value="B flat">B flat</option>
  <option value="C">C</option>
  <option value="C sharp">C sharp</option>
  <option value="C flat">C flat</option>
  <option value="D">D</option>
  <option value="D sharp">D sharp</option>
  <option value="D flat">D flat</option>
  <option value="E">E</option>
  <option value="E sharp">E sharp</option>
  <option value="E flat">E flat</option>
  <option value="F">F</option>
  <option value="F sharp">F sharp</option>
  <option value="F flat">F flat</option>
  <option value="G">G</option>
  <option value="G sharp">G sharp</option>
  <option value="G flat">G flat</option>

  <select>          

  <select id="note_4" class="task_1_b_options">
  <option value="-">None</option>
  <option value="A">A</option>
  <option value="A sharp">A sharp</option>
  <option value="A flat">A flat</option>
  <option value="B">B</option>
  <option value="B sharp">B sharp</option>
  <option value="B flat">B flat</option>
  <option value="C">C</option>
  <option value="C sharp">C sharp</option>
  <option value="C flat">C flat</option>
  <option value="D">D</option>
  <option value="D sharp">D sharp</option>
  <option value="D flat">D flat</option>
  <option value="E">E</option>
  <option value="E sharp">E sharp</option>
  <option value="E flat">E flat</option>
  <option value="F">F</option>
  <option value="F sharp">F sharp</option>
  <option value="F flat">F flat</option>
  <option value="G">G</option>
  <option value="G sharp">G sharp</option>
  <option value="G flat">G flat</option>

  <select>          

  <select id="note_5" class="task_1_b_options">
  <option value="-">None</option>  
  <option value="A">A</option>
  <option value="A sharp">A sharp</option>
  <option value="A flat">A flat</option>
  <option value="B">B</option>
  <option value="B sharp">B sharp</option>
  <option value="B flat">B flat</option>
  <option value="C">C</option>
  <option value="C sharp">C sharp</option>
  <option value="C flat">C flat</option>
  <option value="D">D</option>
  <option value="D sharp">D sharp</option>
  <option value="D flat">D flat</option>
  <option value="E">E</option>
  <option value="E sharp">E sharp</option>
  <option value="E flat">E flat</option>
  <option value="F">F</option>
  <option value="F sharp">F sharp</option>
  <option value="F flat">F flat</option>
  <option value="G">G</option>
  <option value="G sharp">G sharp</option>
  <option value="G flat">G flat</option>

  <select>     

  <div id="resultDiv"></div>      

  <script>

  $(document).ready(function(){   

  $('select').change(function(index, element) {

  localStorage.totalAnswers = parseFloat(localStorage.totalAnswers) + 1.0;       

  var userAnswer   = $(this).val();  

  var correctAnswer = ["E flat","C sharp", "A", "G", "D sharp"];

  $.each(correctAnswer, function(index, element) {

  if(correctAnswer[index] === userAnswer) {
  localStorage.totalCorrectAnswers = parseFloat(localStorage.totalCorrectAnswers) + 1.0; 

  console.log("Your answer is " + userAnswer + ".It is a correct answer");

  } else {
  console.log("Your answer is " + userAnswer + ".Wrong.Try again!!!");

       } // end if  
     }); // end each  
    }); // end change
  }); // end ready     


  </script>            

  </body>  

  </html>
LearnForever
  • 185
  • 4
  • 5
  • 16
  • Text too long and all at once, try to be more concise with your text and your code, separate blocks for HTML and JS please – Aramil Rey Sep 24 '15 at 18:07
  • Create an associative array using the select IDs and correct answers. http://stackoverflow.com/questions/19787868/create-an-associative-array-in-jquery. Then you just look up the answer for the DIV's ID and compare it with what is selected. No need to loop through everything. – Tony Hinkle Sep 24 '15 at 18:18

1 Answers1

1

You can do this more nicely by creating an associative array that keys the IDs of the SELECT elements with the correct answers.

$(document).ready(function () {

    $('select').change(function (index, element) {

        var userAnswer = $(this).val();
        var thisId = $(this).attr('id');

        // create the associative array that maps the SELECT IDs to
        // the correct answers        
        var correctAnswer = {
            note_1: "E flat",
            note_2: "C sharp",
            note_3: "A",
            note_4: "G",
            note_5: "D sharp"
        };

        //compare the correct answer with the user's answer
        if (correctAnswer[thisId] === userAnswer) {
            localStorage.totalCorrectAnswers = parseFloat(localStorage.totalCorrectAnswers) + 1.0;

            console.log("Your answer is " + userAnswer + ".  It is the correct answer");

        } else {
            console.log("Your answer is " + userAnswer + ".  Wrong--try again!!!");

        } // end if
    }); //end change
}); // end ready
Tony Hinkle
  • 4,706
  • 7
  • 23
  • 35