Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:questions:selclick [22.09.2017 10:31] – JavaScript ergänzt admin
+++ de:create:questions:selclick [13.04.2018 21:22] – Neu: present-Event admin
@@ Zeile 35: / Zeile 35: @@
 ===== 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.
+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'').
@@ Zeile 53: / Zeile 58: @@
 Mittels ''CustomEvent.preventDefault()'' kann die Auswahl unterbunden werden, sodass die Frage die Auswahl des Teilnehmers nicht akzeptiert.
-Mehr zur Einbindung von JavaScript in den Fragebogen s. [[https://www.soscisurvey.de/help/doku.php/de:create:javascript|JavaScript im Fragebogen]].
+<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>
+Schlagwörter: Auswahlabfolge, Antwortoptionen, Reaktionszeiten.