mehrere css-Counter nutzen bearbeitet von Rolf B 05.11.2021 12:12 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: ~~~css .r { counter-increment: fragenr; } .r:checked { counter-increment: richtig; } ~~~ Wird die `class="r"` Checkbox angehakt, überschreibt die zweite Regel die erste und der `fragenr` Counter wird nicht mehr inkrementiert. Du musst bei .r:checked beide Counter inkrementieren: ~~~css,good .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
mehrere css-Counter nutzen bearbeitet von Rolf B 05.11.2021 12:21 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). - 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 (wobei ich annehme, dass dein HTML nur ein Auszug deiner vollständigen Seite ist). - 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: ~~~css .r { counter-increment: fragenr; } .r:checked { counter-increment: richtig; } ~~~ Wird die `class="r"` Checkbox angehakt, überschreibt die zweite Regel die erste und der `fragenr` Counter wird nicht mehr inkrementiert. Du musst bei .r:checked beide Counter inkrementieren: ~~~css,good .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
nicht angemeldet nicht angemeldet
