0 votes
in SoSci Survey (dt.) by s109993 (9.7k points)
edited by s109993

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>

1 Answer

0 votes
by SoSci Survey (302k points)

Sie hatten ja in der anderen Frage geschrieben, dass Sie einfach nur die Zeit seit dem Laden der Seite benötigen. Das macht es relativ einfach.

Speichern Sie biem Laden zunächst die aktuelle Zeit ab:

var date0 = new Date();

Und dann schreiben Sie eine Funktion, welche die Zeit seit da in eine interne Variable speichert:

function storeTime(intID) {
  var nowTS = now.getTime();
  var diffTS = nowTS - date0;
  document.getElementById(intID).value = diffTS.toString();
}

Diese Funktion müssen Sie jetzt beim Klick nur noch aufrufen.

....
e.target.classList.add(highlightClassName);
storeTime("SM04_01");
....
by s109993 (9.7k points)
>Sie hatten ja in der anderen Frage geschrieben, dass Sie einfach nur die Zeit seit dem Laden der Seite benötigen.

Genau, eine interne Zeitvariable für jede 3er Wortauswahl.

Ich habe noch wegen der Syntax zwei kleine Nachfragen.
> storeTime("SM04_01");
Das ist die interne Variable die ich für die Zeit erstellen würde, richtig? Das heißt, ich muss für jede Auswahl ein Item für die interne Variable erstellen.
storeTime("SM04_01");
storeTime("SM04_02");
storeTime("SM04_03"); etc.

Bei den ersten Versuchen hat es leider gehackt. Durch das Einfügen der
function storeTime an besagter Stelle, wurden die Wörter nicht mehr abgespeichert (und es wurde keine Zeit genommen).  

Wenn ich die storeTime function eine Linie weiter darunter platziere, werden die Wörter wieder gespeichert (darunter: d.getElementById(container.getAttribute('data-input-id')).value = e.target.innerTex).
Allerdings wird immer noch keine Zeit gespeichert.

Das ist wahrscheinlich etwas schwierig zu analysieren woran es liegen könnte- falls Sie irgendwelche andere Informationen benötigen, fragen Sie bitte nach.

Danke und Viele Grüße
by SoSci Survey (302k points)
>  Das heißt, ich muss für jede Auswahl ein Item für die interne Variable erstellen.

Ja, korrekt.

> Durch das Einfügen der
> function storeTime an besagter Stelle, wurden die Wörter nicht mehr
> abgespeichert (und es wurde keine Zeit genommen).  

Das spricht dafür, dass noch irgendwo ein Fehrle im JavaScript ist, der zum Abbruch führt. Was zeigt denn die JavaScript-Fehlerkonsole Ihres Browsers an?
by s109993 (9.7k points)
edited by s109993
Ich habe Ihnen das den Fehler als image in die Frage kopiert.
Lustigerweise finde ich keinen Hinweis darauf, warum die ausgewählten Wörter nicht mehr abgespeichert werden. "now is not defined" hört sich für mich mehr nach einem Datums/Zeit Fehler an.
by SoSci Survey (302k points)
Danke, das "now is not defined" klärt die Sache :) Die Variable "now" in de Funktion storeTime() fehlte noch:

function storeTime(intID) {
  var now = new Date();
  var diffTS = now.getTime() - date0.getTime();
  document.getElementById(intID).value = diffTS.toString();
}
by s109993 (9.7k points)
Wir kommen der Sache näher. Das die Wörter nicht abgespeichert wurden lag an einem ID Fehler in der HTML Datei. Jetzt wird auch für jeden Klick eine Zeit abgespeichert. Allerdings in jeder internen Variable (also für jede Wortgruppe) die gleiche Zeit. Hier wäre es natürlich fantastisch wenn es noch klappen würde, dass die unterschiedlichen Zeiten festgehalten werden. Ich hab ihnen oben ein Screenshot des Speicherverhaltens hochgeladen.
by SoSci Survey (302k points)
Ich bin nicht sicher ... möchten Sie in einem neuen Thread (gerne als "related question") einfach nochmal den kompletten JavaScript-Code posten? Ich vermute, dass der Aufruf von storeTime() einfach noch nicht korrekt eingebunden ist. An dieser Stelle muss ja entschieden werden, wohin gespeichert werden soll.

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...