Fragebogen-Layouts

Wie ein Fragebogen letztlich aussieht, entscheidet das verwendete Fragebogen-Layout. Im Layout können die Farbe des Fragebogens, Schriftarten, Schriftgröße, verfügbare Breite, etc. angepasst werden. Unter dem Menüpunkt Fragebogen-Layouts können neue Layouts ausgewählt und/oder angepasst werden.

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

• Falls Sie mehrere Layouts erstellt oder aktiviert haben, wird standardmäßig jenes Layout verwendet, das als Standard-Layout markiert ist. Sie können jedes Layout als Standard auswählen und mit dem Knopf Ausgewähltes Layout als Standard festlegen speichern.
• Falls Sie mit mehreren Fragebögen arbeiten, können Sie unter Fragebogen zusammenstellen → Karteireiter Einstellungen das Layout auswählen, das jeweils verwendet werden soll. Speichern nicht vergessen.
• Falls Sie im Fragebogen für eine einzelne Seite ein anderes Layout verwenden möchten, steht dafür die Funktion option('layout', ...) zur Verfügung. In Verbindung mit der Layout-Vorlage „SoSci Stimulus Presenter“ kann beispielsweise ein Stimulus ohne Fragebogen-Rahmen präsentiert werden.

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

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
• Erstellen Sie eine Kopie des Standard-Layouts
  • Klicken Sie auf Neues Layout erstellen und tragen Sie eine Kennung (z.B. „default“) und eine Beschreibung (z.B. „Standardlayout in pink“) ein oder
  • aktivieren Sie die Layout-Vorlage „SoSci Survey Standard“ und klicken Sie das Layout anschließend an, um es zu bearbeiten.
• 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 verfügbarer Layouts und kann zum weiteren Bearbeiten angeklickt werden.

Um Änderungen an einem 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 standardmäßig nur wenige Schriftarten für das Internet geeignet sind (d.h., auf den meisten 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.
• Wählen Sie bei Art der Auswahlfelder ggf. ein anderes Design für die Felder, die für einfache Auswahlfragen und Mehrfachauswahlen angezeigt werden (s. auch Benutzerdefinierte Auswahlfelder).
• Speichern Sie das Layout mit OK.
• Nach dem Speichern sehen Sie unten in der Vorschau, wie das Layout aussehen wird.

Neben den Farben, der Fragebogen-Breite und der Schriftart (alles anpassbar im ersten Karteireiter des Layouts) gibt es eine Reihe von populären Einstellungsoptionen im Layout:

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.

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:

• SoSci Survey verwendet HTML 5 für die Darstellung von Fragen.
• Zu Beginn des Kopfbereichs <head> sollte der Platzhalter %head% bzw. HTML-kompatibel <link type="placeholder" href="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.
• Die Position von Knöpfen (z.B. Weiter-Knopf oder Sprachauswahl) kann im Layout durch spezielle Platzhalter vorgegeben werden, z.B. auch oben auf der Seite. Werden die Platzhalter nicht verwendet, setzt SoSci Survey die Knöpfe im %questionnaire% Bereich unter die Fragen.

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

Tipp: Für Arbeiten an der HTML-Vorlage des Layouts sind die Entwickler-Tools im Browser ein sehr hilfreiches Werkzeug.

Fügen Sie in der HTML-Vorlage des Layouts vor dem </style> folgenden CSS-Code ein, um Pflichtfragen („muss beantwortet werden“) mit einem Sternchen zu markieren.

/* Mandatory question marker */
span.s2mandatory::after {
  content: " *";
  color: var(--s2color4);
}