HTML Quiz auswerten

[Alex29]

Hallo, ich erstelle gerade ein Quiz mithilfe von HTML und will die Radio Buttons mit den Lösungen gerne auswerten lassen, jedoch komme ich nicht ganz dahinter wie das funktioniert ;( Es gibt pro Frage jeweils 4 Antwortmöglichkeiten als Radio Buttons und am Ende soll unten ein Lösungsbutton sein, der die richtige value ausgibt. Für andere Lösungsvorschläge wäre ich natürlich auch offen. Hoffe mir kann jemand helfen und danke im voraus LG Alex PS : Quellcode hier unten zu finden, nicht von den fertigen Quizfragen irritieren lassen :)

<p class="question">1.Wie definiert man einen Gletscher ?</p>        
<script type="text/javascript" src="/js/jquery.js"></script>
<ul class="answers">            
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a">A) Eine Eismasse mit einem klar definierten Einzugsgebiet</label><br/>          
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b">B) Einen Eisberg mit klar definiertem Einzugsgebiet</label><br/>            
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c">C) Ein erloschener Schneebedeckter Vulkan</label><br/>            
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d">D) Eine Eismasse ohne klar definiertes Einzugsgebiet</label><br/>       
</ul>        


<p class="question">2. Wie entstehen Gletscher? (Ganzer Prozess ?)</p>        

<ul class="answers">            
<input type="radio" name="q2" value="a" id="q2a"><label for="q2a">A) Quellwasser gefriert zu einem Eisberg</label><br/>           
<input type="radio" name="q2" value="b" id="q2b"><label for="q2b">B) Durch starken Schneefall</label><br/>            
<input type="radio" name="q2" value="c" id="q2c"><label for="q2c">C) Ablagerungen
 von verschiedenen Schneeschichten</label><br/>           
<input type="radio" name="q2" value="d" id="q2d"><label for="q2d">D) Akkumulation und spätere  Metamorphose von Schneemassen</label><br/>       
</ul>        

<p class="question">3. Wieviel Prozent der Landoberfläche ist von Gletschern bedeckt ?</p>        

<ul class="answers">            
<input type="radio" name="q3" value="a" id="q3a"><label for="q3a">A) 20%</label><br/>            
<input type="radio" name="q3" value="b" id="q3b"><label for="q3b">B) 45%</label><br/>            
<input type="radio" name="q3" value="c" id="q3c"><label for="q3c">C) 5%</label><br/>           
<input type="radio" name="q3" value="d" id="q3d"><label for="q3d">D) 10%</label><br/>       
</ul>        

<p class="question">4.Welche Bedingungen müssen für die Entstehung eines Gletschers vorhanden sein ?</p>        

<ul class="answers">           
<input type="radio" name="q4" value="a" id="q4a"><label for="q4a">A) Wasser, ein Berg und kaltes Klima</label><br/>            
<input type="radio" name="q4" value="b" id="q4b"><label for="q4b">B) niedrige Temperaturen, Schneefall und folgende Metamorphose</label><br/>            
<input type="radio" name="q4" value="c" id="q4c"><label for="q4c">C) Eis, Neuschnee und Sedimentation</label><br/>            
<input type="radio" name="q4" value="d" id="q4d"><label for="q4d">D) hoher Sauerstoffgehalt im Eis, Schnee und Sonneneinstrahlung</label><br/>        
</ul>        
<p class="question">5. Was ist auf Grafik 2 in Punkt A zu sehen ?</p>        

<ul class="answers">            
<input type="radio" name="q5" value="a" id="q5a"><label for="q5a">A) Zehrgebiet</label><br/>            
<input type="radio" name="q5" value="b" id="q5b"><label for="q5b">B) Gletschertor</label><br/>            
<input type="radio" name="q5" value="c" id="q5c"><label for="q5c">C) Gletscherzunge</label><br/>           
<input type="radio" name="q5" value="d" id="q5d"><label for="q5d">D) Seitenmoräne</label><br/>        
</ul>        

<p class="question">6. Was hinterlässt der Gletscher bei sein Hangabwärtsbewegung ?</p>        

<ul class="answers">            
<input type="radio" name="q6" value="a" id="q6a"><label for="q6a">A) Wasser</label><br/>            
<input type="radio" name="q6" value="b" id="q6b"><label for="q6b">B) Ein Trogtal</label><br/>            
<input type="radio" name="q6" value="c" id="q6c"><label for="q6c">C) Metamorphe Gesteine</label><br/>            
<input type="radio" name="q6" value="d" id="q6d"><label for="q6d">D) Glaziale Serie</label><br/>        
</ul>       

<p class="question">7. Für was kann man Gletscher sinnvoll nutzen ?</p>        

<ul class="answers">            
<input type="radio" name="q7" value="a" id="q7a"><label for="q7a">A) Süßwasserreservebecken</label><br/>            
<input type="radio" name="q7" value="b" id="q7b"><label for="q7b">B) Landwirtschaft</label><br/>            
<input type="radio" name="q7" value="c" id="q7c"><label for="q7c">C) Rohstoffabbaustandorte</label><br/>            
<input type="radio" name="q7" value="d" id="q7d"><label for="q7d">D) Herstellung von Eiswürfeln</label><br/>        
</ul>        

<p class="question">8. Was zeichnet einen Vorlandgletscher aus ?</p>        

<ul class="answers">            
<input type="radio" name="q8" value="a" id="q8a"><label for="q8a">A) Eismassen schieben sich hervor und breiten sich ringförmig aus</label><br/>            
<input type="radio" name="q8" value="b" id="q8b"><label for="q8b">B) kleine Eisansammlung an einem Berghang; meist ohne Zungenbildung</label><br/>            
<input type="radio" name="q8" value="c" id="q8c"><label for="q8c">C) Eismassen in einer Sonnengeschützten Mulde</label><br/>            
<input type="radio" name="q8" value="d" id="q8d"><label for="q8d">D) Bewegt sich abwärts ins Tal</label><br/>       
</ul>        

<p class="question">9. Wie entstehen Gletscherspalten ?</p>        

<ul class="answers">            
<input type="radio" name="q9" value="a" id="q9a"><label for="q9a">A) Bei Hangabwärtsbewegung des Gletschers</label><br/>            
<input type="radio" name="q9" value="b" id="q9b"><label for="q9b">B) Bei schlechtem Wetter</label><br/>            
<input type="radio" name="q9" value="c" id="q9c"><label for="q9c">C) Unebenheiten auf dem präglazialen Untergrund</label><br/>            
<input type="radio" name="q9" value="d" id="q9d"><label for="q9d">D) Hoher Druck</label><br/>        
</ul>    

<p class="question">10. Wo liegt zurzeit der größte Gletscher der Erde ?</p>        

<ul class="answers">           
<input type="radio" name="q10" value="a" id="q10a"><label for="q10a">A) Antarktis (Lambert-Gletscher)</label><br/>            
<input type="radio" name="q10" value="b" id="q10b"><label for="q10b">B) Peru (Quelccaya)</label><br/>            
<input type="radio" name="q10" value="c" id="q10c"><label for="q10c">C) Schweiz (Aletschgletscher)</label><br/>            
<input type="radio" name="q10" value="d" id="q10d"><label for="q10d">D) Alaska (Malaspina)</label><br/>        
</ul>        

[JürgenB]

Hallo,

da du bisher noch nicht mal einen Lösungsansatz hast, wäre vieleicht das hier etwas für dich:

http://www.felix-riesterer.de/main/seiten/rquiz.html

Gruß
Jürgen

[Felix Riesterer]

Lieber JürgenB,

http://www.felix-riesterer.de/main/seiten/rquiz.html

Danke für die Werbung. 😀

Liebe Grüße,

Felix Riesterer.

[JürgenB]

Hallo Felix,

dein Script macht ja genau das, was der TO wünscht. Mal sehen, ob er am Ergebnis interessiert ist, oder am Weg.

Gruß
Jürgen

[Rolf B]

Hallo Alex29,

zunächst mal zum HTML:

• Das Script-Tag mit jQuery verlegst Du besser in den <head> Bereich der Seite.
• Ein <ul> Tag verlangt <li> Tags, um die Listenelemente zu markieren. Ein <ul> ohne <li> ist sinnlos. Die <li> bringen dann allerdings Listenpunkte mit, die Du entweder per CSS entfernen kannst (list-style-type:none) ODER du machst ein Feature draus und änderst die <ul> in eine <ol>, was sowieso angemessener ist, und gibst den <li> einen list-style-type: upper-latin, dann nummeriert er Dir die Antworten automatisch mit A-D durch. Allerdings dann links vom Radiobutton. Das KANN man lösen, ist aber ein bisschen CSS Hexerei.
• Da Du so viele Labels und Radiobuttons hast, könnte es für Dich einfacher sein, ohne IDs zu arbeiten. Statt dessen kann man den Radiobutton in das Label hineinsetzen, dann braucht man kein for-Element. Den Text kann man dann immer noch in ein span Element einschließen (muss man aber nicht unbedingt)
• Deine LI sollten dann noch ein value bekommen, mit dem zugeordneten Buchstaben. Das hilft bei der Auswertung.

Das HTML kann dann in etwa so aussehen:

<p>1. Wer hustet lauter?</p>
<ol class="antworten">
<li><label><input type="radio" name="q1" value="A">Flöhe</label></li>
<li><label><input type="radio" name="q1" value="B">Mäuse</label></li>
<li><label><input type="radio" name="q1" value="C">Vulkane</label></li>
</ol>

<button id="solve" type="button">
Lösung
</button>

.antworten {
  padding-left: 4em;
}
.antworten li {
  list-style: upper-latin;
  text-indent: -3em;
}
.antworten input[type=radio] {
  margin-right: 3em;
}

Die Abfrage ist dann mit jQuery ganz einfach (denk dran, dass dieser Code in einem Ready-Handler liegen oder am Ende des body stehen muss):

$("#solve").click(function() {
   var $auswahl = $(".antworten input[type=radio]:checked");
   ...
});

$auswahl enthält nun ein Array mit einem Eintrag pro ausgewählter Antwort. Der Eintrag ist das Radio-Element, da kannst Du mit name den Fragenamen und mit value die ausgewählte Antwort abfragen.

Hier habe ich mal gespielt.

Rolf

[Gunnar Bittersmann]

@@Rolf B

• Das Script-Tag mit jQuery verlegst Du besser in den <head> Bereich der Seite.

Womit das Rendern der Seite blockiert wird? Nicht wirklich, oder?

Mein Empfehlung wäre ja, das Script-Tag mit jQuery nach /dev/null zu verlegen, denn …

Die Abfrage ist dann mit jQuery ganz einfach

… ohne jQuery ist sie genauso einfach.

LLAP 🖖

[Gunnar Bittersmann]

@@Rolf B

… und gibst den <li> einen list-style-type: upper-latin, dann nummeriert er Dir die Antworten automatisch mit A-D durch. Allerdings dann links vom Radiobutton. Das KANN man lösen, ist aber ein bisschen CSS Hexerei.

Ach was Hexerei – nicht dafür. Das ist einfach erledigt, indem man die Radiobuttons absolut links im li positioniert (was dazu relativ positioniert sein muss).

Sieht dann so aus: ⦿ A. foo

Das Problem daran ist, dass der Marker „A.“ nicht anclickbar ist, sondern nur der Radiobutton links davon und das Label rechts davon. Lässt sich aber auch einfach mit einem label::after-Pseudoelement lösen, das absolut positioniert die gesamte li-Box ausfüllt. Selber Trick wie bei Ein ganzes Tabellenfeld als Link.

☞ Guckst du.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Sieht dann so aus: ⦿ A. foo

Das Problem daran ist, dass der Marker „A.“ nicht anclickbar ist, sondern nur der Radiobutton links davon und das Label rechts davon. Lässt sich aber auch einfach mit einem label::after-Pseudoelement lösen, das absolut positioniert die gesamte li-Box ausfüllt.

Diese sollte dazu in der Breite auf width: max-content beschränkt werden. Im Pen ergänzt:

☞ Guckst du.

LLAP 🖖

[Gunnar Bittersmann]

@@Alex29

Zusätzlich zu den von Rolf schon gegebenen noch ein paar Hinweise zum Markup:

Eine Gruppe zusammengehörender Radiobuttons dürfte in einem fieldset gut aufgehoben sein. Die zu diesen Radiobuttons gehörende Frage wäre dessen legend:

<fieldset>
	<legend>1. Wie definiert man einen Gletscher ?</legend>        
	<ol>            
		<li><input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Eine Eismasse mit einem klar definierten Einzugsgebiet</label></li>
		<li><input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Einen Eisberg mit klar definiertem Einzugsgebiet</label></li>
		<li><input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Ein erloschener Schneebedeckter Vulkan</label></li>
		<li><input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Eine Eismasse ohne klar definiertes Einzugsgebiet</label></li>
		<li>
	</ol>
</fieldset>

LLAP 🖖

[Gunnar Bittersmann]

@@Alex29

ich erstelle gerade ein Quiz mithilfe von HTML und will die Radio Buttons mit den Lösungen gerne auswerten lassen

Die grundlegende Frage ist: Wo soll die Auswertung stattfinden?

• Clienseitig mit JavaScript? Dann kann jeder Teilnehmer im Quelltext die richtigen Antworten lesen.

• Oder sollen die Antworten zum Server geschickt und dort ausgewertet werden?

LLAP 🖖

[Alex29]

Erstmal vielen Dank euch allen für die Lösungsansätze ! Nun zu der Frage wo die Auswertung stattfinden soll, diese soll Clientseitig direkt mit Javascript gemacht werden.

[j4nk3y]

Hey,

Nun zu der Frage wo die Auswertung stattfinden soll, diese soll Clientseitig direkt mit Javascript gemacht werden.

Also kann ich direkt in deinem Quellcode die richtige Antwort finden? Gibt es da etwas zu gewinnen?

Gruß
Jo

[Alex29]

Da gibt es rein gar nichts zu gewinnen, ich weiß schon was ich tue :D