/**
 * All the JS for the quiz.
 * @author @mykadam (Mykaël Adam) for http://saaq.gouv.qc.ca
 * @version 1.0 (release)
 */

/**
 *
 * @type {string}
 * @desc Fichier contenant toutes les questions, les choix de réponses et les rétroactions
 */
var jsonUrl = "js/questions-2022-10-17.json";

/**
 * 2 éléments
 * @type {string}
 * @desc Éléments HTML (divs) du message d'introduction et de la question
 */
var introDiv = $("#intro");
var questionDiv = $("#question");

/**
 * @type {int}
 * @desc Numéro de la question en cour
 */
var noQuestion = 0;
/**
 * @type {int}
 * @desc Nombre de questions dans le quiz
 */
var nbQuestion = 9;
/**
 * @type {int}
 * @desc Nombre de questions réussis par l'utilisateur
 */
var nbBonneRéponse = 0;
/**
 * @type {string}
 * @desc Div du logo (utile pour le changement mobile vs ordinateur)
 */
var logo = $("header img");

/**
 * @desc Quand la page est prête -> Changement du logo si mobile, call de la function
 * pour vérifier la taille du navigateur (mobile vs table vs tablette - responsive)
 */
$(document).ready(function () {
  if ($(window).width() <= 767) {
    logo.attr("src", "img/logo-mobile.png");
  }
  //Changement de fichier et de grosseur pour l'image du logo
  $(window).resize(imageResize);
});

/**
 * @desc Ajout de l'évènement sur le bouton pour commencer le quiz
 */
$("#startQuiz").click(function () {
  introDiv.fadeOut(300, function () {
    //Affiche la première question
    afficherQuestion();
  });
});

/**
 * @desc Affiche la question en cours dans #questionDiv
 */
function afficherQuestion() {
  //Si le quiz n'est pas terminé
  if (noQuestion < nbQuestion) {
    $.getJSON(jsonUrl, function (data) {
      //Variables pour storer le HTML
      var contenuHtml =
        "<div id='progression' class='col-md-12'>Question " +
        (noQuestion + 1) +
        " de " +
        nbQuestion +
        "</div>";
      var question =
        '<h2 id="enonce" class="col-md-12">' + data[noQuestion]["q"] + "</h2>";
      var gif = "";
      var reponses = "<ul class='col-md-8'>";

      //Si il y a une image pour la question en cours
      if (data[noQuestion]["img"] != "") {
        gif =
          '<div class="imgQuestions"><div class="col-md-4 imgContainer"><img src="img/' +
          data[noQuestion]["img"] +
          '"></div>';
      }
      //Sinon, les choix de réponses prennent tout la place (100% width)
      else {
        reponses = "<ul class='col-md-12'>";
      }

      //Variables contenant la rétroaction de la bonne réponse
      var feedBack = data[noQuestion]["feedback"];

      //Tableau contenant les choix de réponses
      var arrChoix = [];

      //Pour aller chercher chaques choix de réponse et les mettres dans le tableau arrChoix
      $.each(data[noQuestion]["a"], function (index, data) {
        arrChoix[index] =
          "<span class='texte' data-reponse='" +
          data.correct +
          "'><span class='choixInside'>" +
          data.option +
          "</span></span></li>";
      });

      //Met dans un ordre aléatoire les choix de réponses si ce n'est pas un vrai ou faux (plus que deux choix)
      if (arrChoix.length > 2) {
        shuffle(arrChoix);
      }

      //Numéro du choix dans l'ordre ("A", "B" ou "C")
      var noChoixReponse = "";

      //Boucle pour mettre "A", "B" ou "C" dans l'ordre des choix de réponses tiré aléatoirement
      for (i = 0; i < arrChoix.length; ++i) {
        switch (i) {
          case 0:
            noChoixReponse = "<span class='no'>A</span>";
            break;
          case 1:
            noChoixReponse = "<span class='no'>B</span>";
            break;
          default:
            noChoixReponse = "<span class='no'>C</span>";
        }

        arrChoix[i] = "<li class='choix'>" + noChoixReponse + arrChoix[i];
      }

      //Transfert les choix du tableau vers une variable string
      reponses += arrChoix.join("");
      //Ajout du HTMl pour fermer la liste <ul> et la <div>
      reponses += "</ul></div> ";

      //Concatenation de tout le HTML
      contenuHtml += question;
      contenuHtml += gif;
      contenuHtml += reponses;

      //Incorporation dans la DIV dans le HTML
      questionDiv.html(contenuHtml);

      //Bind -> click sur les choix de réponse
      $(".choix").click(function () {
        //Data de la réponse
        var etatReponse = $(this).find(".texte").attr("data-reponse");
        var choixCliquer = this;

        //Call la function pour vérifier
        verifierReponses(etatReponse, feedBack, choixCliquer);
      });
    });
  }
  //Si le quiz est terminé
  else {
    var contenuHtml =
      "<div id='recapitulatif' class='col-md-12'><h2>Le test est terminé.</h2>";

    /**
     * @param nbBonneRéponse -> Nombre de bonnes réponses
     * @desc Message personnalisé selon le score de l'utilisateur
     */
    switch (nbBonneRéponse) {
      case 10:
        contenuHtml +=
          "<p>Félicitations! Les règles de sécurité à respecter le soir de l’Halloween n’ont plus de secret pour toi.</p><div class='imgQuestions'><img src='img/badge.png' alt='Pro de Halloween'></div>";
        break;
      case 7:
      case 8:
      case 9:
        contenuHtml +=
          "<p>Bravo! Tu connais presque toutes les règles pour passer l’Halloween en toute sécurité. Refais le test pour améliorer ton pointage.</p>";
        break;
      default:
        contenuHtml +=
          "<p>Ça y est presque! Refais le test pour améliorer tes connaissances.</p>";
    }

    //Affichage du résultat
    contenuHtml +=
      "<p class='noMargin'>Ton résultat :</p><p class='results'>" +
      nbBonneRéponse +
      "/" +
      nbQuestion +
      "</p></div>";
    //Ajout du bouton recommencer
    contenuHtml +=
      "<div class='buttonDiv col-md-12'><button class='next'><span class='texteBouton'>Recommencer</span><span class='arrow'></span></button></div>";
    //Affichage du HTML
    questionDiv.html(contenuHtml);

    //Retour à 0 si l'utilisateur décide de recommencer le test
    noQuestion = 0;
    nbBonneRéponse = 0;

    //Bind du click sur le bouton recommencer
    $(".next").click(function () {
      //Affiche la question suivant
      questionDiv.fadeOut(300, function () {
        $(".next").off("click");
        afficherQuestion(noQuestion);
      });
    });
  }

  questionDiv.fadeIn(300);
}
/**
 *
 * @param etatReponse -> true ou false (bonne réponse ou mauvaise réponse)
 * @param feedBack -> texte de rétroaction tiré de la banque de question
 * @param choixCliquer -> objet (li) choix de réponse cliquer
 * @desc Vérifie si l'utilisateur à choisi la bonne réponse ou pas, affiche la rétroaction et passe à la suivante question
 */
function verifierReponses(etatReponse, feedBack, choixCliquer) {
  //Bon choix de réponse
  var bonneRéponse = $(".choix").find(".texte[data-reponse='true']");

  //Met une classe répondu sur chaque choix pour éviter le "hover" et
  //change l'aspect du curseur
  $(".choix").addClass("responded");

  //Ajout du texte de rétroaction
  bonneRéponse.html(
    "<div class='retroaction'>Bonne réponse</div><div>" + feedBack + "</div>"
  );

  //Si c'est la bonne réponse
  if (etatReponse == "true") {
    //Ajout class bonne réponse
    $(choixCliquer).addClass("good");
    nbBonneRéponse++;
  }
  //Si c'est la mauvaise réponse
  else {
    //Ajout classe mauvaise réponse et bonne réponse
    bonneRéponse.addClass("good");
    $(choixCliquer).addClass("bad");
    //Ajout de la rétroaction "Mauvaise réponse" au choix
    $(choixCliquer)
      .find(".texte")
      .prepend("<div class='retroaction'>Mauvaise réponse</div>");
  }

  //Enlève l'évènement au clique des choix
  $(".choix").off("click");

  //Ajout du bouton suivant
  questionDiv.append(
    "<div class='buttonDiv col-md-12'><button class='next'><span class='texteBouton'>Suivant</span><span class='arrow'></span></button></div>"
  );

  //Incrémentation de "1" au numéro de question
  noQuestion++;

  //Bind du click sur le bouton suivant préalablement créé pour
  //passer à la question suivante avec le nouveau numéro de question
  $(".next").click(function () {
    //Affiche la question suivant
    questionDiv.fadeOut(300, function () {
      afficherQuestion(noQuestion);
    });
  });
}

/**
 *
 * @param array
 * @returns {*}
 * @desc Shuffle an array randomnly (Fisher–Yates shuffle)
 */
function shuffle(array) {
  var currentIndex = array.length,
    temporaryValue,
    randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {
    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

/**
 * Resize the logo (mobile vs computer)
 */
function imageResize() {
  if ($(window).width() <= 767) {
    logo.attr("src", "img/logo-mobile.png");
  } else {
    logo.attr("src", "img/logo.png");
  }
}