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