Ask a Question

Einbindung - Distribution Builder

0 votes
in SoSci Survey (dt.) by s068052 (130 points)

Liebes Support Team,

Die Folgende Frage schließt an einen vorherigen Post an:
https://support.soscisurvey.de/?qa=4289/graphische-positionierung-bereiche

Gibt es eine Möglichkeit die Ergebnisse eines über HTML eingebundenen Distribution Builders in den erhobenen Datensatz mit einzuarbeiten?

Anleitung zum Tool:

https://quentinandre.github.io/DistributionBuilder/

Wie in der Anleitung, werden mir die Ergebnisse (also der Outpot einer Funktion) über einen button via HTML angezeigt. Nun hänge ich bei der Speicherung. Für den Service Qualtrics gibt es eine Möglichkeit zur Speicherung im Datensatz (siehe Anleitung). Ist etwas Analoges auch auf Soscisurvey möglich?

by s068052 (130 points)
Hier der Coder zur Einbindung

<html>

<head>
<title> InnerCrowd</title>
<link rel="stylesheet" href="distributionbuilder.css">
<script src="distributionbuilder.min.js"></script>

</head>

<body>
<div class="bs-example">
            <div style="text-align: center;margin-bottom: 3px;">
                <a class="btn btn-default" id="SubmitDistribution" disabled=true> View Distribution </a>
            </div>
            <div id="targetdiv" style="width:100%; margin: 0 auto;"></div>
        </div>
<div id="targetdiv">
    <script>
        var distbuilder = new DistributionBuilder({
            minVal: 0,
            maxVal: 100,
            nRows: 10,
            nBuckets: 20,
            nBalls: 10,
            onChange: function () {
                if (this.isComplete()) {
                    $j("#SubmitDistribution").attr("disabled", false)
                } else {
                    $j("#SubmitDistribution").attr("disabled", true)
                }
            }
        });
        $j("#SubmitDistribution").click(function() {
            var message = "The distribution specified by the user is: " + distbuilder.getDistribution();
            alert(message)
        });
        distbuilder.render("targetdiv");
        distbuilder.labelize({});
       
    </script>
</div>


</body>

1 Answer

0 votes
by SoSci Survey (327k points)

Ja, Sie können beliebige Daten in einer "internen Variable" speichern, siehe auch Eigene Formularelemente verwenden.

Die Daten liefert die Methode (Funktion) .getDistribution() des DistributionBuilder Objekts. Diese können Sie z.B. beim onChange (s. Ihr Code oben) aufrufen.

Wenn Sie z.B. eine interne Variable "IV01_01" definiert und die Frage IV01 in den Fragebogen gezogen haben, dann könnten Sie in deer function() hinter dem onChange z.B: noch eine Zeile ergänzen:

document.getElementById("IV01_01").value = JSON.stringify(distbuilder.getDistribution());

Dann erhalten Sie einen Text wie z.B. [2,1,2,3], das ist ein JSON-kodiertes Array. Wenn Sie die Werte lieber in mehrere einzelne Variablen speichern (zu empfehlen), legen Sie entsprechend mehr interne Variablen in IV01 an und verwenden Sie z.B. folgenden Code.

// Erstmal die Verteilung auslesen
var dist = distbuilder.getDistribution();
// Dann alle "Spalten" durchgehen
for (var i=0; i<dist.length; i++) {
  // Hier benötigen wir eine zweistellige Kennung für das zugehörige Item, z.B. Index i=0 => 01, 1 => 02 u.s.w.
  var itemID = String(i + 1);
  if (itemID.length < 2) itemID = "0" + itemID;
  // Und den Wert dann noch abspeichern
  document.getElementById("IV01_" + itemID).value  = dist[i];
}

Wenn es nicht auf Anhieb funktioniert, benötigen Sie die Fehlerkonsole des Browsers: JavaScript: Fehler finden. Posten Sie dann auch gerne einen Pretest-Link direkt (!) zur entsprechenden Seite im Fragebogen.

by s068052 (130 points)
Vielen Dank für die schnelle Antwort, sie leisten wirklich bemerkenswerte Arbeit! An welcher stelle im Code soll ich denn Ihre Ergänzung unterbringen? Ich bin diesbezüglich ein kompletter Neuling und bin froh, dass ich die copy-paste Einbindung geschafft habe.
by SoSci Survey (327k points)
In Ihrem Code steht das hier:

            onChange: function () {
                if (this.isComplete()) {
                    $j("#SubmitDistribution").attr("disabled", false)
                } else {
                    $j("#SubmitDistribution").attr("disabled", true)
                }
            }

Das ist eine Funktion, die bei Änderung der Antworten (onChange) aufgerufen wird. Wenn Sie den neuen Code vor (!) der schließenden geschweiften Klammer am Ende einfügen, sollte der neue Code bei jeder Änderung ausgeführt werden.

Die $... Notation funktioniert voraussichtlich nur in Verbindung mit jQuery. Ich bin nicht sicher, ob DistributionBuilder das mitbringt. Aber das sehen wir dann in der Fehlerkonsole.
by s068052 (130 points)
Es hat geklappt! Vielen lieben Dank, Sie sind mir eine große Hilfe.
by SoSci Survey (327k points)
Wenn Sie das genaue Vorgehen zufällig ausschreiben möchten, packe ich es gerne in die Anleitung. Andere Forscher würden es Ihnen danken.
by s068052 (130 points)
Sehr gerne, wie wollen wir denn diesbezüglich verfahren? Soll ich die Schritte hier im Support-Forum teilen, oder wie hätten Sie es gerne?
by SoSci Survey (327k points)
Wenn Sie es einfach als Textdatei aufschreiben möchten (gerne auch mit Screenshots), dann würde ich es in die Anleitung einpflegen. Sie können - wenn Sie möchten - natürlich auch gerne direkt in die Anleitung hinein-editieren. Aber das ginge sicherlich mit mehr Arbeit einher. Und ich freue mich im Namen der künftigen Nutzer schon sehr über eine Textdatei.
by s068052 (130 points)
Gerne, ich setze mich am Wochenende hin. Wie lasse ich Ihnen die Textdatei denn zukommen?
by SoSci Survey (327k points)
Zum Beispiel per E-Mail an info@soscisurvey.de
Danke!

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

Categories

Snow Theme by Q2A Market
Powered by Question2Answer
...