Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
de:create:questions:selclick [13.04.2018 20:58]
admin
de:create:questions:selclick [13.04.2018 21:22] (aktuell)
admin Neu: present-Event
Zeile 35: Zeile 35:
 ===== JavaScript ===== ===== 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''). 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 67: Zeile 72:
 </code> </code>
  
-Mehr zur Einbindung von JavaScript in den Fragebogen s. [[https://www.soscisurvey.de/help/doku.php/de:create:javascript|JavaScript im Fragebogen]].+ 
 +==== 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.wIn der ersten Teilfrage könnte das etwa aussehen wie folgtDas ''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. Schlagwörter: Auswahlabfolge, Antwortoptionen, Reaktionszeiten.
de/create/questions/selclick.txt · Zuletzt geändert: 13.04.2018 21:22 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