Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende ÜberarbeitungNächste ÜberarbeitungBeide Seiten der Revision | ||
de:create:questions:assignment [22.03.2016 09:21] – [Filterführung] admin | de:create:questions:assignment [01.06.2022 19:22] – admin | ||
---|---|---|---|
Zeile 86: | Zeile 86: | ||
</ | </ | ||
</ | </ | ||
+ | |||
+ | |||
+ | ===== JavaScript-Anbindung ===== | ||
+ | |||
+ | Die JavaScript-Funktion '' | ||
+ | |||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | |||
+ | Mit der Funktion '' | ||
+ | |||
+ | Mit der Funktion '' | ||
+ | |||
+ | Die Funktion '' | ||
+ | |||
+ | |||
+ | ==== Audio abspielen ==== | ||
+ | |||
+ | Falls die Stimuli (auch) eine Audio-Datei enthalten, kann diese über das '' | ||
+ | |||
+ | <code html> | ||
+ | Hörbeispiel 1 | ||
+ | <audio id=" | ||
+ | <source src=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <code html> | ||
+ | Hörbeispiel 2 | ||
+ | <audio id=" | ||
+ | <source src=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Unter der Frage (hier z.B. '' | ||
+ | |||
+ | <code javascript> | ||
+ | <script type=" | ||
+ | <!-- | ||
+ | var question = document.getElementById(" | ||
+ | question.addEventListener(" | ||
+ | var item = evt.detail.item; | ||
+ | var audio = document.getElementById(" | ||
+ | if (audio) { | ||
+ | audio.play(); | ||
+ | } | ||
+ | }); | ||
+ | // --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Beachten Sie, dass als HTML-IDs für die ''< | ||
+ | |||
+ | <code javascript> | ||
+ | <script type=" | ||
+ | <!-- | ||
+ | var question = document.getElementById(" | ||
+ | question.addEventListener(" | ||
+ | var item = evt.detail.item; | ||
+ | var audio = null; | ||
+ | if (item == 1) { | ||
+ | var audio = document.getElementById(" | ||
+ | } else if (item == 2) { | ||
+ | var audio = document.getElementById(" | ||
+ | } | ||
+ | if (audio) { | ||
+ | audio.play(); | ||
+ | } | ||
+ | }); | ||
+ | // --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ==== Zeiten für Primes variieren ==== | ||
+ | |||
+ | Das folgende JavaScript verändert die Darbietungsdauer für die Primes, welche in den Items 1, 2 und 3 definiert wurden. Die Zahl hinter der Item-Nummer gibt dabei die Anzeigedauer in Millisekunden (ms) an. | ||
+ | |||
+ | <code html> | ||
+ | <script type=" | ||
+ | window.addEventListener(" | ||
+ | SoSciTools.questionnaire.AB01.setPrimeTimes({ | ||
+ | 1: 2000, | ||
+ | 2: 500, | ||
+ | 3: 1000 | ||
+ | }); | ||
+ | }); | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Falls die Anzeigezeiten für die Primes dynamisch variiiert werden sollen, kann die Liste der Prime-Anzeigedauern auch im PHP-Code erstellt und anschließend mittels Platzhalter in den JavaScript-Code übernommen werden. Der JavaScript-Code würde dabei als Text (Darstellung: | ||
+ | |||
+ | <code html> | ||
+ | <script type=" | ||
+ | window.addEventListener(" | ||
+ | SoSciTools.questionnaire.%question%.setPrimeTimes(%randomTimes%); | ||
+ | }); | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Der PHP-Code könnte dann wie folgt aussehen. Er würde die zufällig gewählten Zeiten in den internen Variablen der Frage " | ||
+ | |||
+ | <code php> | ||
+ | $times = []; | ||
+ | for ($i=1; $i<=20; $i++) { | ||
+ | $randomTime = random(100, 1000); | ||
+ | put(id(' | ||
+ | $times[$i] = $randomTime; | ||
+ | } | ||
+ | |||
+ | // Textbaustein AB02 einbinden und dabei | ||
+ | // die Platzhalter für Frage-Kennung und die Zeiten einsetzen | ||
+ | show(' | ||
+ | ' | ||
+ | ' | ||
+ | ]); | ||
+ | </ | ||
+ | |||
+ | |||
+ | ==== Zeitbegrenzung variieren ==== | ||
+ | |||
+ | In der Zuordnungsaufgabe kann eine // | ||
+ | |||
+ | Mit der JavaScript-Methode '' | ||
+ | |||
+ | Das folgende JavaScript legt für das dritte Item in der Zuordnungsaufgabe " | ||
+ | |||
+ | <code html> | ||
+ | <script type=" | ||
+ | window.addEventListener(" | ||
+ | SoSciTools.questionnaire.AB01.setTimeouts({ | ||
+ | 3: 1200, | ||
+ | 5: 2000 | ||
+ | }); | ||
+ | }); | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ===== Automatischer Start ===== | ||
+ | |||
+ | Es gibt Situationen, | ||
+ | |||
+ | <code javascript> | ||
+ | window.addEventListener(" | ||
+ | window.addTimeout(function() { | ||
+ | s2.AB01.selectOption(1); | ||
+ | }, 1000); | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Mehrstufiges Priming ===== | ||
+ | |||
+ | Standardmäßig kann die Zuordnungaufgabe for dem eigentlichen Stimulus (Items) ein Fixationskreuz (bei allen Items gleich, einzustellen in der Frage) und einen Prime (einzustellen im jeweiligen Item) anzeigen. Für manche Designs ist dies jedoch unzureichend. Mit ein wenig JavaScript lassen sich auch mehrere Inhalte vor dem eigentlichen Stimulus darstellen. Dafür wird der Zeitslot genutzt, der eigentlich dem Fixationskreuz vorbehalten ist. | ||
+ | |||
+ | Das folgende Beispiel befasst sich mit folgender Präsentations-Abfolge: | ||
+ | |||
+ | - Anzeige eines Fixationskreuzes (750ms) | ||
+ | - Anzeige des Textes " | ||
+ | - Anzeige einer Zahl zwischen 1 und 3 (500ms) | ||
+ | - Anzeige des Items -- mit Auswahloption " | ||
+ | |||
+ | In der Frage vom Typ " | ||
+ | |||
+ | * Ein //Text vor dem ersten Stimulus//, z.B. "Zum Starten bitte klicken" | ||
+ | * Eine //Feste Höhe für Stimuli//, in diesem Fall 120 Pixel, damit die Anzeige zwischen Fixationskreuz und dem schmaleren Text nicht " | ||
+ | * Im Karteireiter // | ||
+ | * das Häkchen bei //Auswahl einer Option mittels Tastatur erlaubt// wird entfernt, da die Teilnehmer nur Klicken sollen (optional). | ||
+ | * Im Karteireiter // | ||
+ | * Die // | ||
+ | |||
+ | Nach dem Speichern der Frage " | ||
+ | |||
+ | <code javascript> | ||
+ | <script type=" | ||
+ | <!-- | ||
+ | |||
+ | function AssignmentPlus(qstID, | ||
+ | // Zunächst benötigen wir das HTML-Element, | ||
+ | var outer = document.getElementById(qstID + " | ||
+ | var pause = outer.getElementsByTagName(" | ||
+ | // Eine Mindest-Höhe wäre hilfreich, damit die Knöpfe nicht " | ||
+ | pause.style.height = " | ||
+ | |||
+ | function showContent(evt) { | ||
+ | // Ermitteln, welches Item gleich gezeigt wird | ||
+ | var item = evt.detail.item; | ||
+ | // Entsprechenden Teil aus der Liste verwenden | ||
+ | var show = contents[" | ||
+ | |||
+ | // Anzeigen der Inhalte nach Zeitplan | ||
+ | // Zunächst (direkt) ein Fixationskreuz (750ms) | ||
+ | pause.innerHTML = '< | ||
+ | // Nach 750ms dann der erste Teil des Inhalts (für 500ms) | ||
+ | window.setTimeout(function() { | ||
+ | pause.innerHTML = show[0]; | ||
+ | }, 750); | ||
+ | // Nach weiteren 500ms (insg. also nach 1250ms) der zweite Teil des Inhalts (für 500ms) | ||
+ | window.setTimeout(function() { | ||
+ | pause.innerHTML = show[1]; | ||
+ | }, 1250); | ||
+ | // Weiter zum Item geht es dann nach 1250+500 = 1750ms | ||
+ | // Das ist die Gesamtdauer für die Fixation (in der Frage einzustellen) | ||
+ | } | ||
+ | |||
+ | // Aufruf der Methode bei jeder Fixations-Pause | ||
+ | %qst%_qst.addEventListener(" | ||
+ | } | ||
+ | |||
+ | // Initialisieren der AssignmentPlus Instanz | ||
+ | SoSciTools.attachEvent(window, | ||
+ | // Inhalte, welche bei den einzelnen Items gezeigt werden sollen | ||
+ | // (auch hier können Platzhalter zum Einsatz kommen) | ||
+ | new AssignmentPlus(" | ||
+ | i1 : [" | ||
+ | i2 : [" | ||
+ | i3 : [" | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | // --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Am Ende des JavaScript-Codes ist ein Array definiert, welche Inhalte bei den einzelnen Items angezeigt werden sollen. Hier sind exemplarisch nur die Inhalte für 3 Items angegeben. Nach Bedarf kann hier natürlich auch mit Platzhaltern gearbeitet werden, z.B. wenn eine Randomisierung oder Rotation erforderlich ist. | ||
+ | |||
+ | Zuletzt ist noch ein klein wenig PHP-Code erforderlich, | ||
+ | |||
+ | <code php> | ||
+ | show(' | ||
+ | show(' | ||
+ | ' | ||
+ | )); | ||
+ | </ | ||
+ | |||
+ | Der PHP-Code steht alleine auf einer Fragebogen-Seite. Die beiden Elemente dürfen nicht (!) zusätzlich dazu in die Seite gezogen werden. |