SoSci Survey
Übersetzungen dieser Seite:
 

Fragen bei Auswahl einer bestimmten Option sofort einblenden

Filterfragen ermöglichen es zwar, Inhalte bzw. Fragen in Abhängigkeit früherer Antworten anzuzeigen – aber manchmal soll eine zusätzliche Frage direkt auf derselben Fragebogen-Seite erscheinen. Solche dynamischen Veränderungen der Seite erfordern JavaScript, weil der Server über die Antworten erst viel zu spät, nämlich erst nach dem Klick auf „Weiter“ informiert wird.

Prinzipiell sind mit JavaScript und dem Document Object Model (DOM) sehr umfassende Modifikationen innerhalb der Seite möglich. Diese Anleitung beschränkt sich aber darauf, eine Frage in Abhängigkeit einer Antwort ein- bzw. auszublenden.

Grundwissen

  1. In JavaScript gibt es so genannte Event Handler. Das sind Funktionen, die ausgeführt werden, wenn der Benutzer irgend etwas auf der Seite macht – wenn also Ereignisse (Events) auf der Seite passieren. Solche Ereignisse können ein Klick des Teilnehmers sein (click), die Änderung einer Dropdown-Auswahl oder einer offenen Textangabe (onchange), die Berührung eines Bildelements mit der Maus (mouseover), etc.
  2. Jedes Element einer (HTML-)Internetseite hat eine ganze Reihe von Eigenschaften. SoSci Survey erstellt die einzelnen Fragebogen-Seite als HTML-Seite – und alle Fragen und Eingabefelder sind ihrerseits HTML-Elemente, deren Eigenschaften durch JavaScript beeinflusst werden können. Eine solche Eigenschaft ist der Darstellungsstil (style) und darin konkret der Anzeigemodus (display), der dafür sorgt, dass ein Element angezeigt wird (block oder inline) oder eben nicht (none).
  3. Die Elemente einer HTML-Seite lassen sich am einfachsten anhand ihrer HTML-ID manipulieren. SoSci Survey vergibt für alle Eingabefelder automatisch IDs, die sich an der Frage- bzw. Itemkennung orientieren. Am einfachsten ermitteln Sie die ID eines Elements, wenn Sie Firefox verwenden, das PlugIn Firebug installieren, den Käfer anklicken, im Plugin den blauen Pfeil (zweites Symbol von links) und dann auf das entsprechende Element im Fragebogen klicken – Sie sehen dann sofort den Quellcode des Elements inkl. der HTML-ID (id=„AB01_01“). Alternativ können Sie sich den Quelltext der HTML-Seite im Browser anzeigen lassen und das entsprechende Element suchen.
  4. Um ganze Fragen auszublenden, setzt man sie am einfachsten in einen DIV-Block und versieht diesen mit einer HTML-ID. Dafür platziert man vor der entsprechenden Frage den HTML-Code <div id=„kennung“> und dahinter </div> – die Kennung muss auf der Fragebogenseite einmalig sein, etwa blockAB01 für die Frage AB01.
  5. In SoSci Survey kann man beliebige Inhalte in eine Fragebogenseite aufnehmen, also auch JavaScript Code. Dies geschieht am einfachsten, indem man den Code unter Textbausteine u. Beschriftung als Textbaustein speichert und diesen Textbaustein beim Fragebogen zusammenstellen in die Seite zieht. Und zwar unter die jeweilige Frage(n).

Wichtig: Damit Fragen dynamisch eingeblendet werden können, müssen sie schon (unsichtbar) auf der Seite vorhanden sein. Verwenden Sie keine Pflichtfragen zum ein-/ausblenden: Auch wenn der Teilnehmer unsichtbare Fragen nicht beantworten kann, besteht SoSci Survey bei Pflichtfragen auf eine Antwort.

Hinweis: Sie sollten den JavaScript Code so gestalten, dass er die nicht-benötigten Inhalte ausblendet – nicht die benötigsten einblendet. Das hat den Vorteil, dass Teilnehmer mit deaktiviertem JavaScript die Frage trotzdem beantworten können, weil sie hier gar nicht erst ausgeblendet werden.

Hinweis: Screenreader, die es Menschen mit Sehbehinderung erlauben, an Ihrer Befragung teilzunehmen, kommen mit dynamischen Inhalten nicht immer zurecht. Durch Verwendung dieser Funktion kann sich Sie die Barrierefreiheit Ihres Fragebogens reduzieren.

Beispiel 1: Sichtbare Auswahl

Abhängig von eine Ja/Vielleicht/Nein-Frage (JN01, sichtbare Auswahl) soll eine offene Textfrage (TX01) anzeigt werden.

Tipp: Wenn der Teilnehmer sieht, dass eine der Auswahloptionen mit zusätzlicher Arbeit verbunden ist, dann könnte dies sein Antwortverhalten beeinflussen. Ein klassischer Filter mit Abfrage der zweiten Frage auf der Folgeseite kann hier sinnvoller sein.

Der folgende JavaScript-Code wird als Textbaustein gespeichert und unter den Fragen in die Fragebogen-Seite gezogen.

<!-- Das Paket oFbGeneral enthält einige nützliche Funktionen für den Fragebogen -->
<script src="../script/oFbGeneral.js" type="text/javascript"></script>
 
<script type="text/javascript">
<!--
var optionA = document.getElementById("JN01_01a");  // JN01_01 ist die Kennung der Auswahloption "Ja"
var optionB = document.getElementById("JN01_02a");  // Option "Vielleicht"
var optionC = document.getElementById("JN01_03a");  // Option "Nein"
var frage = document.getElementById("TX01_qst");  // HTML-ID der Texteingabe
 
function toogle() {
  if ((optionA.checked) || (optionB.checked)) {
    frage.style.display = "";
  } else {
    frage.style.display = "none";
  }
}
 
oFbGeneral.attachEvent(optionA, "click", toogle);
oFbGeneral.attachEvent(optionB, "click", toogle);
oFbGeneral.attachEvent(optionC, "click", toogle);
toogle();
// -->
</script>

Beispiel 2: Dropdown

Eine zusätzliche Frage (DD02) soll abhängig davon angezeigt werden, ob in einer Dropdown-Auswahl (DD01) eine bestimmte Option (z.B. 7) gewählt wurde.

<script src="../script/oFbGeneral.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var dropdown = document.getElementById("DD01");
var frage = document.getElementById("DD02_qst");
 
function toogle() {
  if (dropdown.value == "7") {  // Hier den Wert (Antwortcode) eintragen, bei dem das zweite Dropdown eingeblendet werden soll
    frage.style.display = "";
  } else {
    frage.style.display = "none";
  }
}
 
oFbGeneral.attachEvent(dropdown, "change", toogle);
toogle();
// -->
</script>

Beispiel 3: Alternative Fragen

Sie haben eine Dropdown-Auswahl und möchten abhängig von der Auswahl eine weitere Auswahl anbieten. Dafür muss im vorliegenden Beispiel neben der ersten Auswahl (Lieblingsstadt) für jede Stadt eine weitere Auswahl (Sehenswürdigkeit) erstellt und auf der Seite eingebunden werden.

Ergebnis im Fragebogen

Tipp: Falls Sie auch eine sichtbare Auswahl in Erwägung ziehen, ermöglicht die Erweiterten Auswahl eine hierarchische Auswahl von Optionen bereits in einer dynamischen Variante.

Tipp: Das dynamische Einblenden von Fragen funktioniert auch in Kombination mit der Platzierung von Fragen nebeneinander.

Fragebogen-Seite

Die einzublendenen Fragen werden mit DIV-Elementen umschlossen. Dadurch wird die Fragebogen-Seite recht lang. Für die erste Frage ist als Abstand zur nächsten Frage der Wert 4 Pixel eingestellt (Einstellungen zur Anzeige der Frage).

Tipp: Ab SoSci Survey Version 2.3.06 erhalten Fragen automatisch die Kennung AB01_qst, wobei das AB01 natürlich durch die Kennung der Frage zu ersetzen ist. Die HTML-Code-Elemente im folgenden Beispiel sind damit überflüssig, die IDs im JavaScript müssen entsprechend angepasst werden.

Fragebogen-Seite mit allen notwendigen Elementen

JavaScript-Code

Der folgende HTML-/JavaScript-Code wird in einem Textaustein (z.B. mit der Kennung js_dynamic) gespeichert:

<!-- Das Paket oFbGeneral enthält einige nützliche Funktionen für den Fragebogen -->
<script src="../script/oFbGeneral.js" type="text/javascript"></script>
 
<script type="text/javascript">
<!--
var dropdown = document.getElementById("AB05");
 
function blender() {
  // Der Wert in value entspricht dem Antwortcode in der Variablen-Übersicht
  var auswahl = dropdown.value;
  // Allerdings ist der Wert zunächst keine Zahl, sondern ein Text
  auswahl = parseInt(auswahl);
 
  // Diese Prüfung wird für jede einzublendende Frage wiederholt
  var frage1 = document.getElementById("blockAB06");
  if (auswahl == 1) {
    // Anzeigen
    frage1.style.display = "";
  } else {
    // Ausblenden
    frage1.style.display = "none";
  }
 
  var frage2 = document.getElementById("blockAB07");
  if (auswahl == 2) {
    frage2 .style.display = "";
  } else {
    frage2 .style.display = "none";
  }
 
  var frage3 = document.getElementById("blockAB08");
  if (auswahl == 3) {
    frage3 .style.display = "";
  } else {
    frage3 .style.display = "none";
  }
}
 
// Die Funktion sollte zunächst einmal direkt aufgerufen werden,
// es müssen ja alle Dropdowns ausgeblendet werden
blender();
 
// Nun muss die Funktion noch mit dem change-Ereignis des ersten
// Dropdowns verknüpft werden
oFbGeneral.attachEvent(dropdown, "change", blender);
 
// -->
</script>
de/create/dynamic.txt · Zuletzt geändert: 06.10.2013 19:55 von craven.gmx
 
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 3.0 Unported
Driven by DokuWiki