Rolf B: HTML Quiz auswerten

Beitrag lesen

SELF-Forum

HTML Quiz auswerten

Rolf B
– Informationen zu den Bewertungsregeln

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

--
sumpsi - posui - clusi
Beitrag melden
–
Informationen zu den Bewertungsregeln