Comment faire un simple quiz JavaScript: Tutoriel de code-js tutoriel-php.cn

Comment faire un simple quiz JavaScript: Tutoriel de code

Les quiz sont amusants! Ils sont un excellent moyen d'apprendre de nouvelles matières, et ils vous permettent d'engager votre public avec quelque chose d'amusant et de joueur. Du point de vue d'un développeur, "Comment faire un quiz JavaScript?" est l'une des questions les plus courantes posées par les personnes qui apprennent le développement Web, et pour une bonne raison.

coder votre propre jeu de quiz javascript est un exercice d'apprentissage fantastique. Il vous apprend à gérer les événements, à manipuler le DOM, à gérer l'entrée des utilisateurs et à utiliser le stockage local pour suivre leur score. Lorsque vous avez un quiz de base opérationnel, il y a tout un tas de possibilités pour ajouter des fonctionnalités plus avancées, comme la pagination.

Dans ce tutoriel, je vais vous expliquer comment faire un quiz en JavaScript que vous pourrez vous adapter à vos besoins et ajouter à votre propre site. Si vous souhaitez voir ce que nous finirons, vous pouvez sauter et voir le code de quiz JavaScript en activité.

Pour plus de connaissances et de défis JavaScript plus approfondis, sortez notre livre gratuit: Apprenez à coder avec javascript.

choses à savoir avant de commencer

Voici quelques éléments à savoir avant de commencer:

Il s'agit d'un tutoriel frontal, ce qui signifie que toute personne qui sait parcourir le code source d'une page peut trouver les réponses. Pour les questionnaires sérieux, les données doivent être gérées à travers l'arrière, ce qui dépasse le cadre de ce tutoriel.
Le code de cet article utilise la syntaxe JavaScript moderne (ES6), ce qui signifie qu'elle ne sera compatible avec aucune version d'Internet Explorer. Cependant, cela fonctionnera très bien sur les navigateurs modernes, y compris Microsoft Edge.
Si vous avez besoin de prendre en charge les navigateurs plus âgés, j'ai écrit un tutoriel de quiz JavaScript compatible avec IE8. Ou, si vous souhaitez un rafraîchissement sur ES6, consultez ce cours par Darin Haener sur SitePoint Premium.
Vous aurez besoin d'une certaine familiarité avec HTML, CSS et JavaScript, mais chaque ligne de code sera expliquée individuellement.

Étape 1 - La structure de base de votre quiz javascript

Idéalement, nous voulons que les questions et réponses du quiz soient dans notre code JavaScript et que notre script génère automatiquement l'application du quiz. De cette façon, nous n'aurons pas besoin d'écrire beaucoup de balisage répétitif, et nous pouvons ajouter et supprimer facilement les questions.

Dans cet exemple, nous structurerons notre projet en utilisant trois fichiers clés:

un fichier html pour l'interface utilisateur de base (UI).
un fichier CSS pour le style.
un fichier javascript pour gérer toutes les fonctionnalités interactives.

Cependant, si vous préférez, vous pouvez également inclure le code CSS et JavaScript directement dans le fichier HTML en tant que code en ligne.

Lorsque vous apprenez à faire un quiz dans HTML et JavaScript, il est important de comprendre comment la structure HTML interagit avec la logique JavaScript. Ainsi, en tant que première étape, configurons la structure HTML de notre jeu de quiz JavaScript.

a pour tenir le quiz.
a pour soumettre les réponses.

pour afficher les résultats.

Voici à quoi cela ressemblerait:

<span><span><span><div</span> id<span>="quiz"</span>></span><span><span></div</span>></span>
</span><span><span><span><button</span> id<span>="submit"</span>></span>Submit Quiz<span><span></button</span>></span>
</span><span><span><span><div</span> id<span>="results"</span>></span><span><span></div</span>></span></span>

Copier après la connexion

Cette structure est un exemple simple de la façon de créer du code HTML quiz qui sert de base à votre modèle de quiz javascript. Si vous exécutez l'application maintenant, vous ne verrez qu'un bouton «soumettre quiz».

Étape 2 - Initialiser les variables JavaScript

Maintenant, nous pouvons utiliser la méthode JavaScript Document.getElementById pour sélectionner les éléments HTML ci-dessus et leur stocker des références dans le code de quiz JavaScript comme ci-dessous:

<span>const quizContainer = document.getElementById('quiz');
</span><span>const resultsContainer = document.getElementById('results');
</span><span>const submitButton = document.getElementById('submit');</span>

Copier après la connexion

La prochaine chose dont notre application Quiz a besoin est quelques questions à afficher. Nous utiliserons des littéraux d'objets JavaScript pour représenter les questions individuelles et un tableau pour contenir toutes les questions qui composent notre application de quiz. L'utilisation d'un tableau rendra les questions faciles à itérer:

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

Copier après la connexion

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 apparaîtront dans l'ordre dans lequel ils seront répertoriés. Si vous souhaitez trier les questions de quelque manière que ce soit avant de les présenter à l'utilisateur, consultez notre astuce rapide sur Triant un tableau d'objets en javascript .

Étape 3 - Construisez la fonction de quiz

Maintenant que nous avons notre liste de questions, nous pouvons les montrer sur la page. Pour cela, nous utiliserons une fonction nommée buildQuix (). Passons à la ligne JavaScript suivante en ligne pour voir comment cela fonctionne:

<span>function buildQuiz(){
</span>  <span>// variable to store the HTML output
</span>  <span>const output = [];
</span>
  <span>// for each question...
</span>  myQuestions<span>.forEach(
</span>    <span>(currentQuestion<span>, questionNumber</span>) => {
</span>
      <span>// variable to store the list of possible answers
</span>      <span>const answers = [];
</span>
      <span>// and for each available answer...
</span>      <span>for(letter in currentQuestion.answers){
</span>
        <span>// ...add an HTML radio button
</span>        answers<span>.push(
</span>          <span><span>`<label>
</span></span><span><span>            <input type="radio" name="question<span>${questionNumber}</span>" value="<span>${letter}</span>">
</span></span><span><span>            <span>${letter}</span> :
</span></span><span><span>            <span>${currentQuestion.answers[letter]}</span>
</span></span><span><span>          </label>`</span>
</span>        <span>);
</span>      <span>}
</span>
      <span>// add this question and its answers to the output
</span>      output<span>.push(
</span>        <span><span>`<div > <span>${currentQuestion.question}</span> </div>
</span></span><span><span>        <div > <span>${answers.join('')}</span> </div>`</span>
</span>      <span>);
</span>    <span>}
</span>  <span>);
</span>
  <span>// finally combine our output list into one string of HTML and put it on the page
</span>  quizContainer<span>.innerHTML = output.join('');
</span><span>}</span>

Copier après la connexion

Tout d'abord, nous créons une variable de sortie pour contenir toutes les sorties HTML, y compris les questions et les choix de réponses.

Ensuite, nous pouvons commencer à construire le HTML pour chaque question. Nous devrons parcourir chaque question comme ceci:

myQuestions<span>.forEach( (currentQuestion<span>, questionNumber</span>) => {
</span>  <span>// the code we want to run for each question goes here
</span><span>});</span>

Copier après la connexion

Pour Brevity, nous utilisons une fonction Arrow pour effectuer nos opérations sur chaque question. Parce que c'est dans 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 sous forme de paramètres. Nous n'avons besoin que de la valeur actuelle et de l'index, qui pour nos fins, nous nommerons respectivement CurrentQuestion et QuesterNumber.

Regardons maintenant le code à l'intérieur de notre boucle:

<span>// we'll want to store the list of answer choices
</span><span>const answers = [];
</span>
<span>// and for each available answer...
</span><span>for(letter in currentQuestion.answers){
</span>
  <span>// ...add an html radio button
</span>  answers<span>.push(
</span>    <span><span>`<label>
</span></span><span><span>      <input type="radio" name="question<span>${questionNumber}</span>" value="<span>${letter}</span>">
</span></span><span><span>      <span>${letter}</span> :
</span></span><span><span>      <span>${currentQuestion.answers[letter]}</span>
</span></span><span><span>    </label>`</span>
</span>  <span>);
</span><span>}
</span>
<span>// add this question and its answers to the output
</span>output<span>.push(
</span>  <span><span>`<div > <span>${currentQuestion.question}</span> </div>
</span></span><span><span>  <div > <span>${answers.join('')}</span> </div>`</span>
</span><span>);
</span>

Copier après la connexion

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

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

Ici, nous utilisons des littéraux de modèle, qui sont des cordes mais plus puissants. Nous utiliserons les fonctionnalités suivantes des littéraux de modèle:

Capacités multi-lignes.
Je n'ai pas besoin d'utiliser les citations d'échappement dans les citations car les littéraux des modèles utilisent des backtticks.
L'interpolation de chaîne permet d'intégrer les 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 appuyer sur la question HTML et la réponse HTML sur notre liste globale de sorties.

Notez que nous utilisons un modèle littéral et certaines expressions intégrées pour créer d'abord la question div, puis créer la réponse div. L'expression de jointure prend notre liste de réponses et les rassemble dans une chaîne que nous pouvons publier dans nos réponses div.

Maintenant que nous avons généré le HTML pour chaque question, nous pouvons nous joindre à tout ensemble et le montrer sur la page:

<span><span><span><div</span> id<span>="quiz"</span>></span><span><span></div</span>></span>
</span><span><span><span><button</span> id<span>="submit"</span>></span>Submit Quiz<span><span></button</span>></span>
</span><span><span><span><div</span> id<span>="results"</span>></span><span><span></div</span>></span></span>

Copier après la connexion

Maintenant, notre fonction Buildquiz est terminée, et vous devriez pouvoir exécuter l'application Quiz et voir les questions affichées.

Comment faire un simple quiz JavaScript: Tutoriel de code

Cependant, la structure de votre code est importante. En raison de quelque chose appelé la zone morte temporelle, vous ne pouvez pas référencer votre tableau de questions avant qu'il ne soit défini.

Pour récapituler, c'est la bonne structure:

<span>const quizContainer = document.getElementById('quiz');
</span><span>const resultsContainer = document.getElementById('results');
</span><span>const submitButton = document.getElementById('submit');</span>

Copier après la connexion

Étape 4 - Affichage des résultats du quiz

À ce stade, nous voulons construire notre fonction ShowResults pour enclencher les réponses, les vérifier et montrer les résultats. Il s'agit d'une partie cruciale de toute implémentation JavaScript du jeu de quiz, car elle fournit des commentaires immédiats à l'utilisateur en fonction de ses performances.

Voici la fonction, que nous allons passer en détail ensuite:

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

Copier après la connexion

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

<span>function buildQuiz(){
</span>  <span>// variable to store the HTML output
</span>  <span>const output = [];
</span>
  <span>// for each question...
</span>  myQuestions<span>.forEach(
</span>    <span>(currentQuestion<span>, questionNumber</span>) => {
</span>
      <span>// variable to store the list of possible answers
</span>      <span>const answers = [];
</span>
      <span>// and for each available answer...
</span>      <span>for(letter in currentQuestion.answers){
</span>
        <span>// ...add an HTML radio button
</span>        answers<span>.push(
</span>          <span><span>`<label>
</span></span><span><span>            <input type="radio" name="question<span>${questionNumber}</span>" value="<span>${letter}</span>">
</span></span><span><span>            <span>${letter}</span> :
</span></span><span><span>            <span>${currentQuestion.answers[letter]}</span>
</span></span><span><span>          </label>`</span>
</span>        <span>);
</span>      <span>}
</span>
      <span>// add this question and its answers to the output
</span>      output<span>.push(
</span>        <span><span>`<div > <span>${currentQuestion.question}</span> </div>
</span></span><span><span>        <div > <span>${answers.join('')}</span> </div>`</span>
</span>      <span>);
</span>    <span>}
</span>  <span>);
</span>
  <span>// finally combine our output list into one string of HTML and put it on the page
</span>  quizContainer<span>.innerHTML = output.join('');
</span><span>}</span>

Copier après la connexion

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

Nous utiliserons 3 étapes pour cela:

Trouvez la réponse sélectionnée dans le HTML.
gérer ce qui se passe si la réponse est correcte.
gérer ce qui se passe si la réponse est mauvaise.

Voyons de plus près la façon dont nous trouvons la réponse sélectionnée dans notre HTML:

myQuestions<span>.forEach( (currentQuestion<span>, questionNumber</span>) => {
</span>  <span>// the code we want to run for each question goes here
</span><span>});</span>

Copier après la connexion

Tout d'abord, nous nous assurons que nous recherchons à l'intérieur du conteneur de réponse pour la question actuelle.

Dans la ligne suivante, nous définissons un sélecteur CSS qui nous permettrons de trouver le bouton radio.

Ensuite, nous utilisons le requêtes de JavaScript pour rechercher notre sélecteur CSS dans le contraire de réponse précédemment défini. En substance, cela signifie que nous trouverons le bouton radio de la réponse.

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

traitant des entrées utilisateur incomplètes

Et si l'utilisateur a laissé une réponse vide? Dans ce cas, l'utilisation de. Value provoquerait 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é ||, ce qui signifie «ou», et {}, qui est un objet vide. Maintenant, la déclaration globale indique:

En conséquence, la valeur sera soit la réponse de l'utilisateur, soit indéfinie, ce qui signifie qu'un utilisateur peut ignorer une question sans écraser notre application de quiz.

Évaluer les réponses et afficher le résultat

Les déclarations suivantes de notre boucle de vérification des réponses nous permettra de gérer les réponses correctes et incorrectes.

<span><span><span><div</span> id<span>="quiz"</span>></span><span><span></div</span>></span>
</span><span><span><span><button</span> id<span>="submit"</span>></span>Submit Quiz<span><span></button</span>></span>
</span><span><span><span><div</span> id<span>="results"</span>></span><span><span></div</span>></span></span>

Copier après la connexion

Si la réponse de l'utilisateur correspond au bon choix, augmentez le nombre de réponses correctes par une et (éventuellement) colorer l'ensemble des choix verts. Si la réponse est mauvaise ou vide, colorez les choix de réponse rouge (encore une fois, facultatif).

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

<span>const quizContainer = document.getElementById('quiz');
</span><span>const resultsContainer = document.getElementById('results');
</span><span>const submitButton = document.getElementById('submit');</span>

Copier après la connexion

Et maintenant nous avons un quiz JavaScript fonctionnel!

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

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

Copier après la connexion

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

Maintenant, si vous exécutez l'application, vous pouvez sélectionner les réponses et soumettre le quiz pour obtenir les résultats.

Étape 5 - Ajout de styles

Depuis maintenant, nous avons un quiz de travail, rendons-le plus convivial en ajoutant certains styles. Cependant, je n'entrerai pas dans les détails de chaque style. Vous pouvez copier directement le code ci-dessous dans le fichier styles.css.

<span>function buildQuiz(){
</span>  <span>// variable to store the HTML output
</span>  <span>const output = [];
</span>
  <span>// for each question...
</span>  myQuestions<span>.forEach(
</span>    <span>(currentQuestion<span>, questionNumber</span>) => {
</span>
      <span>// variable to store the list of possible answers
</span>      <span>const answers = [];
</span>
      <span>// and for each available answer...
</span>      <span>for(letter in currentQuestion.answers){
</span>
        <span>// ...add an HTML radio button
</span>        answers<span>.push(
</span>          <span><span>`<label>
</span></span><span><span>            <input type="radio" name="question<span>${questionNumber}</span>" value="<span>${letter}</span>">
</span></span><span><span>            <span>${letter}</span> :
</span></span><span><span>            <span>${currentQuestion.answers[letter]}</span>
</span></span><span><span>          </label>`</span>
</span>        <span>);
</span>      <span>}
</span>
      <span>// add this question and its answers to the output
</span>      output<span>.push(
</span>        <span><span>`<div > <span>${currentQuestion.question}</span> </div>
</span></span><span><span>        <div > <span>${answers.join('')}</span> </div>`</span>
</span>      <span>);
</span>    <span>}
</span>  <span>);
</span>
  <span>// finally combine our output list into one string of HTML and put it on the page
</span>  quizContainer<span>.innerHTML = output.join('');
</span><span>}</span>

Copier après la connexion

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

Étape 6 - Implémentation de pagination

Comme vous pouvez le voir dans les images ci-dessus, les questions du quiz sont commandées les unes après les autres. Nous devons faire défiler vers le bas pour sélectionner nos réponses. Bien que cela ait bien l'air avec trois questions, vous pourriez commencer à avoir du mal à y répondre lorsque le nombre de questions augmente. Nous devons donc trouver un moyen de montrer une seule question à la fois à la pagination.

Pour cela, vous aurez besoin:

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

Alors, faisons quelques ajustements à notre code, en commençant par HTML:

<span><span><span><div</span> id<span>="quiz"</span>></span><span><span></div</span>></span>
</span><span><span><span><button</span> id<span>="submit"</span>></span>Submit Quiz<span><span></button</span>></span>
</span><span><span><span><div</span> id<span>="results"</span>></span><span><span></div</span>></span></span>

Copier après la connexion

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

Ensuite, à l'intérieur de la fonction Buildquiz, nous devons ajouter un élément avec une diapositive de classe pour maintenir les conteneurs de questions et réponses que nous venons de créer:

<span>const quizContainer = document.getElementById('quiz');
</span><span>const resultsContainer = document.getElementById('results');
</span><span>const submitButton = document.getElementById('submit');</span>

Copier après la connexion

Ensuite, nous pouvons utiliser un positionnement CSS pour que les diapositives s'asseyent sous forme de couches les unes sur les autres. Dans cet exemple, vous remarquerez que nous utilisons les indexes z et les transitions d'opacité pour permettre à nos diapositives de s'estomper. Voici à quoi pourrait ressembler CSS:

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

Copier après la connexion

Maintenant, nous allons ajouter du javascript pour faire fonctionner la pagination. Comme précédemment, l'ordre est important, c'est donc la structure révisée de notre code:

<span>function buildQuiz(){
</span>  <span>// variable to store the HTML output
</span>  <span>const output = [];
</span>
  <span>// for each question...
</span>  myQuestions<span>.forEach(
</span>    <span>(currentQuestion<span>, questionNumber</span>) => {
</span>
      <span>// variable to store the list of possible answers
</span>      <span>const answers = [];
</span>
      <span>// and for each available answer...
</span>      <span>for(letter in currentQuestion.answers){
</span>
        <span>// ...add an HTML radio button
</span>        answers<span>.push(
</span>          <span><span>`<label>
</span></span><span><span>            <input type="radio" name="question<span>${questionNumber}</span>" value="<span>${letter}</span>">
</span></span><span><span>            <span>${letter}</span> :
</span></span><span><span>            <span>${currentQuestion.answers[letter]}</span>
</span></span><span><span>          </label>`</span>
</span>        <span>);
</span>      <span>}
</span>
      <span>// add this question and its answers to the output
</span>      output<span>.push(
</span>        <span><span>`<div > <span>${currentQuestion.question}</span> </div>
</span></span><span><span>        <div > <span>${answers.join('')}</span> </div>`</span>
</span>      <span>);
</span>    <span>}
</span>  <span>);
</span>
  <span>// finally combine our output list into one string of HTML and put it on the page
</span>  quizContainer<span>.innerHTML = output.join('');
</span><span>}</span>

Copier après la connexion

Nous pouvons commencer avec certaines variables pour stocker des références à nos boutons de navigation et garder une trace de la diapositive que nous sommes. Ajoutez-les après l'appel à BuildQuiz (), comme indiqué ci-dessus:

myQuestions<span>.forEach( (currentQuestion<span>, questionNumber</span>) => {
</span>  <span>// the code we want to run for each question goes here
</span><span>});</span>

Copier après la connexion

Ensuite, nous allons écrire une fonction pour afficher une diapositive. Ajoutez cela sous les fonctions existantes (buildquiz et showResults):

<span>// we'll want to store the list of answer choices
</span><span>const answers = [];
</span>
<span>// and for each available answer...
</span><span>for(letter in currentQuestion.answers){
</span>
  <span>// ...add an html radio button
</span>  answers<span>.push(
</span>    <span><span>`<label>
</span></span><span><span>      <input type="radio" name="question<span>${questionNumber}</span>" value="<span>${letter}</span>">
</span></span><span><span>      <span>${letter}</span> :
</span></span><span><span>      <span>${currentQuestion.answers[letter]}</span>
</span></span><span><span>    </label>`</span>
</span>  <span>);
</span><span>}
</span>
<span>// add this question and its answers to the output
</span>output<span>.push(
</span>  <span><span>`<div > <span>${currentQuestion.question}</span> </div>
</span></span><span><span>  <div > <span>${answers.join('')}</span> </div>`</span>
</span><span>);
</span>

Copier après la connexion

Voici ce que font les trois premières lignes:

Masquez la diapositive actuelle en supprimant la classe de glissement actif.
Afficher la nouvelle diapositive en ajoutant la classe de glisse active.
Mettez à jour le numéro de diapositif actuel.

Les lignes suivantes introduisent la logique JavaScript suivante:

Si nous sommes sur la première diapositive, cachez le bouton Glissure précédente . Sinon, montrez le bouton.
Si nous sommes sur la dernière diapositive, cachez le bouton Suivant et affichez le bouton Soumettre . Sinon, affichez le bouton Suivant glissière et cachez le bouton soumettre .

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

quizContainer<span>.innerHTML = output.join('');</span>

Copier après la connexion

Ensuite, nous pouvons écrire des fonctions pour faire fonctionner les boutons de navigation. Ceux-ci vont sous la fonction Showerlide:

<span>// Functions
</span><span>function buildQuiz(){ ... }
</span><span>function showResults(){ ... }
</span>
<span>// Variables
</span><span>const quizContainer = document.getElementById('quiz');
</span><span>const resultsContainer = document.getElementById('results');
</span><span>const submitButton = document.getElementById('submit');
</span><span>const myQuestions = [ ... ];
</span>
<span>// Kick things off
</span><span>buildQuiz();
</span>
<span>// Event listeners
</span>submitButton<span>.addEventListener('click', showResults);
</span>

Copier après la connexion

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 devrons accrocher les boutons de navigation à ces fonctions. Cela vient à la fin du code:

<span><span><span><div</span> id<span>="quiz"</span>></span><span><span></div</span>></span>
</span><span><span><span><button</span> id<span>="submit"</span>></span>Submit Quiz<span><span></button</span>></span>
</span><span><span><span><div</span> id<span>="results"</span>></span><span><span></div</span>></span></span>

Copier après la connexion

Maintenant, votre quiz a une navigation de travail!

Quelle est la prochaine étape?

Maintenant que vous avez une application de quiz JavaScript de base, il est temps de faire preuve de créativité et d'expérimentation.

Voici quelques suggestions que vous pouvez essayer:

Essayez différentes façons de répondre à une réponse correcte ou à une mauvaise réponse.
Style le quiz bien.
Ajouter une barre de progression.
Laissez les utilisateurs examiner les réponses avant de soumettre.
Donnez aux utilisateurs un résumé de leurs réponses après les soumettre.
Mettez à jour la navigation pour permettre aux utilisateurs de passer à n'importe quel numéro de question.
Créer des messages personnalisés pour chaque niveau de résultats. Par exemple, si quelqu'un marque 8/10 ou plus, appelez-le un quiz ninja.
Ajouter un bouton pour partager les résultats sur les réseaux sociaux.
Enregistrez vos scores élevés en utilisant LocalStorage.
Ajoutez un compte à rebours pour voir si les gens peuvent battre l'horloge.
Appliquer les concepts de cet article à d'autres utilisations, comme un estimateur de prix du projet, ou un quiz social «ce qui est-ce que vous»

FAQ sur Comment faire un simple quiz JavaScript

Comment puis-je ajouter plus de questions au quiz javascript?

Ajouter plus de questions à votre quiz JavaScript est un processus simple. Vous devez ajouter plus d'objets au tableau des questions dans votre code JavaScript. Chaque objet représente une question et a deux propriétés: le texte (la question elle-même) et les réponses (un éventail de réponses possibles). Voici un exemple de la façon d'ajouter une nouvelle question:

<span>const quizContainer = document.getElementById('quiz');
</span><span>const resultsContainer = document.getElementById('results');
</span><span>const submitButton = document.getElementById('submit');</span>

Copier après la connexion

Dans cet exemple, nous ajoutons une question sur la capitale de la France, avec quatre réponses possibles. La bonne réponse est marquée de «correct: vrai».

Comment puis-je randomiser l'ordre des questions dans le quiz?

La randomisation de l'ordre des questions peut rendre votre quiz plus difficile et amusant. Vous pouvez y parvenir en utilisant la méthode tri () combinée avec la fonction math.random (). Voici comment vous pouvez le faire:

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

Copier après la connexion

Ce code trie au hasard le tableau des questions chaque fois que la page est chargée.

Comment puis-je ajouter une minuterie au quiz?

Ajouter une minuterie peut rendre votre quiz plus excitant. Vous pouvez facilement ajouter une minuterie au quiz à l'aide de la fonction JavaScript setInterval (). Voici un exemple simple:

<span>function buildQuiz(){
</span>  <span>// variable to store the HTML output
</span>  <span>const output = [];
</span>
  <span>// for each question...
</span>  myQuestions<span>.forEach(
</span>    <span>(currentQuestion<span>, questionNumber</span>) => {
</span>
      <span>// variable to store the list of possible answers
</span>      <span>const answers = [];
</span>
      <span>// and for each available answer...
</span>      <span>for(letter in currentQuestion.answers){
</span>
        <span>// ...add an HTML radio button
</span>        answers<span>.push(
</span>          <span><span>`<label>
</span></span><span><span>            <input type="radio" name="question<span>${questionNumber}</span>" value="<span>${letter}</span>">
</span></span><span><span>            <span>${letter}</span> :
</span></span><span><span>            <span>${currentQuestion.answers[letter]}</span>
</span></span><span><span>          </label>`</span>
</span>        <span>);
</span>      <span>}
</span>
      <span>// add this question and its answers to the output
</span>      output<span>.push(
</span>        <span><span>`<div > <span>${currentQuestion.question}</span> </div>
</span></span><span><span>        <div > <span>${answers.join('')}</span> </div>`</span>
</span>      <span>);
</span>    <span>}
</span>  <span>);
</span>
  <span>// finally combine our output list into one string of HTML and put it on the page
</span>  quizContainer<span>.innerHTML = output.join('');
</span><span>}</span>

Copier après la connexion

Dans cet exemple, le quiz durera 30 secondes. La minuterie mettra à jour chaque seconde, et lorsque l'heure sera écoulée, une alerte sera affichée.

Comment puis-je afficher la bonne réponse si l'utilisateur se trompe?

Vous pouvez afficher la bonne réponse en modifiant la fonction CheckansWer (). Vous pouvez ajouter une clause ELSE à l'instruction IF qui vérifie si la réponse est correcte. Voici comment vous pouvez le faire:

<span><span><span><div</span> id<span>="quiz"</span>></span><span><span></div</span>></span>
</span><span><span><span><button</span> id<span>="submit"</span>></span>Submit Quiz<span><span></button</span>></span>
</span><span><span><span><div</span> id<span>="results"</span>></span><span><span></div</span>></span></span>

Copier après la connexion

Dans cet exemple, si la réponse de l'utilisateur est incorrecte, une alerte sera affichée avec la bonne réponse.

Comment puis-je ajouter des images aux questions?

Vous pouvez ajouter des images à vos questions en ajoutant une propriété «image» aux objets de question. Vous pouvez ensuite utiliser cette propriété pour afficher l'image dans votre HTML. Voici un exemple:

<span>const quizContainer = document.getElementById('quiz');
</span><span>const resultsContainer = document.getElementById('results');
</span><span>const submitButton = document.getElementById('submit');</span>

Copier après la connexion

Dans votre HTML, vous pouvez afficher l'image comme ceci:

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

Copier après la connexion

Et dans votre javascript, vous pouvez mettre à jour l'attribut SRC de l'image lors de l'affichage d'une nouvelle question:

<span>function buildQuiz(){
</span>  <span>// variable to store the HTML output
</span>  <span>const output = [];
</span>
  <span>// for each question...
</span>  myQuestions<span>.forEach(
</span>    <span>(currentQuestion<span>, questionNumber</span>) => {
</span>
      <span>// variable to store the list of possible answers
</span>      <span>const answers = [];
</span>
      <span>// and for each available answer...
</span>      <span>for(letter in currentQuestion.answers){
</span>
        <span>// ...add an HTML radio button
</span>        answers<span>.push(
</span>          <span><span>`<label>
</span></span><span><span>            <input type="radio" name="question<span>${questionNumber}</span>" value="<span>${letter}</span>">
</span></span><span><span>            <span>${letter}</span> :
</span></span><span><span>            <span>${currentQuestion.answers[letter]}</span>
</span></span><span><span>          </label>`</span>
</span>        <span>);
</span>      <span>}
</span>
      <span>// add this question and its answers to the output
</span>      output<span>.push(
</span>        <span><span>`<div > <span>${currentQuestion.question}</span> </div>
</span></span><span><span>        <div > <span>${answers.join('')}</span> </div>`</span>
</span>      <span>);
</span>    <span>}
</span>  <span>);
</span>
  <span>// finally combine our output list into one string of HTML and put it on the page
</span>  quizContainer<span>.innerHTML = output.join('');
</span><span>}</span>

Copier après la connexion

Dans cet exemple, une image d'un éléphant sera affichée lorsque la question sera affichée.

Comment gérer plusieurs réponses correctes dans un quiz JavaScript?

Gestion de plusieurs réponses correctes implique de permettre à l'utilisateur de sélectionner plusieurs réponses et de vérifier si l'une des réponses sélectionnées est correcte. Par exemple, voici comment vous pouvez mettre à jour la fonction ShowResults () ci-dessus pour gérer plusieurs réponses correctes.

myQuestions<span>.forEach( (currentQuestion<span>, questionNumber</span>) => {
</span>  <span>// the code we want to run for each question goes here
</span><span>});</span>

Copier après la connexion

est-il nécessaire de maintenir un fichier JavaScript séparé et un fichier CSS?

La maintenance des fichiers JavaScript et CSS séparés n'est pas indispensable. Cependant, il est généralement considéré comme une meilleure pratique car il améliore la lisibilité et la maintenabilité de votre code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!