Informatikprojekt Klasse 10

Andreas Meyer

Erläuterung der Programmelemente

Feedback

Die erste mit Java-Script programmierte Seite meiner Homepage war das Feedback.
Ich wollte, das der User mir mitteilen kann, was er an der Seite gut findet und was nicht,
deshalb gab ich ihm die Möglichkeit durch mehrere Auswahllisten eine Benotung für die Seite
zu geben. Allerdings wollte ich nicht nur, das der User das Fomular einfach nur abschickt, er
sollte auch eine Art Rückmeldung zu seiner Benotung erhalten. Einen Noten- durchschnitt zu
berechnen und dem User mitzuteilen schien für mich die beste Möglichkeit.
Die folgende Funktion sollte diese Aufgabe in die Tat umsetzen:
1 function durchschnitt()
2
3 { var summe=document.feedback.feedback01.selectedIndex+1
4 summe+=document.feedback.feedback02.selectedIndex+1
5 summe+=document.feedback.feedback03.selectedIndex+1
6 summe+=document.feedback.feedback04.selectedIndex+1
7 summe/=4
8
9 alert ("Vielen Dank für ihr Feedback! Ihre durchschnittliche Bewertung ist: " +
10 summe);}

In Zeile 3-6 werden die Werte der ausgewählten Auswahllisten (selectedIndex) zusammen
addiert (var x=x+...selectedIndex). Zusätzlich muss für jeden selectedIndex eine 1
hinzuaddiert werden, da der selectedIndex bei 0 anfängt zu zählen. Die ertse Option der
Auswahlliste soll aber den Wert 1 haben, da die erste ausgewählte Note 1 ist. Wenn der User
jetzt also in jeder Auswahlliste die Note 1 wählt, dann ist der zusammengerechnete Wert 4.
Ohe die hinzuaddierten 1en wäre er 0.
In Zeile 7 wird der zusammengerechnete Wert dann durch 4 geteilt (var x/=4). Nun ist der
Durchschnitt in der Variable summe gespeichert.
In Zeile 9-10 wird er nun durch einen alert ausgegeben. Es erscheint der Text (“... “) plus den
Wert der Variable summe, welcher ohne Veränderung der Auswahllisten 1 beträgt.
 Quiz

Als nächstes folgt das Quiz, welches etwas anspruchsvoller gestaltet werden sollte.
Da ich nicht einfach das Quiz System welches wir in der Schule gelernt hatten übernehmen
wollte, habe ich mich dazu entschlossen Multiple Choice Fragen mit Radiobuttons und
Checkboxen zu erstellen. Da wir diese Objekte im Unterricht noch nicht ausgewertet hatten,
informierte ich mich im internet unter http://de.selfhtml.org/. Nach einigem herumprobieren,
und vielen Fehlversuchen bekam ich schliesslich folgendes Ergebniss:

1 function frageA(i)
2 {
3
4 var i = 0
5 if (window.document.quiz.html[1].checked == true)
6 {window.alert ("Frage 1 ist Richtig!");
7 i=i+1; }
8
9
10 if (window.document.quiz.html[0].checked == true ||
11 window.document.quiz.html[2].checked == true)
12 {window.alert ("Frage 1 ist Falsch!");}
13 return frageB(i);
14 }

Als erstes erstellte ich in Zeile 4 die Variable i welche mir als Punkte Zälher dient. Er wird in
die anderen Funktionen übernommen, und wird am später bei der Ausgabe des Ergebnisses
noch gebraucht.
i hat im moment noch den Wert 0.
In Zeile 5 wird nun die Bedingung für eine richtige Antwort festgelegt:
(window.document.quiz.html[1].checked == true )
Das Attribut checked des Objekts html[1] ist = true, wenn der Button (Checkbox) angeklickt
ist. Es prüft also ob es aktiviert ist oder nicht. Mihilfe der Bedingung kann ich nun also
festlegen, das wenn der Radiobutton html[1] aktiviert ist, die Anweisung der If Bedingung
ausgeführt wird. Das sind zum einen, dass durch den window.alert in Zeile 6 eine Meldung
erscheint, welche dem User sagt: "Frage 1 ist Richtig!". Zum anderen wird der oben genannte
Punktezähler i um 1 erhöht, da der User die erste Fragen richtig beantwortet hat.
In Zeile 10 wird nun die gegensäzliche Bedingung für eine falsche Antwort festgelegt:
if (window.document.quiz.html[0].checked == true ||
window.document.quiz.html[2].checked == true)

Wenn nun also das Objekt html[0] oder html[2] angeklickt ist bekommt der User die Antwort:
"Frage 1 ist Falsch!". Das Zeichen “||“ in der Bedingung bedeutet oder wenn also der beiden
Bedingungen true ist, sprich: Das der User eine der beiden falschen antworten angeklickt hat,
dann ist Frage falsch beantwortet worden, und i bleibt 0 der User bekommt hier keinen Punkt.
In Zeile 13 wird die Funktion frageB(i) aufgerufen. In den runden Klammern ist die Variable
i als Parameter gespeichert, das heisst, sie wird in die Funktion frageB(i) übernommen. Das
ist nötig, da die Variable in allen funtionen gebraucht wird. Sie zählt die Punkte von allen
Fragen zusammen.
Das ist die nächste Funktion: function frageB(i) Der Parameter i muss auch hier in den runden
Klammern hinter dem Funktionsnamen stehen.

1 function frageB(i)
2 {
3
4 if (window.document.quiz.tag[3].checked == true)
5 {window.alert ("Frage 2 ist Richtig!");
6 i=i+1; }
7 else
8
9 if (window.document.quiz.tag[0].checked == true ||
10 window.document.quiz.tag[1].checked == true ||
11 window.document.quiz.tag[2].checked == true)
12 {window.alert ("Frage 2 ist Falsch!");}
13 return frageC(i);
14 }

Sie ist genauso aufgebaut, wie die erste Funktion, nur das hier anstatt der Elemente html[0-2]
Die Elemente tag[0-3] benutzt wurden und, dass es eine weite falsche Antwortmöglichkeit
gibt. Am Ende dieser Funktion in Zeile 13 wird nun die Funktion frageC(i) aufgerufen:

1 function frageC(i)
2 {
3 if (window.document.quiz.part[0].checked == true ||
4 window.document.quiz.part[2].checked == true ||
5 window.document.quiz.part[4].checked == true)
6 {window.alert ("Frage 3 ist Falsch!");}
7 else
8
9 if (window.document.quiz.part[1].checked == true &&
10 window.document.quiz.part[3].checked == true)
11 {window.alert ("Frage 3 ist Richtig!");
12 i=i+1; }
13 return punkte(i);
14 }

Diese Funktion ähnelt den anderen Funtionen zwar, ist aber etwas andes, da es hier 2 Richtige
und 3 Falsche Antworten gibt.
In Zeile 3-5 wird die Bedingung fesgelegt, dass sobald eine der falschen Antworten
(part[0],[2],[4]) angeklickt wird, die Meldung für eine Falsche Antwort erscheint. Nur wenn
keine einzige der 3 Antworten angklickt wurde, wird die andere Bedingung möglich.
Wenn jetzt die Objekte part[1] und part[3] aktiviert sind, dann ist die Antwort richtig. Das
Zeichen && bedeutet das gegenteil von || : Es müssen beide Bedingungen erfüllt werden,
damit die Anweisung ausgeführt wird. Es ist wichtig, dass die Bedingung für Falsche
Antwort als erstes steht. Der User kann sonst mehr Antorten als die zwei richtigen anklicken
und trotzdem eine Meldung für eine richtige Antwort erhalten, da die Bedingungen für die
beiden richtigen antworten erfüllt wurden. Am Ende in Zeile 13 wird wieder eine neue
1 (function punkte(i)
Funktion punkte(i)) aufgerufen.
2 {
3 if (i == 0 )
4 { window.alert ("Sie haben leider keine Punkte erreicht!");};
5 if (i > 0)
6 { window.alert ("Sie haben " + i + " Punkt(e) erreicht!");}
7 }
In dieser funktion brauchen wir wieder die Variable i welche inzwischen einen Wert von0 bis
3 haben sollte.
In Zeile 3 wird die Bedingung fesgelegt, für den Fall der User alle Fragen falsch oder garnicht
bentwortet hat. Wenn i = 0 ist, erscheint die Nachricht, für den User, dass er keine Punkte
erreicht hat.
In Zeile 5 wird die Bedingung für einen höheren Wet als 0 fesgelegt. Sollte i größer als 0 sein
erscheint die Nachricht mit den erreichten Punkten. Sie besteht aus drei Teilen, welche mit
einem + verbunden werden: “Sie haben “ + i + “ Punkt(e) erreicht!“.

Der User kann die drei Fragen nach belieben beantworten, und bekommt jedes mal ein
individuelles Ergebniss, für seine gewählten Antworten.