Hallo,
als Ergänzung zur Frage: https://support.soscisurvey.de/?qa=15856/zeitmessung-von-variablen
Ich würde gerne die Zeit abspeichern, wann Teilnehmer eine Variable beantwortet haben.
Dabei soll bei einer Änderungen der Angabe, die Zeit der Änderung gespeichert werden.
Die Ausgangslage ist ein Text, bei dem immer wieder Wörter aus Gruppen per klick auszuwählen sind. Diese werden als String in internen Variablen abgespeichert.
HTML:
<div class="GanzerText" style="font-size: 20px;">
Es war einmal ein armer Bauer, der hatte zwölf Töchter. Die Mädchen waren alle gesund und frisch und von zierlichem Wesen. Da die Eltern nur einen kleinen Bauernhof hatten und recht arm waren, war es Manchem unbegreiflich, wie sie den vielen Kindern Nahrung und Kleidung beschaffen konnten. Die Mädchen erfreuten sich bester Gesundheit, waren täglich gewaschen und gekämmt und trugen immer <b><div class="click-react" data-input-id="input1" >[löchrige, schmutzige, saubere] </div></b> Hemden.<br>
Einige meinten, der Bauer habe einen heimlichen Schatz, andere hielten ihn für einen Hexenmeister, wieder andere für einen Windzauberer, der im Wirbelwind einen verborgenen Schatz zusammenrafft. In Wahrheit aber verhielt sich die Sache ganz anders. Die Frau des <b><div class="click-react" data-input-id="input2" >[Windzauberers, Bauern, Müllers] </div></b> hatte eine heimliche Wohltäterin, welche die Mädchen nährte, säuberte und kämmte.
</div>
==> wichtig sind nur die zugewiesenen ID's und class für die Wortgruppen.
JS:
<script>
"use strict";
console.clear();
void function(d,w) {
const className = 'click-react';
const highlightClassName = 'click-highlight'
Array.from(d.getElementsByClassName(className)).forEach(el => {
const words = el.innerText.split(/\s+/);
const wordsMapped = words.map(i => `<span data-click>${i}</span>`)
el.innerHTML = wordsMapped.join(' ');
})
d.addEventListener('click', e => {
if (!e.target.hasAttribute('data-click')) {return false}
const container = e.target.closest(`.${className}`)
if (!container) {return false}
Array.from(container.getElementsByClassName(highlightClassName))
.forEach(el => el.classList.remove(highlightClassName))
e.target.classList.add(highlightClassName)
d.getElementById(container.getAttribute('data-input-id')).value = e.target.innerText
})
}(document, window);
</script>
<style>
span.click-highlight {
background-color: CornflowerBlue;
}
</style>
Anmerkungen:
Die internen Variablen wurden in <div id="form-group"> gewrapped und haben eine neue ID zugewiesen bekommen.
<script>
var input1 = document.getElementById("SM04_01");
var input2 = document.getElementById("SM04_02");
var input3= document.getElementById("SM04_03");
var input4 = document.getElementById("SM04_04");
var input5 = document.getElementById("SM04_05");
</script>
