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]
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