Layout - Blocksatz im gesamten Fragebogen

Question

Sehr geehrtes Soscisurvey-Team,

anbei zwei Fragen zum Layout.

1) Ist es möglich im gesamten Fragebogen Blocksatz als Layout zu verwenden.

In Textbausteinen ist es möglich das Layout auf Blocksatz einzustellen.

Wie kann man jedoch auch Fragen und Anweisungen im Blocksatz darstellen.

Ist es zudem möglich eine Silbentrennung zu verwenden, sodass Texte durch den Blocksatz nicht allzu weit auseinander gezogen werden.

Besonders linksbündige Texte wirken im Fragebogen sehr unruhig.

Ich wäre Ihnen für jegliche Tipps dankbar.

2) Des Weiteren wollte ich fragen, ob man den Abstand des Fortschrittbalkens zu den darunter stehenden Fragen vergößern kann. Aktuell ist der Fortschrittbalken direkt über der Frage. D.h. beide Blöcke gehen direkt ineinander über. Ich würde jedoch den Fortschrittbalken gerne mit etwas Abstand von den Fragen setzen wollen.

Mit freundlichen Grüßen

Answer 1

1) Ist es möglich im gesamten Fragebogen Blocksatz als Layout zu verwenden.

Ja, aber schön ist das nicht. Fügen Sie dafür im Layout im <style>-Abschnitt folgende Anweisung ein:

p { text-align: justify; }

Das betrifft erst mal "nur" Absätze (<p>). Falls Sie es für weitere Elemente nutzen möchten, wären außer p noch weitere Selektoren zu ergänzen.

Ist es zudem möglich eine Silbentrennung zu verwenden, sodass Texte durch den Blocksatz nicht allzu weit auseinander gezogen werden.

Keine automatische, Sie müssten an entsprechenden Stellen ­ einfügen. Es gibt wohl auch ein paar JavaScript-Bibliotheken, die das automatisch erledigen. Diese können Sie natürlich auch in den Fragebogen einbinden.

2) Des Weiteren wollte ich fragen, ob man den Abstand des Fortschrittbalkens zu den darunter stehenden Fragen vergößern kann.

Ja, aber wie genau das funktioniert, hängt vom Layout ab. Welches Layout verwenden Sie denn?

Comments

Zu 1) Der Blocksatz soll lediglich bei längeren Fragetexten und den darunterstehenden Anweisungen angewendet werden.
Da längere Abschnitte durch die linksbündige Ausrichtung sehr unübersichtlich werden.
Kann man ausschließlich an diesen Stelle (Fragen und Anweisungen) Änderungen vornehmen.
Ist dies bereits bei der Erstellung der Frage möglich? Ich verwende in keiner der Fragen irgendwelche Absätze gemäß <p>.


Zu 2) Ich verwende das Layout Shutter. Bei diesem Layout wird der Fortschrittbalken unten angezeigt.
Ich wurde durch den Onlinesupport darauf hingewiesen, dass man den Fortschrittbalken nach oben versetzen kann.
Ich habe für die Versetzung des Fortschrittbalkens folgenden Code eingegeben, der im Forum geteilt wurde:
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>

ü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".

---

> Kann man ausschließlich an diesen Stelle (Fragen und Anweisungen) Änderungen vornehmen.

Ja, Sie können einen Abschnitt einfach mittels HTML-Code vorher und nachher entsprechend ausrichten.

<div style="text-align: justify;">

Inhalt

</div>

> Ich habe für die Versetzung des Fortschrittbalkens folgenden Code eingegeben, der im Forum geteilt wurde

Wenn Sie einen Pretest-Link zum Fragebogen posten, kann ich ganz konkret helfen. Sonst muss ich etwas abstrakter bleiben und beschreiben, dass Sie am besten im <div>-Element, das den %questionnaire% Platzhalter beinhaltet oben mittels padding-top für ein wenig Platz sorgen.

---

Zu 1) Die Eingabe mittels HTML-Code und dem Blocksatz hat funktioniert. Vielen Dank.

Ich habe an dieser Stelle zudem den HTML-Code <p >  <div style ... > Text </div> </p> verwendet. Ist eine Verwendung mehrer HTML-Codes hintereinander problemlos möglich oder kann an es an der Stelle zu Schwierigkeiten kommen.

Zu 2) Leider hat keine Änderung mittels padding-top den Abstand vergrößert.


Anbei finden Sie den Pretestlink einer Testseite zu meinem Fragebogen.

Ist es zudem möglich den Fortschrittbalken von der Farbe her noch kräftiger zu gestalten bzw. diesen in einem dunkelblauen Ton zu umranden?

Ist es an dieser Stelle ebenfalls möglich die Seitenränder der Befragung zu vergrößern. Wie Sie im Testlink sehen, sind die Seitenränder sehr knapp bemessen.

---

ad 1) <div> im <p> ist nicht gut, <p> im <div> ist kein Problem.

ad 2) Danke für den Link. Sie haben doch das <div> für den Fortschrittsbalken eingefügt. Da können Sie auch direkt Abstand ergänzen:

<div class="progressbar" style="margin-bottom: 3em;">

> Ist es an dieser Stelle ebenfalls möglich die Seitenränder der Befragung zu vergrößern.

Ja, welche genau? Je nach Größe des Browserfensters sind links und rechts eigentlich sehr breite Ränder?!

---

Zu 1) Sie meinen also, dass man erst  <div style ...> <p> Beispieltext </p> </div> (1. Alternative) verwenden soll und nicht  <p> <div style ...>  Beispieltext </div> </p> (2.Alternative).
Also ist Ihrer Meinung nach die 1. Alternative besser, um sowohl den Blocksatz als auch die Absätze zu setzen?

Zu 2) An welcher Stelle muss ich Ihre Anmerkung einsetzen, um den Abstand zu vergörßern? Ich habe damals den Link von einem Hinweis im Forum übernommen und entsprechend die unten stehenden Schritte durchgeführt. Der untere Absatz steht aktuell bei mir im HTML-Code des Layouts:

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>

ü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".

Zu 3) Farbe des Fortschrittbalkens: Ist es möglich den Fortschrittbalken, den Sie im Pretest sehen noch mit einem dunkelblauen Rahmen zu umranden?

Zu 4) Wenn der Link im Browser geöffnet wird, erscheint ein Feld, in dem der Fragebogen steht. Ich meine die Ränder des Feldes, ob man da die knapp 5mm sowohl links als auch rechts erweitern kann. Und somit der eigentliche Text des Fragebogens schmäler angezeigt werden kann.

---

ad 1) zum Nachlesen:
https://stackoverflow.com/questions/9852312/list-of-html5-elements-that-can-be-nested-inside-p-element

ad 2) pardon, ich habe die Element verwechselt, ich meinte dieses hier:

<div id="s2t-progress" style="background-color: #FFFFFF; margin-bottom: 3em;">

ad 3) Ja, natürlich. Das können Sie auch in dem besagten Tag ergänzen:

<div id="s2t-progress" style="background-color: #FFFFFF; margin-bottom: 3em; border: 1px solid #00C;">

ad 4) Da müssen Sie ein wenig aufpassen, dass es auf Mobilgeräten nicht zu klein wird. Aber im Prinzip müssen Sie im Layout nur folgendes ändern:

div.questionary {
    background-color: white;
    border: 1px solid #5273B9;
    min-width: 320px;
    max-width: 840px;
    padding: 20px;
    margin: 0 auto;
}

Das padding beschreibt den Innenabstand. Wenn Sie links und rechts das doppelte haben wollten, würde Sie schreiben

    padding: 20px 40px;