Fragebogen-Layouts

Wie ein Fragebogen letzlich aussieht, entscheidet das verwendete Fragebogen-Layout. Im Layout können Sie Farben, Schriftarten, Schriftgröße, verfügbare Breite, etc. anpassen. Das Layout können Sie unter dem Menüpunkt Fragebogen-Layouts anpassen.

SoSci Survey enthält eine Reihe von Layout-Vorlagen zur Auswahl. Sie können ebenso ein eigenen Layout erstellen (z.B. entsprechend der Unternehmens-CI oder passend zur Uni-Website) – allderings erfordert dies einige Grundkenntnissen in Webdesign (HTML, CSS).

Hinweis: Falls Sie mehrere Layouts erstellt oder aktiviert haben, wird standardmäßig jenes Layout verwendet, das als Standard-Layout markiert ist. Falls Sie für einen einzelnen Fragebogen ein anderes Layout verwenden möchten, wählen Sie dieses unter Fragebogen zusammenstellen → Karteireiter Einstellungen aus. Speichern nicht vergessen.

Layout-Vorlagen verwenden

Im Menüpunkt Fragebogen-Layouts sehen Sie einige Layouts-Vorlagen. Klicken Sie bei dem gewünschten Layout auf Aktivieren, um es zu verwenden. Anschließend wird das Layout oben unter Fragebogen-Layouts aufgelistet und kann ggf. noch angepasst werden.

Einfache Anpassungen

Falls Sie noch kein Layout erstellt oder aktiviert haben, verwendet SoSci Survey ein schlichtes Layout in weiß-hellblau mit einer Breite von 600 Pixeln. Falls Sie Farben oder Breite des Standard-Layouts anpassen möchten, erstellen Sie eine Kopie des Standard-Layouts:

Wählen Sie den Menüpunkt Fragebogen-Layouts
Klicken Sie auf Neues Layout erstellen, um eine Kopie des Standard-Layouts zu erstellen.
Tragen Sie eine Kennung (z.B. „default“) und eine Beschreibung (z.B. „Standardlayout in pink“) ein und nehmen Sie anschließend die gewünschten Änderungen vor. Speichern nicht vergessen.
Beim nächsten Aufruf von Fragebogen-Layouts erscheint das neue Layout oben in der Liste und kann zum Bearbeiten angeklickt werden.

Um Änderungen am Standard-Layout oder an einem anderen Layout vorzunehmen, klicken Sie in der Auflistung aktiver Layouts (ganz oben unter Fragebogen-Layouts) auf das entsprechende Layout ().

Ändern Sie die Farben, indem Sie 6-stellige Farb-Codes eintragen. Diese Codes können Sie mit dem Farb-Rechner ermitteln (einfach auf die Farben klicken) oder in der Grafiksoftware Ihrer Wahl ablesen.
Ändern Sie die Breite, indem Sie den Wert bei Basisbreite des Layouts anpassen.
Falls Sie die Schriftart ändern möchten, beachten Sie bitte, dass im Internet standardmäßig nur wenige Schriftarten auf (fast) allen Browsern funktionieren (u.a. Arial, Verdana, Times New Roman und Courier New, s. Verbreitung von Schriftarten bei Web-Usern). Daher werden hier jeweils mehrere Schriftarten durch Kommata getrennt angegeben – und zuletzt jeweils eine abstrakte Angabe wie (serif oder sans-serif, s. SelfHTML: font-family).
Speichern Sie das Layout mit OK.
Nach dem Speichern sehen Sie unten, wie das Layout aussehen wird.

Erweiterte Anpassungen

In den verschiedenen Karteireitern des Layouts lassen sich nahezu alle Elemente eines Fragebogens einzeln anpassen. Jenseits der Farben sind dafür Grundkenntnisse in CSS (SelfHTML: CSS-Eigenschaften) sehr hilfreich.

Um in CSS-Definitionen auf die zentral definierten Farben zuzugreifen, stehen die Platzhalter %color.1% bis %color.8% zur Verfügung. Die Nummerierung ergibt sich einfach aus der Reihenfolge der Farben im Karteireiter Farbschema. So steht %color.2% etwa für die im Farbschema definierte Warnfarbe.

Vollständige Anpassung

Im Karteireiter HTML-Vorlage des Layouts kann der zugrundeliegende HTML-Code für das Layout angepasst oder komplett neu erstellt werden. Dabei sollten folgende Vorgaben beachtet werden:

Der DOCTYPE sollte HTML 4 entsprechen, also der vom SoSci Survey bei Fragen verwendeten HTML-Version
Zu Beginn des Kopfbereichs <head> sollte der Platzhalter %head% platziert werden – an dieser Stelle fügt SoSci Survey etwa den CSS-Code für das Layout der Fragen ein.
Im Inhalt des Fragebogens <body> muss der Platzhalter %questionnaire% vorkommen (an dieser Stelle wird der Inhalt der jeweiligen Fragebogen-Seite eingefügt), die Platzhalter %logo%, %progress% und %imprint% sollten ebenfalls an geeigneter Stelle platziert werden.

Folgende Platzhalter stehen für das Layout zur Verfügung:

Platzhalter	Funktion
`%questionnaire%`	Platzhalter für den eigentlichen Inhalt des Fragebogens
`%imprint%`	Platzhalter für das im Befragungsprojekt definierte Impressum
`%logo%`	Platzhalter für ein Logo, das im Befragungsprojekt angepasst werden kann
`%progress%`	Platzhalter für den Fortschrittsbalken
`%color.1%` bis `%color.8%`	Farben aus dem Farbschema (s. oben)
`%width%`, `%width-80%`	Die für das Layout eingestellte Basis-Breite (Pixel, `px`). Falls hinter dem `width` ein Plus (`+`) oder Minus (`-`) angegeben wird, gibt der Platzhalter die Basis-Breite zu-/abzügliches dieses Wertes an.
`%button.next%`	Platzhalter für den „Weiter“-Knopf. Falls der Platzhalter nicht verwendet wird, wird der Knopf automatisch bei `%button.submit%` platziert.
`%button.back%`	Platzhalter für den „Zurück“-Knopf. Falls der Platzhalter nicht verwendet wird, wird der Knopf automatisch bei `%button.submit%` platziert.
`%button.submit%`	Platzhalter für die „Weiter“- und „Zurück“-Knöpfe. Falls der Platzhalter nicht verwendet wird, werden die Knöpfe automatisch unter dem Fragebogen platziert.
`%button.break%`	Knopf zum Unterbrechen der Interviews. Dieser Knopf muss in den Fragebogen-Einstellungen gesondert aktiviert werden. Falls der Platzhalter nicht verwendet wird, wird der Knopf bei `%button.control%` platziert.
`%button.leave%`	Knopf zum Abbrechen und Löschen der Interviews. Dieser Knopf muss in den Fragebogen-Einstellungen gesondert aktiviert werden. Falls der Platzhalter nicht verwendet wird, wird der Knopf bei `%button.control%` platziert.
`%button.language%`	Knöpfe zum Umschalten der Sprache. Die Knöpfe sind nur in mehrsprachigen Projekten verfügbar und müssen in den Fragebogen-Einstellungen gesondert aktiviert werden. Falls der Platzhalter nicht verwendet wird, werden die Knöpfe bei `%button.control%` platziert.
`%button.screenreader%`	Knopf zum Verlassen des barrierefreien Screenreader-Modus, falls dieser aktiviert wurde. Falls der Platzhalter nicht verwendet wird, wird der Knopf bei `%button.control%` platziert.
`%button.control%`	Platzhalter für die Kontroll-Knöpfe (s. oben), wird der Platzhalter nicht verwendet, werden die Knöpfe unter dem Fragebogen platziert.