Ijs2019medienpartner.jpg

SELFHTML ist in diesem Jahr Medienpartner der IJC.

Für die Konferenz vom 21. – 25. Oktober 2019 in München verlosen wir ein Freiticket.

Weitere Informationen finden sich im SELFHTML-Forum.

JavaScript/Tutorials/Spiele/Multiple-Choice-Quiz

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
45-60min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
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), was im Deutschen Single Choice entspricht, während mehrere gültige Antwortmöglichkeiten im Englischen als multiple response bezeichnet wird

Spielidee[Bearbeiten]

  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[Bearbeiten]

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

Beispiel: 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.

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[Bearbeiten]

Beispiel: 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 Zuständ erkennen kann.

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

JavaScript[Bearbeiten]

Datenstruktur[Bearbeiten]

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.

Beispiel: 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&shy;steuerung anwählbar ist?',
	solution: '&lt;span tabindex="0">Pick me!&lt;/span>',
	falses: ['&lt;a class="button">Pick me!&lt;/a>', '&lt;span role="button">Pick me!&lt;/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 ::::::: hat. Sie sind durch Komma getrennt. Die ::::::: 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[Bearbeiten]

Beispiel: Das fertige Multiple-Choice-Quiz ansehen …