Beide Seiten der vorigen RevisionVorhergehende Überarbeitung | Nächste ÜberarbeitungBeide Seiten der Revision |
de:create:questions:selclick [13.04.2018 20:58] – admin | de:create:questions:selclick [13.04.2018 21:22] – Neu: present-Event admin |
---|
===== 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''). |
</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="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. |