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>