Bitte beachte, dass sich diese Dokumentation auf die neuste Version dieser Erweiterung bezieht. Wenn eine ältere Version eingesetzt wird, kann diese abweichen. Die jeweils passende Dokumentation befindet sich im Dokumentation-Verzeichnis der Erweiterung.
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
TYPO3 Quiz by coding.ms
Die TYPO3 Quiz Extension erstellt Custom Quizzes, Tests, Personality Tests und Self-Assessments direkt im TYPO3 Backend – ohne Coding. Fragen, Antworten, Scores, dynamische Ergebnisse, Quiz-Übersichten, Teilnahme-Speicherung und Feedback-Formulare unterstützen E-Learning, Content Marketing, Employee Training und Lead Generation.