nicht angemeldet
mehrere css-Counter nutzen
Hallo liebe Experten! Ich würde gerne bei meinem Quiz die Menge der maximal möglichen richtigen Antworten mit angeben. Wenn ich aber folgendes mache:
<!DOCTYPE html>
<html>
<style type="text/css" media="screen">
form{ counter-reset: fragen 0 fragenf 0 fragenr 0 falsch 0 richtig 0; }
.r {counter-increment: fragenr;}
.f:checked {counter-increment: falsch;}
.r:checked {counter-increment: richtig;}
.ergebnisf:after{content:counter(falsch)}
.ergebnisr:after{content:counter(richtig) " von " counter(fragenr); }
</style>
<body>
<form>
<legend>
Wie viele Amtssprachen gibt es in der EU (Stand 2021)?
</legend>
<p>
<input class="f" type="checkbox" id="elf" name="EU[]" value="elf">
<label for="elf"> 11 Sprachen </label>
</p>
<p>
<input type="checkbox" id="24" class="r" name="EU[]" value="24">
<label for="24"> 24 Sprachen </label>
</p>
<p>
<input class="f" type="checkbox" id="27" name="EU[]" value="27">
<label for="27"> 27 Sprachen </label>
</p>
<p>
<input type="checkbox" id="alle" class="f" name="EU[]" value="alle">
<label for="alle"> Alle Sprachen, die in den EU-Ländern gesprochen werden </label>
</p>
</form>
<p> <span class="ergebnisr"> Richtige Antworten: </span>
</p>
<p> <span class="ergebnisf"> Falsche Antworten: </span>
</p>
</body>
dann wird nicht die Gesamtzahl der möglichen richtigen Antworten (im Beispiel: 1) gezählt, sondern nur die Anzahl der NICHT ausgewählten richtigen Antworten - sobald die Checkbox mit class="r" angekreuzt ist, steht da "1 von 0" anstatt "1 von 1". Wenn ich den Counter "fragenr" aber auch bei f:checked hochzählen lasse, werden die angeklickten Antworten nicht mehr gezählt. Was mache ich falsch oder geht das, was ich will, mit reinem css nicht? Eine php-Lösung wäre mir auch recht! Ich arbeite nämlich gerade an einer php-Version meiner Seite.
akzeptierte Antworten
mehrere css-Counter nutzen
Rolf B
Bewertung: keine Bewertung
mehrere css-Counter nutzen
Rolf B
Bewertung: keine Bewertung
-
Hallo rstuby,
auf Hinweise zu deinem HTML sollte ich vielleicht verzichten, denn es sieht so aus, als wäre das nur eine Teilmenge deiner echten Seite. Aber ich schreibe sie doch mal auf - wer weiß.
- Das HTML Element braucht ein lang-Attribut. Deine Seite ist deutsch, also lang="de".
- Das <style> Element gehört in ein <head> Element, und in den head gehört noch einiges mehr (title, meta viewport).
- Pseudoelemente sind keine Pseudoklassen. Deswegen wurde die Spezifikation seit CSS2 geändert, man schreibt ::before und ::after, nicht :before und :after. Die Browser verstehen das zwar, der Kompatibilität wegen, aber Browser verstehen vieles, was nicht (mehr) richtig ist…
- Du solltest das Form mit method="POST" verwenden, sonst macht der Browser einen GET Request. Das ist für Formulareingaben eher ungünstig (alle Daten in der URL, ggf. schießt Caching quer und der Browser sendet das Formular bei der Vor/Zurück Navigation eventuell ungefragt mehrfach).
- legend muss ein Kindelement von fieldset sein. Wenn Du kein Fieldset willst, mach eine Überschrift draus. Eine Überschrift wäre ohnehin gut auf der Seite.
- id Attribute brauchst Du für die Checkboxen nicht. name und value reichen völlig aus, solange Du die ID nicht für antwortenspezifische CSS-Regeln brauchst (und da sollte man dann überlegen, ob man dafür nicht Klassen benutzt, weil Du ja eine Menge Fragen haben wirst und eine solche Regel möglicherweise bei unterschiedlichen Antworten relevant sein kann)
- Hast Du keinen "Absenden" Button?
Zu deinen Countern:
.r { counter-increment: fragenr; } .r:checked { counter-increment: richtig; }Wird die
class="r"Checkbox angehakt, überschreibt die zweite Regel die erste und derfragenrCounter wird nicht mehr inkrementiert. Du musst bei .r:checked beide Counter inkrementieren:.r { counter-increment: fragenr; } .r:checked { counter-increment: fragenr richtig; }Du solltest aber generell überlegen, ob Du diese Prüfung am Client machen willst. Wer mogeln will, kann sich von oben nach unten durchklicken und solange fummeln, bis alle Antworten da sind. Und auch ohne CSS könnte man die Entwicklertools öffnen und sich anschauen, welche Lösungen stimmen. Das kannst Du mit JavaScript und CSS nicht verhindern, und mit WebAssembly höchstens erschweren. Eine Garantie für "nicht mogeln" bekommst Du nur, wenn die Prüflinge vom Sourcecode ferngehalten werden.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf! Vielen Dank für die schnelle Antwort. So funktioniert es! Ich hatte auch schon versucht, beide Counter bei f:checked zu erhöhen, aber ich hatte es falsch gemacht (zweimal counter-increment).
Danke auch für die anderen Hinweise. Das HTML war jetzt nur ein Minimalbeispiel. In echt habe ich mein CSS in einer separaten Datei, und ich nutze sowohl das lang-Tag als auch fieldset.
Den Fehler mit :after anstatt ::after hatte ich aber wirklich drin und konnte ihn jetzt verbessern!
Ich benutze im Original, das jetzt online ist, (http://ruth.stubenitzky-goettingen.de/quiz.htm) weder GET noch POST, sondern alles passiert auf ein und derselben Seite ohne jegliche Skriptsprachen nur mit HTML und CSS. Da habe ich einen "unechten" Absenden-Button, der in Wirklichkeit nur auf derselben Seite die Anzeige ändert.
Da lässt es sich dann auch nicht verhindern, dass der User probieren und mogeln kann, es handelt sich aber um ein Quiz, das nur zur Unterhaltung dient. In der PHP-Version, die ich jetzt entwickle, nutze ich POST. Die Klassen "r" und "f" kommen dann nur noch auf der Ergebnisseite vor. Eine PHP-Lösung für den Zähler wäre trotzdem schön, aber nicht erforderlich.
Zu den id-Attributen habe ich noch eine Frage: die brauche ich doch für das Label, damit man mit der Maus nicht die winzige Checkbox oder den Radio Button treffen muss, sondern auch einfach auf das Label klicken kann und damit überhaupt klar ist, dass das Label genau zu diesem Input-Element gehört?
Liebe Grüße, Ruth
-
Hallo rstuby,
Zu den id-Attributen
Ach so, ja, richtig. Das habe ich übersehen.
Es gibt zwar auch diese Syntax:
<label><input type="checkbox"...> Labeltext</label>für die man keine ID braucht, aber neulich habe ich gelernt, dass es Screenreader gibt, die damit nicht zurecht kommen. D.h. diese Schreibweise hat Bedienbarkeitsprobleme. Nicht wegen eines HTML Problems, sondern weil die verfügbare Assistenzsoftware das schlechter unterstützt machen.
Rolf
--
sumpsi - posui - obstruxi
-