Dafür können Sie in der HTML-Vorlage des Fragebogen-Layouts einen Platzhalter ergänzen und im Fragebogen befüllen.
Suchen Sie als erstes den Platzhalter für den Fortschrittsbalken, im Standard-Layout z.B.
<div id="s2t-progress" style="background-color: #FFFFFF">%progress%<span><!-- empty span required for IE --></span></div>
Direkt davor können Sie einen neuen Platzhalter einfügen:
<div id="titelAbschnitt" style="background-color: #FFFFFF">%titelAbschnitt%</div>
Als CSS-Klasse wurde hier z.B. "titelAbschnitt" verwendet und der Platzhalter heißt %titelAbschnitt%.
Weiterhin finden Sie im Layout eine CSS-Anweisung, wo der Fortschrittsbalken erscheinen soll:
div#s2t-progress { position: absolute; right: 10px; top: 0px; width: 200px }
Eine weitere Anweisung für Ihren Titel könnte wie folgt aussehen:
div#titelAbschnitt { position: absolute; right: 240px; top: 0px; width: 200px }
Hier schonmal der Hinweis, dass Sie noch weitere CSS-Anweisungen brauchen werden, damit der Titel auch auf dem kleinen Display eines Smartphones korrekt erscheint.
Und zuletzt müssen Sie sich im Fragebogen noch darum kümmern, dass der Platzhalter befüllt wird. Der PHP-Code dafür könnte wie folgt aussehen:
replace('%titelAbschnitt%', '<div class="progressbar" style="text-align: center;">Gesundheit</div>', 'html');
Diesen PHP-Code müssten Sie mindestens zu Beginn jedes Abschnitts verwenden. Wenn Sie auch einen Zurück-Knopf erlauben, dann auch am Ende jedes Abschnitts.
Und es kann sein, dass der Patzhalter auf der letzten Seite des Fragebogens Ärger macht, wenn die Seite erneut geladen wird. In diesem Fall müssten Sie noch ein zweites Layout anlegen, welches den Platzhalter nicht enthält.