Quiz - Question pour une calculatrice


Accueil > Projets > Quiz - Question pour une calculatrice

Par Ponsson M., Willhelm T. en novembre 2020

Ce projet a été réalisé par des élèves en spécialité NSI du Lycée Louis Pasteur. Ils sont également les auteurs de ce compte rendu. Pour en savoir plus : Les projets en spécialité NSI

Ne trouvez-vous pas qu’internet et plus précisément les entreprises qui y travaillent, veulent faire des profits par la publicité ou par la récolte de vos donnée personnelle par la création de compte, l’utilisation de site et par des questionnaires en lignes qui ont pour seul but de revendre vos informations.
Et bien, on vous propose de répondre à un questionnaire sans publicité ni récolte des données personnelle mais en plus on vous propose un questionnaire avec pour seul but de vous divertir.

I - Le questionnaire

Le questionnaire est un intègrement JavaScript.

Au lancement du script, la première fonction buildQuiz(){} permet, comme l’indique son nom, la création du quiz en 3 étapes :

Tout d’abord, ces 3 étapes sont rentrées dans un fonction myQuestions.forEach(), elle débute par la création d’une liste vide pour stocker la liste des réponses possibles const answers = [].
Suite à cela et pour toutes les réponses possible, elle crée un bouton permettant la validation de la réponse souhaiter.
Et pour finir, elle affiche la question, les réponses et les boutons permettant de passer à la questions suivante ou précédente et si c’est la dernière question, elle affiche un bouton supplémentaire permettant de faire vérifier ses réponses.

  1. function buildQuiz(){
  2.     const output = [];
  3.  
  4.     myQuestions.forEach(
  5.       (currentQuestion, questionNumber) => {
  6.  answers
  7.        
  8.         // stockage des différentes réponses
  9.         const answers = [];
  10.  
  11.         for(letter in currentQuestion.answers){
  12.  
  13.           answers.push(
  14.             `<label>
  15.               <input type="radio" name="question${questionNumber}" value="${letter}">
  16.               ${letter} :
  17.               ${currentQuestion.answers[letter]}
  18.             </label>`
  19.           );
  20.         }
  21.  
  22.         output.push(
  23.           `<div class="slide">
  24.             <div class="question"> ${currentQuestion.question} </div>
  25.             <div class="answers"> ${answers.join("")} </div>
  26.           </div>`
  27.         );
  28.       }
  29.     );
  30.  
  31.     quizContainer.innerHTML = output.join('');
  32.   }

Télécharger

Il s’en suit de la deuxième fonction function showResults(){} .

Cette fonction permet de trouver la réponse sélectionnée par l’utilisateur puis elle garde une trace des réponses qui seront utiliser pour savoir si celle-ci sont correcte ou fausse et ça permettra de retourner un résultat sous forme de fraction (combien sont juste sur le nombre total de question) et sous forme visuelle par la couleur rouge si la réponse est fausse ou verte pour l’inverse.

  1. function showResults(){
  2.     const answerContainers = quizContainer.querySelectorAll('.answers');
  3.  
  4.     let numCorrect = 0;
  5.  
  6.     myQuestions.forEach( (currentQuestion, questionNumber) => {
  7.  
  8.       const answerContainer = answerContainers[questionNumber];
  9.       const selector = `input[name=question${questionNumber}]:checked`;
  10.       const userAnswer = (answerContainer.querySelector(selector) || {}).value;
  11.  
  12.       // si la réponse est juste
  13.       if(userAnswer === currentQuestion.correctAnswer){
  14.         // incrémente le nombre de réponse juste
  15.         numCorrect++;
  16.        
  17.  
  18.         // met la bonne réponse en vert
  19.         answerContainers[questionNumber].style.color = 'lightgreen';
  20.       }
  21.       // si la réponse est fausse ou vide cela met la réponse en rouge
  22.       else{
  23.         // color the answers red
  24.         answerContainers[questionNumber].style.color = 'red';
  25.       }
  26.  
  27.     });
  28.  
  29.     // afficher le nombre de réponses correctes sur le total des questions
  30.     resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length}`;
  31.   }

Télécharger

Pour finir il reste 3 fonctions :

La fonction showSlide(n) {} que nous avons beaucoup de mal à comprendre.

  1. function showSlide(n) {
  2.     slides[currentSlide].classList.remove('active-slide');
  3.     slides[n].classList.add('active-slide');
  4.     currentSlide = n;
  5.     if(currentSlide === 0){
  6.       previousButton.style.display = 'none';
  7.     }
  8.     else{
  9.       previousButton.style.display = 'inline-block';
  10.     }
  11.     if(currentSlide === slides.length-1){
  12.       nextButton.style.display = 'none';
  13.       submitButton.style.display = 'inline-block';
  14.     }
  15.     else{
  16.       nextButton.style.display = 'inline-block';
  17.       submitButton.style.display = 'none';
  18.     }
  19.   }

Télécharger

Et deux fonctions permettant de passer d’une question à l’autre, showNextSlide() {} , et de pouvoir retourner en arrière, showPreviousSlide() {} .

  1. function showNextSlide() {
  2.     showSlide(currentSlide + 1);
  3.   }
  4.  
  5.   function showPreviousSlide() {
  6.     showSlide(currentSlide - 1);
  7.   }

Télécharger

Il reste encore les variables permettant de contenir les différentes partie de l’ensemble d’une questions c’est-à-dire la question, les réponses et la bonne question :

  1.   // Variables
  2.   const quizContainer = document.getElementById('quiz');
  3.   const resultsContainer = document.getElementById('results');
  4.   const submitButton = document.getElementById('submit');

Télécharger

Il ne reste donc plus qu’à ajouter les questions :

  1. const myQuestions = [
  2.     {
  3.       question: "Que signifie WWW?",
  4.       answers: {
  5.         a: "World Wide Web ",
  6.         b: "World Withdraw War",
  7.         c: "We Will Wock you  "
  8.       },
  9.       correctAnswer: "a"
  10.     }

Télécharger

Si vous voulais en ajouter d’autre, il suffit de mettre une virgule après la dernière accolade et copier/coller le modèle (l.2 à l.10), et bien sûr en le modifiant
PS : la dernière question ne doit pas ce finir avec la virgule précédemment ajouter.

Ce qui nous rend ceci :

II - Le CSS

Vous voici dans la partie visuelle du site où nous avons utilisé un code css à la porter de toutes les personnes se débrouillant un peu avec le css. Nous avons choisit de mettre des couleurs sobres qui ont la particularité de ne pas agresser vos yeux (même si ils restent éblouis par la beauté du site ^^).
Voici pour les deux premières pages :

  1. h1{
  2.         margin-top: 30px;
  3.                
  4. }
  5. body{
  6.         font-size: 20px;
  7.         font-family:  serif;
  8.         color: #333;
  9.     font-weight: 300;
  10.     text-align: center;
  11.     background-color: #f8f6f0;
  12. }
  13. ul {
  14.   list-style-type: none;
  15.   margin: 0;
  16.   padding: 0;
  17.   overflow: hidden;
  18.   background-color: #111;
  19.   position: fixed;
  20.   top: 0;
  21.   width: 100%;
  22. }
  23. li {   
  24.         float: left;
  25.     display: inline;
  26. }
  27. li a {
  28.   display: block;
  29.   color: white;
  30.   text-align: center;
  31.   padding: 14px 16px;
  32.   text-decoration: none;
  33. }
  34. .active {
  35.   background-color: #279;
  36.   color: #279;
  37. }
  38. li a:hover {
  39.   background-color: #279;
  40. }
  41. html, body, #container {
  42.     width: 100%;
  43.     height: 100%;
  44.     margin: 0;
  45.     padding: 0;
  46.         background-color: #f8f6f0;
  47. }
  48. h1{
  49.   font-weight: 300;
  50.   padding-bottom: 2px;
  51.   padding-top: 25px;
  52.   font-size: 20px;
  53.   background-color: #444;
  54.   color: #fff;
  55. }
  56. .question{
  57.   font-size: 30px;
  58.   margin-bottom: 10px;
  59. }
  60. .answers {
  61.   margin-bottom: 20px;
  62.   text-align: left;
  63.   display: inline-block;
  64. }
  65. .answers label{
  66.   display: block;
  67.   margin-bottom: 10px;
  68. }
  69. button{
  70.   font-family: 'Work Sans', sans-serif;
  71.         font-size: 22px;
  72.         background-color: #279;
  73.         color: #fff;
  74.         border: 0px;
  75.         border-radius: 3px;
  76.         padding: 20px;
  77.         cursor: pointer;
  78.         margin-bottom: 20px;
  79. }
  80. button:hover{
  81.         background-color: #38a;
  82. }
  83. .slide{
  84.   position: absolute;
  85.   left: 0px;
  86.   top: 0px;
  87.   width: 100%;
  88.   z-index: 1;
  89.   opacity: 0;
  90.   transition: opacity 0.5s;
  91. }
  92. .active-slide{
  93.   opacity: 1;
  94.   z-index: 2;
  95. }
  96. .quiz-container{
  97.   position: relative;
  98.   height: 200px;
  99.   margin-top: 40px;
  100. }
  101. body {
  102.   font-family: 'Open Sans', sans-serif;
  103.   font-weight: 300;
  104.   text-align: center;
  105.   color: #7f7e7e;
  106.   background-color: #ececec;
  107.   margin: 0;
  108.   padding: 0;
  109. }
  110. h2 {
  111.   margin: 35px;
  112.   font-weight: 300;
  113. }
  114. a{
  115.         text-decoration: none;
  116.         color: #a8a8a8;
  117. }
  118. footer {
  119.     display: flex;
  120.         position: bottom;
  121.         left: 0;
  122.         bottom: 0;
  123.         width: 100%;
  124.         text-align: center;
  125.     justify-content: center;
  126.     padding: 5px;
  127.     background-color: #111;
  128.     color: #ffffff;    
  129. }

Télécharger

Et pour la dernière page avec des légères modifications :

  1. body{
  2.         font-size: 20px;
  3.         font-family:  serif;
  4.         color: #333;
  5.     font-weight: 300;
  6.     text-align: center;
  7.     background-color: #f8f6f0;
  8. }
  9. footer {
  10.     display: flex;
  11.         left: 0;
  12.         bottom: 0;
  13.         width: 100%;
  14.         text-align: center;
  15.     justify-content: center;
  16.     padding: 5px;
  17.     background-color: #111;
  18.     color: #ffffff;    
  19. }
  20. ul {
  21.   list-style-type: none;
  22.   margin: 0;
  23.   padding: 0;
  24.   overflow: hidden;
  25.   background-color: #111;
  26.   position: fixed;
  27.   top: 0;
  28.   width: 100%;
  29. }
  30. h1{
  31.         padding-bottom: 2px;
  32.         padding-top: 25px;
  33.     color: black;
  34.     background-color: white;   
  35.         margin-block-end: none;
  36. }
  37. a{
  38.         text-decoration: none;
  39.         color: #a8a8a8;
  40. }
  41. li {
  42.   float: left;
  43.   display: inline;
  44. }
  45. li a {
  46.   display: block;
  47.   color: white;
  48.   text-align: center;
  49.   padding: 14px 16px;
  50.   text-decoration: none;
  51. }
  52. .active {
  53.   background-color: #279;
  54.   color: #279;
  55. }
  56. li a:hover {
  57.   background-color: #279;
  58. }
  59. html, body, #container {
  60.     width: 100%;
  61.     height: 100%;
  62.     margin: 0;
  63.     padding: 0;
  64.         background-color: #f8f6f0;
  65. }
  66. body {
  67.   font-family: 'Open Sans', sans-serif;
  68.   font-weight: 300;
  69.   text-align: center;
  70.   color: #7f7e7e;
  71.   background-color: #ececec;
  72.   margin: 0;
  73.   padding: 0;
  74. }
  75. p{
  76.         padding-top: 50px;
  77.         margin-left: 10%;
  78.         margin-right: 10%;
  79.         color: black;  
  80. }

Télécharger

Cela donne ceci :

III - HTML

Notre site se compose de trois pages html : une page d’acceuil, un page où se trouve le questionnaire et une dernière avec un graphique.

Pour cela, nous avons mis en place des liens qui redirige votre demande sur la page souhaiter avec des balises < a > qui permettent de rentrer un lien html et nous les avons mis dans une liste ordonnée (< li >) qui est elle même dans une liste non ordonnée (< ul >). Nous avons volontairement mis une liste ordonnée dans une liste non ordonnée pour pouvoir grâce au css donner de l’esthétisme au site.

Voici l’ensemble des codes :

question_pour_une_calculatrice.zip (ZIP - 8.8 ko)
question_pour_une_calculatrice.zip

Mots-clés