Eingabefeld mit Counter linken?

Question

Ich möchte eine Priming Aufgabe erstellen, wofür ich einen "Word-Count" brauche. Der Counter wird grafisch angezeigt, aber er zählt nicht mit. Eventuell ist er nicht richtig zu dem Eingabefeld gelinked?

Das ist die preview: https://www.soscisurvey.de/tutorial500491/?s2preview=LB8A1c0vSNjRbaZNw0ThHxCpmPIAjIHu&question=Q015&csfr&pvSelf&r=NTUX/

Das ist mein aktueller Code:

<div id="Q015_counter" class="count">
  <div>
    <h5 id="Q015_word-count">0</h5>
    <p>Words</p>
  </div>
  <div>
    <h5 id="Q015_char-count">0</h5>
    <p>Characters</p>
  </div>
</div>

<style>
#Q015_counter.count{
  background-color:#0547ad;
  box-sizing:border-box;
  padding:7px;
  display:flex;
  justify-content:space-around;
  text-align:center;
  border-radius:5px;
  width:100%;
  font-family:sans-serif;
  margin-top:10px;
}
#Q015_counter p{ color:#ceced7; margin:0; }
#Q015_counter h5{ color:#fff; font-size:22px; margin:0; }
</style>

<script>
SoSciTools.ready(function () {
  var input = document.getElementById("Q015_01");
  var wc = document.getElementById("Q015_word-count");
  var cc = document.getElementById("Q015_char-count");
  if (!input || !wc || !cc) return;

  function updateCounts() {
    var v = input.value || "";
    cc.textContent = v.length;
    var m = v.trim().match(/\S+/g);
    wc.textContent = m ? m.length : 0;
  }

  ["input","keyup","change","paste"].forEach(function(evt){
    input.addEventListener(evt, updateCounts);
  });
  updateCounts();
});
</script>

Comments

Hier steht beschrieben, wie Sie einen gültigen Pretest-Link erstellen können:
https://www.soscisurvey.de/help/doku.php/de:survey:pretest

Bitte tragen Sie auch gleich die richtige Fragebogen-Seite ein, danke.

---

Vielen Dank schonmal. Dieser Link ist nun der Pretest-Link:
https://www.soscisurvey.de/test513639/?act=vbVgsYusL8aA2aepr8Oubfrn

Können Sie mir weiter helfen?

Answer 1

Danke für den Pretest-Link. Die Fehlerkonsole des Browser beschwert sich über diese Zeilen:

var input = document.getElementById(„Q015_01“);
var wc = document.getElementById(„Q015_word-count“);
var cc = document.getElementById(„Q015_char-count“);

Es scheint so, als hätten Sie den JavaScript-Code in Word geschrieben oder bearbeitet. Denn die geraden Anführungszeichen ("Q015_01") wurden durch typografische („Q015_01“) ersetzt.

In einem Text ist das hübsch - aber in der Programmierung sind es einfach falsche Zeichen, nämlich keine (geraden) Anführungszeichen. Das müssten Sie bitte überall korrigiern.

Comments

Nein, habe ich nicht bewusst. Wo genau finde ich diese Option?

Bei "Weitere Einstellungen" "Darstellung" steht "Beschriftung" "Texteingabefeld" "Ausweichoption" und drunter Darstellung "statisch" "dynamisch", dort habe ich dynamisch ausgewählt. Aber nirgends bewusst "HTML-Code"

Zudem steht bei meinem Fragetyp "Offene Texteingabe" P101_01undefined [01], eventuell muss ich das auch in meinem Code inkludieren? Bisher habe ich ja nur QO15 drinnen. Wenn ich es aber selber probiere geht immer der Counter kaputt.

---

Bei Fragebogen steht "Verarbeitung der Antworten mittels PHP" ich verstehe aber nicht wo man das ändern könnte.

---

Wenn Sie im HTML-Code Script einfügen möchten, dann legen Sie bitte in der Rubrik mit "Text hinzufügen" einen neuen Text an, stellen Sie dort "HTML-Code" ein, packen Sie alles JavaScript in diesen Text und ziehen Sie diesen unter Ihre Frage.

Der HTML-Code selbst kann in der Frage stehen bleiben.

---

Ich habe den HTML-Code mit Frage hinzugefügt. Der Counter funktioniert dennoch nicht.

Zudem steht bei meinem Fragetyp "Offene Texteingabe" P101_01undefined [01], eventuell muss ich das auch in meinem Code inkludieren? Bisher habe ich ja nur QO15 drinnen. Wenn ich es aber selber probiere geht immer der Counter kaputt.

---

Nun beschwert sich die JavaScript-Konsole im Browser über diese Zeile:

SoSciTools.ready(function () {

zurecht, denn eine ready()-Methode kennt SoSciTools nicht. Korrekt wäre:

window.addEventListener("load", function () {
 ...
});

Wenn der Code unterhalb der Elemente steht, können Sie das aber auch einfach weglassen und nur den Inhalt dieser Funktion als JavaScript-Code verwenden.