Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:combine [11.04.2014 13:58] – Auslagerung der Dropdowns nach de:create:table-layout-dropdowns admin
+++ de:create:combine [28.03.2023 09:37] (aktuell) – [Kombinierte Fragen] admin
@@ Zeile 9: / Zeile 9: @@
 {{:de:create:scr.combine.example2.png?nolink|Beispiel 2 für eine kombinierte Frage}}
-Bevor Sie eine kombinierte Frage bauen, halte Sie aber bitte einen Moment inne. Gedruckte Fragebögen und Onlinefragebögen unterscheiden sich in wichtigen Punkten -- erstere bieten sehr viel Platz in die Breite, letztere erlauben Filterführung und beliebig viele Seiten. Wenn eine tabellarische Darstellung in der gedruckten Version gut aussieht, dann ist es im Onlinefragebogen oftmals besser, mehrere Fragen zu verwenden. Unter Umständen kann man irrelevante Items (z.B. nicht genutzte Angebote) bei den folgen Teilfragen dann gleich ausblenden.
+Bevor Sie eine kombinierte Frage bauen, halten Sie aber bitte einen Moment inne. Gedruckte Fragebögen und Onlinefragebögen unterscheiden sich in wichtigen Punkten -- erstere bieten sehr viel Platz in die Breite, letztere erlauben Filterführung und beliebig viele Seiten. Wenn eine tabellarische Darstellung in der gedruckten Version gut aussieht, dann ist es im Onlinefragebogen oftmals besser, mehrere Fragen zu verwenden. Unter Umständen kann man irrelevante Items (z.B. nicht genutzte Angebote) bei den folgenden Teilfragen dann gleich ausblenden.
+**Hinweis:** Bitte lesen Sie unbedingt auch die Hinweise zu Mobilgeräten weiter unten. Beachten Sie bitte auch, dass sich die kombinierten Fragen auf den kleinen Displays von Mobilgeräten oftmals nicht gut darstellen lassen. SoSci Survey kann die Darstellung nur dann dynamisch anpassen, wenn Sie mit der Funktion ''show()'' arbeiten.
+**Hinweis:** Wenn Sie lediglich eine Matrix aus Mehrfachauswahl-Fragen benötigen (Beispiel 2), können Sie statt einer kombinierten Frage auch eine [[:de:create:questions:mc-matrix]] verwenden.
 ===== Funktion =====
@@ Zeile 24: / Zeile 28: @@
   - Erstellen Sie zunächst den linken Teil der Frage: Als Fragetyp wählen Sie jenen Typ, den die Eingabe links zeigen soll (im Beispiel 1 wäre das eine 5er-Skala).
-  - Erstellen Sie alle Items bzw. Auswahloptionen für die (ersten) Frage.
+  - Erstellen Sie alle Items bzw. Auswahloptionen für die (erste) Frage.
   - Erstellen Sie eine Kopie dieser Frage (ganz oben //Frage duplizieren//).
   - Im Fragenkatalog taucht die Frage nun zweimal auf -- einmal das Original, einmal die Kopie. Die beiden Fragen sind zwar gleich, haben aber verschiedene Kennungen.
-  - Die Kopie -- die "zweite" Frage -- sollte nun als solche markiert werden. Hängen Sie an die //Bezeichnung// z.B. ein "(sekundär)" an.
+  - Die Kopie -- die "zweite" Frage -- sollte nun als solche markiert werden. Hängen Sie an die //Beschreibung// z.B. ein "(sekundär)" an.
   - Ändern Sie ggf. Fragetyp und Beschriftungen der zweiten Frage so, wie Sie es für die Eingabefelder rechts wünschen (im obigen Beispiel 1 eine 3er-Skala mit anderen Beschriftungen und ohne grafische Verankerung).
   - Öffnen Sie nun unter **Fragebogen zusammenstellen** den Fragebogen, in dem die kombinierte Frage erscheinen soll.
@@ Zeile 35: / Zeile 39: @@
 <code php>
 question('AB01','combine=AB02');  // Kombiniert AB01 mit AB02
+</code>
+__Alternativ__ können Sie die zu kombinieren Fragen auch als Array angeben. Dies ist beispielsweise sinnvoll, wenn die Liste der Fragen dynamisch variiert.
+<code php>
+question(['AB01', 'AB02']);  // Kombiniert AB01 mit AB02
 </code>
 **Hinweis:** Die Items der zweiten Frage werden so kombiniert, dass ihre Position (!) - nicht Kennung - mit der Position der Items der ersten Frage übereinstimmt. Wenn Sie also z.B. die Items 3, 4 und 5 der ersten Frage stellen, welche die Position 1, 2 und 4 haben, so werden in der zweiten Frage die Items mit Position 1, 2 und 4 gefragt - unabhängig davon, welche Kennung sie haben.
-Es kann also durchaus sein, dass das Item AB01_03 zum Item AB02_01 gehört, wenn die Positionen der Items verändert wurden. Bitte beachten Sie dies bei der Auswertung der Ergebnisse. Ungewollte Verwirrungen vermeiden Sie, indem Sie die Positionen der Items nach dem Kopieren nicht mehr verändern. Die gewünschte Reihenfolge für die Ausgabe können Sie dann immer noch in der Funktion ''[[functions-base#question|question()]]'' festlegen.
+Es kann also durchaus sein, dass das Item AB01_03 zum Item AB02_01 gehört, wenn die Positionen der Items verändert wurden. Bitte beachten Sie dies bei der Auswertung der Ergebnisse. Ungewollte Verwirrungen vermeiden Sie, indem Sie die Positionen der Items nach dem Kopieren nicht mehr verändern. Die gewünschte Reihenfolge für die Ausgabe können Sie dann immer noch in der Funktion ''[[:de:create:functions:question|question()]]'' festlegen.
 **Hinweis:** Die Randomisierung der Item-Reihenfolge kann man ohne Probleme aktivieren. Allerdings zählt nur die Einstellung der ersten Frage -- die Anordnung der anderen Fragen folgt stets der ersten Frage, damit keine Inkonsistenzen entstehen.
@@ Zeile 54: / Zeile 64: @@
 <code php>
 question(
-  'T201', 'combine=T202','combine=T203',
+  'T201', 'combine=T202','combine=T203'
 );
 </code>
@@ Zeile 93: / Zeile 103: @@
 Wenn man 2 Skalen kombiniert und eine "weiß nicht" Kategorie anbieten möchte, will man i.d.R. nur ein solches Auswahlfeld pro Zeile anzeigen. Das Problem dabei: Die beiden Teilfragen sind voneinander unabhängig, so dass sich das "weiß nicht" nur auf die Skala bezieht, bei der es aktiviert wurde.
-Folgendes JavaScript kann man als //HTML-Code// in die Seite einbetten (unter der Frage!). Es sorgt dafür, dass ein Klick auf "weiß nicht" alle anderen Auswahlen in der Zeile entfernt. Das JavaScript ist darauf ausgelegt, dass der "weiß nicht" in einer Skala angezeigt wird -- in dem Code muss man am Ende noch statt AB01 die Kennung jener Frage eintragen, welche die "weiß nicht"-Option trägt.
+Folgendes JavaScript kann man in die Seite einbetten. Es sorgt dafür, dass ein Klick auf "weiß nicht" alle anderen Auswahlen in der Zeile entfernt. Das JavaScript ist darauf ausgelegt, dass genau eine der Skalen eine "weiß nicht" Option anbietet.
+  - Legen Sie in einer Rubrik Ihrer Wahl mit **Text hinzufügen** einen neuen Textbaustein an
+    - //Beschreibung:// z.B. "JavaScript kombinierte Frage"
+    - //Darstellung:// "HTML-Code"
+    - //Inhalt:// JavaScript-Code weiter unten
+    - Speichern {{:button.save.png?nolink|Speichern}}
+  - Tragen Sie im PHP-Code unter dem ''question()''-Befehl folgenden ''show()''-Befehl ein.
+    - Ersetzen Sie die Kennung ''AB02'' (zweimal) durch die Kennung jener Frage, welche die "weiß nicht"-Option trägt (entweder eine Skala mit Ausweichoption oder eine Frage vom Typ //Mehrfachauswahl//).
+    - Ersetzen Sie die Kennung ''JS01'' durch die Kennung des HTML-Codes (Textes) den Sie soeben noch angelegt haben.
+<code php>
+question('AB01', 'combine=AB02');
+show('JS01', ['%questionID%' => 'AB02']);
+</code>
 **Wichtig:** Im Datensatz wird für die ersten Fragen in diesem Fall nicht der Code //-1// gespeichert, sondern ein fehlender Wert -- denn die Auswahl wird so entfernt, als wäre sie nie gesetzt worden. Aktivieren Sie für die Teil-Fragen daher keine Antwort-Pflicht.
 <code javascript>
-<script src="../script/oFbGeneral.js" type="text/javascript"></script>
 <script type="text/javascript">
 <!--
 function dkRow(dk) {
-  var inputs = new Array();
+  var inputs = [];
   // Functions to control the clicks and changes
   var checker = function(evt) {
-    var input = oFbGeneral.getSender(evt, this);
+    var input = SoSciTools.getSender(evt, this);
     if (!input.checked) {
       return;
@@ Zeile 128: / Zeile 152: @@
     }
   }
   // Find surrounding <tr> tag
-  var node = dk.parentNode;
+  var node = SoSciTools.findContainer(dk, "tr");
-  while ((node.nodeType != 1) || (node.tagName != "TR")) {
+  if (node == null) {
-     node = node.parentNode;
+    throw "No row for DK " + dk.getAttribute("id");
-     if (node == null) {
-       return;
-     }
   }
   // Find all inputs in the row and enable checker function
-  inputs2 = node.getElementsByTagName("input");
+  var inputs2 = node.getElementsByTagName("input");
   for (var i=0; i<inputs2.length; i++) {
-    oFbGeneral.attachEvent(inputs2[i], "click", checker);
+    SoSciTools.attachEvent(inputs2[i], "click", checker);
     // Enlist all non-dk inputs
     if (inputs2[i] != dk) {
@@ Zeile 148: / Zeile 169: @@
   }
 }
 dkRow.registerQuestion = function(question) {
   // Find all DK inputs (-1) for the specified question
   // (check all possible items 1 to 99)
+  var anyFound = false;
   for (var i=1; i<99; i++) {
     var item = i.toString();
@@ Zeile 157: / Zeile 180: @@
       item = "0" + item;
     }
-    var htmlID = question + "_" + item + "-1";  // e.g. AB01_01-1
+    // First check for DK option of a scale
+    var htmlID = question + "_" + item + "DK";  // e.g. AB01_01DK
     var dk = document.getElementById(htmlID);
+    // Then check for multiple choice question
+    if (!dk) {
+      var htmlID = question + "_" + item;  // e.g. AB01_01
+      var dk = document.getElementById(htmlID);
+    }
     if (dk) {
       new dkRow(dk);
+      anyFound = true;
     }
+  }
+  if (!anyFound) {
+    throw "Not found DK or multiple choice options for " + question;
   }
 }
+dkRow.registerQuestion('%questionID%');
-dkRow.registerQuestion('AB01');
 // -->
 </script>
 </code>
+===== Text in der Mitte =====
+Wenn man den Text zwischen den Eingabefeldern platzieren möchte, kann man mit dem Parameter ''combine_items'' festlegen, in welcher "Spalte" die Labels angezeigt werden sollen. Im folgenden Beispiel werden sie für die erste Teilfrage (wo sie üblicherweise aktiv sind) abgeschaltet ''%%'combine_items=no'%%'' und für die zweite Teilfrage (wo sie üblicherweise nicht angezeigt werden) aktiviert mittels ''%%'combine_items=yes'%%''.
+{{:de:create:scr.combine.sym-scales.png?nolink|Zwei Skalen mit Text in der Mitte}}
+Wenn die beiden Skalen-Fragen die Kennungen "SK01" und "SK02" haben, lässt sich die obige Darstellung mit folgendem PHP-Code erreichen.
+<code php>
+question('SK01', 'combine_items=no', 'combine=SK02', 'combine_items=yes');
+pageCSS('
+    table#SK01_tab td.s2col3 {
+        text-align: center;
+    }
+');
+</code>
+**Hinweis:** Der ''question()''-Befehl zählt die ''combine_items''-Parameter einfach ab, es zählt nur deren Reihenfolge, nicht aber, an welcher Stelle sie im Befehl stehen.
+**Tipp:** Alternativ zum ''combine_items''-Parameter könnte man auch die Darstellugn der ersten Frage so variieren, dass die Eingabefelder links und die Beschriftungen rechts angezeigt werden. Dies wird in der Anleitung [[:de:create:best-worst]] beschrieben.
+Der zweite Teil mit ''pageCSS()'' sorgt dafür, dass die Itemtexte zentriert angezeigt werden. Das vorangestellte ''table#SK01_tab'' stellt sicher, dass die CSS-Anweisung nur für die kombinierte Frage SK01/02 gilt. Die Kennung muss natürlich an die Kennung der Frage angepasst werden. Wenn Sie sonst keine Fragen auf der Seite haben, können Sie dieses Präfix auch weglassen.
 ===== Kombination mehrerer Dropdown-Fragen =====
@@ Zeile 178: / Zeile 234: @@
 {{ :de:create:scr.example.combine.dropdown.jpg?nolink |}}
+===== Mobilgeräte und responsive Darstellung =====
+Ein relevanter Anteil der Befragten füllt den Fragebögen nicht am PC, sondern auf dem Smartphone aus. Die meisten Fragen in SoSci Survey schalten dann in einen anderen Darstellungsmodus. Deshalb reicht es in aller Regeln, den Fragebogen gegen Ende der Implementierung einmal auf dem Mobilgerät zu testen. Mehr dazu in der Anleitung [[:de:create:smartphones]].
+==== Lösungsansatz 1 ====
+Der Befehl ''show()'' ermöglicht eine responsive Darstellung auch für kombinierte Fragen. Allerdings ist diese Funktion noch in der Testphase. Prüfen Sie daher, ob die Darstellung mit ''show()'' für Ihre Frage gut funktioniert -- und wenn nicht, sagen Sie bitte im Online-Support bescheid.
+Die Funktion ''show()'' erwartet die Fragen immer als Array. Eine Trennlinie muss als Parameter in einem zweiten Array festgelegt werden.
+<code php>
+show(
+  ['AB01', 'AB02'],
+  ['gap' => 'line']
+);
+</code>
+==== Lösungsansatz 2 ====
+Kombinierte Fragen mittels ''question()'' passen das Layout __nicht__ automatisch an die Größe des Bildschirms an (responsive design) - und können deshalb auf Mobilgeräten unter Umständen nicht ausgefüllt werden. Hier bietet es sich an, für Mobilgeräte eine alternative Darstellung anzubieten.
+Legen Sie als erstes eine Frage vom Typ "Gerät und übermittelte Variablen" an. In der Frage im Karteireiter //Gerät// setzen Sie ein Kreuzchen bei //Bildschirmgröße//. Nach dem Speichern erhalten Sie zwei Variablen für die Breite und Höhe des Bildschirms in Pixeln. Notieren Sie die Variablen-Kennung für die Bildschirmbreite, welche Sie im Karteireiter //Variablen// finden. Im folgenden Beispiel wird angenommen, dass die Variable die Kennung "GR01_ScW" hat.
+Diese Frage platzieren Sie nun auf einer Seite im Fragebogen, die vor der kombinierten Frage kommt. Die Bildschirmbreite wird nämlich (anders als das //Format//, welches aber auf Apple-Geräten oftmals nicht korrekt erkannt wird) erst beim Klick auf "Weiter" gespeichert.
+Nun können Sie mit ein paar Zeilen [[:de:create:php|PHP-Code]] entweder die kombinierte Frage anzeigen oder die beiden Fragen untereinander (und mit Optimierungen für Mobilgeräte) darstellen. Als Grenze wird hier eine Breite von 600 Pixeln gewählt. Je nach Fragetypen und Layout kann die Wahl einer größeren oder kleineren Zahl sinnvoll sein.
+<code php>
+if (value('GR01_ScW') > 600) {
+  // Kombinierte Frage
+  question('AB01','combine=AB02');
+} else {
+  // Einzelne Fragen
+  question('AB01');
+  question('AB02');
+}
+</code>
+Zur Erklärung des Codes lesen Sie sei auf die Anleitung [[:de:create:php-filters]] verwiesen.