So erstellen Sie ein einfaches JavaScript -Quiz: Code -Tutorial

Quiz machen Spaß! Sie sind eine großartige Möglichkeit, über neue Themen zu lernen, und sie ermöglichen es Ihnen, Ihr Publikum mit etwas Lustigem und Verspieltem zu engagieren. Aus der Sicht eines Entwicklers: "Wie mache ich ein JavaScript -Quiz?" ist eine der häufigsten Fragen, die von Menschen gestellt werden, die Webentwicklung lernen, und aus gutem Grund.

Ihr eigenes JavaScript -Quizspiel codieren, ist eine fantastische Lernübung. Es unterrichtet Ihnen, wie Sie mit Ereignissen umgehen, die DOM manipulieren, die Benutzereingaben behandeln und mit lokalem Speicher der Punktzahl verfolgen können. Wenn Sie ein grundlegendes Quiz in Betrieb haben, gibt es eine ganze Reihe von Möglichkeiten, um fortgeschrittenere Funktionen wie Pagination hinzuzufügen.

In diesem Tutorial werde ich Sie durchführen, um ein Quiz in JavaScript zu erstellen, das Sie an Ihre Anforderungen anpassen und Ihrer eigenen Website hinzufügen können. Wenn Sie sehen möchten, was wir enden werden, können Sie den funktionierenden JavaScript -Quizcode sehen.

Get unser kostenloses Buch: Lernen Sie, mit JavaScript zu codieren.

Dinge, die Sie vor dem Start

bewusst sind,

Hier sind einige Dinge zu wissen, bevor Sie anfangen:

Dies ist ein Front-End-Tutorial, was bedeutet, dass jeder, der weiß, wie man den Quellcode einer Seite schaut, die Antworten finden. Für schwerwiegende Quiz müssen die Daten über das Back -End behandelt werden, was über den Rahmen dieses Tutorials hinausgeht.
Der Code in diesem Artikel verwendet die moderne JavaScript -Syntax (ES6), was bedeutet, dass er nicht mit einer Version von Internet Explorer kompatibel ist. Es wird jedoch bei modernen Browsern, einschließlich Microsoft Edge, einwandfrei funktionieren.
Wenn Sie ältere Browser unterstützen müssen, habe ich ein JavaScript Quiz -Tutorial geschrieben, das mit IE8 kompatibel ist. Oder, wenn Sie eine Auffrischung auf ES6 möchten, sehen Sie sich diesen Kurs von Darin Haener auf SitePoint Premium an.
Sie benötigen eine gewisse Vertrautheit mit HTML, CSS und JavaScript, aber jede Codezeile wird einzeln erklärt.

Schritt 1 - Die Grundstruktur Ihres JavaScript -Quizs

Idealerweise möchten wir, dass die Fragen und Antworten des Quiz in unserem JavaScript -Code sein und unser Skript die Quiz -App automatisch generieren lassen. Auf diese Weise müssen wir nicht viel wiederholtes Markup schreiben, und wir können Fragen leicht hinzufügen und entfernen.

In diesem Beispiel werden wir unser Projekt mit drei Schlüsseldateien strukturieren:

Eine HTML -Datei für die grundlegende Benutzeroberfläche (UI).
Eine CSS -Datei zum Styling.
Eine JavaScript -Datei, um die gesamte interaktive Funktionalität zu verwalten.

Wenn Sie jedoch bevorzugen, können Sie auch den CSS- und JavaScript -Code direkt in die HTML -Datei als Inline -Code einfügen.

Wenn Sie lernen, wie man in HTML und JavaScript ein Quiz erstellt, ist es wichtig zu verstehen, wie die HTML -Struktur mit der JavaScript -Logik interagiert. Lassen Sie uns als erster Schritt die HTML -Struktur unseres JavaScript -Quizspiels einrichten.

• a
  , um den Quiz zu halten
• a , um die Antworten zu senden.
• a
  , um die Ergebnisse anzuzeigen.

  So würde das aussehen:

  <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>

  Diese Struktur ist ein einfaches Beispiel für das Erstellen von Quiz -HTML -Code, der als Grundlage für Ihre JavaScript -Quizvorlage dient. Wenn Sie die Bewerbung jetzt ausführen, sehen Sie nur eine Schaltfläche "Quiz senden".

  Schritt 2 - Initialisieren Sie JavaScript -Variablen

  Jetzt können wir das JavaScript -Dokument verwenden.

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

  Das nächste, was unsere Quiz -App benötigt, sind einige Fragen, die angezeigt werden müssen. Wir werden JavaScript -Objektliterale verwenden, um die einzelnen Fragen und ein Array darzustellen, um alle Fragen zu behalten, aus denen unsere Quiz -App besteht. Die Verwendung eines Arrays macht die Fragen leicht zu iterieren:

  <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>

  Fühlen Sie sich gerne so viele Fragen oder Antworten, wie Sie möchten.

  Hinweis : Da dies ein Array ist, werden die Fragen in der Reihenfolge angezeigt, in der sie aufgeführt sind. Wenn Sie die Fragen in irgendeiner Weise sortieren möchten, bevor Sie sie dem Benutzer präsentieren, lesen Sie unseren schnellen Tipp auf ein Array von Objekten in JavaScript .

  Schritt 3 - Erstellen Sie die Quizfunktion

  Jetzt, da wir unsere Liste mit Fragen haben, können wir sie auf der Seite anzeigen. Dafür werden wir eine Funktion namens BuildQuix () verwenden. Lassen Sie uns die folgende JavaScript -Zeile per Leitung durchlaufen, um zu sehen, wie es funktioniert:

  <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>

  Erstens erstellen wir eine Ausgangsvariable, die alle HTML -Ausgaben enthalten, einschließlich Fragen und Beantwortung der Auswahlmöglichkeiten.

  Als nächstes können wir die HTML für jede Frage bauen. Wir müssen jede Frage wie folgt durchlaufen:

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

  Für die Kürze verwenden wir eine Pfeilfunktion, um unsere Vorgänge für jede Frage auszuführen. Da sich dies in einer für die Ereignisschleife befindet, erhalten wir den aktuellen Wert, den Index (die Positionsnummer des aktuellen Elements im Array) und das Array selbst als Parameter. Wir brauchen nur den aktuellen Wert und den Index, der für unsere Zwecke die aktuelle Frage bzw. der Fragestnumme nennen.

  Schauen wir uns jetzt den Code in unserer Schleife an:

  <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>

  Für jede Frage möchten wir die richtige HTML generieren. Unser erster Schritt ist also, ein Array zu erstellen, um die Liste der möglichen Antworten zu halten.

  Als nächstes werden wir eine Schleife verwenden, um die möglichen Antworten für die aktuelle Frage auszufüllen. Für jede Wahl erstellen wir ein HTML -Optionsfeld, das wir in ein -Element einschließen. Dies stellt sicher, dass Benutzer überall auf den Antworttext klicken können, um diese Antwort auszuwählen. Wenn das Etikett weggelassen würde, müssten Benutzer auf das Optionsfeld selbst klicken, was nicht sehr zugänglich ist.

  Hier verwenden wir Vorlagenliterale, die Strings sind, aber mächtiger sind. Wir werden die folgenden Funktionen von Vorlagenliteralen verwenden:

  • Multi-Line-Funktionen.
  • Sie müssen keine Escape -Zitate in Anführungszeichen verwenden, da Vorlagen Literale Backstricks verwenden.
  • String Interpolation ermöglicht das Einbetten von JavaScript -Ausdrücken direkt in Ihre Zeichenfolgen wie folgt: $ {code_goes_here}.

  Sobald wir unsere Liste der Antwortschaltflächen haben, können wir die Frage HTML und die Antwort HTML auf unsere Gesamtliste der Ausgänge drücken.

  Beachten Sie, dass wir eine Vorlage buchstäblich und einige eingebettete Ausdrücke verwenden, um zuerst die Frage Div zu erstellen und dann die Antwort Div zu erstellen. Der Join -Ausdruck nimmt unsere Liste der Antworten auf und stellt sie in einer Zeichenfolge zusammen, die wir in unsere Antworten div.

  ausgeben können.

  Jetzt, da wir die HTML für jede Frage generiert haben, können wir uns alles zusammenschließen und sie auf der Seite zeigen:

  <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>

  Jetzt ist unsere BuildQuiz -Funktion vollständig und Sie sollten in der Lage sein, die Quiz -App auszuführen und die angezeigten Fragen anzusehen.

  

  Die Struktur Ihres Codes ist jedoch wichtig. Aufgrund der sogenannten temporalen Totenzone können Sie Ihr Fragearray nicht verweisen, bevor es definiert wurde.

  Um es zu rekapuieren, ist dies die richtige Struktur:

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

  Schritt 4 - Zeigen Sie die Quizergebnisse

  an

  Zu diesem Zeitpunkt möchten wir unsere ShowResults -Funktion erstellen, um die Antworten zu schleifen, sie zu überprüfen und die Ergebnisse anzuzeigen. Dies ist ein entscheidender Bestandteil eines Quizspiels -JavaScript -Implementierung, da es dem Benutzer aufgrund seiner Leistung ein sofortiges Feedback bietet.

  Hier ist die Funktion, die wir als nächstes im Detail durchführen werden:

  <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>

  Erstens wählen wir alle Antwortcontainer in der HTML unseres Quizs aus. Anschließend erstellen wir Variablen, um die aktuelle Antwort des Benutzers und die Gesamtzahl der korrekten Antworten zu verfolgen.

  <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>

  Jetzt können wir jede Frage durchlaufen und die Antworten überprüfen.

  Wir werden 3 Schritte dafür verwenden:

  Finden Sie die ausgewählte Antwort im HTML.
  Behandeln Sie, was passiert, wenn die Antwort korrekt ist.
  Behandeln Sie, was passiert, wenn die Antwort falsch ist.

  schauen wir uns genauer an, wie wir die ausgewählte Antwort in unserem HTML finden:

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

  Erstens stellen wir sicher, dass wir in den Antwortcontainer nach der aktuellen Frage suchen.

  In der nächsten Zeile definieren wir einen CSS -Selektor, mit dem wir herausfinden können, welches Optionsfeld überprüft wird.

  Dann verwenden wir den QuerySelector von JavaScript, um nach unserem CSS -Selektor im zuvor definierten Antwortkontainer zu suchen. Im Wesentlichen bedeutet dies, dass wir herausfinden, welches Optionsfeld der Antwort überprüft wird.

  Schließlich können wir den Wert dieser Antwort erhalten, indem wir .Value.

  Umgang mit unvollständiger Benutzereingabe

  Was ist, wenn der Benutzer eine Antwort leer gelassen hat? In diesem Fall würde die Verwendung von .value einen Fehler verursachen, da Sie nicht den Wert von etwas erhalten, das nicht da ist. Um dies zu lösen, haben wir || hinzugefügt, was "oder" und {} bedeutet, was ein leeres Objekt ist. In der Gesamtaussage heißt es nun:

  • Erhalten Sie einen Verweis auf unser ausgewähltes Antwortelement oder verwenden Sie ein leeres Objekt.
  • Erhalten Sie den Wert von allem, was in der ersten Aussage war.

  Infolgedessen ist der Wert entweder die Antwort des Benutzers oder undefiniert, was bedeutet, dass ein Benutzer eine Frage überspringen kann, ohne unsere Quiz -App zu stürzen.

  Bewertung der Antworten und Anzeigen des Ergebniss

  Die nächsten Aussagen in unserer Antwort-Überprüfungsschleife lassen uns korrekte und falsche Antworten behandeln.

  <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>

  Wenn die Antwort des Benutzers mit der richtigen Auswahl übereinstimmt, erhöhen Sie die Anzahl der korrekten Antworten um eins und (optional) die Auswahlmenge grün. Wenn die Antwort falsch oder leer ist, färben Sie die Antwortauswahl rot (erneut optional).

  Sobald die Antwort-Überprüfungsschleife abgeschlossen ist, können wir zeigen, wie viele Fragen der Benutzer richtig gemacht haben:

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

  Und jetzt haben wir ein funktionierendes JavaScript -Quiz!

  Wenn Sie möchten, können Sie das gesamte Quiz in ein IIfe einwickeln (sofort auf Funktionsausdruck), was eine Funktion ist, die sobald Sie es definieren. Dies hält Ihre Variablen aus dem globalen Umfang fern und stellt sicher, dass Ihre Quiz -App keine anderen auf der Seite ausgeführten Skripte beeinträchtigt.

  <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>

  Jetzt sind Sie fertig! Fühlen Sie sich frei, Fragen und Antworten hinzuzufügen oder zu entfernen und das Quiz zu stylen, wie Sie möchten.

  Wenn Sie nun die Bewerbung ausführen, können Sie die Antworten auswählen und das Quiz einreichen, um die Ergebnisse zu erhalten.

  

  Schritt 5 - Styles

  hinzufügen

  Seit jetzt haben wir ein funktionierendes Quiz, machen wir es benutzerfreundlicher, indem wir einige Stile hinzufügen. Ich werde jedoch nicht auf Details zu jedem Stil eingehen. Sie können den folgenden Code direkt in die Datei styles.css kopieren.

  <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>

  Zu diesem Zeitpunkt könnte Ihr Quiz so aussehen (mit einem kleinen Stück Styling):

  Schritt 6 - Implementierung von Pagination

  Wie Sie in den obigen Bildern sehen können, werden die Fragen im Quiz nacheinander bestellt. Wir müssen nach unten scrollen, um unsere Antworten auszuwählen. Obwohl dies mit drei Fragen in Ordnung aussieht, können Sie sich bemühen, sie zu beantworten, wenn die Anzahl der Fragen zunimmt. Wir müssen also einen Weg finden, um jeweils nur eine Frage durch Pagination zu zeigen.

  dafür benötigen Sie:

  • Eine Möglichkeit, Fragen zu zeigen und zu verbergen.
  • Schaltflächen zum Navigieren durch das Quiz.

  Lassen Sie uns also einige Anpassungen an unserem Code vornehmen, beginnend mit 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>

  Das meiste von diesem Markup ist das gleiche wie zuvor, aber jetzt haben wir Navigationsschaltflächen und einen Quizbehälter hinzugefügt. Der Quiz -Container hilft uns, die Fragen als Ebenen zu positionieren, die wir anzeigen und verbergen können.

  Als nächstes müssen wir innerhalb der BuildQuiz -Funktion ein

  -Element mit Klassen Folie hinzufügen, um die von uns erstellten Frage zu halten und zu beantworten:

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

  Als nächstes können wir einige CSS -Positionierung verwenden, um die Folien als Schichten aufeinander zu sitzen. In diesem Beispiel werden Sie feststellen, dass wir Z-Indexes und Opazitätsübergänge verwenden, damit unsere Folien ein- und ausblenden. So könnte dieses CSS aussehen:

  <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>

  Jetzt werden wir ein JavaScript hinzufügen, um die Pagination funktionieren zu lassen. Nach wie vor ist die Bestellung wichtig, also ist dies die überarbeitete Struktur unseres 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>

  Wir können mit einigen Variablen beginnen, um Verweise auf unsere Navigationsschaltflächen zu speichern und verfolgen, auf welcher Folie wir uns befinden. Fügen Sie diese nach dem Aufruf an BuildQuiz () hinzu, wie oben gezeigt:

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

  Als nächstes schreiben wir eine Funktion, um eine Folie anzuzeigen. Fügen Sie dies unter den vorhandenen Funktionen hinzu (BuildQuiz und 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>

  Hier ist, was die ersten drei Zeilen tun:

  • Verblenden Sie die aktuelle Folie, indem Sie die Active-Slide-Klasse entfernen.
  • Zeigen Sie die neue Folie an, indem Sie die Active-Slide-Klasse hinzufügen.
  • Aktualisieren Sie die aktuelle Foliennummer.

  Die nächsten Zeilen führen die folgende JavaScript -Logik ein:

  • Wenn wir uns auf der ersten Folie befinden, verstecken Sie die vorherige Schaltfläche vorher. Ansonsten zeigen Sie die Schaltfläche.
  Wenn wir uns auf der letzten Folie befinden, verstecken Sie die Taste
  • Nächste Folie und zeigen Sie die Taste Senden an. Andernfalls zeigen Sie die Taste nächste Folie und verbergen Sie die Taste enden .

  Nachdem wir unsere Funktion geschrieben haben, können wir Showlide (0) sofort aufrufen, um die erste Folie anzuzeigen. Dies sollte nach dem Paginierungscode erfolgen:

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

  Als nächstes können wir Funktionen schreiben, damit die Navigationsschaltflächen funktionieren. Diese gehen unter die ShowSlide -Funktion:

  <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>

  Hier verwenden wir unsere ShowSlide -Funktion, damit unsere Navigationsschaltflächen die vorherige Folie und die nächste Folie anzeigen können.

  Schließlich müssen wir die Navigationsschaltflächen an diese Funktionen anschließen. Dies kommt am Ende des Codes:

  <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>

  Jetzt hat Ihr Quiz eine funktionierende Navigation!

  Was kommt als nächstes?

  Jetzt, da Sie eine grundlegende JavaScript -Quiz -App haben, ist es Zeit, kreativ zu werden und zu experimentieren.

  Hier sind einige Vorschläge, die Sie versuchen können:

  • Versuchen Sie verschiedene Möglichkeiten, auf eine korrekte Antwort oder eine falsche Antwort zu reagieren.
  • style das Quiz schön.
  • Fügen Sie eine Fortschrittsleiste hinzu.
  • Lassen Sie Benutzer Antworten vor dem Senden überprüfen.
  • Geben Sie den Benutzern eine Zusammenfassung ihrer Antworten, nachdem sie sie eingereicht haben.
  • Aktualisieren Sie die Navigation, um die Benutzer zu einer beliebigen Fragennummer überspringen zu lassen.
  • Erstellen Sie benutzerdefinierte Nachrichten für jede Ergebnissestufe. Wenn beispielsweise jemand 8/10 oder höher bewertet, nennen Sie ihn einen Quiz Ninja.
  • Fügen Sie eine Schaltfläche hinzu, um die Ergebnisse in den sozialen Medien zu teilen.
  • Speichern Sie Ihre hohen Punktzahlen mit Lokalstorage.
  • Fügen Sie einen Countdown -Timer hinzu, um festzustellen, ob die Leute die Uhr schlagen können.
  • Wenden Sie die Konzepte aus diesem Artikel auf andere Verwendungszwecke an, z.

  FAQs, wie man ein einfaches JavaScript -Quiz

  erstellt

  Wie kann ich dem JavaScript -Quiz weitere Fragen hinzufügen?

  Hinzufügen von weiteren Fragen zu Ihrem JavaScript -Quiz ist ein einfacher Prozess. Sie müssen dem Fragen -Array in Ihrem JavaScript -Code weitere Objekte hinzufügen. Jedes Objekt repräsentiert eine Frage und hat zwei Eigenschaften: Text (die Frage selbst) und Antworten (eine Reihe möglicher Antworten). Hier ist ein Beispiel dafür, wie Sie eine neue Frage hinzufügen können:

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

  In diesem Beispiel fügen wir eine Frage zur Hauptstadt Frankreichs mit vier möglichen Antworten hinzu. Die richtige Antwort ist mit "Richtig: True" gekennzeichnet.

  Wie kann ich die Reihenfolge der Fragen im Quiz randomisieren?

  Randomisierung der Reihenfolge der Fragen kann Ihr Quiz herausfordernder und unterhaltsamer machen. Sie können dies erreichen, indem Sie die Sort () -Methode in Kombination mit der Funktion math.random () verwenden. So können Sie es tun:

  <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>

  Dieser Code sortiert das Fragenarray bei der Seite nach dem Zufallsprinzip.

  Wie kann ich dem Quiz einen Timer hinzufügen?

  Hinzufügen eines Timers kann Ihr Quiz spannender machen. Mit der Funktion JavaScript setInterval () können Sie dem Quiz einfach einen Timer hinzufügen. Hier ist ein einfaches Beispiel:

  <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>

  In diesem Beispiel dauert das Quiz 30 Sekunden lang. Der Timer wird jede Sekunde aktualisieren, und wenn die Zeit abgelaufen ist, wird ein Alarm angezeigt.

  Wie kann ich die richtige Antwort zeigen, wenn der Benutzer es falsch macht?

  Sie können die richtige Antwort anzeigen, indem Sie die Funktion checkanswer () ändern. Sie können der IF -Anweisung eine weitere Klausel hinzufügen, die überprüft, ob die Antwort korrekt ist. So können Sie es tun:

  <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>

  In diesem Beispiel wird in diesem Beispiel die Antwort des Benutzers mit der richtigen Antwort angezeigt.

  Wie kann ich den Fragen Bilder hinzufügen?

  Sie können Ihren Fragen Bilder hinzufügen, indem Sie den Fragenobjekten eine Eigenschaft "Bild" hinzufügen. Sie können diese Eigenschaft dann verwenden, um das Bild in Ihrem HTML anzuzeigen. Hier ist ein Beispiel:

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

  In Ihrem HTML können Sie das Bild wie folgt anzeigen:

  <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>

  und in Ihrem JavaScript können Sie das SRC -Attribut des Bildes aktualisieren, wenn Sie eine neue Frage anzeigen:

  <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>

  In diesem Beispiel wird ein Bild eines Elefanten angezeigt, wenn die Frage angezeigt wird.

  Wie gehe ich mit mehreren korrekten Antworten in einem JavaScript -Quiz um.

  Um mit mehreren korrekten Antworten zu handeln, können der Benutzer mehr als eine Antwort auswählen und überprüfen, ob eine der ausgewählten Antworten korrekt ist. Beispielsweise können Sie die obige Funktion "ShowResults () aktualisieren, um mehrere korrekte Antworten zu verarbeiten.

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

  Ist es notwendig, die separate JavaScript -Datei und eine CSS -Datei zu verwalten?

  Die Wartung separater JavaScript- und CSS -Dateien ist kein Muss. Es wird jedoch allgemein als bewährte Verfahren angesehen, da es die Lesbarkeit und Wartbarkeit Ihres Codes verbessert.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein einfaches JavaScript -Quiz: Code -Tutorial. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!