Tutorial Javascript Quiz

In diesem Tutorial wollen wir ein einfaches Webquiz mit JavaScript, HTML und CSS programmieren.

Das Tuturial ist für Anfänger mit geringen Vorkenntnissen gut geeignet.

Inhalt:

1. Benötigte Dateien im Projekt 2. HTML-Seite aufbauen 3. CSS Style 4. Funktionalität mit Javascript 5. Download des ganzen Projekts (Patreon Unterstützer)

1. Benötigte Dateien im Projekt

Wir benötigen folgende Dateien: index.html, style.css, main.js und questions.js und zusätzlich einen Ordner für Bilder bei Bedarf.

2. Grundstruktur der Seite mit HTML erstellen

Zunächst müssen wir unsere Seite mit HTML aufbauen, also die Struktur der Seite.

Der Kopf (head-Bereich) des Dokuments ist später nicht sichtbar, darin sind Metadaten und Verlinkungen von benötigten Ressourcen angegeben. Das sind in diesem Fall die beiden Javascriptdokumente und die CSS-Styleangaben.

Anschließend folgt der body-Bereich. Hier ist der Inhalt der Seite beschrieben. Darin eine Überschrift 1. Ordnung, das ist die Hauptüberschrift. Das Quizpanel besteht aus einer Section. Darin ein Fieldset mit weiteren Containern für das Bild, Links, die Frage und die Antworten.

Auch ein Panel für die Auswertung ist vorhanden, es ist zunächst per CSS ausgeblendet.

index.html:

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">
    <script defer type="text/javascript" src="main.js"></script>
    <script defer type="text/javascript" src="questions.js"></script>
    <title>Geschichte - Quiz</title>
</head>

<body onload="newQuestion()">
  <main class="flex column center">

    <section id="quiz-panel" class="flex column">
      <h1>Das Geschichte-Quiz</h1>

      <fieldset>
        <legend id="question-number">Frage 1</legend>      <!--Nummer der jeweiligen Frage-->         
        <div id="question"></div>
        <div class="flex">
          <figure id="question-image">
            <img src="" alt="Bild zur Quizfrage">      <!--Bild zur jeweiligen Frage-->        
            <figcaption>
                <p></p>                                <!--Hinweis auf die Bildrechte--> 
                <a href="" target="_blank">Lizenz</a>  <!--Link zur Lizenz--> 
            </figcaption>
          </figure>
            
          <div id="answers" class="flex column">

            <label for="a" class="flex">A <input type="radio" id="a" name="quiz" value=0 />
              <div id="answer-a"></div>
            </label><!--Antwort 1 -->

            <label for="b" class="flex">B <input type="radio" id="b" name="quiz" value=1 />
              <div id="answer-b"></div>
            </label><!--Antwort 2 -->

            <label for="c" class="flex">C <input type="radio" id="c" name="quiz" value=2 />
              <div id="answer-c"></div>
            </label><!--Antwort 3 -->

            <label for="d" class="flex">D <input type="radio" id="d" name="quiz" value=3 />
              <div id="answer-d"></div>
            </label><!--Antwort 4 -->

          </div>
        </div>

        <button onclick="answer();">Antworten</button>   
      </fieldset>
        
    </section>

    <section id="evaluation-panel" class="flex column"><!--Auswertung der Antworten am Ende, während des Quiz ausgeblendet-->
            <h2>Quiz Auswertung</h2>
            <div class="flex column"></div>      
            <a href="index.html">Quiz wiederholen</a>        
    </section>

  </main>
</body>
</html>

Werbung (Affiliate - ich bekomme eine kleine Provision, dein Preis ändert sich nicht)

3. CSS Style

Wir müssen natürlich das Aussehen und das Verhalten in Bezug auf die Bildschirmgröße unserer Seite angeben. Sprich wir benötigen auch ein wenig CSS.

Viel CSS ist es nicht: das Hintergrundbild ("images/background.jpg"), die Farbe des Buttons und die Anordung und das flexible Verhalten einiger Elemente wird geregelt. Falls Du CSS noch gar nicht kennst, schau mal in meine CSS-Videoreihe rein.

style.css:

*{
    margin:0; padding:0; box-sizing: border-box;
}

body{
   background-image: url("images/background.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.flex{
     display: flex;
     gap:2rem;
}

.column{
    flex-direction: column;  
}

.center{
    align-items: center; 
    justify-content: center;
}

.start{
    justify-content: start;
}

main{
    width:100vw;
    height:100vh;
    background-color: rgba(0,0,0,0.7); 
}

section{
  width:50vw;  
  box-shadow: 0.2rem 0.2rem grey;
  font-size:1.3rem;  
}

section, fieldset{
    background-color:white;
    border-radius:1rem;
    padding:1rem; 
}

fieldset{
    border: 0.2rem solid black; 
}

button, #evaluation-panel a{
    width:100%;
    border:none;
    margin-top:2rem;
    font-size: 1.5rem;
    border-radius:1rem;
    background-color: darkorange;
    padding:.3rem;
}

#question{
    height:5rem;
}

#question-image img{
   width:10rem;
}

#question-image a, #question-image p{
    font-size:0.7rem;
 }

#evaluation-panel{
    display:none;
}

#evaluation-panel a{
   text-decoration: none;
   text-align: center;
   color: black;
}

.correct{
    color: green;
}

.wrong{
    color: red;
}

@media only screen and (max-width: 800px) {
    section {
      width: 95vw;
    }
  }

Werbung (Affiliate - ich bekomme eine kleine Provision, dein Preis ändert sich nicht)

4. Funktionalität mit Javascript

Die erste Frage, die wir uns stellen müssen ist natürlich, wie speichern und verwalten wir die Daten unserer Quizfragen?

Dafür gibt es natürlich verschiedene Möglichkeiten. Wir könnten eine Datenbank nutzen und die Daten als JSON holen oder aus einer JSON Datei aus dem Dateisystem laden. Da dies ein einfaches Tutorial für Anfänger sein soll, möchte ich hier direkt ein JavaScript Objekt nutzen, welches in unserem Quellcode deklariert ist.

Du benötigen dazu eine Javascript Datei, diese ist im head des HTML-Dokuments bereits angegeben als „questions.js“ Datei. In der Datei ist ein Array deklariert und darin sind JavaScript-Objekte gespeichert, pro Frage eines. Ich habe dafür schon 3 Fragen vorbereitet.

Darin ist folgendes gespeichert: die url des Bildes, eine Angabe zum Copyright, der Link zur Bildlizenz und die Frage selbst.

In diesem Tutorial sind die Bilder über eine absolute URL direkt von Wikipedia verwendet, Du solltest wenn Du ein Quiz veröffentlichst besser deine Bilder mit entsprechender Lizenz über einen absoluten Link angeben.

Die Antworten sind als Array mit den vier Möglichkeiten gespeichert. In der Property "correct" ist gespeichert, welche Antwort richtig ist, d.h. der index der richtigen Antwort im Array.

Bei der ersten Frage zum Beispiel der Index eins, also „Albert Einstein“, „Henry Ford“ wäre falsch den der steht im index 0. Wenn Du eigene Fragen verwenden willst, tausche deine Daten einfache gegen meine Angaben aus.

Die Quizdaten in questions.js:

const quiz = [
    {
       image: "https://upload.wikimedia.org/wikipedia/commons/3/36/Bundesarchiv_Bild_183-19000-1918%2C_Albert_Einstein.jpg",
       imageCopyright: "Wikipedia",
       licenseLink: "https://creativecommons.org/licenses/by-sa/3.0/de/deed.en",

       question: "Welche historische Person ist auf dem Foto abgebildet?",

       answers: [
                 "Henry Ford", "Albert Einstein", "Gerhard Schröder", "Heinz Rühmann"
                ],

       correct: 1
    }
    ,
    {
     image: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Jacques_Bertaux_001.jpg/800px-Jacques_Bertaux_001.jpg",
     imageCopyright: "Gemeinfrei",
     licenseLink: "https://commons.wikimedia.org/wiki/File:Jean_Duplessi-Bertaux_001.jpg?uselang=de#Lizenz",
     
     question: "In welchem Jahr begann die französiche Revolution?",

     answers: [
               "1809", "1945", "1789", "1871"
              ],

     correct: 2
    }
    ,
    {
     image: "https://upload.wikimedia.org/wikipedia/commons/f/f5/Royal_Irish_Rifles_ration_party_Somme_July_1916.jpg",
     imageCopyright: "Gemeinfrei",       
     licenseLink: "https://commons.wikimedia.org/wiki/File:Jean_Duplessi-Bertaux_001.jpg?uselang=de#Lizenz",
     
     question: "Wann begann der erste Weltkrieg?",

     answers: [
               "28. Juli 1914", "13. August 1914", "1. September 1945", "7. Oktober 1949"
              ],

     correct: 0
    }
]

Kommen wir nun also zu dem Script, das für die eigentliche Funktionalität zuständig ist, nennen wir es „main.js“.

Zunächst ist eine Variable für die jeweilige Fragenummer deklariert und zugewiesen. Ausserdem ein Array, in dem wir die Anwortnummern für die jeweilige Frage speichern wollen.

Die erste Funktion „newQuestion()“ wird auch ganz am Anfang einmal aufgerufen, nämlich wenn der body der Seite vollständig geladen ist. In der Funktion müssen wir natürlich die jeweiligen Daten aus der Frage in unser Quizpanel bringen. Welche Frage aktuell dran ist, sagt uns die Variable „questionNumber“, die ganz am Anfang 0 ist. Also der erste index der Variable „quiz“

Da wir jetzt zuerst die Nummer der Frage einfügen wollen, also im Element „legend“, holen wir uns das Element und weisen den jeweiligen Wert zu. Wir holen das Element mit „querySelector“ und nutzen dabei den CSS-Selector. In diesem Fall die id „question-number“. Das gleiche machen wir mit allen anderen Elementen auch. Und weisen dan immer die jeweilige Eigenschaft aus dem Objekt „quiz“ hinzu.

JavaScript-Datei main.js:

let questionNumber = 0;
let answers = [];

function newQuestion(){
    const question = quiz[questionNumber];

    document.querySelector("#question-number").innerText = "Frage: "+ (questionNumber+1);
    document.querySelector("#question").innerText = question.question;
    document.querySelector("#question-image img").src = question.image;
    document.querySelector("#question-image p").innerText = "Copyright: "+question.imageCopyright;
    document.querySelector("#question-image a").href = question.licenseLink;

    document.querySelector("#answer-a").innerText = question.answers[0];
    document.querySelector("#answer-b").innerText = question.answers[1];
    document.querySelector("#answer-c").innerText = question.answers[2];
    document.querySelector("#answer-d").innerText = question.answers[3];
}

Als nächstes müssen wir auf die Antwort des Nutzers reagieren. Die Funktion „answer“ wird vom Antwortbutton mit dem Attribut "onclick" aufgerufen. Dort holen wir uns die 4 möglichen Antworten. Die JS-Funktion „ querySelectorAll“ gibt uns alle 4 Input-Elemente zurück, als Nodelist.

Wir durchlaufen diese mit einer foreach-Schleife und suchen das ausgewählte Element. Die Antwort merken wir uns, indem wir sie in das Array „answers“ speichern. Anschließend müssen wir die „questionNumber“ hochzählen. Denn dann kommt die neue Frage. Aber für den Fall, dass wir das Ende der Fragen erreicht haben, erfolgt die Auswertung.

Zusätzlich in main.js:

function answer(){
    const input = document.querySelectorAll("#answers input");

    input.forEach(element => {
        if(element.checked == true){
            answers.push(element.value);
        }
    });

    console.log(answers);

    questionNumber++;


    if( questionNumber === quiz.length){
        evaluateAnswers();
    }
    else{
        newQuestion();
    }   
}

Für die Auswertung blenden wir erstmal das Quizpanel aus. Dann blenden wir das Auswertungspanel ein.

Anschließend suchen wir uns das Element, wo unser Text für die Auswertung rein soll. Nun laufen wir durch die Fragen in der Variable „quiz“ und vergleiche die Eigenschaft „correct“ mit den gegebenen Antworten im Array „answers“. Daraus erstellen wir jeweils einen Text und fügen diesen dem Auswertungspanel hinzu.

Der Neustart des Quizes erfolgt dann einfach über den Link im Auswertungspanel, der wie ein Button formatiert wurde. Dieser ruft dann index.html auf und die Seite startet neu.

Zusätzlich in main.js:

function evaluateAnswers(){

document.querySelector("#quiz-panel").style.display = "none";
document.querySelector("#evaluation-panel").style.display = "flex";

const parent = document.querySelector("#evaluation-panel div");

  for (let index = 0; index < quiz.length; index++){ 

      let text = (index+1)+") Die Frage war: "+ quiz[index].question; 
      const p = document.createElement("p");

      if(quiz[index].correct == answers[index]){          
          text +=" Deine Anwort war richtig!";
          p.className = "correct";
      }
      else
      {
          text +=" Deine Anwort war falsch!";
          p.className = "wrong";
      }
  
      p.innerText = text;
      parent.appendChild(p);
  }
}

Wenn alles funktioniert sollte die erste Frage erscheinen und das Quiz sollte spielbar sein.

5. Download des ganzen Projekts (Patreon Unterstützer)

Als Patreonunterstützer kannst Du das Projekt komplett runterladen. Aus Lizenzgründen ist das Hintergrundbild im images Ordner nicht enthalten. Du kannst aber ein eigenes Bild ergänzen und "background.jpg" nennen. Viel Spaß!

Tutorial: Einfaches Quiz mit JavaScript programmieren

1. Benötigte Dateien im Projekt

2. Grundstruktur der Seite mit HTML erstellen

3. CSS Style

4. Funktionalität mit Javascript

5. Download des ganzen Projekts (Patreon Unterstützer)