(JS) Wieder Radiobuttons, diesmal mehrere Gruppen ueberpruefen
Brutus
- javascript
Hallo!
Ich habe ein Problem mit der Auswertung von Radiobuttons per JavaSkript.
Ich versuch das mal an einen kleinen Beispiel deutlich zu machen:
Ich realisier mit einem Formular & Radiobuttons ein kleines Quiz. Jede Frage hat mehrere Antwortmoeglichkeiten (Radiobuttons). Die Antworten / Radiobuttons zu einer Frage haben natuerlich den gleichen Wert fuer 'name'.
Das sieht dann ungefaehr so aus:
<form name="quiz"><div>
<b>1.What's the name of Luke's father ?<br></b>
<input type="radio" name="frage1" value="0"> Owen<br>
<input type="radio" name="frage1" value="1"> Anakin<br>
<input type="radio" name="frage1" value="0"> Ben<br>
<input type="radio" name="frage1" value="0"> Yoda<br>
<input type="radio" name="frage1" value="0"> Han<br>
<br><br>
<b>2.Which colour has C-3PO?<br></b>
<input type="radio" name="frage2" value="0"> dark gray<br>
<input type="radio" name="frage2" value="0"> orange<br>
<input type="radio" name="frage2" value="0"> mossy green<br>
<input type="radio" name="frage2" value="1"> gold<br>
<input type="radio" name="frage2" value="0"> urple<br>
<!-- usw. -->
<div></form>
<input type="button" name="auswerten" value="Auswerten!" onClick="auswerten()">
In der auswerten() Funktion moechte ich zwei Sachen:
1. Ueberpruefen ob zu jeder Frage eine Antwort gewaehlt wurde
2. Die Anzahl der richtigen Fragen ermitteln
Ich hab das erstmal so realisiert:
function auswerten()
{
var i = 0; // zaehlt die einzelden Antworten in den Schleifen
var n = 0; // zaehlt die Fragen, die beantwortet wurden
var richtig = 0; // zaehlt die Fragen, die richtig beantwortet wurden
var anzFragen = 5; // die Anzahl der gestellten Fragen
for (i = 0; i < document.quiz.Frage1.length; i++)
{
if (document.quiz.Frage1[i].checked)
{
n++;
if (document.quiz.Frage1[i].value == "1") { richtig++; }
}
}
for (i = 0; i < document.quiz.Frage1.length; i++)
{
if (document.quiz.Frage2[i].checked)
{
n++;
if (document.quiz.Frage2[i].value == "1") { richtig++; }
}
}
// usw.
if (n != anzFragen)
{
window.alert("Seems like you have not answerd all questions...")
}
else
{
window.alert("You have answered " +richtig+ " of 5 questions correctly!");
zuruecksetzen();
}
}
Wer sich das mal genau anschauen will (wollte hier jetzt nicht Alles mit dem Code dichtmachen): http://brutus.dyndns.info/~test/quiz-version01.html
Nach langer Rede, nun mal zu meinen Problem: Das Ganze laeuft zwar, ist aber ne Menge unschoener Code. Und noch problematischer, jedesmal wenn sich die Anzahl der Fragen veraendert, musz mensch am Skript rumdoktorn.
Meine Fragen:
1. Ist es möglich die Anzahl der Fragen (RadioButtons mit gleichen Namen) per Skript rauszufinden?
2. Kann ich mit einer Schleife o.ae. drueber gehen, und mir das Abfragen einfacher zu machen?
Zu Frage 2 hab ich mal was probiert, - funktioniert nur leider nicht - komm da aber nicht mehr weiter. Ich kenne mich auch nicht wirklich gut mit JavaSkript aus; also falls wer Tips hat und helfen kann: Vielen Dank!
Das war, was ich mir ueberlegt hatte:
for (n = 0; n < anzFragen; n++)
{
frage = document.quiz.element[n];
for (i = 0; i < frage.lenght; i++)
{
if (frage[i].checked)
{
n++;
if (document.quiz.Frage+x[i].value == "richtig") { richtig++; }
}
}
}
<form name="quiz"><div>
<b>1.What's the name of Luke's father ?<br></b>
<input type="radio" name="frage1" value="0"> Owen<br>
<input type="radio" name="frage1" value="1"> Anakin<br>
<input type="radio" name="frage1" value="0"> Ben<br>
<input type="radio" name="frage1" value="0"> Yoda<br>
<input type="radio" name="frage1" value="0"> Han<br>
<br><br>
<b>2.Which colour has C-3PO?<br></b>
<input type="radio" name="frage2" value="0"> dark gray<br>
<input type="radio" name="frage2" value="0"> orange<br>
<input type="radio" name="frage2" value="0"> mossy green<br>
<input type="radio" name="frage2" value="1"> gold<br>
<input type="radio" name="frage2" value="0"> urple<br>
<!-- usw. -->
<div></form><input type="button" name="auswerten" value="Auswerten!" onClick="auswerten()">
Einfacher:
<input type="button" name="auswerten" value="Auswerten!" onClick="auswerten(this.form)">
function auswerten(form)
{
var i = 0; // zaehlt die einzelden Antworten in den Schleifen
var n = 0; // zaehlt die Fragen, die beantwortet wurden
var richtig = 0; // zaehlt die Fragen, die richtig beantwortet wurden
var anzFragen = 5; // die Anzahl der gestellten Fragen
for(var i = 0; i < anzFragen;i++)
{
for(var j = 0; j < form['frage' + i].length;j++)
{
.... hier jetzt nach checked und der richtigen Fragen suchen.
}
}
...
}
Struppi.
hi,
for(var i = 0; i < anzFragen;i++)
{
for(var j = 0; j < form['frage' + i].length;j++)
{
.... hier jetzt nach checked und der richtigen Fragen suchen.}
}
tipp: dazu die nummer der für die jeweilige frage richtigen antwort in einem array ablegen.
gruss,
wahsaga