Please note that this documentation is for the most recent version of this extension. It may not be relevant for older versions. Related documentation can be found in the documentation directory of the extension.
Stylesheets
The quiz system offers flexible options for controlling the visual appearance via CSS classes without overriding the Fluid templates.
Static TypoScript Templates
By including one of the static TypoScript templates, predefined CSS classes for common frameworks can be activated:
- Quiz - Bootstrap 4 Stylesheet: Enables CSS classes that are optimized for Bootstrap 4.
- Quiz - Bootstrap 5 Stylesheet: Enables CSS classes that are optimized for Bootstrap 5.
These templates configure, for example, the paths plugin.tx_quiz.settings.list.css.class.* and plugin.tx_quiz.settings.participate.css.class.*.
Customization for Custom Frameworks (No Bootstrap)
If you are not using Bootstrap or want to customize the default classes, you can easily do so using TypoScript. The classes for the JavaScript logic, defined in the file vendor/codingms/quiz/Configuration/TypoScript/setup.typoscript, are particularly important.
JavaScript Logic Classes
The following classes are used by JavaScript to, for example, display error messages or hide elements:
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
}
}
}
}
}You'll find these in setup.typoscript – simply adapt them to the requirements of your own CSS framework.
General Customization of CSS Classes
You can essentially override any CSS class defined in the BootstrapTypoScript files in your own setup. This allows for fine-grained styling of all components (list view, questions, answers, badges, etc.) without having to modify the Fluid templates.
Example of customizing a badge:
plugin.tx_quiz.settings.list.css.class.item.body.badges.participated = mein-eigenes-badge-style
TYPO3 Quiz by coding.ms
The TYPO3 Quiz Extension creates custom quizzes, tests, personality tests and self-assessments directly in the TYPO3 backend – no coding required. Questions, answers, scores, dynamic results, quiz overviews, saved participations and feedback forms support e-learning, content marketing, employee training and lead generation.