Skip to main content

Formatieren der Fortschrittsanzeige

Wenn ein Quiz die Fragen einzeln rendert, wird oben links auf der Folie eine Fortschrittsanzeige angezeigt. Standardmäßig wird die Fortschrittsanzeige sprachneutral angezeigt (1/3).

Default_Quiz_ProgressBar_small.png

Diese Anleitung zeigt, wie Sie die Standardeinstellung mit einem Textinhalt (Frage 1 von 3) für Englisch und Schwedisch überschreiben können. Sie können dem CSS weitere oder andere Sprachen hinzufügen, wenn Sie andere Sprachen als Schwedisch und Englisch verwenden.

  1. Fügen Sie dem CSS den folgenden Code hinzu:

    html[lang='en'] #quiz .quiz-progress .progress-current:before {
    content : 'Question ';
}

html[lang='en'] #quiz .quiz-progress .progress-divider:before {
    content: ' of ';
}

html[lang='en'] #quiz .quiz-progress .progress-max:after {
    content: ' : ';
}

html[lang='sv'] #quiz .quiz-progress .progress-current:before {
    content : 'Fråga ';
}

html[lang='sv'] #quiz .quiz-progress .progress-divider:before {
    content: ' av ';
}

html[lang='sv'] #quiz .quiz-progress .progress-max:after {
    content: ' : ';
}

  2. Dies aktualisiert die Fortschrittsanzeige, sodass Folgendes angezeigt wird:

    • Englisch: „"Question 1 of 3“

    • Schwedisch: „Fråga 1 av 3“

      Styled_Quiz_ProgressBar_small.png

  3. Speichern Sie Ihr CSS.

  4. Hochladen benutzerdefinierter CSS.