title: Making a Javascript/jQuery Quiz: Dropdown Menu Quest/ion Not Validating
body: <p><a href="https://jsfiddle.net/boriskay/thsmdqrt/3/" rel="nofollow noreferrer">https://jsfiddle.net/boriskay/thsmdqrt/3/</a></p>
  
  <p>In the JS code you can see that the text input questions are validated through an array of objects, but this method doesn't work for the dropdown question(the correct answer is "Botas").</p>
  
  <p>How can I validate the correct answer?</p>
  
  <p>Thank you in advance.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="map"&gt;
    &lt;img src="http://www.homedepot.com/catalog/productImages/1000/eb/ebd83d8b-6e6f-4526-8dd9-e063f0ef66bd_1000.jpg"&gt;
    &lt;form&gt;    
      &lt;div id="q1C"&gt;&lt;input id="q1" type="text" /&gt;&lt;/div&gt;
      &lt;div id="q2C"&gt;&lt;input id="q2" type="text" /&gt;&lt;/div&gt;
      &lt;div id="q3C"&gt;
              &lt;select id="q3"&gt;
                  &lt;option value="zapantandos"&gt;Zapatandos&lt;/option&gt;
                  &lt;option value="botas"&gt;Botas&lt;/option&gt;
                  &lt;option value="bripantas" id="truck"&gt;Bripantas&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;input type="submit" id="submit" value="Click When Done" /&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JAVASCRIPT/JQUERY:</p>
  
  <pre><code>var answers = {
      "q1": ["Camisas", "camisas", "CAMISAS"],
      "q2": ["Zapatos", "zapatos", "ZAPATOS"],
      "q3": ["Botas", "botas", "BOTAS"]
  };
  
  function markAnswers() {
    $("input[type='text']").each(function() {
      console.log($.inArray(this.value, answers[this.id]));
  
      if($.inArray(this.value, answers[this.id]) === -1) {
        $(this).parent().append("&lt;img class='result_pic' src='https://cdn4.iconfinder.com/data/icons/geomicons/32/672366-x-128.png' /&gt;");
  
      } else {
        $(this).parent().append("&lt;img class='result_pic' src='http://image.flaticon.com/icons/png/128/74/74414.png' /&gt;");
        //$("form").append("Great job!");
      }
    })
  }
  
  $("form").on("submit", function(e){
      e.preventDefault();
      markAnswers();
      $("form").append("Great job!");
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#q1C, 
  #q2C,
  #q3C{
      position: absolute;
      display:flex;
      z-index:100;
    align-items:center;
  }
  
  #q1,#q2,#q3{
    height: 20px;
    float:left;
  }
  
  #q1C{   
      margin-top: -450px;
      margin-left: 350px; 
  }
  
  #q2C{   
      margin-top: -160px;
      margin-left: 350px;
  }
  
  #q3C{   
      margin-top: -610px;
      margin-left: 475px;
  }
  
  .result_pic {
      position: relative;
    z-index:100;
    width:20px;
    height:20px;
    margin-left:5px;
  }
  
  #submit {
      height: 35px;
      font-size: 17px;
      background-color: skyblue;
  }
  
  ol {
      list-style: none;
  }
  </code></pre>