Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:questions:scale [05.10.2018 17:52] – [Skala] admin
+++ de:create:questions:scale [01.08.2023 22:11] (aktuell) – [Darstellung auf mobilen Endgeräten] admin
@@ Zeile 16: / Zeile 16: @@
 ==== Items invertieren ====
-Die können die Kodierung einzelner Items invertieren (reversed coding), sodass eine Auswahl des Minimums (z.B. "trifft überhaupt nicht zu") nicht den Code 1, sondern den Code 5 (auf einer 5-stufigen Skala) erhält. Setzen Sie dafür entweder in der //Item-Schnelleingabe// ein Häkchen rechts vom Itemtext (⮀) oder wählen Sie das Item links in der Navigation (**Fragenkatalog**) aus und aktivieren Sie die Option //Antwortcodes für dieses Item invertieren//.
+Sie können die Kodierung einzelner Items invertieren (reversed coding), sodass eine Auswahl des Minimums (z.B. "trifft überhaupt nicht zu") nicht den Code 1, sondern den Code 5 (auf einer 5-stufigen Skala) erhält. Setzen Sie dafür entweder in der //Item-Schnelleingabe// ein Häkchen rechts vom Itemtext (⮀) oder wählen Sie das Item links in der Navigation (**Fragenkatalog**) aus und aktivieren Sie die Option //Antwortcodes für dieses Item invertieren//.
 ==== Items umkodieren ====
@@ Zeile 24: / Zeile 24: @@
 Dafür benötigen Sie zunächst eine Frage [[:de:create:questions:internal]] mit ebenso vielen Variablen, wie Ihre Skala Items hat. Am einfachsten erreichen Sie dies, indem Sie die Frage mit der Skala duplizieren und anschließend den Fragetyp der Kopie zu "Interne Variablen" ändern.
-Anschließend lesen Sie mittels [[:de:create:php|PHP-Code]] und der Funktion ''[[:de:create:functions:value]]'' die Antwort des Teilnehmers in der Skala aus, nehmen die gewünschte Umkodierung vor, und speichern das Ergebnis mittels ''[[:de:create:functions:put]]'' in eine der internen Variablen an.
+Anschließend lesen Sie mittels [[:de:create:php|PHP-Code]] und der Funktion ''[[:de:create:functions:value]]'' die Antwort des Teilnehmers in der Skala aus, nehmen die gewünschte Umkodierung vor, und speichern das Ergebnis mittels ''[[:de:create:functions:put]]'' in eine der internen Variablen ab.
 **Wichtig:** Der PHP-Code darf nicht auf derselben Seite stehen wie die Skala, sondern auf der nächsten Seite (z.B. gleich zu Beginn der folgenden Seite). Details dazu entnehmen Sie bitte den Hinweisen zur Funktion ''[[:de:create:functions:value]]''.
@@ Zeile 89: / Zeile 89: @@
   }
 }
+</code>
+===== Darstellung auf mobilen Endgeräten =====
+Auf mobilen Endgeräten zeigt SoSci Survey bei voll beschrifteten Skalen standardmäßig nicht die kleinen Auswahlfelder, sondern große Boxen, die man mit dem Finger einfach treffen kann.
+Auf sehr kleinen Displays werden die Antwortoptionen dann vertikal angeordnet. Dabei wird -- wie man es von Lautstärkereglern kennt -- die höchste Ausprägung oben, die kleinste unten platziert. Falls Sie die Optionen lieber von unten-nach-oben anordnen möchten, fügen Sie auf der Fragebogen-Seite bitte folgenden PHP-Code ein.
+<code php>
+pageCSS('
+    div.s2input div.s2options {
+        flex-direction: column !important;
+    }
+');
 </code>
@@ Zeile 101: / Zeile 117: @@
 Falls nicht, legen Sie mehrere Skalen-Fragen an und zeigen Sie diese im Fragebogen direkt untereinander und ohne Abstand an: [[:de:create:concat]]
+===== Vertikale Beschriftungen =====
+Bei vollständig beschrifteten Skalen kommt es vor, dass der Platz eng wird. Meist ist es in diesem Fall sinnvoll, inhaltliche Änderungen an der Frage vorzunehmen oder einen anderen Fragetyp zu verwenden (z.B. eine Auswahlabfolge). Aber in manchen Einzelfällen kann es auch sinnvoll sein, die Beschriftungen der Skalenpunkte vertikal auszurichten.
+**Vorsicht:** Die nachfolgende Lösung funktioniert ohne weitere Anpassungen nicht korrekt auf den kleinen Bildschirmen von Mobilgeräten.
+Um Text um 90° gedreht auszurichten, ergänzen Sie zunächst im [[:de:create:layout|Fragebogen-Layout]] in der //HTML-Vorlage// im ''<style>''-Bereich zunächst folgenden CSS-Code.
+<code css>
+div.vert {
+    height: 100px;
+    width: 20px;
+    overflow: hidden;
+    position: relative;
+}
+div.vert > span {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    width: 100px;
+    height: 20px;
+    text-align: left;
+    transform: rotate(270deg) translate(-20px, 5px);
+    transform-origin: 0 0;
+}
+</code>
+Bitte beachten Sie, dass die genauen Maße - insbesondere die ''100px'' und generell ''width'' und ''height'' an die jeweilige Skala angepasst werden müssen. Alternativ zum Layout können Sie den CSS-Code auch mit dem PHP-Befehl ''[[de:create:functions:pagecss]]'' nur auf einer einzigen Seite im Fragebogen einbinden. In diesem Fall sehen Sie die Änderung aber nur im Fragebogen und nicht in der Vorschau der Frage.
+Weiterhin reduzieren Sie in der Skalenfrage die //Breite beschrifteter Werte/Spalten// auf ca. 40 Pixel.
+Zuletzt setzen Sie die Beschriftungen der Auswahloptionen in ein ''<div>'' und ein ''<span>'' Tag, wie im folgenden Beispiel:
+<code html>
+<div class="vert"><span>Trifft überhaupt nicht zu</span></div>`
+</code>