Grundlagen schaffen
Ziel ist es, ein Quiz mit vier Antwortmöglickeiten zu programmieren. Gundlage im HTML-Bereich ist dafür erneut ein Formular. Was muss enthalten sein?
-
ein Textfeld für die Frage
-
vier Buttons, die die Antwortmöglichkeiten vorgeben
-
ein Button für das Aufrufen der nächsten Frage
Ein geeignetes HTML-Dokument mit den passenden Formularfeldern findet ihr hier:
<html> <head> <title>Quiz 01</title> <!-- hier muss dann später der JavaScript-Teil hin --> </head> <body> <h1>Quiz</h1> <!-- die Frage --> <h1 id="Frage">Frage</h1> <!-- die Antwortmöglichkeiten -->
<ul>
<li id="Antwort_A" onClick="Antwort('1');">Antwort 1</li>
<li id="Antwort_B" onClick="Antwort('2');">Antwort 2</li>
<li id="Antwort_C" onClick="Antwort('3');">Antwort 3</li>
<li id="Antwort_D" onClick="Antwort('4');">Antwort 4</li>
</ul> <!-- Rückmeldung --><p id="Feedback">Wähle die richtige Antwort</p>
<!-- Aufruf der nächsten Frage -->
<p onClick="weiter();"> Weiter </p>
</body>
</html>
Bei den Antwortmöglichkeiten ist bereits der Aufruf der Funktion Antwort() mit dem Button verbunden, wobei hier die Nummer der Antwort als Parameter mit übergeben wird. Der Aufruf der nächsten Frage soll mit der Funktion weiter() erfolgen.
<script language="JavaScript">
function Antwort(vNummer) {
alert(vNummer);
}
</script>
Aufgabe 1: Lege in der Datei einen JavaScript-Bereich an und schreibe diese beiden Funktionen:
Antwort gibt als alert() an, welche Antwort gewählt wurde.
weiter() zeigt eine neue Frage mit neuen Antwortmöglichkeiten. Dazu sie weist den Buttons passenden Text zu, z.B. document.Quiz.Frage.value='Was bedeutet RAM?';