Frage anzeigen und Timer starten beim Klick auf "play"

Question

Ich möchte auf einer Seite eine Frage mit Bild einbauen, bei der die Teilnehmer nur eine bestimmte Zeit zum Antworten haben. Die Länge der Zeit soll der Länge eines Musikclips entsprechen.

Mein bisherige Lösung:
Der Musikclip wird mit Autoplay beim Laden der Seite abgespielt. Ein Timer ist auf die Dauer des Clips eingestellt und leitet anschliessend zur nächsten Seite weiter. Funktioniert im Prinzip gut, aber AutoPlay ist bei einer grossen Anzahl Nutzer deaktiviert.

Was ich gerne hätte, falls möglich:
a) erst wenn man im Musikplayer auf Play drückt erscheint die Frage (das Bild)
b) im selben Moment startet der Timer und leitet zur nächsten Frage weiter oder versteckt alternativ die Frage wieder

Kann ich das auf SosciSurvey so mit dem Play Button verknüpfen oder gibt es einen praktikablen Umweg?

Vielen Dank!

Answer 1

Wenn Sie das Video via <video> Tag einbinden, dann haben Sie auch mittels JavaScript Zugriff auf das Element.

Sie könnten z.B. alle 0,5 Sekunden die Position im Video abrufen und entsprechend den Timer anzeigen. Dann hätten Sie sogar die Möglichkeit für Pausen abgebildet :)

Den Play-Button fangen Sie nicht direkt ab, sondern das play-"Event", welches das Video beim Abspielen auslöst. Mit diesem können Sie Inhalte anzeigen und den Timer starten.

Alternativ können Sie auch alle Bedienelemente beim Video ausblenden und einen eigenen Play-Knopf verwenden. Das hätte z.B. den Vorteil, dass der Teilnehmer das Video nicht pausieren kann.

Comments

Vielen Dank für ihre prompte Antwort. In der Tat möchte ich die Möglichkeit zu Pausieren nicht ermöglichen.

Ich habe allerdings leider so gut wie keine Programmierkenntnisse.
Unten ist mein derzeitiger Code, wo liegt denn mein Fehler, dass die Frage nicht beim Abspielen angezeigt wird?


<button onclick="playVid()" type="button">Play</button>
<video id="myAudio">
  <source src="18.mp3" type="audio/mp3">
  Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myAudio");

function playVid() {
  vid.play();
}
</script>
<script type="text/javascript">
<!--
var frage = document.getElementById("ST01_qst");
var vid = document.getElementById("myAudio");

vid.onplay = function toogle() {
if (vid.play) {
frage.style.display = "";
} else {
frage.style.display = "none";
  }
}
toogle();
// -->
</script>

---

Keine Sorge ... der Einstieg ins Programmieren ist nicht ganz einfach, aber zumindest erwerben Sie damit eine Fertigkeit, die in vielen Situationen wertvolle Dienste leistet :)

> Unten ist mein derzeitiger Code, wo liegt denn mein Fehler, dass die Frage nicht beim Abspielen angezeigt wird?

Das "onplay" ist etwas antiquiert - aktuell würde man es mit addEventListener() machen. Aber es sollte eigentlich funktionieren. Nur bin ich nicht sicher, ob das vid.play wie gewünscht funktioniert. Versuchen Sie es doch mal ohne:

var frage = document.getElementById("ST01_qst");
var vid = document.getElementById("myAudio");
frage.style.display = "none";

vid.addEventListener("play", function() {
  frage.style.display = "";
});

Und wenn es nicht funktioniert, dann schauen Sie bitte mal in die Fehlerkonsoel Ihres Browsers. Dort sollten sich Hinweise finden (gerne posten), warum es nicht funktioniert.

---

Vielen Dank, das hat sehr gut geklappt. Ich konnte auch den Timer verknüpfen und eigentlich wäre jetzt alles so wie gewollt.

Aber: die einzublendende Frage ist eine des Typs Grafische Positionierung. Das Bild hierfür wird korrekt angezeigt, allerdings die gesetzten Items nicht mehr. Ich sehe also nicht, wo ich bereits etwas markiert habe. Das war vorher kein Problem und ich habe auch Items fürs Markieren hinzugefügt und die Frage ist auf "Alle Items zeigen" eingestellt.

---

Meine Vermutung ist, dass die Metriken der Markierungen nicht mehr korrekt eingelesen werden können, weil die Frage dafür nicht verfügbar ist.

Versuchen Sie einmal, die Zeile

frage.style.display = "none";

wie folgt:

window.addEventListener("load", function() {
  frage.style.display = "none";
});

Mit etwas Glück lädt die Frage erst ihre Metriken und versteckt die Frage erst danach.

---

Perfekt. Vielen Dank, wirklich ein toller Support!