Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:table-layout-dropdowns [29.01.2015 18:21] – admin
+++ de:create:table-layout-dropdowns [09.04.2018 08:34] – admin
@@ Zeile 1: / Zeile 1: @@
 ====== Drodowns nebeneinander platzieren ======
-Dropdown-Fragen lassen sich mithilfe von Tabellen nebeneinander platzieren und somit kombiniert abfragen (siehe dazu auch das Kapitel [[table-layout|Elemente nebeneinander platzieren]]).
+Dieses Kapitel beschreibt, wie sich Dropdown-Auswahlfelder nebeneinander platzieren lassen, um einen Datumsbereich (Monat/Jahr bis Monat/Jahr) abzufragen. Zusätzlich soll die Frage eine Auswahloption "bis heute" erlauben. Für die Platzierung der Dropdown-Eingabefelder kommt eine HTML-Tabelle zum Einsatz ([[table-layout]]).
-Beispielsweise will man im Fragebogen einen Zeitraum (Monat/Jahr - Monat/Jahr) abfragen und alternativ zum Enddatum die Auswahlmöglichkeit "bis heute" anbieten.
+{{:de:create:scr.example.combine.dropdown.jpg?nolink|Dropdowns horizontal nebeneinander platziert}}
-Diese Frage lässt sich durch die Kombination vierer Dropdown-Fragen (ST17 bis ST20) sowie einer Mehrfachauswahl-Frage (ST21) erstellen. Um die Antwortoption "bis heute" als Alternative zum Enddatum anzubieten, benötigt man JavaScript, um die gleichzeitige Eingabe eines Enddatums über die Dropdowns zu unterdrücken.
+Für die Frage sind insgesamt vier Dropdown-Auswahlfragen (im Beispiel ST17 bis ST20) sowie eine Mehrfachauswahl-Frage (ST21) erforderlich. Wird die Antwortoption "bis heute" aktiviert, so werden mittels JavaScript die Dropdowns für das Enddatum deaktiviert. So wird die gleichzeitige Eingabe eines Enddatums und "bis heute" vermieden.
-{{ :de:create:scr.example.combine.dropdown.jpg?nolink|Horizontale Kombination aus Dropdowns}}
+**Tipp:** Anstatt der Dropdown-Auswahlfelder könnten ebenso Texteingabe-Felder (z.B. zur Angabe des Jahres) zum Einsatz kommen.
 ===== Schritt für Schritt =====
+  - Legen Sie eine neue Frage vom Typ "Dropdown-Auswahl" an (im Beispiel ST17). Als Auswahloptionen tragen Sie die Monate von Januar bis Dezember ein.
+  - Legen Sie eine weitere neue Frage "Dropdown-Auswahl" an (ST18) -- hier werden nun die wählbaren Jahre (z.B. 1980 bis 2005) als Auswahloptionen eingegeben.
+  - Duplizieren Sie beide Fragen (ST19 und ST20) für die Eingabe des Enddatums.
+  - Legen Sie eine weitere Frage an, diesmal vom Typ "Mehrfachauswahl". Als einzige Antwortoption bekommt diese Frage "bis heute".
+  - Folgende Sie der Anleitung unten (Variante 1 __oder__ Variante 2), um die 5 Fragen nebeneinander im Fragebogen zu platzieren. Dafür wird unter **Fragebogen zusammenstellen** mittels HTML eine Tabelle mit fünf Feldern in einer Zeile erzeugt.
-  - Legen Sie eine Dropdown-Frage mit den Monaten von Januar bis Dezember an (im Beispiel ST17) und duplizieren Sie diese (Frage ST19). Damit haben Sie eine Frage für die Monatsauswahl des Anfangs- und des Enddatums erzeugt. Ebenso verfahren Sie mit Fragen ST18 und ST20, die dann das Anfangsjahr bzw. das Endjahr in der kombinierten Frage bilden.
-  - Legen Sie die Antwortoption "bis heute" als eine Frage vom Typ Mehrfachauswahl an.
-  - Erstellen Sie unter **Fragebogen zusammenstellen** mithilfe von HTML- und PHP-Elementen, die Sie von rechts in den Fragebogen ziehen können, eine Tabelle mit fünf Feldern in einer Zeile (siehe auch [[table-layout|Elemente nebeneinander platzieren]]) und positionieren Sie in jede Zelle mithilfe einer PHP-Box die jeweilige Frage.
-**Tipp:** Alternativ können Sie auch mit [[inputs-single|frei platzierten Eingabefeldern]] arbeiten. In diesem Fall erstellen Sie einen Textbaustein mit dem kompletten Tabellengerüst und verwenden für die Dropdowns die entsprechenden Platzhalter.
+===== Variante 1 =====
-==== Erstellen der Tabelle ====
+Verwenden Sie [[inputs-single|frei platzierten Eingabefeldern]], um die Dropdown-Auswahlfelder bequem in der HTML-Tabelle zu platzieren. Lediglich die Mehrfachauswahl-Frage "bis heute" muss klassisch als Frage eingefügt werden, denn hier wird ja neben dem Eingabefeld auch die Beschriftung benötigt.
-Erstellen Sie den Titel der Frage sowie das Tabellen-Gerüst:
+Unter **Fragebogen zusammenstellen** (mittels Element "HTML-Code") oder in einem Textbaustein (Darstellung: "HTML-Code") fügen Sie den HTML-Code für die Tabelle ein:
 <code html>
-<div class="title"><p>Bitte geben Sie an, wie lange Sie in diesem Unternehmen gearbeitet haben.</p></div>
+<div class="title">
-<br><br>
+  <p>Bitte geben Sie an, wie lange Sie in diesem Unternehmen gearbeitet haben.</p>
+</div>
 <table width="100%" cellspacing="0" cellpadding="0" border="0">
-<colgroup>
+  <colgroup>
+    <col width="22%">
+    <col width="18%">
+    <col width="22%">
+    <col width="18%">
     <col width="20%">
+  </colgroup>
+  <tr>
+    <td>von: %input:ST17%</td>
+    <td>%input:ST18%</td>
+    <td>bis: %input:ST19%</td>
+    <td>%input:ST20%</td>
+    <td>
+</code>
+Die Option "bis heute" muss als Frage eingefügt werden. Dafür können Sie entweder eine Zeile PHP-Code verwenden -- oder Sie ziehen die Frage in die Seite und passen die Darstellungsoptionen ({{:button.settings.png?nolink|Darstellungsoptionen}}) noch geringfügig an.
+<code php>
+// Einfügen der Auswahlalternative ("bis heute") in die letzte Zelle
+question('ST21','show-title=no', 'show-explanation=no', 'spacing=4');
+</code>
+<code html>
+<!-- Ende der Tabelle -->
+    </td>
+  </tr>
+</table>
+</code>
+==== Variante 2 ====
+Anstatt mit Platzhalter zu arbeiten, können Sie die Fragen auch alle "regulär" einbinden. Erstellen Sie auch hierfür zunächst den Titel der Frage sowie das Tabellen-Gerüst:
+<code html>
+<div class="title">
+  <p>Bitte geben Sie an, wie lange Sie in diesem Unternehmen gearbeitet haben.</p>
+</div>
+<table width="100%" cellspacing="0" cellpadding="0" border="0">
+  <colgroup>
     <col width="20%">
     <col width="20%">
     <col width="20%">
     <col width="20%">
-</colgroup>
+    <col width="20%">
-<tr>
+  </colgroup>
-    <td></code>
+  <tr>
+    <td>
+</code>
-==== Erste Frage in erste Zelle einfügen ====
+Das erste Dropdown-Eingabefeld (Monat des Arbeitsbeginns) wird nun entweder mit einer Zeile PHP-Code eingefügt -- oder Sie ziehen die Frage in die Seite und passen die Darstellungsoptionen ({{:button.settings.png?nolink|Darstellungsoptionen}}) noch geringfügig an.
-Fügen Sie die erste Dropdown-Box aus der Frage nach dem Monat des Arbeitsbeginns ein. Mit den Optionen in der Klammer unterdrücken Sie Fragetext und -erläuterung in Frage ST17. Diese wird nicht benötigt, da die kombinierte Frage als ganzes den Fragetitel "Bitte geben Sie an, wie lange Sie in diesem Unternehmen gearbeitet haben." erhält.
+Die Optionen im ''question()''-Befehl unterdrücken den Fragetext und Erklärungen in Frage ST17, diese werden ja bereits vom HTML-Code angezeigt. Die letzte Option '''spacing=4''' legt fest, dass unter dem Eingabefeld nur wenig Platz bleiben soll.
 <code php>
@@ Zeile 45: / Zeile 90: @@
 </code>
-==== Tabelle fortsetzen und Fragen einfügen ====
+Nun wird das HTML-Gerüst der Tabelle fortgesetzt und zwischen ''<td>'' und ''</td>'' jeweils eines der Dropdown-Felder platziert.
 <code html>
-</td>
+    </td>
     <td>
 </code>
@@ Zeile 88: / Zeile 133: @@
 <code html>
-<!-- Ende der Tabelle -->
+    </td>
-</td>
+  </tr>
-</tr>
 </table>
 </code>
-==== Alternativ-Option "bis heute" ====
+==== JavaScript für die Option "bis heute" ====
+Jetzt muss der Fragebogen noch dafür sorgen, die Dropdown-Felder für das Enddatum zu deaktivieren, wenn "bis heute" markiert wurde.
-Fügen Sie ganz ans Ende dieser Fragebogenseite folgendes JavaScript-Fragment als HTML-Baustein ein (am besten als Textbaustein speichern und in die Seite ziehen):
+Fügen Sie dafür am Ende der Fragebogenseite folgenden JavaScript-Code als Textbaustein (empfohlen) oder als HTML-Code Element ein.
 <code html>
-<script src="../script/oFbGeneral.js" type="text/javascript"></script>
 <script type="text/javascript">
 <!--
@@ Zeile 113: / Zeile 158: @@
   }
 }
-oFbGeneral.attachEvent(tillToday, "click", checkAlternative);
+SoSciTools.attachEvent(tillToday, "click", checkAlternative);
+checkAlternative();
 // -->
 </script>
 </code>
-Dieser Baustein sorgt dafür, dass ST19 und ST20 grau schattiert werden, wenn das Auswahlfeld ''ST21_01'' markiert wird. Es kann also nicht gleichzeitig "bis heute" ausgewählt und ein Enddatum angegeben werden.
 ==== Überprüfung der Eingabe ====
-Wenn Sie einen zusätzlichen Konsistenzcheck einbauen wollen, um zu überprüfen, ob die Eingabe des Teilnehmers sinnvoll ist, tun Sie dies am besten durch einen Filter auf der __nächsten__ Fragebogenseite. Um diesen Filter zu programmieren, benötigen Sie die Rückgabewerte Ihrer einzelnen Fragen, die Sie der **Variablen-Übersicht** entnehmen können.
+Wenn Sie einen zusätzlichen Konsistenzcheck einbauen wollen, um zu überprüfen, ob die Eingabe des Teilnehmers sinnvoll ist, tun Sie dies durch einen Filter auf der __nächsten__ Fragebogenseite ([[:de:create:checks#individuelle_antwort-pruefung|Antworten prüfen: Individuelle Antwort-Prüfung]]). Um diesen Filter zu programmieren, benötigen Sie die Rückgabewerte Ihrer einzelnen Fragen, die Sie der **Variablen-Übersicht** entnehmen können.
 Wenn Sie die Fragen analog zum Beispiel angelegt haben, steht dort beispielsweise Folgendes:
-  * Für [ST17] und [ST19] jeweils: \\ 1 = Januar \\ 2 = Februar \\ ... \\ 12 = Dezember \\ -9 = nicht beantwortet
+  * [ST17] und [ST19] jeweils\\ 1 = Januar\\ 2 = Februar\\ ...\\ 12 = Dezember\\ -9 = nicht beantwortet
+  * [ST18] und [ST20] jeweils\\ 1 = 2005\\ 2 = 2004\\ 3 = 2003 \\ ...\\ 35 = 1980\\ -9 = nicht beantwortet
+  * [ST21]\\ 1 = nicht gewählt\\ 2 = gewählt
-  * Jahre: Für [ST18] und [ST20] jeweils: \\ 1 = 2014 \\ 2 = 2013 \\ 3 = 2012 \\ ... \\ 35 = 1980 \\ -9 = nicht beantwortet
+Durch einen Filter lässt sich sicherstellen, dass das Austrittsdatum aus dem Unternehmen immer nach dem Eintrittsdatum liegt. Dazu muss ST19 einen späteren Monat als ST18 annehmen, wenn die Person im gleichen Jahr ein- und wieder ausgetreten ist. Sofern das Jahr des Austritts (ST20) zeitlich nach dem Jahr des Eintritts (ST18) liegt, ist der Monat beliebig.
-  * Auswahl: Für [ST21]: \\ 1 = nicht gewählt \\ 2 = gewählt
+Um der Teilnehmerin bzw. dem Teilnehmer in diesen Fällen einen Fehlertext und die Frage erneut anzuzeigen, erstellen Sie einen Textbausteil im Menü **Textbausteine u. Beschriftung**, den Sie dann später als Fehlermeldung nutzen können (im Beispiel "DauerF").
-Durch einen Filter lässt sich sicherstellen, dass das Austrittsdatum aus dem Unternehmen immer nach dem Eintrittsdatum liegt. Dazu muss entweder ST19 einen späteren Monat als ST18 annehmen, wenn die Person im gleichen Jahr ein- und wieder ausgetreten ist. Der Monat ist hingegen beliebig, sofern das Jahr des Austritts (ST20) zeitlich nach dem Jahr des Eintritts (ST18) liegt.
-Um der Teilnehmerin bzw. dem Teilnehmer in diesen Fällen einen Fehlertext und die kombinierte Frage erneut anzuzeigen, erstellen Sie zunächst einen Textbausteil im Menü **Textbausteine u. Beschriftung**, den Sie dann später als Fehlermeldung nutzen können (hier: "DauerF").
 <code php>
-//Jahr des Eintritts liegt nach dem Jahr des Austritts
+// Jahr des Eintritts liegt nach dem Jahr des Austritts
 if ((value('ST18') < value('ST20')) {
-  text('DauerF'); // individuelle Fehlermeldung anzeigen
+  repeatPage('DauerF'); // Vorige Seite mit Fehlermeldung wiederholen
-  repeatPage(); // ganze Seite erneut anzeigen
 }
-//im gleichen Jahr, aber unterschiedliche Monate
+// Im gleichen Jahr, aber unterschiedliche Monate
 if ((value('ST18') == value('ST20')) and (value('ST17') > value('ST19'))) {
-  text('DauerF');
+  repeatPage('DauerF'); // Vorige Seite mit Fehlermeldung wiederholen
-  repeatPage();
 }
-// Optional: TN hat keine Eingabe getroffen
-if (value('ST17') and value('ST18') == -9)){
-  text('DauerF');
-  repeatPage();
-}
 </code>