// Tableau des questions
const questions = [
  {
    //question 1
    question: "Q1. Nous pouvons affirmer que le rapprochement bancaire...",
    answers: ["Est conseillé pour une meilleure gestion", 
    "Est une obligation pour toutes les entreprises", 
    "Permet de contrôler les mouvements de trésorerie", 
    "Est imposé par la banque"],
    correctAnswers: [
      "Est conseillé pour une meilleure gestion", 
    "Permet de contrôler les mouvements de trésorerie"
  ],
    explanation: "Le rapprochement bancaire n'est pas obligatoire.<br> Il permet de contrôler les mouvements de trésorerie."
  },

  {//Question 2
    question: "Q2. Quelle est l'utilité du rapprochement bancaire ?",
    answers: [
      "Contrôler que les 2 comptes ont bien enregistrés les mêmes opérations (512 banque/Relevé de compte)",
     "Pointer si toutes les opérations ont été enregistrées", "Calculer le bénéfice ou la perte réalisé sur la période",
      "Vérifier la concordance des 2 comptes (512 banque/Relevé de compte)"
    ],
    correctAnswers: [
      "Contrôler que les 2 comptes ont bien enregistrés les mêmes opérations (512 banque/Relevé de compte)",
     "Pointer si toutes les opérations ont été enregistrées",
      "Vérifier la concordance des 2 comptes (512 banque/Relevé de compte)"
    ],
    explanation: "Le rapprochement bancaire permet \u003A<br> \u2192 de contrôler si toutes les opérations bancaires ont bien été enregistrées dans notre compte 512 Banque,<br> \u2192 de vérifier concordance entre le compte 512 et le relevé de compte de notre banque"
  },

  { //Question 3 
    question: "Q3. Observe le compte 512 Banque et le relevé de compte. Quelles sont les affirmations vraies ?",
    answers: [
      "Ce sont des comptes RÉCIPROQUES", 
      "Ce sont des comptes IDENTIQUES", 
      "Ils devraient avoir des soldes identiques mais de sens contraire", 
      "lls devraient avoir des soldes identiques mais de sens identique"
    ],
    correctAnswers: [
    "Ce sont des comptes RÉCIPROQUES", 
    "Ils devraient avoir des soldes identiques mais de sens contraire"
  ],
    explanation: "Notre compte 512 Banque et le compte courant tenu par notre banque ... <br>\u2192 Sont des comptes réciproques (enregistrent les mêmes opérations mais en sens contraire)<br>\u2192 Devraient avoir des soldes identiques mais de sens contraire"
  },

  {//Question 4
    question: "Q4. Sélectionner les éléments indispensables à l'établissement de l'état de rapprochement bancaire",
    answers: [
    "Le compte 512 Banque de la période", 
    "Le(s) relevé(s) de compte de la banque de la période (ou export fichier de la banque en ligne)", 
    "Le bilan et le compte de résultat", "Les SIG - Soldes Intermédiaires de Gestion", 
    "L'état de rapprochement de la période précédente"
  ],
    correctAnswers: [
      "Le compte 512 Banque de la période",
     "Le(s) relevé(s) de compte de la banque de la période (ou export fichier de la banque en ligne)", 
     "L'état de rapprochement de la période précédente"
    ],
    explanation: "L'établissement de l'état de rapprochement bancaire nécessite \u003A<br>\u2192 Un extrait du compte 512 Banque de la période<br>\u2192 Le relevé de compte de la banque (ou banque en ligne) de la période<br>\u2192 L'état de rapprochement de la période précédente"
  },

  {//Question 5
    question: "Q5. La comparaison des 2 comptes consiste à pointer toute opération portée ...",
    answers: [
    "Au crédit du compte 512 avec la même opération portée au débit de l'extrait de compte tenu par la banque", 
    "Au crédit du compte 512 avec la même opération portée au crédit de l'extrait de compte tenu par la banque",
     "Au débit du compte 512 avec la même opération portée au débit de l'extrait de compte tenu par la banque", 
     "Au débit du compte 512 avec la même opération portée au crédit de l'extrait de compte tenu par la banque"
    ],
    correctAnswers: [
      "Au crédit du compte 512 avec la même opération portée au débit de l'extrait de compte tenu par la banque",
     "Au débit du compte 512 avec la même opération portée au crédit de l'extrait de compte tenu par la banque"
    ],
    explanation: "..."
  },

  {//Question 6.1
    question: "Q6.1. D'où proviennent les opérations non pointées ?",
    answers: [
      "D'oublis d'enregistrements comptables",
    "Des décalages dans le temps", 
    "Du gestionnaire en congé",
    "D'informations qui ne sont pas encore connues",
    "De frais bancaires"
  ],
    correctAnswers: [
    "D'oublis d'enregistrements comptables", 
    "Des décalages dans le temps", 
    "D'informations qui ne sont pas encore connues",
    "De frais bancaires"
    ],
    explanation: "Le pointage du compte 512 Banque avec le compte tenu par notre banque consiste à rapprocher les opérations communes aux 2 comptes MAIS de sens contraire.<br>\u2192 En résumé, l'opération qui se trouve  au débit du compte 512 Banque  doit se retrouver au crédit du compte tenu par notre banque, et inversement.<br>\u2192 Les 2 comptes enregistrent les mêmes opérations.<br>\u2192 Les opérations non pointées sont dûes à des décalages dans le temps, des erreurs ou des oublis d'enregistrements et des informations non connues."
  },

  {//Question 6.2
    question: "Q6.2. Connais-tu le fonctionnement de ces 2 comptes ?",
    answers: [
    "Le compte 512 Banque AUGMENTE au CRÉDIT et diminue au DÉBIT", 
    "Le compte 512 Banque AUGMENTE au DÉBIT et diminue au crédit", 
    "Le compte tenu par notre banque AUGMENTE au CRÉDIT et diminue au DÉBIT",
    "Le compte tenu par notre banque AUGMENTE au DÉBIT et diminue au CRÉDIT", 
  ],
    correctAnswers: [
      "Le compte 512 Banque AUGMENTE au DÉBIT et diminue au crédit", 
      "Le compte tenu par notre banque AUGMENTE au CRÉDIT et diminue au DÉBIT",
  ],
    explanation: "L'établissement de l'état de rapprochement bancaire nécessite<br>\u2192  Un extrait du compte 512 Banque de la période\u003A <br>\u2192 Le relevé de notre compte bancaire de la période tenu par notre banquier <br>\u2192 L'état de rapprochement de la période précédente"
  },

];

// Initialisation des variables
let currentQuestionIndex = 0;
let score = 0;

// Fonction pour démarrer le quiz
function startQuiz() {
  document.getElementById('start-screen').style.display = 'none';
  document.getElementById('quiz-container').style.display = 'block';
  showQuestion();
}

// Fonction pour afficher une question
function showQuestion() {
  const currentQuestion = questions[currentQuestionIndex];
  document.getElementById('question-text').innerText = currentQuestion.question;
  document.getElementById('answers-list').innerHTML = '';

  currentQuestion.answers.forEach(answer => {
    const li = document.createElement('li');
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.value = answer;
    checkbox.id = answer;
    li.appendChild(checkbox);

    const label = document.createElement('label');
    label.innerText = answer;
    label.htmlFor = answer;
    li.appendChild(label);

    document.getElementById('answers-list').appendChild(li);
  });
}

// Fonction pour vérifier les réponses sélectionnées
function checkAnswer() {
  const selectedAnswers = [];
  const checkboxes = document.querySelectorAll('#answers-list input[type="checkbox"]:checked');
  checkboxes.forEach(checkbox => {
    selectedAnswers.push(checkbox.value);
  });

  const currentQuestion = questions[currentQuestionIndex];
  const correctAnswers = currentQuestion.correctAnswers;

  let isCorrect = true;
  correctAnswers.forEach(correctAnswer => {
    if (!selectedAnswers.includes(correctAnswer)) {
      isCorrect = false;
    }
  });

  if (isCorrect && selectedAnswers.length === correctAnswers.length) {
    score++;
  }

  showExplanationModal(currentQuestion.explanation, selectedAnswers, correctAnswers);
}

// Fonction pour afficher le texte d'explication dans une boîte modale
function showExplanationModal(explanation, selectedAnswers, correctAnswers) {
  const explanationContainer = document.getElementById('explanation-modal-text');
  explanationContainer.innerHTML = ''; // Réinitialiser le contenu de la boîte modale



  // Parcourir toutes les réponses possibles
  questions[currentQuestionIndex].answers.forEach(answer => {
    const summary = document.createElement('div');
    summary.innerText = answer;
    if (selectedAnswers.includes(answer)) {
      if (correctAnswers.includes(answer)) {
        summary.classList.add('correct-answer');
      } else {
        summary.classList.add('incorrect-answer');
      }
    } else if (correctAnswers.includes(answer)) {
      summary.classList.add('expected-answer');
    }
    explanationContainer.appendChild(summary);
  });

  //-- Ajouter la liste des réponses attendues
  const correctAnswerList = document.createElement('p');
  correctAnswerList.classList.add('expected-answer-list');
  /*--
  correctAnswerList.innerText = `Réponses attendues : ${correctAnswers.join(', ')}`;--*/
  explanationContainer.appendChild(correctAnswerList);

  explanationContainer.innerHTML += `<span class="explanation-text">${explanation}</span>`; // Ajouter le texte d'explication
  document.getElementById('explanation-modal').style.display = 'block';
}



// Fonction pour fermer la boîte modale et passer à la question suivante
function closeModalAndGoToNextQuestion() {
  closeModal();
  goToNextQuestion();
}

// Fonction pour fermer la boîte modale
function closeModal() {
  document.getElementById('explanation-modal').style.display = 'none';
  document.getElementById('score-modal').style.display = 'none';
}

// Fonction pour passer à la question suivante
function goToNextQuestion() {
  currentQuestionIndex++;
  if (currentQuestionIndex < questions.length) {
    showQuestion();
  } else {
    showScoreModal();
  }
}

// Fonction pour afficher le modal de score
function showScoreModal() {
  const percentage = (score / questions.length) * 100;
  const scoreText = document.getElementById('score-text');
  scoreText.innerText = `${percentage.toFixed(2)}%`;
  document.getElementById('score-modal').style.display = 'block';

}

// Événements de clic
document.getElementById('start-button').onclick = startQuiz;
document.getElementById('check-answer-button').onclick = checkAnswer;
document.getElementById('close-modal-button').onclick = closeModal;
document.getElementById('next-question-button').onclick = closeModalAndGoToNextQuestion;
document.getElementById('retry-button').onclick = restartQuiz;

// Fonction pour redémarrer le quiz
function restartQuiz() {
  currentQuestionIndex = 0;
  score = 0;
  closeModal(); // Fermer la boîte modale
  document.getElementById('quiz-container').style.display = 'none'; // Masquer le conteneur de quiz
  document.getElementById('start-screen').style.display = 'block'; // Afficher l'écran de démarrage
}