Anlegen eines Symbol Digit Test

Question

Guten Abend,

wir würden für unsere Studie gerne einen Symbol-Digit-Test anlegen (s. z.B. hier). Wir sind schon so weit, dass wir die Eingabefelder für die Zahlen unter den entsprechenden Symbolen anordnen können (s. Screenshot anbei). Allerdings würden wir gerne mehrere Symbole und Eingabefelder nebeneinander anordnen (s. Link oben). Bisher haben wir es nur ein Symbol pro Zeile mit "Texteingabe offen" geschafft. Pro Zeile wäre es toll, wir könnten ca. 20 Symbole nebeneinander anordnen bzw. so viele, dass es gut auf einen Bildschirm passt und leserlich ist.

Außerdem würden wir gerne einbauen, falls es möglich ist, dass der "Cursor" nach einer Eingabe direkt ins nächste Eingabefeld springt und man nicht die Tab-Taste drücken muss.

Gibt es hierfür einen PHP-Code oder ähnliches?

Herzlichen Dank im Voraus und freundliche Grüße!

Answer 1

Allerdings würden wir gerne mehrere Symbole und Eingabefelder nebeneinander anordnen (s. Link oben).

Vermutlich kommen Sie da am schnellsten mit einer Tabelle und Platzhaltern zum Ziel. Dann können Sie die Symbole und Platzhalter einfach dorthin stellen, wo Sie sie haben möchten. Das würde dann z.B. so aussehen:

<tr>
  <td>(</td><td>)</td><td>%</td>
  <td>%input:TX01_01%</td><td>%input:TX01_02%</td><td>%input:TX01_03%</td>
</tr>

Zum Lesen: Eingabefelder frei platzieren und HTML/Tabellen/Aufbau einer Tabelle.

Legen Sie dazu noch folgenden PHP-Code auf die Seite:

pageCSS('
  td {
    text-align: center;
  }
');

Außerdem würden wir gerne einbauen, falls es möglich ist, dass der "Cursor" nach einer Eingabe direkt ins nächste Eingabefeld springt und man nicht die Tab-Taste drücken muss.

Da kommen wir in den Anwendungsbereich von JavaScript. Im Prinzip müssen Sie nur in jedem Feld einen Event Listener hinterlegen, der nach einem Tastendruck (keyup) prüft, ob ein Zeichen im Feld steht und dann in das nächste Feld springt (.focus()) . Allerdings steckt einige (Fleiß-)Arbeit dahinter, bis man eine Liste aller Eingabefelder hat und diese dann so durchläuft, dass jeder Event Handler weiß, wohin er springen soll.

Comments

Vielen Dank für Ihre Hilfe! Wir haben den Test nun angelegt.

Für die Anwendung, sodass der Mauszeiger direkt weiterspringt verwenden wir folgenden Code:
<script>
// get all the input fields in a list
let inputs = document.getElementsByTagName('input');

// focus on the first item (by id)
document.getElementById("ST04_01").focus();


// for each item (except for the last one)
// if the length of the input field reaches to its maximum value
// focus to the next item in the list
for (let step = 0; step < inputs.length; step++) {
   
  inputs[step].addEventListener("input", function (e) {
   if (this.value.length === parseInt(this.attributes["maxlength"].value)) {
          inputs[step+1].focus();
    }
  });
}

</script>

Allerdings haben wir nun das Problem, dass die Seite im Fragebogen im Erhebungsmodus nur angezeigt wird, wenn Text/eine Variable auf der Seite ist. Im Pretest und bei der Vorschau (sowohl bei gelben als auch bei den grünen Pfeilen) wird der Test angezeigt. Kann man das irgendwie umgehen? Wir wollen, dass nur der Test auf der Seite ist, es befindet sich daher nur PHP und HTML Code auf dieser Seite.

---

> dass die Seite im Fragebogen im Erhebungsmodus nur angezeigt wird, wenn Text/eine Variable auf der Seite ist.

SoSci Survey überspringt standrdmäßig leere Seiten, d.h., Seiten, die keine Fragen oder andere Inhalte anzeigen.

Man kann dieses (bei Filterführung äußerst praktische) Verhalten aber auch unter "Fragebogen zusammenstellen" -> "Einstellungen" abschalten.

Ein einfaches html('<span></span>') reicht schon als Inhalt. Ihr Code sollte also auf alle Fälle reichen, damit die Seite *nicht* übersprungen wird.

> Im Pretest und bei der Vorschau (sowohl bei gelben als auch bei den grünen Pfeilen) wird der Test angezeigt.

Dann sollte das im normalen Test genauso laufen, denn die Anzeigemodi unterscheiden sich in diesem Aspekt nicht (!). Bitte prüfen Sie, ob Sie außer dem Aufruf noch etwas anderes verändert haben: Vielleicht haben Sie mehrere Fragebögen im Befragungsprojekt (und es startet der falsche)? Oder es liegt an den zuvor gegeben Antworten und einem Filter?