Stylesheets

Das Quiz-System bietet flexible Möglichkeiten, die optische Darstellung über CSS-Klassen zu steuern, ohne dass die Fluid-Templates überschrieben werden müssen.

Statische TypoScript-Templates

Durch das Einbinden eines der statischen TypoScript-Templates können vordefinierte CSS-Klassen für gängige Frameworks aktiviert werden:

• Quiz - Bootstrap 4 Stylesheet: Aktiviert CSS-Klassen, die für Bootstrap 4 optimiert sind.
• Quiz - Bootstrap 5 Stylesheet: Aktiviert CSS-Klassen, die für Bootstrap 5 optimiert sind.

Diese Templates konfigurieren bspw. die Pfade plugin.tx_quiz.settings.list.css.class.* und plugin.tx_quiz.settings.participate.css.class.*.

Anpassung für eigene Frameworks (kein Bootstrap)

Fall Du kein Bootstrap verwendest oder die Standard-Klassen anpassen möchtest, kannst Du dies einfach über TypoScript erledigen. Besonders wichtig sind die Klassen für die JavaScript-Logik, die in der Datei vendor/codingms/quiz/Configuration/TypoScript/setup.typoscript definiert sind.

JavaScript-Logik Klassen

Die folgenden Klassen werden vom JavaScript verwendet, um beispielsweise Fehlermeldungen anzuzeigen oder Elemente auszublenden:

plugin.tx_quiz {
    settings {
        result {
            css {
                class {
                    feedbackForm {
                        field {
                            # Standard-Fehlerklasse für Felder.
                            # Wird per JavaScript zugewiesen.
                            error = invalid-feedback
                        }
                    }
                }
            }
        }
        css {
            class {
                # Standard-Klassen für Sichtbarkeit und Fehler im Feedback-Formular.
                # Werden per JavaScript zugewiesen.
                hidden = d-none
                is {
                    valid = is-valid
                    invalid = is-invalid
                }
            }
        }
    }
}

Diese findest Du in setup.typoscript – passe diese einfach an die Anforderungen Deines eigenen CSS-Frameworks an.

Allgemeine Anpassung der CSS-Klassen

Du kannst im Grunde jede CSS-Klasse, die in den Bootstrap-TypoScript-Dateien definiert ist, in Deinem eigenen Setup überschreiben. Dies ermöglicht eine feingranulare Gestaltung aller Komponenten (Listenansicht, Fragen, Antworten, Badges etc.), ohne die Fluid-Templates anfassen zu müssen.

Beispiel für die Anpassung eines Badges:

plugin.tx_quiz.settings.list.css.class.item.body.badges.participated = mein-eigenes-badge-style