Why my JQuery doesn't load on IE?

Question

I did this javascript quiz : http://utbm.trunat.fr/CIP/quiz/

It works on normal browser but doesn't even load with Internet Explorer.

It seams that it doesn't recognize the initQuiz() function.

Do you have any idea of how I can fix this ?

Answer 1

• Internet Explorer doesn't accept the trailing comma:

  question = {'texte': $(this).attr("texte"),
      'sound': $(this).attr("sound"),}
  

• Apparently, another error comes from this line:

  $('title').html(QUIZ_TITLE[lang]);
  

  Turns out you can't set the title like that in IE. Use document.title = QUIZ_TITLE[lang] instead.

• A third error is that you're introducing a new variable, question without the var keyword, which is an error in IE. You're doing it again, later on, in response. Update your loadXML as such:

  function loadXML(xml) {
     $(xml).find("question").each(function() {
      var question = {'texte': $(this).attr("texte"), 'sound': $(this).attr("sound")};
  
        reponses = [];
        $(this).find('carre').find('reponse').each(function() {
          var reponse = {'texte': $(this).text(), 'sound': $(this).attr("sound"), 'bonne': false};
          if($(this).attr('bonne') == "vrai") reponse['bonne'] = true;            
          reponses.push(reponse);
       });
  
       question['reponses'] = reponses;
       questions.push(question);
     });
     startGame(questions);
  }
  

• A fourth error is in the way you're verifying that an answer is correct.

  if($(this).attr('data-type') == 'true')
  

  You compare the value of the data-type attribute to the string value "true", but when you assign the value, you set it to the boolean value true:

  $('#r'+(i+1)+'input').attr('data-type', r.bonne);
  

  To make sure that you're always comparing string values, for instance, you could set the value as such:

  $('#r'+(i+1)+'input').attr('data-type', r.bonne.toString());