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 [22.09.2017 10:44] – [JavaScript] adminde:create:questions:selclick [01.10.2020 21:56] (aktuell) – [Teilfragen überspringen] admin
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.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="positionabsolute; 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.1506069895.txt.gz · Zuletzt geändert: 22.09.2017 10:44 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