JavaScript/Tutorials/Spiele/Multiple-Choice-Quiz

Text-Info

45-60min

mittel

Kenntnisse in
● HTML
● JavaScript

Multiple Choice oder deutsch Mehrfachauswahl, auch Antwort-Wahl-Verfahren, ist eine in Prüfungen, Tests, Klausuren und Umfragen verwendete Fragetechnik, bei der zu einer Frage mehrere vorformulierte Antworten zur Auswahl stehen. So kann man Sachwissen abfragen, ohne dass die Schreibfähigkeiten (und Rechtschreibung) des Prüfenden ins Spiel kommen.

Dabei ist es zu beachten, dass multiple choice im Englischen strikt eine gültige Antwort aus mehreren bedeutet (daher ein falscher Freund (Wikipedia)), was im Deutschen Single Choice entspricht, während mehrere gültige Antwortmöglichkeiten im Englischen als multiple response bezeichnet wird

Spielidee

1. Der Computer gibt eine Frage und mehrere Antwortmöglichkeiten.
   • Dabei werden Fragen und die Antwortmöglichkeiten nach dem Zufallsprinzip gemischt.
2. Der Benutzer kann eine Antwortmöglichkeit mit Klick auswählen.
3. Der Computer berechnet am Ende den Durchschnitt der richtig beantworteten Fragen.

HTML

Wenn man etwas aus mehreren Möglichkeiten auswählen soll, bieten sich Radio-Buttons an:

Formular mit Radiobuttons ansehen …

<form id="quiz" action="">
  <h2>Frage …</h2>
  <ul>
    <li>
      <input type="radio" name="answer" id="a27_0" >
      <label for="a27_0">Antwort 1</label></li>
    <li>
      <input type="radio" name="answer" id="a27_1" >
      <label for="a27_1">Antwort 2</label>
    </li>
    <li>
      <input type="radio" name="answer" id="a27_2"   value="Antwort 3">
      <label for="a27_2">Antwort 3</label>
    </li>
  </ul>
  <button type="submit">confirm choice</button>
</form>

Radio-Buttons (input type="radio") lassen sich über ein gemeinsames name-Attribut miteinander verknüpfen. So kann ein Element ausgewählt werden - wird auf ein anderes geklickt, wird dieses selektiert. Dabei kann nicht nur geklickt werden. Input-Elemente lassen sich auch mit der Tastatur bedienen - was bei anderen Elementen erst mit JavaScript nachgebaut werden müsste.
Die Input-Elemente sind Teil einer Liste. Am Ende gibt es einen Absende-Button.

ansehen …

Da ist ja ein Formular – wir wollten doch aber ein Spiel?

Dies ist die semantisch passende Grundstruktur. Das Aussehen kann mit CSS beliebig verändert werden.

CSS

Gestaltung mit CSS ansehen …

#quiz ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#quiz li {
	margin: 0;
	padding: 0;
}

Zuerst werden nun die Liste (und die damit verbundenen Listenpunkte) ausgeblendet.

#quiz label {
	display: block;
	background-color: #fffbf0;
	border: 2px solid #e7c157;
}

#quiz label:hover {
	background-color: #dfac20;
}

#quiz input:checked ~ label,
#quiz input:focus ~ label  {
	background-color: #dfac20;
	border-color: #866a00;
}

#quiz input {
	left: -9999px;
	position: absolute;
}

Auch die Radio-Buttons (input type="radio") werden links außerhalb des Viewports versteckt. Dafür erhalten die dazugehörigen Labels nun mit display: block; eine Box, die man anklicken oder mit der Tastatur fokussieren kann.

Diese beiden Zustände werden ebenfalls mit CSS so formatiert, dass man den gewählten Zustand erkennen kann.

input:checked ~ label selektiert mit dem Geschwisterselektor den ausgewählten Radio-Button mit seinem Label.

ansehen …

JavaScript

Datenstruktur

Zunächst gilt es zu überlegen, wie man die Fragen/Aufgaben mit ihrer richtigen Antwort und den falschen Antwortmöglichkeiten, sowie einer Erklärung nach der Auswertung strukturiert. Dabei sollte die Datenstruktur so offen sein, dass beliebig viele Aufgaben als auch beliebig viele Antwortmöglichkeiten hinzugefügt werden können, bzw. das Skript im Endzustand mit mehreren Date(i)en mit unterschiedlichen Aufgaben „gefüttert“ werden kann.

Datenstruktur

data: [{
	category: 'Geography',
	question: 'What‘s the Capital of Germany?',
	solution: 'Berlin',
	falses: ['München', 'Bonn', 'Frankfurt'],
	explanation: 'Erklärung'
	}, {
	category: 'HTML',
	question: 'Welches Markup führt dazu, dass das Element per Tastatur­steuerung anwählbar ist?',
	solution: '<span tabindex="0">Pick me!</span>',
	falses: ['<a class="button">Pick me!</a>', '<span role="button">Pick me!</span>'],
	explanation: 'Durch tabindex können Sie jedes Element fokussierbar machen, ein Wert von 0 behält dabei die generische Reihenfolge bei.'
	}],

Unsere Multiple-Choice-Aufgaben sind in einem data-Objekt, das mehrere durch geschweifte Klammern begrenzte Frageobjekte hat. Sie sind durch Komma getrennt. Die Frageobjekte haben innerhalb der geschweiften Klammern mehrere Eigenschaften und dazugehörige Werte. Dies können durch Anführungszeichen gekennzeichnete Strings, Zahlen, Variablen oder wie im Falle der falses auch ein Array aus mehreren kommaseparierten Strings sein.

Das fertige Quiz

Das fertige Multiple-Choice-Quiz ansehen …

ansehen …

Das Quiz-Script ist aus Gründen der einfacheren Handhabung des Weihnachts-Quiz 2016 im HTML-Dokument integriert. Sie können es im Quellcode des Dokuments betrachten und mit dem Seiteninspektor analysieren.

Wenn Sie mehrere Quizze auf einer Seite verwenden wollen, müssen Sie zunächst das eigentliche Script und die Daten (Fragen und Antworten) in zwei JavaScript-Dateien aufspalten und das Script so umschreiben, dass bei einem Aufruf das dazugehörende Datenpaket mit aufgerufen wird.

• Tic-Tac-Toe
• Spiele mit JavaScript
  (Übersicht)
• Adventure

Siehe auch

Der Autor dieses Scripts Felix Riesterer ist seit 2005 bei SELFHTML aktiv. Er hat unter anderem ein JavaScript-Framework für interaktive Lernaufgaben geschrieben, dass unter einer GNU Lesser General Public License (LGPL) verfügbar ist.

Mit diesem können Sie mit einfachsten Mitteln diverse Quizze auf HTML-Seiten erstellen.

• https://www.felix-riesterer.de/main/seiten/rquiz.html