Fragebogen-Gestaltung

Die optische Gestaltung der diversen Fragebogen-Elemente kann man an 3 verschiedenen Orten festlegen: bei den Allgemeinen Einstellungen des Fragebogens, über eine Layout-Schablone und direkt in jeder Frage. Diese Seite hier gibt einen ersten kurzen Überblick über die Möglichkeiten bei der Fragebogen-Gestaltung an den 3 verschiedenen Orten. Und sie geht näher darauf ein, wie Collector sich verhält, wenn konkurrierende Formatierungen an mindestens 2 der 3 Orte definiert werden.

Nach oben

Allgemeines zur Fragebogen-Gestaltung

Technologische Basics: Inline Styles vs. CSS

Die ursprüngliche Vorgehensweise, um HTML-Seiten zu formatieren, ähnelt der Formatierung einfacher Textdokumente. Man legt für jeden Satz, jedes Wort oder auch nur für bestimmte Buchstaben fest, wie (also mit welcher Schrift, Grösse, Farbe und in welchem Stil) diese dargestellt werden sollen. Im HTML-Code werden diese Anweisungen dann als sog. Inline-Styles direkt im Text notiert. Das Formatieren einzelner Fragen/Textblöcke in Collector bedient sich dieser Methode, wobei ein Texteditor das Übersetzen der Formatierungsanweisung in HTML-konformen Quelltext vornimmt, sodass keine HTML-Kenntnisse notwendig sind.

Genauso wie man in einem Textdokument globale Formate definieren kann, kann man das auch für eine Website und für Online-Fragebögen tun. Dies geschieht über sog. Cascading Style Sheets (kurz: CSS). Jedes Element in einem Collector-Fragebogen hat einen - manche haben sogar mehrere - Klassennamen. Im CSS kann man nun zentral definieren, wie alle Elemente, die einen bestimmten Formatklassennamen haben, formatiert werden sollen. Diese Vorgehensweise kommt zum Einsatz beim Formatieren des Fragebogens über die Allgemeinen Einstellungen, wobei keine CSS-Kenntnisse notwendig sind. CSS-Formatierungen kann man auch sehr gut über Layout-Schablonen nutzen. Zum Erstellen einer Layout-Schablone sind jedoch HTML/CSS-Kenntnisse vonnöten.

Hierarchie-Regeln bei konkurrierenden Formatierungen

Da es theoretisch möglich ist, an allen 3 Orten, die in den nachfolgenden Kapiteln näher betrachtet werden, eine Formatierungsanweisung für ein und dasselbe Element festzulegen, ist es hilfreich zu verstehen, welche Anweisung von den Browsern schlussendlich umgesetzt wird. Ohne zu sehr in die Details von CSS zu gehen, kann man bei konkurrierender Formatierung grob sagen, dass die im Quellcode zuletzt erscheinende Formatierungsanweisung umgesetzt wird, während vorhergehende Anweisungen unberücksichtigt bleiben.

Die zentral definierten CSS-Formate werden immer vor den Fragen notiert, wobei die CSS-Formate aus den Allgemeinen Fragebogen-Einstellungen in aller Regel vor den CSS-Formaten der Layout-Schablone notiert sind. Daraus ergibt sich folgende Hierarchie: Eine Formatierungsanweisung aus den Allgemeinen Fragebogen-Einstellungen wird nur dann umgesetzt, wenn eine allenfalls verknüpfte Layout-Schablone kein anderes Format festlegt. Und die Formatierungen, die in den einzelnen Fragen/Textblöcken angelegt wurden, überschreiben in jedem Falle die Formatierungen aus den Allgemeinen Fragebogen-Einstellungen und aus einer allenfalls verknüpften Layout-Schablone.

Es empfiehlt sich, so viele Formate wie möglich global mittels CSS zu definieren und nur Einzelfall-Formatierungen (z.B. einzelne Worte fett/kursiv geschrieben hervorheben) in den Fragen/Textblöcken manuell festzulegen. Auf der Seite "Verschiedenes" gibt es im Unterkapitel "Schablone hinzufügen" ein PDF Manual, das die wichtigsten Formatklassennamen der Collector-Fragebögen auflistet.

Nach oben

Fragebogen formatieren in den Allgemeinen Einstellungen

Wie komme ich zu den Allgemeinen Fragebogen-Einstellungen?

  1. in der Menüleiste (ganz oben) auf "Fragebögen" -> "Übersicht" klicken

    Bild

  2. den Fragebogen markieren (1x anklicken), er ist dann gelb hinterlegt

    Bild
  3. in der Iconleiste (oben rechts) auf das dritte Icon "Bearbeiten" Bild klicken

    Bild Bild Bild Bild Bild Bild Bild 


Welche Formatierungsoptionen bieten die Allgemeinen Fragebogen-Einstellungen?

Für die Fragebogen-Gestaltung gibt es bei den Allgemeinen Fragebogen-Einstellungen die Registerkarte "Layout". Folgende Formatierungsmöglichkeiten stehen zur Verfügung:

allgemeine Formatierungen
- Schriftart, Grösse und Farbe
- Hintergrundfarbe oder Hintergrundbild
- alternierende Hintergrundfarben für ganze Fragen
- Farbe der Trennlinie zwischen den Fragen
- Farbe der Validierungsmeldungen (bei Pflichtfragen)

Formatierung der Fragetexte
- Schriftart, Grösse und Farbe sowie Schriftstil (fett/kursiv)
- Hintergrundfarbe

Formatierung der Textblöcke
- Schriftfarbe
- Hintergrundfarbe

spezielle Formatierungen bei Matrix- und Kombinationsfragen
- alternierende Hintergrundfarben für die Sub-Fragen (Zeilen)
- Farbe der Trennlinie zwischen den Sub-Fragen (Zeilen)

Formatierung der Erklärungstexte (Mouseover-Funktion)
- Schriftfarbe
- Hintergrundfarbe
- Farbe der Umrandung

eigene Bilder anstelle der Standard-Antwortoptionen-Buttons
- für angekreuzte und nicht-angekreuzte Radio-Buttons und Checkboxes

Weitere Details zu den Formatierungsoptionen in den Allgemeinen Einstellungen finden Sie auf der Seite "Allgemeine Einstellungen des Fragebogens".

Nach oben

Fragebogen formatieren mit Hilfe einer Layout-Schablone

Wie lade ich eine Schablone ins Archiv?

  1. in der Menüleiste (ganz oben) auf "Archiv" -> "Schablone" klicken


  2. in der Iconleiste (oben rechts) auf das erste Icon "Hinzufügen" Bild klicken

    Bild  Bild  Bild  Bild  Bild

  3. Name der Schablone vergeben und den Link zur Schablone im Feld URL eintragen


Eine Schablone ist eine normale HTML-Datei, die irgendwo auf einem Webserver abgelegt sein muss, sodass man sie mit einer Internet-Adresse im Browser öffnen kann. Diese HTML-Datei kann alles beinhalten, was gemäss HTML-Standard zulässig ist. Sie muss zwingend den [!CONTENT!] Platzhalter integriert haben. Anstelle des [!CONTENT!] Platzhalters werden später die Fragen des Fragebogens eingeblendet.

Nach dem Hochladen sollten Sie sich die Schablone kurz in der Vorschau anschauen. Für den Fall, dass die Schablone nicht vollständig geladen wurde, klicken Sie einmal auf das Icon "Aktualisieren".

Wie verknüpfe ich die Schablone mit dem Fragebogen?

  1. in der Menüleiste (ganz oben) auf "Fragebögen" -> "Übersicht" klicken

    Bild

  2. den Fragebogen markieren (1x anklicken), er ist dann gelb hinterlegt

    Bild
  3. in der Iconleiste (oben rechts) auf das dritte Icon "Bearbeiten" Bild klicken

    Bild Bild Bild Bild Bild Bild Bild 

  4. in der Registerkarte "Seite" unterhalb der Kopf- und Fusszeilentexte die Schablone auswählen

Wenn der Fragebogen mehr als eine Sprache eingestellt hat, kann für jede Sprache eine andere (oder auch dieselbe) Schablone ausgewählt werden.

Welche Formatierungsoptionen bietet eine Layout-Schablone?

Eine Layout-Schablone ist eine frei editierbare HTML-Datei. Somit stehen alle Möglichkeiten offen, die HTML und assoziierte Skriptsprachen bieten.

Nach oben

Einzelne Fragen/Textblöcke formatieren

Wie komme ich zum Fragenformatieren?

  1. in der Menüleiste (ganz oben) auf "Fragebögen" -> "Übersicht" klicken

    Bild

  2. den Fragebogen markieren (1x anklicken), er ist dann gelb hinterlegt

    Bild
  3. in der Iconleiste (oben rechts) auf das zweite Icon "Öffnen" Bild klicken

    Bild Bild Bild Bild Bild Bild Bild Bild

  4. nur im erweiterten Fragebogenmodus: den Abschnitt markieren (1x anklicken), er ist dann gelb hinterlegt

    Bild
  5. nur im erweiterten Fragebogenmodus: in der Iconleiste (oben rechts) auf das zweite Icon "Öffnen" Bild klicken

    Bild Bild Bild Bild Bild Bild

  6. die Frage (bzw. den Textblock) markieren (1x anklicken), sie (er) ist dann gelb hinterlegt



  7. in der Iconleiste (oben rechts) auf das Icon "Bearbeiten" Bild klicken

    Icons im einfachen Fragebogenmodus: Bild Bild Bild Bild Bild Bild

    Icons im erweiterten Fragebogenmodus: Bild Bild Bild Bild Bild Bild Bild Bild Bild

Das Formatieren der Fragen unterscheidet sich je nachdem, ob man den Fragetext oder die Antwortoptionen formatieren möchte. Die Fragetexte werden innerhalb eines Texteditors mit umfangreichen Formatierungsoptionen notiert. Für die Antwortoptionen stehen die normalen Standard-Formatierungsoptionen zur Verfügung.

Welche Formatierungsoptionen bietet das Formatieren einzelner Fragen/Textblöcke?

Die Fragetexte werden in einen Editor geschrieben, der eine Reihe von Formatierungsoptionen bietet. Als Nutzer kann man die Formatierung des Textes entweder über die Icons in den 3 Icon-Leisten vornehmen. Dafür sind keine HTML-Kenntnisse notwendig. Oder man wechselt als Nutzer in die Quellcode-Ansicht. Dort kann man direkt HTML-Formatierungen eingeben:

in der zweiten Icon-Leiste befinden sich die Icons für folgende Formatierungen:
- Textstil, Textausrichtung, Texteinzug
- geordnete und ungeordnete Auflistung
- Setzen einer Verlinkung
- Einfügen von Bildern und Videos
- Einfügen von Erklärungstexten (Mouseover-Funktion)
- Erstellen von Tabellen
- Erstellen horizontaler Linien

in der dritten Icon-Leiste befinden sich die Icons für folgende Formatierungen:
- Schriftart, Grösse und Format
- Textfarbe und Hintergrundfarbe

Die Antwortoptionen werden in Textzeilen notiert. Um diese Texte zu formatieren, markiert man sie und klickt dann auf die Icons im oberen grauen Balken:

Hier können der Textstil sowie die Schriftgrösse und -farbe definiert werden. Des weiteren sind Verlinkungen und Erklärungstexte (Mouseover-Funktion) möglich.

Nach oben

Weitere Themen zur Fragebogen-Gestaltung

Verschiedene Formatierungen für PC-Bildschirm, Smartphone-Display und Drucker/PDF

Wenn eine Internet-Seite von einem Browser angefordert wird, übergibt der Browser in der Regel die Information, ob er auf einem PC/Tablet oder auf einem Smartphone installiert ist. Dies ermöglicht, dass die ausgelieferte Internet-Seite je nach Gerät beim Befragungsteilnehmer unterschiedlich gestaltet sein kann. Technisch läuft dies so ab, dass bestimmte Quellcode-Zeilen in den HTML-Dateien doppelt (für Bildschirm und Display) angelegt werden. Mit einem speziellen Tag umschliesst man die eine und die andere Ausführung, sodass der Server angewiesen wird, je nach Gerät beim Befragungsteilnehmer nur den einen oder den anderen HTML-Quellcode auszuliefern. Auf diese Weise könnte man z.B. ein Platz verbrauchendes Logo nur auf PC-Bildschirmen einblenden oder für Smartphones eigenständige CSS-Formatierungen definieren.

Um die unterschiedlichen Layouts für Bildschirme und Displays nutzen zu können, legen Sie eine Layout-Schablone an (oder bearbeiten eine schon bestehende Schablone).
HTML-Quellcode, der von folgendem Tag umschlossen wird, wird nur an PCs und Tablets ausgeliefert:
<cf_DeviceArea mobile="false" pc="true">...</cf_DeviceArea>
HTML-Quellcode, der von folgendem Tag umschlossen wird, wird nur an Smartphones ausgeliefert:
<cf_DeviceArea mobile="true" pc="false">...</cf_DeviceArea>

Darüber hinaus bietet CSS die Möglichkeit, Formatierungen nur für den Drucker festzulegen. Wenn man am Ende des Fragebogens den Befragten mittels Platzhalter [!DRUCKEN!] oder [!PDF!] ermöglicht, ihr Interview auszudrucken oder als PDF auszugeben, dann kann man dafür spezielle Formate definieren. Z.B. könnte ein heller Text auf dunklem Untergrund im Online-Fragebogen in einen dunklen Text auf hellem Untergrund umgewandelt werden, der auf Papier gedruckt besser zu lesen ist. In CSS werden die speziellen Formatierungen von folgendem Code umschlossen:
@media print { ... }
Das Gegenstück dazu wäre "@media screen". Da das Generieren der PDF Dateien technisch als Drucken in eine PDF Datei angelegt ist, kommen die "media print" Anweisungen auch bei den PDF Dateien zur Anwendung.

Eigene Schriften im Fragebogen verwenden

Eine herkömmliche Internet-Seite verwendet die Standard-Schriftarten, die auf jedem Rechner installiert sind. In CSS steuert man diese über den Eintrag bei "font-family" an. Wenn man anstelle dessen eine eigene Schriftart für den Fragebogen verwenden möchte, müssen die entsprechenden Schriftart-Dateien (.woff/.eot/.ttf/.svg) zunächst auf dem Server abgelegt werden. Da eine eigene Schriftart nur über dieselbe Domain geladen werden kann, die auch die Website, also der Fragebogen, in der Internet-Adresse verwendet, müssen die Schriftart-Dateien auf den Collector-Server hochgeladen werden. Dazu wenden Sie sich bitte an den Collector-Support. Nach erfolgtem Hochladen erhalten Sie die genauen Links, die Sie dann in CSS verwenden können.

Nach oben