| Beide Seiten der vorigen RevisionVorhergehende Überarbeitung | Nächste ÜberarbeitungBeide Seiten der Revision |
| de:create:questions:assignment [22.03.2016 09:21] – [Filterführung] admin | de:create:questions:assignment [12.06.2018 20:52] – Events admin |
|---|
| }); | }); |
| |
| | // --> |
| | </script> |
| | </code> |
| | |
| | |
| | ===== JavaScript-Anbindung ===== |
| | |
| | Die JavaScript-Funktion ''setCallbackSelect()'' (siehe oben) ist primär für die Filterführung ausgelegt. Daneben unterstützt die Zuordnungsaufgabe noch Ereignisse (Events), mit denen JavaScript direkt eingreifen kann. Die folgenden Ereignisse werden vom Container der Frage ausgelöst: |
| | |
| | * ''fixation'' -- Zwischen zwei Stimuli (Items) wird eine Pause gesetzt, welche z.B. ein Fixationskreuz anzeigt. Dieses Ereignis wird nur ausgelöst, wenn zwischen den Stimuli eine Pause eingestellt wurde. In der ''detail''-Eigenschaft des Ereignis stehen folgende Attribute zur Verfügung: |
| | * ''evt.detail.question'' -- Kennung der Frage |
| | * ''evt.detail.item'' -- Kennung (ID) des Items, welches nach der Pause angezeigt wird |
| | * ''evt.detail.node'' -- Das HTML-Element, welches in der Pause angezeigt wird |
| | * ''evt.detail.duration'' -- Die Dauer der Pause [ms] |
| | * ''prime'' -- Ein Prime, der eventuell vor einem Stimulus angezeigt wird. Dieses Ereignis wird nur ausgelöst, wenn für das Item ein Prime definiert wurde. Folgende Attribute sind verfügbar: |
| | * ''evt.detail.question'' -- Kennung der Frage |
| | * ''evt.detail.item'' -- Kennung (ID) des Items, welches nach dem Prime angezeigt wird |
| | * ''evt.detail.node'' -- Das HTML-Element, welches als Prime angezeigt wird |
| | * ''evt.detail.duration'' -- Die Dauer, für welche der Prime angezeigt wird [ms] |
| | * ''present'' -- Der eigentliche Stimulus oder ein Text wird angezeigt. |
| | * ''evt.detail.question'' -- Kennung der Frage |
| | * ''evt.detail.type'' -- Art der Anzeige (''"intro"''=Text zu Beginn, ''"outro"''=Text nach dem letzten Item, ''"item"''=Ein Item/Stimulus wird angezeigt) |
| | * ''evt.detail.item'' -- Kennung (ID) des angezeigten Items/Stimulus, ''null'' falls ein Text angezeigt wird |
| | * ''evt.detail.node'' -- Das HTML-Element, welches als Stimulus oder Text angezeigt wird |
| | * ''select'' -- Der Befragte hat eine Kategorie ausgewählt. Falls dieses Ereignis mittels ''evt.preventDefault()'' abgefangen wird, wird das Item erneut angezeigt (ggf. inkl. Prime) und eine mittels ''setCallbackSelect()'' registrierte Funktion wird nicht aufgerufen. Folgende Attribute stehen zur Verfügung: |
| | * ''evt.detail.question'' -- Kennung der Frage |
| | * ''evt.detail.item'' -- Kennung (ID) des Stimulus |
| | * ''evt.detail.option'' -- Die ausgewählte Kategorie (beginnend mit 1) |
| | |
| | ==== Beispiel: Audio abspielen ==== |
| | |
| | Falls die Stimuli (auch) eine Audio-Datei enthalten, kann diese über das ''present''-Ereignis zum richtigen Zeitpunkt abgespielt werden. Stimuli 1 und 2 hätte beispielsweise folgenden Inhalt: |
| | |
| | <code html> |
| | Hörbeispiel 1 |
| | <audio id="audio1" preload="auto" style="position: absolute; left: -5000px;"> |
| | <source src="example_foo.mp3" type="audio/mpeg" /> |
| | </audio> |
| | </code> |
| | |
| | <code html> |
| | Hörbeispiel 2 |
| | <audio id="audio2" preload="auto" style="position: absolute; left: -5000px;"> |
| | <source src="example_bar.mp3" type="audio/mpeg" /> |
| | </audio> |
| | </code> |
| | |
| | Unter der Frage (hier z.B. ''AB01'') wird der folgende HTML-/JavaScript-Code platziert: |
| | |
| | <code javascript> |
| | <script type="text/javascript"> |
| | <!-- |
| | var question = document.getElementById("AB01_qst"); |
| | question.addEventListener("present", function(evt) { |
| | var item = evt.detail.item; |
| | var audio = document.getElementById("audio" + item); |
| | if (audio) { |
| | audio.play(); |
| | } |
| | }); |
| | // --> |
| | </script> |
| | </code> |
| | |
| | Beachten Sie, dass als HTML-IDs für die ''<audio>''-Elemente ''audio1'' und ''audio2'' gewählt wurden. Dies lässt sich einfach aus ''"audio"'' und der Item-Kennung zusammensetzen. Wären es andere Kennungen, müsste die Funktion einen IF-Filter verwenden: |
| | |
| | <code javascript> |
| | <script type="text/javascript"> |
| | <!-- |
| | var question = document.getElementById("AB01_qst"); |
| | question.addEventListener("present", function(evt) { |
| | var item = evt.detail.item; |
| | var audio = null; |
| | if (item == 1) { |
| | var audio = document.getElementById("audio1"); |
| | } else if (item == 2) { |
| | var audio = document.getElementById("audio2"); |
| | } |
| | if (audio) { |
| | audio.play(); |
| | } |
| | }); |
| // --> | // --> |
| </script> | </script> |
| </code> | </code> |
