Zuordnungsaufgabe mit Video

Question

Hallo liebes SoSci Survey-Team,

ich würde gerne im Rahmen einer Zuordnungsaufgabe (mit Reaktionszeitmessung) ein Video einbetten. Dabei soll die Zuordnungsaufgabe erst angezeigt werden, wenn das Video fertig abgespielt wurde. Ist es möglich dies aufderselben Seite zu verwirklich oder könnte ich dies nur auf zwei separaten Seiten einbinden?

Vielen Dank im Voraus!

Answer 1

Sie können mit ein wenig JavaScript auf das Ende des Videos (Event ended) reagieren:

Nach dem Abspielen einer Audio-Datei automatisch zur nächsten Seite weiterleiten

Und ausgelöst dadurch können Sie eine Frage einblenden, die Sie zuvor ausgeblendet hatten:

Fragen bei Auswahl einer bestimmten Option sofort einblenden

Bei den Details können wir dann gerne helfen, wenn Sie das Grundgerüst gebaut haben.

Comments

Ich habe folgenden Code direkt in die Zuordnungsaufgabe mit Reaktionszeit eingebttet:

<center><b><p> <i> For a more convenient operation, please activate the automatic playback of audio and video. If the video does not start automatically, please click on the video. If you have troubles with watching the video, please try to refresh the page.
<br> <br>
<u>Please watch the whole video. <br> In case of comprehension problems, you can watch the video again by refreshing the page or pressing the re-play button. </b> </u></i> </p>
<br> <br>

<div><video id="stimulus" width="700" height="500" controls autoplay ><source src="https://hessenbox.tu-darmstadt.de/dl/fi5giBctuusLX5Zq3XtmUtjt/TN2_Trim.mp4" />

<source src="https://hessenbox.tu-darmstadt.de/dl/fiVmFmsRPZvyXnjpSuWKMpvV/TN2_Trim.webm" />
</video></div>
 <button type="button" onclick="document.getElementById('stimulus').play()">RE-PLAY </button>
<script type="text/javascript">
<!--

var video = document.getElementById("stimulus");

// Bedienelemente ausblenden, sobald es abspielt
SoSciTools.attachEvent(video, "play", function(evt) {
  stimulus.removeAttribute("controls");
});

// Weiter-Knopf ausblenden
SoSciTools.attachEvent(window, "load", function(evt) {
  SoSciTools.submitButtonsHide();
});
// Weiter-Knopf am Ende des Videos wieder anzeigen
SoSciTools.attachEvent(video, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
});

// -->
</script>


 <br>
 <br> </center>
<script type="text/javascript">
<!--
var video= document.getElementById("stimulus");  // HTML-ID der Texteingabe


 function toogle() {

  // Die Bedingung prüft, ob Video zu Ende abgespielt wurde
  if (document.getElementById("stimulus").addEventListener("ended", SoSciTools.submitPage);) {

    // Keine Angabe ("") verwendet die Standard-Einstellung (normal anzeigen)
    frage.style.display = "";
  } else {
    // Mit der Anzeigeoption "none" wird die Frage ausgeblendet
    frage.style.display = "none";
  }
}
 
 
// Und jetzt gleich soll sie auch ausgeführt werden, damit die Anzeige zu Beginn korrekt ist
// (z.B. ausblenden der Texteingabe zu Beginn)
toogle();
// -->
</script>

---

> Ich habe folgenden Code direkt in die Zuordnungsaufgabe mit Reaktionszeit eingebettet

Auf das toogle() - Funktion und aufruf - können Sie m.E. verzichten. Eigentlich brauchen Sie nur diese Zeilen:

SoSciTools.attachEvent(window, "load", function(evt) {
  SoSciTools.submitButtonsHide();
});
SoSciTools.attachEvent(video, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
});

Und statt dem Ausblenden und Anzeigen des Weiter-Knopfes (oder zusätzlich dazu) blenden Sie noch die Frage aus und ein. Die Variable "frage" müssen Sie aber definieren. Das könne so aussehen:

var frage = document.getElementById("AB01_qst");
SoSciTools.attachEvent(window, "load", function(evt) {
  SoSciTools.submitButtonsHide();
  frage.style.display = "none";
});
SoSciTools.attachEvent(video, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
  frage.style.display = "";
});

---

Vielen Dank für die Antwort!

Ich habe den Code nun wie folgt angepasst:

<center><b><p> <i>
<u>In case of comprehension problems, you can watch the video again by refreshing the page or pressing the re-play button. </b> </u></i> </p>
<br> <br>

<div><video id="stimulus" width="700" height="500" controls autoplay ><source src="https://hessenbox.tu-darmstadt.de/dl/fi5giBctuusLX5Zq3XtmUtjt/TN2_Trim.mp4" />

<source src="https://hessenbox.tu-darmstadt.de/dl/fiVmFmsRPZvyXnjpSuWKMpvV/TN2_Trim.webm" />
</video></div>
 <button type="button" onclick="document.getElementById('stimulus').play()">RE-PLAY </button>
<script type="text/javascript">
<!--

var video = document.getElementById("stimulus");

// Bedienelemente ausblenden, sobald es abspielt
SoSciTools.attachEvent(video, "play", function(evt) {
  stimulus.removeAttribute("controls");
});

// Weiter-Knopf ausblenden
SoSciTools.attachEvent(window, "load", function(evt) {
  SoSciTools.submitButtonsHide();
});
// Weiter-Knopf am Ende des Videos wieder anzeigen
SoSciTools.attachEvent(video, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
});

var frage = document.getElementById("TF01");


SoSciTools.attachEvent(window, "load", function(evt) {
  SoSciTools.submitButtonsHide();
  frage.style.display = "none";
});
SoSciTools.attachEvent(video, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
  frage.style.display = "";
// -->


Sobald die Frage nach dem HTML Code platziert wird, erhalte ich die Fehlermeldung, dass die Frage nicht gefunden wurde. Platziere ich die Frage vor dem Code ein, so funktionieren das Aus- und Einblenden nicht

---

> Sobald die Frage nach dem HTML Code platziert wird, erhalte ich die Fehlermeldung, dass die Frage nicht gefunden wurde

Generell muss der JavaScript-Code unter die Inhalte. Wie lautet denn der Wortlaut der Fehlermeldung und wo wird die Meldung angezeigt?

---

Wenn ich den Code nach der Frage platziere, erhalte ich keine Fehlermeldung.
Diese Debug Informationen werden mir angezeigt:


[Information]    Interview started (new case no. 2088)
[Information]    Questionnaire AN2021_NEW from project assistantnews2021 will be used
[Processing]    Create page 10 in questionnaire AN2021_NEW
[Content]    Create question TF01

---

Gut, dann müssten Sie als nächstes in die JavaScript-Fehlerkonsole Ihres Browser schauen, damit wir noch verbleibende Probleme im JavaScript-Code lösen können. Posten Sie gerne auch einen Pretest-Link direkt (!) zur betroffenen Seite im Fragebogen, dann kann ich gerne noch Tipps geben. Womöglich ist es nur eine Klammer, die noch fehlt.

---

Vielen Dank für Ihre Mühe!

Anbei der Pre-test-Link: https://www.soscisurvey.de/assistantnews2021/?act=1h6RtXlWovizkeFiOGVt6Emg

---

Ich glaube, wir müssen da erstmal ein wenig HTML-Code aufräumen. Bitte prüfen Sie sie HTML-Struktur Ihrer Codes, also dass zu jedem öffnenden Tag genau ein schließendes existiert.

Was ich frei Auge sah:

re-play button. </b> (dazu existiert kein <b>)

Und ganz wichtig: Nach diese Funktion fehlt das schließende </script>

SoSciTools.attachEvent(..., "ended", ...)

---

Hallo, ich habe den Code nochmals überprüft und angepasst. Leider scheint es immer noch nicht zu funktionieren, dass die Frage ausgeblendet wird.

---

Wir nähern uns Schrittweise. Nun sagt die Konsole im Browser:

> Uncaught SyntaxError: missing } after function body

Damit ist das hier gemeint:

SoSciTools.attachEvent(video, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
  frage.style.display = "";
// -->
 </script>

Korrekt wäre es wie folgt:

SoSciTools.attachEvent(video, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
  frage.style.display = "";
});

// -->
 </script>

---

Danke für den Hinweis. Das ist nun auch angepasst..

---

Nun beschwert sich die Konsole:

> Uncaught TypeError: frage is null

Die Variable wird eigentlich hier definiert:

> var frage = document.getElementById("TF01");

Aber die HTML-ID ist korrekt TF01_qst, also

> var frage = document.getElementById("TF01_qst");

---

Nun funktioniert das Ausblenden der Frage. Allerdings erscheint diese dann über dem Video. Gibt es auch eine Möglichkeit sie unterhalb des Videos aus- und wieder einzublenden?

Ansonsten hätte ich noch eine Frage bezüglich der Zuordnungsaufgabe mit Reaktionszeit. Aktuell muss immer zweimal auf das Antwortitem geklickt werden, bis automatisch auf die nächste Seite übergegangen ist. Ist es möglich nur einen Klick zu realisieren?

Hier wäre noch ein neuer Link zum Pretest, damit Sie sich ein Bild davon machen können: https://www.soscisurvey.de/assistantnews2021/?act=4zfLc3uwmJxjCtQwADAeW667

---

> Gibt es auch eine Möglichkeit sie unterhalb des Videos aus- und wieder einzublenden?

Die Frage erscheint dort, wo Sie sie ursprünglich auf der Seite platziert haben. Daher vermute ich, dass Sie die Frage im Moment noch über dem HTML-Code für das Video platziert haben?

> Aktuell muss immer zweimal auf das Antwortitem geklickt werden, bis automatisch auf die nächste Seite übergegangen ist.

Ich denke, Sie zeigen vor dem ersten Item einen Text an (in Ihrem Fall haben Sie dort die Frage platziert). Wenn Sie das entfernen und den Text ins (einzige) Item packen, sollte ein Klick ausreichen. Aber die Zeit bekommen Sie dann nicht akkurat, denn dann fehlt der "Anker" wann die Messung starten soll.

Alternativ verwenden Sie eine normale Auswahl in der Darstellungsvariante "Kärtchen" und stellen in der Frage ein, dass es nach der Auswahl direkt weitergehen soll.

---

Ich habe auf der Seite erst die Frage eingebettet und darunter den HTML-Code mit dem Video sowie den Codes zum Ein- und Ausblenden der darüberstehenden Frage.

Wenn ich die Reihenfolge ändere, funktioniert das Ein- und Ausblenden allerdings nicht.

---

Bitte teilen Sie den HTML-Code auf - und zwar in den Teil, der das Video anzeigt, also <video> und in den Teil, welcher sich um die Steuerung kümmert, also das <script>.

Das Video gehört nach oben, das Skript gehört unter die Frage. Dann sollten Reihenfolge und Funktion gewährleistet sein.

---

Vielen Dank, das hat sehr geholfen!