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

Geht denn mein Code nur mit Jawa? Ich versuche es nämlich ohne zusätzliches Programmieren nur in Sosci einen Wörter-Counter zu erstellen oder ist das nur mit Jawa möglich?

---

Den Code habe ich von jemand anderem kopiert (https://support.soscisurvey.de/?qa=48124/worter-zahler-in-textfeld-layout-fehler) und versucht anzupassen.

---

Java und JavaScript sind zwei unterschiedliche paar Schuhe. Alle modernen Browser unterstützen per default JavaScript, und selbiges ist auch erforderlich, wenn die Website in irgend einer Form direkt (also ohne das Abschicken eines Formulars) auf die Eingaben der Nutzer reagieren soll.

> Den Code habe ich von jemand anderem kopiert

Mag sein, aber da sind die Anführungszeichen noch gerade. Das heißt, irgendwo auf dem Weg vom Kopieren bis zum erneuten Einfügen, hatten sie es vermutlich in Word, was Ihre Anführungszeichen verschlimmbesserte. Einfach wieder korrigieren :)

Generell sollen Sie Code nicht in Word bearbeiten, sondern entweder direkt in SoSci Survey oder in einem Texteditor wie Notepad++.

---

Okay, ich habe den Code angepasst. Aber es hat sich nichts geändert. Bei mir waren auch seit Anfang an die Anführungszeichen (also keine typografischen) richtig gesetzt. Habt ihr noch eine Vermutung, woran es liegen könnte?

<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>

---

Ich habe das Gefühl, dass sich der Code eventuell nicht richtig auf das Eingabefeld beziehen kann? Denn das Eintippen von Wörtern erhöht ja nicht den Counter.

---

Schauen Sie bitte nochmal, was sonst noch auf der Seite ist. Wenn ich den Pretest-Link öffne, kommt dort immer noch

<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 || &quot;&quot;;
    cc.textContent = v.length;
    var m = v.trim().match(/\S+/g);
    wc.textContent = m ? m.length : 0;
  }

Nur zur Sicherheit:  Sie haben in P101 bei "Darstellung" schon "HTML-Code" ausgewählt, ja?

---

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.