Forums Tout JavaScript

Bonjour à toutes et tous,
Tout d'abord : Merci pour ce site qui est une mine d'or.
Je m'amuse à monter un quizz en JavaScript, mais la je bloque complétement.
Besoin de votre aide s'il vous plaît,

Comment faire pour faire une synthèse des questions et des réponses à la fin du quizz ?

Merci à vous !

Code : Tout sélectionner

class Question {
    constructor(text, choices, answer) {
      this.text = text;
      this.choices = choices;
      this.answer = answer;
    }
    isCorrectAnswer(choice) {
      return this.answer === choice;
    }
  }
  let questions = [
    new Question("La Terre est-elle ronde ?", ["Oui", "Non"], "Oui"),
    new Question("Le jeu de Belote fait-il 32 cartes ?", ["Oui", "Non"], "Oui")

  ];
  console.log(questions);
  class Quiz {
    constructor(questions) {
      this.score = 0;
      this.questions = questions;
      this.currentQuestionIndex = 0;
    }
    getCurrentQuestion() {
      return this.questions[this.currentQuestionIndex];
    }
    guess(answer) {
      if (this.getCurrentQuestion().isCorrectAnswer(answer)) {
        this.score++;
      }
      this.currentQuestionIndex++;
    }
    hasEnded() {
      return this.currentQuestionIndex >= this.questions.length;
    }
  }
  // Regroup all  functions relative to the App Display
  const display = {
    elementShown: function(id, text) {
      let element = document.getElementById(id);
      element.innerHTML = text;
    },
    endQuiz: function() {
      endQuizHTML = `
        <h1>Conformité Terminée !</h1>
        <h1>Imprimez le Résulat</h1>
        <h3> Votre score est de : ${quiz.score} / ${quiz.questions.length}</h3>`;
      this.elementShown("quiz", endQuizHTML);
    },
    question: function() {
      this.elementShown("question", quiz.getCurrentQuestion().text);
    },
    choices: function() {
      let choices = quiz.getCurrentQuestion().choices;
      guessHandler = (id, guess) => {
        document.getElementById(id).onclick = function() {
          quiz.guess(guess);
          quizApp();
        }
      }
      // display choices and handle guess
      for(let i = 0; i < choices.length; i++) {
        this.elementShown("choice" + i, choices[i]);
        guessHandler("guess" + i, choices[i]);
      }
    },
    progress: function() {
      let currentQuestionNumber = quiz.currentQuestionIndex + 1;
      this.elementShown("progress", "Question " + currentQuestionNumber + " sur " + quiz.questions.length);
    },
  };

  // Game logic
  quizApp = () => {
    if (quiz.hasEnded()) {
      display.endQuiz();
      window.print();
    } else {
      display.question();
      display.choices();
      display.progress();
    } 
  }
  // Create Quiz
  let quiz = new Quiz(questions);
  quizApp();

  console.log(quiz);

Bonjour,

A priori, le code prévoit déjà le calcul des résultats
Mais il manque du code HTML pour afficher les éléments, les questions, les choix, ...

<div id="quiz"></div>
<div id="progress"></div>
<div id="question"></div>

Bonjour,

Merci pour votre réponse
Je suis replongé dans mon HTML
Le calcul des résultats c'est ok !

Code : Tout sélectionner

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
  <title>Quiz</title>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <link href="./style.css" rel="stylesheet">
</head>

<body>

  <div class="container">
    <div id="quiz">
      <h1><span>Q</span>uiz <i class="far fa-question-circle"></i></h1>

      <h2 id="question"></h2>
        
      <h3 id="score"></h3>

      <div class="choices">
        <button id="guess0" class="btn">        
          <p id="choice0"></p>
        </button>

        <button id="guess1" class="btn">
          <p id="choice1"></p>
        </button>
          
      <p id="progress"></p>

    </div>
  </div>
   
  <script src="./script.js" type="text/javascript" ></script>
</body>


</html>

Maintenant, il manque plus qu'à réussir à afficher, à la fin, les questions et les choix sous forme de synthèse/liste et pour l'instant je n'ai pas trouvé de solutions...

Avez-vous une idée de comment faire ?
Je suis preneur d'un coup de pouce s'il vous plaît (indications, tutos, everything,...)

Encore merci pour ce que vous faites et le temps pris pour me répondre

Bonjour

Une fois le résultat obtenu, l'affichage sur l'écran est le plus simple avec innerHTML
https://www.toutjavascript.com/referenc ... erhtml.php

Il suffit d'écrire :

Code : Tout sélectionner

document.getElementById("affiche").innerHTML=resultat

En ajoutant bien sur un div#affiche :

Code : Tout sélectionner

<div id="affiche"></div>

Forums Tout JavaScript

JavaScript :Afficher questions et réponses à la fin du quizz

JavaScript :Afficher questions et réponses à la fin du quizz

Re: JavaScript :Afficher questions et réponses à la fin du quizz

Re: JavaScript :Afficher questions et réponses à la fin du quizz

Re: JavaScript :Afficher questions et réponses à la fin du quizz