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

Habe es ausgetauscht. Der Counter zählt aber immernoch nicht die Wörter? Noch andere Ideen?

---

Sie scheihnen das wieder (oder nach wie vor) in P101 als Erklärung o.ä. eingebunden zu haben - nicht als HTML-Code in einem separaten Element. Jedenfalls sind im Quellcode der Fragebogen-Seite nach wie vor typografische Anführungszeichen, die auf eine falsche Einbindung hinweisen.

---

Habe es jetzt mal komplett aus der Frage P101 rausgenommen und seperat. Wie wird es nun bei ihnen angezeigt? Können sie sonst den Code mal so anpassen, dass er bei ihnen funktioniert und ihn dann zusenden? Wir verzweifeln langsam und brauchen das unbedingt für unsere Forschung.

---

Gute, jetzt ist der Code korrekt eingebunden und die JavaScript-Konsole im Browser zeigt keine Fehler mehr. Jetzt müssen wir onch die Kennungen korrigieren. Sie schreiben ziemlich zu Beginn Ihres Codes:

var input = document.getElementById("Q015_01");

Die Kennung des Texteingabefelds ist aber P101_01, daher ändern Sie das bitte ab in

var input = document.getElementById("P101_01");

---

Damit hat es jetzt geklappt!
VIELEN VIELEN VIELEN lieben Dank!!!