Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:layout [02.01.2015 16:11] – admin
+++ de:create:layout [27.07.2025 21:59] (aktuell) – [Vollständige Anpassung] admin
@@ Zeile 29: / Zeile 29: @@
   * Ä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. [[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]].
+  * 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 [[:de:create:layout-inputs]]).
   * Speichern Sie das Layout mit //OK//.
   * Nach dem Speichern sehen Sie unten in der Vorschau, wie das Layout aussehen wird.
@@ Zeile 51: / Zeile 52: @@
 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, diese HTML-Version verwendet SoSci Survey für die Darstellung von Fragen.
+  * SoSci Survey verwendet HTML 5 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%'' 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.
@@ Zeile 65: / Zeile 66: @@
 |''%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.|
+|''%header.image%''|Dateiname einer Bilddatei, welche im Layout als "Kopfbild" festgelegt werden kann.|
 |''%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.|
@@ Zeile 71: / Zeile 73: @@
 |''%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.lang%''|Einzelner Knopf zum Umschalten der Sprache, nur in mehrsprachigen Projekten verfügbar und nur, wenn unter **Fragebogen zusammenstellen** die Knöpfe zum Sprachwechsel aktiviert wurden.|
 |''%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.|
+**Tipp:** Für Arbeiten an der HTML-Vorlage des Layouts sind die [[:de:general:browser-tools]] ein sehr hilfreiches Werkzeug.
+===== Konkrete Anpassungen =====
+==== Pflichtfragen markieren ====
+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.
+<code css>
+/* Mandatory question marker */
+span.s2mandatory::after {
+  content: " *";
+  color: var(--s2color4);
+}
+</code>