"Weiter" Button bei Fragenprüfung erneut ausgeblendet

Question

Ich möchte während dem Abspielen von Videos den "Weiter" Knopf ausblenden. Ich habe das anhand der Anleitung hier gemacht (Überschrift "Optimierte Einbindung, code unten). Das Problem ist, dass beim Neuladen der Seite – z.B. wenn auf "weiter" gedrückt wurde aber eine Pflichtfrage nicht beantwortet wurde – der Knopf erneut ausgeblended wird. Ich habe auch versucht den Code an eine if-Bedingung für getRoute() zu knüpfen, wie hier angemerkt aber es funktioniert (zumindest im Testmodus) nicht. Gibt es eine andere Möglichkeit oder eine Anleitung, die das zeigt? Oder haben Sie einen Vorschlag, wie man getRoute() hier erfolgreich einbauen kann? Ich schätze dieses Problem haben alle, die nach der Anleitung auf der verlinkten Seite arbeiten...
Beim Ausbleden des Knopfes für bestimmte Zeit besteht dieses Problem auch (hätte ich als Alternative versucht)

Hier der Code von der verlinkten Seite von Ihnen:

<video style="max-width: 100%" controls controlsList="nodownload" id="stimulus">
  <source src="dateiname.mp4" type="video/mp4" />
  <source src="dateiname.webm" type="video/webm" />
  <source src="dateiname.ogg" type="video/ogg" />
</video>
 
 
<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(stimulus, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
});
 
// -->
</script>

Answer 1

Im Prinzip müssen Sie nur dafür sorgen, dass diese Zeilen

// Weiter-Knopf ausblenden
SoSciTools.attachEvent(window, "load", function(evt) {
  SoSciTools.submitButtonsHide();
});

Standardmäßig nicht eingebunden werden, sondern nur wenn getRoute() == 'next' erfüllt ist. Heißt, Sie müssten zwei unterschiedliche JavaScript-Elemente einfügen. Eines ohne diese Zeilen immer und eines mit (nur) diesen Zeilen, wenn die Seite das erste mal geladen wird.

Falls Sie auf Schweirigkeiten stoßen, posten Sie bitte kurz, welchen Code Sie wo verwendet haben.

Comments

Danke!
Leider funktioniert das nicht bei mir. Hier ist mein Code:

    <script type="text/javascript">
    <!--
    var video = document.getElementById("stimulus");
    var route = getRoute();
    if (route == 'next') {
        // 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>

---

Sie vermischen hier PHP und JavaScript. PHP läuft auf dem Server, JavaScript im Browser.

Bitte legen sie 2 getrennte JavaScript-"Texte" an. Binden Sie diese dann mittels der PHP-Funktion text() auf der Seite ein. Anschließend können Sie den PHP-Filter ergänzen.

Wenn Ihnen diese Beschreibung nicht weiterhilft (zugegeben, sie ist etwas kompakt), sagen sie gerne nochmal Bescheid.

---

Danke, leider komme ich damit (und den Beschreibungen von hier
https://www.soscisurvey.de/help/doku.php/de:create:inputs-custom?s[]=%2Atextbaustein%2A
und hier
https://www.soscisurvey.de/help/doku.php/de:create:javascript
nicht weiter.

Was ich versucht habe war, eine Text-Variable anzulegen und diese dann einzubinden, aber das funktioniert nicht.

prepare_input('IN04');
if (getRoute() == 'next') {
   text('IN04');
}


Hier noch einmal die Codes, die ich bisher verwende - vielleicht könnten Sie mir damit helfen:

PHP:

$RM04x01 = value('RM04x01');
put('IN01_01', $RM04x01);
html('
<video style="max-width: 100%; margin-bottom: 20px;" controls controlsList="nodownload" playsinline autoplay muted id="stimulus">
  <source src="https://syncandshare.lrz.de/dl/VIDEOLINK/' . $RM04x01 . '.mp4" type="video/mp4" />
</video>
');


Danke!

---

Sie haben ja den folgenden JavaScript-Code (oben):

<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(stimulus, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
});
 
// -->
</script>

Erstellen Sie im Fragenkatalog zwei texte in der Darstellungsvariante "HTML-Code" und legen Sie ihn wie folgt geteilt in diese Texte:

<script type="text/javascript">
<!--
 
var video = document.getElementById("stimulus");
 
// Bedienelemente ausblenden, sobald es abspielt
SoSciTools.attachEvent(video, "play", function(evt) {
  video.removeAttribute("controls");
});
 
// -->
</script>

Da stand m.E. noch fälschlich "stimulus" statt "video". Und...

<script type="text/javascript">
<!--
 
var video = document.getElementById("stimulus");

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

Den einen Text binden Sie immer auf der Seite ein, für den anderen verwenden Sie im Prinzip fast den PHP-Code, den Sie schon haben. Ich nehme mal an, dass die beiden Texte JS01 und JS02 heißen, also dann folgender PHP-Code:

text('JS01');
if (getRoute() == 'next') {
  text('JS02');
}

Kommen Sie damit weiter?

---

Danke, das funktioniert nun einwandfrei. Das Problem war, dass ich keinen Textbaustein, sondern eine Frage vom Typ "Text" verwendet habe.

Ein Problem tritt nun aber leider auf: Wenn das Video aus irgendeinem Grund nicht geladen werden kann, können Teilnehmer*innen nicht auf "weiter" drücken, weil der Knopf nicht erscheint. Gibt es noch eine Möglichkeit eine Bedingung zu formuliert, die den Code auch nur dann aktiviert, wenn das Video geladen wird (oder nicht aktiviert, wenn nicht abrufbar)?

---

Ich glaube ich habe selbst eine Lösung gefunden. Vielleicht könnten Sie mir nur kurz mitteilen, falls hier etwas übersehe und das Probleme macht.

Ich habe im html bzw. JavaScript code folgenden Bestandteil
```
// Weiter-Knopf ausblenden
SoSciTools.attachEvent(window, "load", function(evt) {
  SoSciTools.submitButtonsHide();
});
```

geändert auf:
```
// Weiter-Knopf ausblenden
SoSciTools.attachEvent(video, "play", function(evt) {
  SoSciTools.submitButtonsHide();
});
```

...scheint zu funktionieren, weil die Kondition "play" nur vorhanden ist, wenn ein Video bereits geladen wurde und schon abspielt (im Gegensatz zu "load"...das scheint nur zu spezifizieren, dass ein Video geladen wird (bzw. versucht wird zu laden)).

Danke!

---

Das "play" Event sollte das Video nur losschicken, wenn es losspielt. Heißt, wenn jemand das Video einfach nicht startet (viele Mobilbrowser blockieren das automatisch Abspielen), dann kann man einfach direkt weiterklicken.

Können Sie denn mit Datensätzen etwas anfangen, bei denen das Video nicht geladen werden kann? Dann sollten Sie dafür sorgen, dass es keine Probleme beim Leden gibt und den Weiter-Knopf beim Laden ausblenden.

---

Das wäre auch ungünstig...
Wir haben ein Item eingebaut das abfragt, ob das Video einwandfrei abgespielt werden konnte und könnten dann Daten für individuelle Stimuli ausschließen, falls das Laden Probleme macht.
Die Videos werden über Sync+Share eingebettet und ich möchte verhindern, dass Teilnehmende die gesamte Studie abbrechen müssen, wenn 1/10 Videos nicht abgespielt wird und sie nicht auf "Weiter" drücken können.
Eine Bedingung mit "Wenn das Video **erfolgreich** geladen wurde, dann..." oder "Wenn video load = error, dann Button einblenden" wäre wsl. hilfreich.  Gibt es so eine Möglichkeit?

---

Sie können die Leute bitten, die Seite nochmal mit "Seite neu Laden" neu zu laden (oder einen Knopf <button type="button" onclick="javascript:window.reload()">Neu Laden</button> einbinden) , wenn das Video nicht erscheint.

Stellen Sie sicher, dass Sie in Sync&Share eine ausreichend große Anzahl Downloads für das Video erlauben. Wenn ich mich nicht täusche, ist das standardmäßig auf 20 beschränkt.