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

0 votes

Hallo,

Mein Ziel ist es eine Prozessbeobachtung mittels Sosci zu realisieren. Dabei wird das Flussdiagramm als SVG umgewandelt und mittels der "SVG als Auswahl (Mehrfachauswahl)" eingebunden. Das klappt auch.

Die registrierung von Zeiten für die einzelnen Elemente ist nicht so einfach. Ich habe dazu im Forum diese Beiträge gefunden:

https://support.soscisurvey.de/?qa=15856/zeitmessung-von-variablen&show=15907
https://support.soscisurvey.de/?qa=15918/zeit-von-variablen-nehmen-durch-click-event

Es scheint also prinzipiell möglich zu sein. Wie gehe ich am Besten vor?
Sie schrieben ja selbst, dass es bei der Mehrfachauswahl etwas schwieriger wird.

Am Ende würde ich gerne einen absoluten Zeitpunkt zu einem Klick auf ein Element in der SVG registrieren und in eine interne Variable schreiben.

Meine Idee ist`den Code aus Thread 15918 anzupassen. Bisher ohne Erfolg.

ago in SoSci Survey (dt.) by s185719 (110 points)

1 Answer

0 votes

Wie gehe ich am Besten vor?

Lesen Sie sich ein wenig in JavaScript ein - spezifisch in Events.

Und zwar müssen Sie an die Elemente, für die Sie sich interessieren, ein "click"-Event hängen. In Ihrem Fall sind das aber Bestandteile des SVG. Das SVG wiederum lädt in einem eigenen <frame>. Das Kunststück ist also, erst einmal das Element für JavaScipt verfügbar zu machen.

SoSci Survey nutzt dafür in der SVG-Auswahl folgenden Code:

var iFrame = document.getElementById("SV01_SVG");
var svg = S2SVGSelect.iframeRef(iFrame);
var svgNode = svg.getElementById("h13");

Die Kennungen für die Frage "SV01_SVG" und die ID des SVG-Elements "h13" müssen natürlich angepasst werden. Und an den svgNode kann man dann einen "click"-Eventhandler hängen:

svgNode.addEventListener("click", ...);

Oder Sie nutzen die Methode .registerElement() aus der LatencyTimer-Klasse:

var stopWatch = new LatencyTimer();
stopWatch.registerElement(svgNode, "RT01_01", false);

Hier würden Sie den Variablennamen für die interne Variable "RT01_01" natürlich wieder anpassen. Das "false" hinten bedeutet, dass der erste Klick auf der Seite nicht aufgezeichnet werden soll.

Wenn Sie lieber die absolute Zeit haben, können Sie aber auch direkt über den click gehen:

svgNode.addEventListener("click", function() {
    document.getElementById("RT01_01").value = Date.now();
});

Wie gesagt ... es ist nicht von Nachteil, sich ein wenig in JavaScript einzulesen :)

ago by SoSci Survey (178k points)
Ganz und gar nicht zu viel versprochen!

Interessant, ich freue mich auf den Tag an dem ich verstehe, warum sich dafür entschieden wurde, dass eine Funktion in einer Funktion unabhängig von der umliegenden Funktion abgearbeitet wird.
Ich vermute, dass die Klammern die Hierarchie abbilden {} > () und die () immer gleichwertig sind, egal ob sie verschachtelt sind.

Aber wenn man es weiß kann man ja damit umgehen. Vielen Dank für die Erklärung, warum die version mit function{} dann funktioniert.

Ich hab noch einiges vor mir. Gibt es einen Befehl ein SVG Element grafisch abzuwählen? Aus der Frageseite entnehme ich SelBox.svg.selected als Kanditaten. Die Idee ist eine Resetfunktion für die Variable anzubieten, die dann natürlich auch das noch markierte Feld abwählt... dann muss ich auch sicher mit Schleifen arbeiten, um das nochmalige unabsichtliche Verändern der Variable zu verhindern.
> Ich vermute, dass die Klammern die Hierarchie abbilden {} > ()

Nicht ganz, nein.

Eine runde Klammer ist entweder ein Funktionsaufruf oder (!) eine Schachtelung bei Berechnungen, also ganz klassiche wie in Mathe, aber da werden in JavaScript immer runde Klammern verwendet.

Die geschweiften Klammern schachteln JavaScript-Code. Diese werden z.B. nach einem IF und zur Definition einer Funktion (also deren Inhalt) eingesetzt.

> Gibt es einen Befehl ein SVG Element grafisch abzuwählen?

Das sollte eigentlich möglich sein, wenn Sie unter "Fragebogen zusammenstellen" -> "Einstellungen" das Häkchen setzen, dass ausgewählte Optionen wieder abgewählt werden können.
Ok die Eklärung ist einleuchtend.

Die Option in der Frage selbst, soweit ich es richtig verstehe, ermöglicht, dass eine einmal durch Mausinteraktion angewählte Option auch wieder sichtbar durch ein weiteres Klicken abgewählt werden kann. Gibt es eine Möglichkeit, die Option auch per javascript abzuwählen. Bzw. würde die Seite dynamisch angepasst, wenn ich die Fagenvariable über JS manipuliere? Das könnte ich wirklich gleich noch einmal ausprobieren. Allerdings bin ich von dieser Idee konzeptionell jetzt auch wieder weg. Das wäre eher eine kleine Fingerübung.

Vielmehr habe ich den Code etwas verkürzt und es läuft auch noch. Allerdings würde ich nun gerne die Clickzeiten in der internen Variable als Array speichern und nur den letzten Wert sichtbar für den Nutzer anzeigen.

document.getElementById(InterneVariable).push(time);

Allerding wird der Befehl wohl nicht gekannt:
Uncaught TypeError: document.getElementById(...).push is not a function

Kann ich / muss ich die interne Variable als array deklarieren?
Ich habe es jetzt iterativ gelöst mit:

document.getElementById(InterneVariable).value = document.getElementById(InterneVariable).value + ";" + time;

Jetzt mache ich mich daran, dass der letzte Wert, also die letzten 8 Zeichen (hh:mm:ss) noch ausgegeben werden können.
push() gibt es nur für Arrays - aber der Wert einer internen Variable (hidden input) ist immer Text. Deshalb ist Ihre Lösung korrekt. Eine kürzere Schreibweise wäre das += (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition_assignment)

document.getElementById(InterneVariable).value += ";" + time;

Angesichts der länge der Kommentare zu der Frage würde ich vorschlagen, dass Sie neue JavaScript-Vorhaben in einer neuen Frage posten :)
...