| Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende ÜberarbeitungNächste ÜberarbeitungBeide Seiten der Revision |
| de:create:layout [29.10.2014 22:53] – Querverweise auf einzelne Optionen admin | de:create:layout [19.11.2014 09:23] – [Erweiterte Anpassungen] admin |
|---|
| ====== Fragebogen-Layouts ====== | ====== 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. | 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 Unternehmens-CI oder passend zur Uni-Website) -- allderings erfordert dies einige Grundkenntnissen in Webdesign (HTML, CSS). | 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). |
| |
| **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. | * 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 ''[[:de:create:functions-output#option|option('layout', ...)]]'' zur Verfügung. In Verbindung mit der Layout-Vorlage "SoSci Stimulus Presenter" kann beispielsweise ein Stimulus ohne Fragebogen-Rahmen präsentiert werden. |
| |
| ===== Layout-Vorlagen verwenden ===== | ===== 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. | 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. |
| |
| ===== Einfache Anpassungen ===== | ===== Einfache Anpassungen ===== |
| |
| * Wählen Sie den Menüpunkt **Fragebogen-Layouts** | * Wählen Sie den Menüpunkt **Fragebogen-Layouts** |
| * Klicken Sie auf //Neues Layout erstellen//, um eine Kopie des Standard-Layouts zu erstellen. | * Erstellen Sie eine Kopie des Standard-Layouts |
| * 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. | * Klicken Sie auf //Neues Layout erstellen// und tragen Sie eine //Kennung// (z.B. "default") und eine Beschreibung (z.B. "Standardlayout in pink") ein __oder__ |
| * Beim nächsten Aufruf von **Fragebogen-Layouts** erscheint das neue Layout oben in der Liste und kann zum Bearbeiten angeklickt werden. | * 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 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 ({{:button.edit.gif?nolink|Layout bearbeiten}}). | Um Änderungen an einem Layout vorzunehmen, klicken Sie in der Auflistung aktiver Layouts (ganz oben unter **Fragebogen-Layouts**) auf das entsprechende Layout ({{:button.edit.gif?nolink|Layout bearbeiten}}). |
| |
| * Ä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 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. | * Ä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. [[http://www.webmasterpro.de/design/news/2009/02/02/verbreitung-von-schriftarten-im-web.html|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. [[http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family|SelfHTML: font-family]]). | * 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. [[http://www.webmasterpro.de/design/news/2009/02/02/verbreitung-von-schriftarten-im-web.html|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. [[http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family|SelfHTML: font-family]]. |
| * Speichern Sie das Layout mit //OK//. | * Speichern Sie das Layout mit //OK//. |
| * Nach dem Speichern sehen Sie unten in der Vorschau, wie das Layout aussehen wird. | * Nach dem Speichern sehen Sie unten in der Vorschau, wie das Layout aussehen wird. |
| * | |
| ===== Erweiterte Anpassungen ===== | ===== Erweiterte Anpassungen ===== |
| |
| |
| ^Funktion^Karteireiter^Name der Option^ | ^Funktion^Karteireiter^Name der Option^ |
| |Größere oder andere Auswahlfelder|Grundeinstellungen|Auswahlfelder -> Art der Auswahlfelder\\ **Hinweis:** Ist eine Option mit "nicht differenziert" markiert, sehen Auswahlfelder für einfache Auswahl (i.d.R. rund) und Mehrfachauswahl (i.d.R. eckig) gleich aus.| | |Größere Auswahlfelder oder Auswahlfelder mit einem anderen Erscheinungsbild (Auswahlfragen und Skalen)|Grundeinstellungen|Auswahlfelder -> Art der Auswahlfelder\\ **Hinweis:** Ist eine Option mit "nicht differenziert" markiert, sehen Auswahlfelder für einfache Auswahl (i.d.R. rund) und Mehrfachauswahl (i.d.R. eckig) gleich aus.| |
| |Schriftart-/größe von Skalen-Beschriftung|Fragebogen-Elemente|Hauptelemente -> Verbale Skalen-Verankerung| | |Schriftart-/größe von Skalen-Beschriftung|Fragebogen-Elemente|Hauptelemente -> Verbale Skalen-Verankerung| |
| |Höhe/Abstand von Auswahloptionen|Fragebogen-Elemente|Abstände -> Abstand zw. Optionen| | |Höhe/Abstand von Auswahloptionen|Fragebogen-Elemente|Abstände -> Abstand zw. Optionen| |
| In den verschiedenen Karteireitern des Layouts lassen sich nahezu alle Elemente eines Fragebogens einzeln anpassen. Jenseits der Farben sind dafür Grundkenntnisse in CSS ([[http://de.selfhtml.org/css/eigenschaften/index.htm|SelfHTML: CSS-Eigenschaften]]) sehr hilfreich. | In den verschiedenen Karteireitern des Layouts lassen sich nahezu alle Elemente eines Fragebogens einzeln anpassen. Jenseits der Farben sind dafür Grundkenntnisse in CSS ([[http://de.selfhtml.org/css/eigenschaften/index.htm|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. | 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 ===== | ===== 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: | 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 | * Der DOCTYPE sollte HTML 4 entsprechen, diese HTML-Version verwendet SoSci Survey für die Darstellung von Fragen. |
| * 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. | * 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. | * 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: | Folgende Platzhalter stehen für das Layout zur Verfügung: |
