[GELÖST] Quiz mit Checkboxen, Radiobuttons, Texteingaben, Auswahllisten

[Zoodirektor]

Hallo,
ich bin neu im Forum und auch absoluter JS-Anfänger.

Ich habe schon viel nach einer Antwort auf mein Problem gesucht. Hier im Forum wurde ja auch schon einiges über Quiz-Auswertungen gefragt, jedoch hat mir dieses konkret nicht weiterhelfen können.
Ich möchte ein Quiz erstellen, das Radiobuttons, Checkboxen, Texteingaben und Auswahllisten verwendet. Am Ende steht eine Schaltfläche, die die Anzahl richtig und falsch beantworteter Fragen ausgibt.
Die Radiobuttons und der Auswertungsbutton funktionieren so, wie sie sollen.

Aber:
1. Bei den Checkboxen soll es mehrere Auswahlmöglichkeiten geben (Zahlen in den eckigen Klammern). Mit dem Komma, aber auch mit "&" bzw. "&&" zwischen den Zahlen funktioniert es nicht. Mal reicht eine (oder eine richtige und eine falsche) Antwort aus, um die Frage richtig zu beantworten, mal wird jede einzelne Box als richtige Antwort gewertet oder die Frage ist immer falsch beantwortet.
2. Texteingaben werden immer als "richtig" gewertet, sowohl bei falscher als auch bei keiner Eingabe.
3. Auswahllisten werden ebenfalls immer richtig gewertet, da beim Drücken des Auswertungsbuttons automatisch die richtige Auswahl erscheint.

Es scheint also so, als sei da ganz schön der Wurm drin.
Ich hoffe, Ihr könnt mir zeitnah weiterhelfen.
Vielen Dank im Voraus.

function Auswertung()
{
	var richtig = 0;
	var falsch = 0;

	if (document.quiz.frage1[1,2].checked) //Checkbox
	{
		richtig++;
	}
	else
	{
		falsch++;
	}
	
	if (document.quiz.frage2.value == "Gepard" || "gepard") //Texteingabe
	{
		richtig++;
	}
	else
	{
		falsch++;
	}
	
	if (document.quiz.frage3[1].checked) //Radiobutton
	{
		richtig++;
	}
	else
	{
		falsch++;
	}
	
	if (document.quiz.frage4.selectedIndex = 2) //Auswahlliste
	{
		richtig++;
	}
	else
	{
		falsch++;
	}
	
	if (document.quiz.frage5.value == "Elfenbein" || "elfenbein") //Texteingabe
	{
		richtig++;
	}
	else
	{
		falsch++;
	}
	
	if (document.quiz.frage6[1,3].checked) //Checkbox
	{
		richtig++;
	}
	else
	{
		falsch++;
	}
	
	if (document.quiz.frage7[3].checked) //Radiobutton
	{
		richtig++;
	}
	else
	{
		falsch++;
	}
	
	if (document.quiz.frage8.value == "Löwe" || "löwe" || "Loewe" || "loewe" || "Leu" || "leu") //Texteingabe
	{
		richtig++;
	}
	else
	{
		falsch++;
	}
	
	if (document.quiz.frage9.selectedIndex = 5) //Auswahlliste
	{
		richtig++;
	}
	else
	{
		falsch++;
	}
	
	if (document.quiz.frage10[2].checked) //Radiobutton
	{
		richtig++;
	}
	else
	{
		falsch++;
	}

	alert("Auswertung:\n\nRichtig beantwortete Fragen: " + richtig + " von 10\n\nFalsch beantwortete Fragen: " + falsch + " von 10");
}

 

[miniA4kuser]

Checkboxen:
Du musst jede einzelne Checkbox prüfen, ob diese gecheckt ist oder nicht und das dann logisch verknüpfen. Heißt, wenn Checkbox Frage1 1 gecheckt ist und Checkbox Frage1 2 gecheckt is, dann...:

	if (document.quiz.frage1[1].checked === true && document.quiz.frage1[2].checked === true) //Checkbox
	{
		richtig++;
	}
	else
	{
		falsch++;
	}

Texteingaben:
Das || ist eine logische Oder-Verknüpfung und trennt deine if-Abfrage in diese logische Blöcke. So wird aus deiner ertsen if-Abfrage dann soetwas: Wenn document.quiz.frage2.value == "Gepard" ist oder "gepard" ist dann ...
Der erste Block ist ein Vergleich, wobei der Einsatz von 3 Gleichheitszeichen === auch einen Typenvergleich mitmacht und daher dies verwendet werden sollte. Der zweite Block ist einfach nur eine Zeichenkette (String) und da dieser 'korrekt' (also kein undefinierter Wert) ist und somit wahr, trifft spätestens das immer zu und die Antwort wird als 'richtig' gewertet. Als schnelle Lösung würde ich am Anfang der Funktion eine weitere Variablen einfügen: richtiger_text als ein Array, welches alle richtigen Texte enthält:

var richtiger_text = [];

Über die Array-Methode indexOf() dann nachschauen, ob der Wert (Zeichenkette) vorhanden ist:

	richtiger_text = ["Gepard", "gepard"];
	if (richtiger_text.indexOf(document.quiz.frage2.value) !== -1) //Texteingabe
	{
		richtig++;
	}
	else
	{
		falsch++;
	}

Auswahlliste:
Ein einfaches Gleichzeichen = ist eine Zuweisung, du willst aber vergleichen. Siehe Kommentar Texteingaben:. ALso:

	if (document.quiz.frage4.selectedIndex === 2) //Auswahlliste
	{
		richtig++;
	}
	else
	{
		falsch++;
	}

 

[Zoodirektor]

Vielen Dank, miniA4kuser, für die schnelle und ausführliche Antwort.
Du hast mir wirklich geholfen. Jetzt funktioniert alles und ich bin ein ganzes Stück schlauer geworden.

Der Thread wäre dann wohl gelöst.

 

[miniA4kuser]

Gern geschehn

 

[kkapsner]

Kleine Kommentare:

	if (document.quiz.frage1[1].checked === true && document.quiz.frage1[2].checked === true)

Kann man kürzer/lebarer schreiben:

	if (document.quiz.frage1[1].checked && document.quiz.frage1[2].checked)

Wenn case insensitiv geprüft werden soll, ist es einfacher, wenn man den Wert vor dem Vergleich einfach in Kleinbuchstaben umwandelt:

	var richtiger_text = ["gepard"];
	if (richtiger_text.indexOf(document.quiz.frage2.value.toLowerCase()) !== -1)

(Hier bitte auch das var beachten, das oben bei miniA4kuser einmal fehlt. Ohne das wird eine globale Variable erzeugt.)

Bei den Auswahllisten würde ich immer auf den Wert der <option> prüfen und nicht auf dem Index. Dann kann man schnell mal eine neue <option> einfügen oder die <option>s umsortieren ohne das JS umschreiben zu müssen:

<select name="frage4">
	<option value="Oger">Oger</option>
	<option value="Zwerge">Zwerge</option>
	<option value="Riesen">Riesen</option>
</select>

	if (document.quiz.frage4.value === "Zwerge")

Hat auch noch den positiven Effekt, dass der JS-Code viel besser verstanden werden kann, da man nicht im HTML erst nachschauen muss, welche <option> an der Position x steht.

 

[j-l-n]

	var richtiger_text = ["gepard"];
	if (richtiger_text.indesOf(document.quiz.frage2.value.toLowerCase()) !== -1)

Da hat sich noch ein kleiner Schreibfehler eingeschlichen (indexOf):

	var richtiger_text = ["gepard"];
	if (richtiger_text.indexOf(document.quiz.frage2.value.toLowerCase()) !== -1)

 

[kkapsner]

Ups... Hätte den Code doch vorher lesen sollen, bevor ich ihn kopiere... ist bei miniA4kuser auch schon drin... gut, dass wenigstens einer aufpasst.

 

[miniA4kuser]

Heheh danke für den Hinweis... habs mal schnell korrigiert.