Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
de:create:questions:selclick [27.01.2015 14:49] – Aktualisiert adminde:create:questions:selclick [01.10.2020 21:56] (aktuell) – [Teilfragen überspringen] admin
Zeile 31: Zeile 31:
   * Eine Filterführung zwischen den Teilfragen ist nicht möglich.   * Eine Filterführung zwischen den Teilfragen ist nicht möglich.
   * Die Auswahl-Abfolge benötigt zur korrekten Funktion [[:de:glossary#javascript|JavaScript]]. ist JavaScript deaktiviert, wird eine alternative Darstellung angezeigt und die Reaktionszeitmessung deaktiviert.   * Die Auswahl-Abfolge benötigt zur korrekten Funktion [[:de:glossary#javascript|JavaScript]]. ist JavaScript deaktiviert, wird eine alternative Darstellung angezeigt und die Reaktionszeitmessung deaktiviert.
 +
 +
 +===== JavaScript =====
 +
 +Der Container der Frage (die Fragekennung mit einem angehängten ''_qst'', also z.B. ''AB01_qst'' für Frage AB01) löst in aktuellen Browsern ein ''"select"'' Ereignis (Event) aus, wenn eine Option angeklickt wird. Das Ereignis ''"present"'' wird ausgelöst, sobald ein neues Item erscheint.
 +
 +Mehr zur Einbindung von JavaScript in den Fragebogen s. [[https://www.soscisurvey.de/help/doku.php/de:create:javascript|JavaScript im Fragebogen]].
 +
 +
 +==== Auf Auswahl reagieren ====
 +
 +Das Ereignis enthält in `CustomEvent.detail` die Kennung der Frage (''detail.question''), die Nummer der Teilfrage (''detail.item''), den ausgewählten Wert (''detail.value'') und die Antwortzeit (''detail.latency'').
 +
 +<code javascript>
 +<script type="text/javascript">
 +function onSelect(evt) {
 +  var info = evt.detail;
 +  alert("In Frage " + info.question + " wurde für die Teilfrage " + info.item + " die Option " + info.value + " ausgewählt.");
 +}
 +
 +var question = document.getElementById("AB01_qst");
 +question.addEventListener("select", onSelect);
 +</script>
 +</code>
 +
 +Mittels ''CustomEvent.preventDefault()'' kann die Auswahl unterbunden werden, sodass die Frage die Auswahl des Teilnehmers nicht akzeptiert.
 +
 +<code javascript>
 +<script type="text/javascript">
 +function onSelect(evt) {
 +  // In Teilfrage 1 kann die Option 2 nicht (!) ausgewählt werden
 +  if ((evt.detail.item == 1) && (evt.detail.value == 2)) {
 +    evt.preventDefault();
 +  }
 +}
 +
 +var question = document.getElementById("AB01_qst");
 +question.addEventListener("select", onSelect);
 +</script>
 +</code>
 +
 +
 +==== Audio abspielen beim Erscheinen des Items ====
 +
 +Falls man [[:de:create:media#audio-dateien_einbinden|Audiodateien in den Teilfragen verwendet]], funktioniert das automatische Abspielen (''autoplay'') nur leidlich: Beim Laden der Seite werden alle Hörbeispiele auf einmal abgespielt, denn die Teilfragen werden bereits im Hintergrund vorbereitet.
 +
 +Hier kann man mit dem ''present'' Ereignis arbeiten und die passende Audio-Datei abspielen, sobald eine Teilfrage erscheint. Für das folgende Beispiel tragen die ''<audio>''-Elemente die HTML-IDs "audio1", "audio2", u.s.w. In der ersten Teilfrage könnte das etwa aussehen wie folgt. Das ''style'' Attribut stellt sicher, dass der Player nicht sichtbar angezeigt wird.
 +
 +<code html>
 +Hörbeispiel 1
 +<audio id="audio1" preload="auto" style="position: absolute; left: -5000px;">
 +  <source src="example_moo.mp3" type="audio/mpeg" />
 +</audio>
 +</code>
 +
 +Wie im vorigen Beispiel wird nun eine Funktion definiert, welche auf Basis der Nummer der Teilfrage (''item'') die passende Audio-Datei startet:
 +
 +<code javascript>
 +<script type="text/javascript">
 +function onPresent(evt) {
 +  // Die HTML-ID setzt sich aus "audio" und der Nummer der Teilfrage zusammen
 +  var item = evt.detail.item;
 +  var audio = document.getElementById("audio" + item);
 +  if (audio) {
 +    audio.play();
 +  }
 +}
 +
 +var question = document.getElementById("AB01_qst");
 +question.addEventListener("present", onPresent);
 +</script>
 +</code>
 +
 +
 +==== Teilfragen überspringen ====
 +
 +Die JavaScript-Methode ''skipItem()'' erlaubt es, die aktuelle Teilfrage zu überspringen.
 +
 +Das folgende Beispiel überspringt eine Teilfrage in der Auswahlabfolge "AA01", wenn die Leertase (Tastencode 32) gedrückt wird.
 +
 +<code javascript>
 +<script type="text/javascript">
 +window.addEventListener("keyup", function(e) {
 +    if (e.keyCode == 32){
 +        SoSciTools.questionnaire.AA01.skipItem();
 +    }
 +});
 +</script>
 +</code>
 +
 +Schlagwörter: Auswahlabfolge, Antwortoptionen, Reaktionszeiten.
de/create/questions/selclick.1422366551.txt.gz · Zuletzt geändert: 27.01.2015 14:49 von admin
 
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki