Angabe eines Fortschrittsbalkens oben auf der Seite

Question

Hallo!

Ich möchte gerne den Fortschrittsbalken oben auf jeder Seite anzeigen, damit meine Studienteilnehmer sich einen Überblick verschaffen können, wie viel % des Fragebogens sie bereits ausgefüllt haben. Im Standard-Layout wird der Fortschrittsbalken allerdings unten rechts angezeigt, was man schnell übersieht.

Bei der Suche nach Fortschrittsbalken finde ich allerdings nur die Möglichkeiten mit option('progress', '50'); und dergleichen, die nichts an der Position verändern.

Wie kann ich also Position, Größe und Ausrichtung des Fortschrittsbalkens auf den einzelnen Seiten meines Fragebogens verändern?

Mit freundlichen Grüßen

Answer 1

Sie haben zwei Möglichkeiten:

(a) Sie können ein anderes Layout verwenden - einige Layouts zeigen den Fortschritsbalken oben oder

(b) wenn Sie sich trauen, ein wenig mit HTML-Code zu arbeiten, dann können Sie den HTML-Code des Standard-Layouts editieren und den Balken nach oben schieben. Suchen Sie nach %progress%.

Comments

Vielen Dank für die Antwort!

Die Layouts, die den Fortschrittsbalken oben anzeigen, haben uns leider nicht so zugesagt, deswegen habe ich diese Variante vorab schon ausgeschlossen.

Leider bin ich auch nach einer kurzen Einführung in HTML (ohne vorherige Vorkenntnisse) komplett mit dem Code des Layouts überfordert. Ich habe zwar den Befehl im Code gefunden, weiß aber nicht, wie viel Code ich wohin verschieben muss und welchen Befehl ich brauche, um den Fortschrittsbalken zu zentrieren und größer darzustellen, deswegen werde ich mich mal in meinem Umfeld bei jemandem mit Erfahrung umhören.

Mit freundlichen Grüßen

---

Also das Standard-Layout zeigt den Fortschrittsbalken ja rechts oben. Welche der Layout-Vorlagen verwenden Sie denn?

---

Wir nutzen das Layout "squares".

---

Wenn Sie einen einfachen Fortschrittsbalken haben möchten, der oben auf Ihrer Seite über den Fragen angezeigt wird, reicht es, wenn Sie folgende Änderungen am HTML Code machen:

Entfernen Sie die Zeile

<div class="s2t-progress" style="padding-top: 2px">%progress%</div>

und fügen Sie

<div style="position: relative">
    <div style="padding-top: 2px; margin: 0px 0px 24px 0px; height: 10px; width: 100%; border-bottom: 2px solid %color.4%; overflow: hidden"></div>
    <div id="s2t-progress" style="background-color: #FFFFFF">%progress%<span><!-- empty span required for IE --></span></div>
</div>
 
über dem Marker %questionnaire% ein. Wenn Sie etwas mit der Positionierung experimentieren möchten, finden Sie die Parameter dafür im Teil hinter "div style".

Mit freundlichen Grüßen