Comment faire un simple questionnaire JavaScript –

Voici à quoi cela ressemblerait:

 Soumettre le quiz 

Nous peut alors sélectionner ces éléments HTML et stocker leurs références dans des variables comme ceci:

 const quizContainer = document.getElementById ('quiz');
const resultsContainer = document.getElementById ('résultats');
const submitButton = document.getElementById ('soumettre');

Ensuite, nous aurons besoin d'un moyen de créer un quiz, d'afficher les résultats et de tout assembler. Nous pouvons commencer par présenter nos fonctions, et nous les remplirons au fur et à mesure:

 function buildQuiz () {}

fonction showResults () {}

// afficher le quiz tout de suite
buildQuiz ();

// sur soumettre, afficher les résultats
submitButton.addEventListener ('cliquez', showResults);

Ici, nous avons des fonctions pour construire le quiz et afficher les résultats. Nous exécuterons immédiatement notre fonction buildQuiz et nous exécuterons notre fonction showResults lorsque l'utilisateur cliquera sur le bouton Envoyer.

Affichage des questions du questionnaire

chose dont notre quiz a besoin est quelques questions à afficher. Nous utiliserons des littéraux d'objets pour représenter les questions individuelles et un tableau pour contenir toutes les questions qui composent notre quiz. L'utilisation d'un tableau facilitera l'itération des questions sur:

 const myQuestions = [
  {
    question: "Who invented JavaScript?",
    answers: {
      a: "Douglas Crockford",
      b: "Sheryl Sandberg",
      c: "Brendan Eich"
    },
    correctAnswer: "c"
  },
  {
    question: "Which one of these is a JavaScript package manager?",
    answers: {
      a: "Node.js",
      b: "TypeScript",
      c: "npm"
    },
    correctAnswer: "c"
  },
  {
    question: "Which tool can you use to ensure code quality?",
    answers: {
      a: "Angular",
      b: "jQuery",
      c: "RequireJS",
      d: "ESLint"
    },
    correctAnswer: "d"
  }
];

N'hésitez pas à poser autant de questions ou de réponses que vous le souhaitez.

Remarque: comme il s'agit d'un tableau, les questions s'affichent dans l'ordre dans lequel elles sont répertoriées. Si vous souhaitez trier les questions de quelque manière que ce soit avant de les présenter à l'utilisateur, consultez notre astuce sur pour trier un tableau d'objets en JavaScript .

Maintenant que nous avons notre liste de questions, nous pouvons les montrer sur la page. Nous allons parcourir la ligne JavaScript suivante ligne par ligne pour voir comment cela fonctionne:

 function buildQuiz () {
  // variable pour stocker la sortie HTML
  const const = [];

  // pour chaque question ...
  myQuestions.forEach (
    (currentQuestion, questionNumber) => {

      // variable pour stocker la liste des réponses possibles
      const réponses = [];

      // et pour chaque réponse disponible ...
      pour (lettre dans currentQuestion.answers) {

        // ... ajoute un bouton radio HTML
        answers.push (
          `
            
             $ {letter}:
            $ {currentQuestion.answers [letter]}
           »
        );
      }

      // ajoute cette question et ses réponses à la sortie
      output.push (
        `
 $ {currentQuestion.question} 
        
  $ {answers.join ('')} 
`
      );
    }
  );

  // enfin combiner notre liste de sortie en une seule chaîne HTML et la mettre sur la page
  quizContainer.innerHTML = output.join ('');
}

Premièrement, nous créons une variable de sortie pour contenir toute la sortie HTML, y compris les choix de questions et de réponses.

Ensuite, nous pouvons commencer à construire le code HTML pour chaque question. Nous devons parcourir chaque question comme suit:

 myQuestions.forEach ((currentQuestion, questionNumber) => {
  // le code que nous voulons exécuter pour chaque question va ici
});

Par souci de concision, nous utilisons une fonction de flèche pour effectuer nos opérations sur chaque question. Comme il s'agit d'une boucle forEach nous obtenons la valeur actuelle, l'index (le numéro de position de l'élément actuel dans le tableau) et le tableau lui-même en tant que paramètres. Nous avons seulement besoin de la valeur actuelle et de l'index, qui pour nos besoins, nous nommerons currentQuestion et questionNumber respectivement.

Maintenant, regardons le code dans notre boucle: [19659024] // nous voulons stocker la liste des choix de réponse
const réponses = [];

// et pour chaque réponse disponible …
pour (lettre dans currentQuestion.answers) {

  // … ajoute un bouton radio html
  answers.push (
    `

$ {lettre}:
      $ {currentQuestion.answers [letter]}
     »
  );
}

// ajoute cette question et ses réponses à la sortie
output.push (
  `

`
);

Pour chaque question, nous voulons générer le code HTML correct, et donc notre première étape consiste à créer un tableau pour contenir la liste des réponses possibles.

Ensuite, nous utiliserons une boucle pour remplir le réponses possibles à la question actuelle. Pour chaque choix, nous créons un bouton radio HTML, que nous enfermons dans un élément . Cela permet aux utilisateurs de cliquer n'importe où sur le texte de la réponse pour sélectionner cette réponse. Si l'étiquette était omise, les utilisateurs devraient cliquer sur le bouton radio lui-même, qui n'est pas très accessible.

Remarquez que nous utilisons les littéraux de modèle qui sont des chaînes mais plus puissantes. Nous utiliserons les fonctionnalités suivantes:

• capacités multi-lignes
• plus besoin de échapper entre guillemets entre guillemets parce que les littéraux de modèle utilisent à la place des raccourcis
• interpolation de chaîne, afin que vous puissiez intégrer Expressions JavaScript directement dans vos chaînes comme ceci: $ {code_goes_here} .

Une fois que nous avons notre liste de boutons de réponse, nous pouvons pousser la question HTML et la réponse HTML sur notre liste globale de sorties. [19659005] Notez que nous utilisons un modèle littéral et quelques expressions intégrées pour créer d'abord le div de la question, puis créer le div de la réponse. L'expression join prend notre liste de réponses et les rassemble dans une chaîne que nous pouvons afficher dans nos réponses div.

Maintenant que nous avons généré le code HTML pour chaque question , nous pouvons le joindre tous ensemble et l'afficher sur la page:

 quizContainer.innerHTML = output.join ('');

Maintenant, notre fonction buildQuiz est terminée.

Vous devriez pouvoir exécuter le quiz à ce stade et voir les questions affichées. Veuillez noter, cependant, que la structure de votre code est importante. En raison de quelque chose appelé zone morte temporelle vous ne pouvez pas référencer votre tableau de questions avant qu'il ne soit défini.

Pour récapituler, voici la structure correcte:

 // Fonctions
fonction buildQuiz () {...}
fonction showResults () {...}

// Variables
const quizContainer = document.getElementById ('quiz');
const resultsContainer = document.getElementById ('résultats');
const submitButton = document.getElementById ('soumettre');
const myQuestions = [ ... ];

// Coup d'envoi
buildQuiz ();

// Auditeurs d'événements
submitButton.addEventListener ('cliquez', showResults);

Affichage des résultats du questionnaire

À ce stade, nous voulons développer notre fonction showResults pour parcourir les réponses, les vérifier et afficher les résultats.

Voici la fonction, qui nous allons voir en détail ensuite:

 fonction showResults () {

  // rassembler les conteneurs de réponses de notre quiz
  const answerContainers = quizContainer.querySelectorAll ('. réponses');

  // garder une trace des réponses de l'utilisateur
  laissez numCorrect = 0;

  // pour chaque question ...
  myQuestions.forEach ((currentQuestion, questionNumber) => {

    // trouver la réponse sélectionnée
    const answerContainer = answerContainers [questionNumber];
    const selector = `input [name=question${questionNumber}]: vérifié`;
    const userAnswer = (answerContainer.querySelector (selector) || {}). value;

    // si la réponse est correcte
    if (userAnswer === currentQuestion.correctAnswer) {
      // ajouter au nombre de bonnes réponses
      numCorrect ++;

      // colorie les réponses en vert
      answerContainers [questionNumber] .style.color = 'vert clair';
    }
    // si la réponse est fausse ou vide
    autre{
      // colorie les réponses en rouge
      answerContainers [questionNumber] .style.color = 'red';
    }
  });

  // affiche le nombre de réponses correctes sur le total
  resultsContainer.innerHTML = `$ {numCorrect} sur $ {myQuestions.length}`;
}

Tout d'abord, nous sélectionnons tous les conteneurs de réponses dans le code HTML de notre quiz. Ensuite, nous créerons des variables pour garder une trace de la réponse actuelle de l'utilisateur et du nombre total de bonnes réponses.

 // rassembler les conteneurs de réponses de notre quiz
const answerContainers = quizContainer.querySelectorAll ('. réponses');

// garder une trace des réponses de l'utilisateur
laissez numCorrect = 0;

Maintenant, nous pouvons parcourir chaque question et vérifier les réponses.

 // pour chaque question ...
myQuestions.forEach ((currentQuestion, questionNumber) => {

  // trouver la réponse sélectionnée
  const answerContainer = answerContainers [questionNumber];
  const selector = `input [name=question${questionNumber}]: vérifié`;
  const userAnswer = (answerContainer.querySelector (selector) || {}). value;

  // si la réponse est correcte
  if (userAnswer === currentQuestion.correctAnswer) {
    // ajouter au nombre de bonnes réponses
    numCorrect ++;

    // colorie les réponses en vert
    answerContainers [questionNumber] .style.color = 'vert clair';
  }
  // si la réponse est fausse ou vide
  autre{
    // colorie les réponses en rouge
    answerContainers [questionNumber] .style.color = 'red';
  }
});

L'essentiel de ce code est le suivant:

• trouvez la réponse sélectionnée dans le code HTML
• gérez ce qui se passe si la réponse est correcte
• gérez ce qui se passe si la réponse est incorrecte.

Regardons plus de près comment nous trouvons la réponse sélectionnée dans notre HTML:

 // trouver la réponse sélectionnée
const answerContainer = answerContainers [questionNumber];
const selector = `input [name=question${questionNumber}]: vérifié`;
const userAnswer = (answerContainer.querySelector (selector) || {}). value;

Premièrement, nous nous assurons que nous regardons à l'intérieur du conteneur de réponses pour la question actuelle.

Dans la ligne suivante, nous définissons un sélecteur CSS qui nous permettra de trouver quel bouton radio est coché. [19659005] Ensuite, nous utilisons JavaScript querySelector pour rechercher notre sélecteur CSS dans le answerContainer défini précédemment. Essentiellement, cela signifie que nous trouverons la case d'option de la réponse cochée.

Enfin, nous pouvons obtenir la valeur de cette réponse en utilisant .value .

Traitement des entrées utilisateur incomplètes [19659079] Mais que se passe-t-il si l'utilisateur a laissé une réponse vide? Dans ce cas, l'utilisation de .value entraînerait une erreur car vous ne pouvez pas obtenir la valeur de quelque chose qui n'est pas là. Pour résoudre ce problème, nous avons ajouté || qui signifie «ou», et {} qui est un objet vide. Maintenant, l'instruction globale dit:

• Obtenez une référence à notre élément de réponse sélectionné OU, si cela n'existe pas, utilisez un objet vide.
• Obtenez la valeur de ce qui était dans la première instruction.

En tant que résultat, la valeur sera soit la réponse de l'utilisateur, soit indéfinie ce qui signifie qu'un utilisateur peut ignorer une question sans planter notre questionnaire.

Évaluation des réponses et affichage du résultat

Les prochaines instructions de notre la boucle de vérification des réponses nous permettra de gérer les réponses correctes et incorrectes.

 // si la réponse est correcte
if (userAnswer === currentQuestion.correctAnswer) {
  // ajouter au nombre de bonnes réponses
  numCorrect ++;

  // colorie les réponses en vert
  answerContainers [questionNumber] .style.color = 'vert clair';
}
// si la réponse est fausse ou vide
autre{
  // colorie les réponses en rouge
  answerContainers [questionNumber] .style.color = 'red';
}

Si la réponse de l'utilisateur correspond au bon choix, augmentez le nombre de bonnes réponses d'une unité et (facultativement) coloriez l'ensemble des choix en vert. Si la réponse est fausse ou vide, coloriez les choix de réponse en rouge (encore une fois, facultatif).

Une fois la boucle de vérification des réponses terminée, nous pouvons montrer combien de questions l'utilisateur a eu raison:

 // affiche le nombre de bonnes réponses sur le total
resultsContainer.innerHTML = `$ {numCorrect} sur $ {myQuestions.length}`;

Et maintenant, nous avons un quiz JavaScript qui fonctionne!

Si vous le souhaitez, vous pouvez envelopper tout le quiz dans un IIFE (expression de fonction immédiatement invoquée) qui est une fonction qui s'exécute comme dès que vous le définissez. Cela gardera vos variables hors de portée globale et garantira que votre quiz n'interfère pas avec les autres scripts en cours d'exécution sur la page.

 (function () {
  // mettez le reste de votre code ici
}) ();

Maintenant, vous êtes prêt! N'hésitez pas à ajouter ou supprimer des questions et réponses et à personnaliser le quiz comme vous le souhaitez.

À ce stade, votre quiz pourrait ressembler à ceci (avec un tout petit peu de style):

Voir le stylo
JavaScript simple Quiz (No Pagination) de SitePoint ( @SitePoint )
sur CodePen .

Maintenant que nous avons notre questionnaire de base en cours d'exécution, jetons un coup d'œil à d'autres fonctionnalités avancées. Par exemple, supposons que vous ne souhaitiez afficher qu'une seule question à la fois.

Vous aurez besoin de:

• un moyen d'afficher et de masquer les questions
• pour naviguer dans le quiz.

Nous aurons besoin pour faire des mises à jour, commençons par le HTML:

  


 Question précédente 
 Question suivante 
 Soumettre un quiz 

La plupart de ce balisage est le même qu'avant, mais maintenant nous avons ajouté des boutons de navigation et un conteneur de quiz. Le conteneur de quiz nous aidera à positionner les questions en tant que couches que nous pouvons afficher et masquer.

Ensuite, à l'intérieur de la fonction buildQuiz nous devons ajouter un élément

avec la classe slide pour contenir les conteneurs de questions et réponses que nous venons de créer:

 output.push (
  `

    
  $ {currentQuestion.question} 
    
  $ {answers.join (" ")} 
  
`
);

Ensuite, nous pouvons utiliser un positionnement CSS pour faire en sorte que les diapositives reposent en couches les unes sur les autres. Dans cet exemple, vous remarquerez que nous utilisons des index z et des transitions d'opacité pour permettre à nos diapositives de fondre en avant et en arrière. Voici à quoi pourrait ressembler ce CSS:

 .slide {
  position: absolue;
  gauche: 0px;
  haut: 0px;
  largeur: 100%;
  indice z: 1;
  opacité: 0;
  transition: opacité 0,5 s;
}
.active-slide {
  opacité: 1;
  indice z: 2;
}
.quiz-container {
  position: relative;
  hauteur: 200px;
  margin-top: 40px;
}

Nous allons maintenant ajouter du JavaScript pour que la pagination fonctionne. Comme précédemment, l'ordre est important, voici donc la structure révisée de notre code:

 // Fonctions
// Les nouvelles fonctions vont ici

// Variables
// Même code que précédemment

// Coup d'envoi
buildQuiz ();

// Pagination
// Nouveau code ici

// Afficher la première diapositive
showSlide (currentSlide);

// Auditeurs d'événements
// Nouveaux auditeurs d'événements ici

Nous pouvons commencer par certaines variables pour stocker les références à nos boutons de navigation et garder une trace de la diapositive sur laquelle nous nous trouvons. Ajoutez-les après l'appel à buildQuiz () comme indiqué ci-dessus:

 // Pagination
const previousButton = document.getElementById ("précédent");
const nextButton = document.getElementById ("next");
const slides = document.querySelectorAll (". slide");
laissez currentSlide = 0;

Ensuite, nous allons écrire une fonction pour montrer une diapositive. Ajoutez ceci sous les fonctions existantes ( buildQuiz et showResults ):

 fonction showSlide (n) {
  slides [currentSlide] .classList.remove ('active-slide');
  slides [n] .classList.add ('active-slide');
  currentSlide = n;
  if (currentSlide === 0) {
    previousButton.style.display = 'aucun';
  }
  autre{
    previousButton.style.display = 'inline-block';
  }
  if (currentSlide === slides.length-1) {
    nextButton.style.display = 'none';
    submitButton.style.display = 'inline-block';
  }
  autre{
    nextButton.style.display = 'inline-block';
    submitButton.style.display = 'aucun';
  }
}

Voici ce que font les trois premières lignes:

• Masquez la diapositive actuelle en supprimant la classe active-slide .
• Affichez la nouvelle diapositive en ajoutant la active-slide ]
• Mettez à jour le numéro de la diapositive actuelle.

Les lignes suivantes présentent la logique suivante:

• Si nous sommes sur la première diapositive, masquez le bouton Diapositive précédente . Sinon, affichez le bouton.
• Si nous sommes sur la dernière diapositive, masquez le bouton Diapositive suivante et affichez le bouton Soumettre . Sinon, affichez le bouton Diapositive suivante et masquez le bouton Soumettre .

Après avoir écrit notre fonction, nous pouvons immédiatement appeler showSlide (0) pour afficher la première diapositive. Cela devrait venir après le code de pagination:

 // Pagination
...

showSlide (currentSlide);

Ensuite, nous pouvons écrire des fonctions pour faire fonctionner les boutons de navigation. Celles-ci passent sous la fonction showSlide : fonction

 showNextSlide () {
  showSlide (currentSlide + 1);
}

fonction showPreviousSlide () {
  showSlide (currentSlide - 1);
}

Ici, nous utilisons notre fonction showSlide pour permettre à nos boutons de navigation d'afficher la diapositive précédente et la diapositive suivante.

Enfin, nous devons raccrocher les boutons de navigation à ces fonctions. Cela vient à la fin du code:

 // Écouteurs d'événements
...
previousButton.addEventListener ("cliquez", showPreviousSlide);
nextButton.addEventListener ("cliquez", showNextSlide);

Maintenant, votre quiz a une navigation qui fonctionne!

Voir le stylo
Quiz JavaScript simple avec pagination par SitePoint ( @SitePoint )
sur CodePen .

Et après?

Maintenant que vous avez un quiz de base sur JavaScript, il est temps de faire preuve de créativité et d'expérimenter.

Voici quelques suggestions que vous pouvez essayer:

• Essayez différentes façons de répondre à une réponse correcte ou une mauvaise réponse.
• Donnez un style au quiz.
• Ajoutez une barre de progression.
• Laissez les utilisateurs examiner les réponses avant de les soumettre.
• Donnez aux utilisateurs un résumé de leurs réponses après avoir soumis.
• Mettez à jour le navigation pour permettre aux utilisateurs de passer à n'importe quel numéro de question.
• Créez des messages personnalisés pour chaque niveau de résultats. Par exemple, si quelqu'un obtient un score de 8/10 ou plus, appelez-le un ninja du quiz.
• Ajoutez un bouton pour partager les résultats sur les réseaux sociaux.
• Enregistrez vos meilleurs scores en utilisant localStorage .
• Ajoutez un compte à rebours pour voir si les gens peuvent battre le chronomètre.
• Appliquez les concepts de cet article à d'autres utilisations, comme un estimateur de prix de projet ou un «quel-personnage-êtes-vous» social "Quiz.

Yaphi Berhanu est un développeur Web qui aime aider les gens à améliorer leurs compétences de codage. Il écrit des trucs et astuces sur http://simplestepscode.com . Dans son opinion totalement impartiale, il suggère de le vérifier.