Countdown erst beginnen, wenn START aktiviert & STOP ausblenden

Question

Ich verwende einen Fragebogen, in dem die Antworten in Form von Audio-Aufnahmen gegeben werden müssen.

(1) Bis jetzt funktioniert es so, dass der Timer läuft, sobald man auf der Seite des audio-recorders ist. Wie kann ich den Timer erst dann aktivieren, sobald man auf START klickt?

(2) Wie kann ich den STOP Button deaktivieren, sodass man nicht vor Ablauf der Zeit zur nächsten Seite gelangt?

Comments

Hier die Codes des Recorders und Timers:

<!-- Buttons -->
<div style="margin: 2em 0 0.5em">
  <button id="btnStart" type="button" tabindex="50">START</button>
  <button id="btnStop" type="button" tabindex="50">STOP</button>
</div>
<div style="margin: 0.5em 0" id="audioReload">Bitte laden Sie die Seite neu (<a href="javascript:SoSciTools.reloadPage()">Neu Laden</a>) und gestatten Sie der Seite Zugriff auf Ihr Audio-Gerät.</div>

<!-- Audio recorder from https://github.com/muaz-khan/RecordRTC -->
<script src="../plugins/RecordRTC/RecordRTC.min.js"></script>
<script src="../plugins/RecordRTC/gumadapter.js"></script>


<script type="text/javascript">
<!--
"use strict";

if ((webrtcDetectedVersion === null) || (webrtcDetectedVersion < webrtcMinimumVersion)) {
  alert("Ihr Browser unterstützt diese Aufnahme leider nicht.");
  throw new Error("no audio support");
}

var buttonStart = document.getElementById("btnStart");
var buttonStop = document.getElementById("btnStop");
var recordRTC;

function startRecording(button) {
  if (recordRTC) {
    recordRTC.startRecording();
    buttonStart.disabled = true;
    buttonStop.disabled = false;
  }
}

function stopRecording(button) {
  if (recordRTC) {
    recordRTC.stopRecording(onStop);
    // You may want to change this to allow a new try (replacing the old one)
    buttonStart.disabled = false;
    buttonStop.disabled = true;
  }
}

function onStop(audioURL) {
    var recordedBlob = recordRTC.getBlob();
    // Transfer the data
    %q.id%.sendBLOB(recordedBlob, onSendDone);
}

function onStream(stream) {
    var options = {
        mimeType: "audio/ogg",
        audioBitsPerSecond: 128000
    };
    recordRTC = new RecordRTC(stream, options);
    // Enable the start button
    buttonStart.disabled = false;
    // Remove warning
    document.getElementById("audioReload").style.display = "none";
}


function init() {
    buttonStart.disabled = true;
    buttonStop.disabled = true;

    var mediaConstraints = {
        video: false,
        audio: true
    };

    function onError(error) {
      alert("Ihr Computer oder Ihr Browser unterstützt derzeit keine Tonaufnahme." + "\n\n" + error);
    }
    navigator.mediaDevices.getUserMedia(mediaConstraints).then(onStream).catch(onError);
};

SoSciTools.attachEvent(window, "load", init);
SoSciTools.attachEvent(buttonStart, "click", startRecording);
SoSciTools.attachEvent(buttonStop, "click", stopRecording);

var audioSent = false;
function onSubmit() {
  // Check if already sent
  if (!audioSent) {
    stopRecording();
    return false;
  } else {
    return true;
  }
}
function onSendDone() {
  audioSent = true;
  SoSciTools.submitPage();
}
SoSciTools.questionnaire.attachCheck(onSubmit);
// -->
</script>


________________

<div id="remain"></div>
<script type="text/javascript">
<!--

var timer1;
var timer2;
function weiter() {
  window.clearTimeout(timer1);
  window.clearTimeout(timer2);
  var out = document.getElementById("remain");
  out.innerHTML = "0:00";
  onSubmit();
}
// Countdown anzeigen
var date0 = new Date();
var timeout = date0.getTime() + %remain% * 1000;
function updateCountdown() {
  // Zeit berechnen
  var date = new Date();
  var time = Math.ceil((timeout - date.getTime() - 50) / 1000);  // Verbleibende Zeit in Sekunden
  // Zeit anzeigen
  var out = document.getElementById("remain");
  if (!out) {
    return;
  }
  while (out.lastChild) {
    out.removeChild(out.lastChild);
  }
  var minutes = Math.floor(time / 60);
  var seconds = String(time - 60 * minutes);
  if (seconds.length < 2) seconds = "0" + seconds;
  var display = String(minutes) + ":" + seconds;
  var displayNode = document.createTextNode(display);
  out.appendChild(displayNode);
}
// Initialisierung der Weiterleitung
SoSciTools.attachEvent(window, "load", function(evt) {
  // Weiter-Knopf ausblenden (optional)
  SoSciTools.submitButtonsHide();
  // Zusätzlicher Timer für die Aktualisierung des Countdowns
  timer1 = window.setInterval(updateCountdown, 1000);
  updateCountdown();
  // Timer für automatische Weiterleitung starten
  timer2 = window.setTimeout(weiter, %remain% * 1000);
});
// -->
</script>

Answer 1

(1) Bis jetzt funktioniert es so, dass der Timer läuft, sobald man auf der Seite des audio-recorders ist. Wie kann ich den Timer erst dann aktivieren, sobald man auf START klickt?

Die haben zwei Timer. Diese starten hier:

timer1 = window.setInterval(updateCountdown, 1000);
timer2 = window.setTimeout(weiter, %remain% * 1000);

Allerdings zählen diese Timer die Zeit nicht selbst, sie greifen auf die Variablen time0und timeout zurück, die hier definiert werden:

var date0 = new Date();
var timeout = date0.getTime() + %remain% * 1000;

Wenn Sie möchten, dass all das erst nach dem Klick auf START beginnt, dann packen Sie die letztgenannten Zeilen und dern Inhalt des Blocks nach SoSciTools.attachEvent(window, "load", ... in eine Funktion. Und rufen Sie diese Funktion auf, wenn der START-Knopf gedrückt wird.

(2) Wie kann ich den STOP Button deaktivieren, sodass man nicht vor Ablauf der Zeit zur nächsten Seite gelangt?

Dafür sorgt der Aufruf von SoSciTools.submitPage() in der Funktion onSendDone().

function onSendDone() {
  audioSent = true;
  SoSciTools.submitPage();
}

Wenn Sie die Zeile entfernen, geht es nach dem STOP nicht automatisch weiter.

Comments

Danke. Frage 2) wurde falsch verstanden. Man soll automatisch zur nächsten Seite gelangen, sobald die Zeit abgelaufen ist. Man soll aber nicht vor Ablaufen der Zeit zur nächsten Seite gelangen, d.h. man soll nicht selber auf STOP klicken können. Kann man die STOP Schaltfläche ausblenden?

---

>  Man soll aber nicht vor Ablaufen der Zeit zur nächsten Seite gelangen, d.h. man soll nicht selber auf STOP klicken können. Kann man die STOP Schaltfläche ausblenden?

Mein obiger Vorschlag sorgt nur dafür, dass man beim Stoppen nicht weiter kommt.

Wenn Sie gar keinen Stop-Knopf haben möchten (Datenschutz?!), dann können Sie diesen natürlich auch verschwinden lassen:

buttonStop.style.display = "none";

---

Danke, jetzt ist STOP ausgeblendet, ABER wenn ein Schüler vergisst, auf START zu klicken weil er/sie die Antwort nicht weiß, dann kommt man nach Ablauf der Zeit nicht weiter und bleibt stecken... Leider beginnt schon am Montag die Datenerhebung.

---

> wenn ein Schüler vergisst, auf START zu klicken weil er/sie die Antwort nicht weiß, dann kommt man nach Ablauf der Zeit nicht weiter und bleibt stecken...

Ich dachte, die Zeit für den Timer soll ohnehin erst nach dem Klick auf "Start" beginnen? Das heißt, dass die Zeit nicht ablaufen kann, wenn man vergisst, auf "Start" zu klicken?!