0 votes
in SoSci Survey (dt.) by s213396 (110 points)

Sehr geehrte Damen und Herren,

in meinem Fragebogen sollen die Probanden auf einer Seite "Siebenen" aus Blöcken von Zufallszahlen innerhalb einer bestimmten Zeit zählen. Die Fragebogenseite ist sehr lang und ich würden den Timer gerne so einstellen, dass er mitwandert, wenn man runterscrollt und dabei aber nicht die Aufgaben überdeckt.

Wie kann man das einstellen?

Ich habe den Timer, wie es in der Erklärung steht, eingerichtet und dieser funktioniert auch super.
Wenn die Probanden allerdings runterscrollen, um weitere Aufgaben zu bearbeiten, ist der Countdown nicht mehr sichtbar. Wenn ich einen HTML-Code ergänze, der den Timer mitwandern lässt, überdeckt er die Aufgaben.

Vielen herzlichen Dank vorab!

1 Answer

0 votes
by SoSci Survey (306k points)

Wenn ich einen HTML-Code ergänze, der den Timer mitwandern lässt, überdeckt er die Aufgaben.

Tja ... im Prinzip brauchen Sie nur einen Platz, wo er nicht im Weg ist. Sie könnten ihr zum Beispiel oben an der Seite anpinnen. Also quasi ein Balken, der dann oben fix steht. Dann überdeckt er auch Fragen, aber es sieht korrekt aus :)

Wenn Sie den Balken dort aber nicht von Anfang an haben möchten, wird es anspruchsvoller. Dann müssen Sie bei Scrollen nämlich mittels JavaScript die aktuelle Position des Balkens (also z.B. ein <div> mit weißem Hintegrund) überprüfen - relativ zur Scrollposition - und wenn der Balken oberhalb der Scroll-Position wäre, müssten Sie das style-Attribute so anpassen, dass er position: fixed am oberen Rand hängt. Wenn die Scrollposition die ursprüngliche Position des Balkens wieder unterschreitet, müsste der Balken wieder in seine reguläre position: static zurückwechseln.

Wir haben das für Skalen implementiert. Dort kann man einstellen, dass die Skalenbeschriftung mitscrollt. Aber da steckt einige Arbeit dahinter. Deshalb kann ich die Premium-Lösung nur eingeschränkt empfehlen.

by s213396 (110 points)
Vielen Dank für Ihre Antwort!
Könnten Sie mir noch erläutern, wie ich diesen Balken fixiere?
Auf die Premium-Lösung, die sie nur eingeschränkt empfehlen, würde ich bestenfalls verzichten wollen.
by SoSci Survey (306k points)
Der CSS-Befehl ist position:fixed, das könnte so aussehen:

<div style="width: 100%; position: fixed; top: 0; left: 0; background-color: #FF9900; text-align: center; padding: 8px">Hier der Countdown</div>
by s213396 (110 points)
edited by s213396
Vielen Dank!
Oben auf der Seite erscheint nun ein Balken, da habe ich bisher lediglich die Farbe und Größe angepasst.

Wie bekomme ich denn den "Timer" in den Code bei "Hier der Countdown" also wie heißt die Variable oder das Zeichen, das ich dort einfügen muss (Doofe Frage wahrscheinlich, aber ich finde da gerade keine Antwort drauf)?

Verwendet habe ich bisher (klappt auch alles nach wie vor):
- PHP Code
- Textbaustein als HTML für den Timer
- HTML für alle weiteren Formatierungen (Anzeige etc.)

Lieben Dank!
by SoSci Survey (306k points)
Wenn Sie der Anleitung gefolgt sind, haben Sie vermutlich irgendwo ein DIV mit einer ID, laut Anleitung z.B.

<div id="timeDisplay" style="font-size: 200%; margin: 16px 0; text-align: center">&ndash;</div>

Anhand der ID weiß der JavaScript-Code, wo der Timer hin soll. Also muss dieses DIV in Ihr neues DIV oben.
by s213396 (110 points)
Leider nicht.
In der Anleitung dieser Seite gibt es keine DIV mit "timeDisplay": https://www.soscisurvey.de/help/doku.php/de:create:timer-submit

Das hier ist mein PHP-Code:
if (!isset($time0)) {
  $time0 = time();
  registerVariable($time0);  // Die Variable $time0 auch nach Ende des PHP-Codes aufbewahren
}
// Prüfung, ob die Zeit schon abgelaufen ist
// (z.B. weil der Teilnehmer die Seite neu geladen hat)
$timer = 150;  // Der Teilnehmer hat 2,5 Minute (150 Sekunden) Zeit zur Bearbeitung
if (time() >= $time0 + $timer) {
  goToPage('next');
}
// Die verbleibende Zeit muss auch dem JavaScript-Code bekannt gemacht werden
$remain = $time0 + $timer - time();
replace('%remain%', $remain);

Das hier ist der HTML-Textcode:
<script type="text/javascript">
<!--
 
// Funktion zur Weiterleitung
function weiter() {
  // Den Teilnehmer zur nächsten Seite weiterleiten
  SoSciTools.submitPage();
}
 
// Weiter-Knopf ausblenden (optional)
SoSciTools.submitButtonsHide();
 
// Initialisierung der Weiterleitung
SoSciTools.attachEvent(window, "load", function(evt) {
  // Timer für automatische Weiterleitung starten
  window.setTimeout(weiter, %remain% * 1000);
});
 
// -->
</script>

Daraufhin folgt noch der folgende HTML-Code:
<p>Verbleibende Zeit: <span id="remain"></span></p>

<script type="text/javascript">
<!--
 
// Funktion zur Weiterleitung
function weiter() {
  // Den Teilnehmer zur nächsten Seite weiterleiten
  SoSciTools.submitPage();
}
 
// 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);
  var display = String(minutes) + ":" + seconds;
  var displayNode = document.createTextNode(display);
  if (seconds.length < 2) seconds = "0" + seconds;
  out.appendChild(displayNode);
}
 
// Weiter-Knopf ausblenden (optional)
SoSciTools.submitButtonsHide();
 
// Initialisierung der Weiterleitung
SoSciTools.attachEvent(window, "load", function(evt) {
  // Zusätzlicher Timer für die Aktualisierung des Countdowns
  window.setInterval(updateCountdown, 1000);
  updateCountdown();
  // Timer für automatische Weiterleitung starten
  window.setTimeout(weiter, %remain% * 1000);
});
 
// -->
</script>

Könnten Sie mir sagen, wo ich bei diesen Bestandteilen den Befehl ergänze? Ich habe bereits einiges ausprobiert, aber es entsteht leider nicht das gewünschte Layout.
Herzlichen Dank vorab.
by SoSci Survey (306k points)
Ihr Code sucht nach einem Element mit der HTML-ID "remain"

  // Zeit anzeigen
  var out = document.getElementById("remain");

Demnach also nur folgende kleine Änderung:

<div id="remain" style="font-size: 200%; margin: 16px 0; text-align: center">&ndash;</div>

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...