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.
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:
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:
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
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
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
Copier après la connexion
Copier après la connexion
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
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:
Maintenant, notre fonction Buildquiz est terminée, et vous devriez pouvoir exécuter l'application Quiz et voir les questions affichées.
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.
À 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:
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
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
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
Copier après la connexion
Copier après la connexion
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:
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 tout ce qui était dans la première déclaration.
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.
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:
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.
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
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
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:
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:
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:
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
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
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
Copier après la connexion
Copier après la connexion
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
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:
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:
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:
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:
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
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
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:
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:
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
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
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
Copier après la connexion
Copier après la connexion
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!
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Python convient plus aux débutants, avec une courbe d'apprentissage en douceur et une syntaxe concise; JavaScript convient au développement frontal, avec une courbe d'apprentissage abrupte et une syntaxe flexible. 1. La syntaxe Python est intuitive et adaptée à la science des données et au développement back-end. 2. JavaScript est flexible et largement utilisé dans la programmation frontale et côté serveur.
Les principales utilisations de JavaScript dans le développement Web incluent l'interaction client, la vérification du formulaire et la communication asynchrone. 1) Mise à jour du contenu dynamique et interaction utilisateur via les opérations DOM; 2) La vérification du client est effectuée avant que l'utilisateur ne soumette les données pour améliorer l'expérience utilisateur; 3) La communication de rafraîchissement avec le serveur est réalisée via la technologie AJAX.
L'application de JavaScript dans le monde réel comprend un développement frontal et back-end. 1) Afficher les applications frontales en créant une application de liste TODO, impliquant les opérations DOM et le traitement des événements. 2) Construisez RestulAPI via Node.js et Express pour démontrer les applications back-end.
Comprendre le fonctionnement du moteur JavaScript en interne est important pour les développeurs car il aide à écrire du code plus efficace et à comprendre les goulots d'étranglement des performances et les stratégies d'optimisation. 1) Le flux de travail du moteur comprend trois étapes: analyse, compilation et exécution; 2) Pendant le processus d'exécution, le moteur effectuera une optimisation dynamique, comme le cache en ligne et les classes cachées; 3) Les meilleures pratiques comprennent l'évitement des variables globales, l'optimisation des boucles, l'utilisation de const et de locations et d'éviter une utilisation excessive des fermetures.
Python et JavaScript ont leurs propres avantages et inconvénients en termes de communauté, de bibliothèques et de ressources. 1) La communauté Python est amicale et adaptée aux débutants, mais les ressources de développement frontal ne sont pas aussi riches que JavaScript. 2) Python est puissant dans les bibliothèques de science des données et d'apprentissage automatique, tandis que JavaScript est meilleur dans les bibliothèques et les cadres de développement frontaux. 3) Les deux ont des ressources d'apprentissage riches, mais Python convient pour commencer par des documents officiels, tandis que JavaScript est meilleur avec MDNWEBDOCS. Le choix doit être basé sur les besoins du projet et les intérêts personnels.
Les choix de Python et JavaScript dans les environnements de développement sont importants. 1) L'environnement de développement de Python comprend Pycharm, Jupyternotebook et Anaconda, qui conviennent à la science des données et au prototypage rapide. 2) L'environnement de développement de JavaScript comprend Node.js, VScode et WebPack, qui conviennent au développement frontal et back-end. Le choix des bons outils en fonction des besoins du projet peut améliorer l'efficacité du développement et le taux de réussite du projet.
C et C jouent un rôle essentiel dans le moteur JavaScript, principalement utilisé pour implémenter des interprètes et des compilateurs JIT. 1) C est utilisé pour analyser le code source JavaScript et générer une arborescence de syntaxe abstraite. 2) C est responsable de la génération et de l'exécution de bytecode. 3) C met en œuvre le compilateur JIT, optimise et compile le code de point chaud à l'exécution et améliore considérablement l'efficacité d'exécution de JavaScript.
Python est plus adapté à la science et à l'automatisation des données, tandis que JavaScript est plus adapté au développement frontal et complet. 1. Python fonctionne bien dans la science des données et l'apprentissage automatique, en utilisant des bibliothèques telles que Numpy et Pandas pour le traitement et la modélisation des données. 2. Python est concis et efficace dans l'automatisation et les scripts. 3. JavaScript est indispensable dans le développement frontal et est utilisé pour créer des pages Web dynamiques et des applications à une seule page. 4. JavaScript joue un rôle dans le développement back-end via Node.js et prend en charge le développement complet de la pile.
1676
14
Python vs JavaScript: la courbe d'apprentissage et la facilité d'utilisation
Apr 16, 2025 am 12:12 AM
Javascript et le web: fonctionnalité de base et cas d'utilisation
Apr 18, 2025 am 12:19 AM
JavaScript en action: Exemples et projets du monde réel
Apr 19, 2025 am 12:13 AM
Comprendre le moteur JavaScript: détails de l'implémentation
Apr 17, 2025 am 12:05 AM
Python vs JavaScript: communauté, bibliothèques et ressources
Apr 15, 2025 am 12:16 AM
Python vs JavaScript: environnements et outils de développement
Apr 26, 2025 am 12:09 AM
Le rôle de C / C dans les interprètes et compilateurs JavaScript
Apr 20, 2025 am 12:01 AM
Python vs JavaScript: cas d'utilisation et applications comparées
Apr 21, 2025 am 12:01 AM
