Ask a Question

Formeleditor mit API in SoSci laden

+1 vote
in SoSci Survey (dt.) by s109993 (11.8k points)
retagged by SoSci Survey

Liebes SoSci Team,

ich habe hier eine tolle Formel API, welche ich ohne Probleme in SoSci einbauen kann. Nun die Frage, wie bekomme ich die Daten in die internen Variablen. Die API lädt neben dem Formeleditor auch eine Zeichenfläche. Wie könnte das gezeichnete abgespeicherte werden?

Mir sind die mechanismen von internen Variablen eigentlich bekannt, nur weiß ich leider in diesem Fall nicht ganz wie ich das Handhaben soll.

VIele Grüße

API (https://docs.wiris.com/en/mathtype/mathtype_web/sdk-api/embedding):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

     <script src="https://www.wiris.net/demo/editor/editor"></script>
     <script>
     var editor;
     window.onload = function () {
       editor = com.wiris.jsEditor.JsEditor.newInstance({'language': 'en'});
             editor.insertInto(document.getElementById('editorContainer'));
     }
     </script>
     <div id="editorContainer"></div>

1 Answer

+1 vote
by SoSci Survey (325k points)
selected by s109993
 
Best answer

wie bekomme ich die Daten in die internen Variablen

Im Idealfall bietet löst der Formeleditor ein "Event" aus, wenn man etwas ändert und stellt die eingegeben Daten in irgend einer Form per JavaScript-Method zur Verfügung. Wenn ic die Dokumentation richtig überblicke, ist das die Methode getMathML().

Also: Wenn etwas geändert wird (oder notfalls vor dem Abschicken der Seite mittels SoSciTools.attachCheck()) lesen Sie die Daten per getMathML() aus und schreiben Sie in die interne Variable.

Die API lädt neben dem Formeleditor auch eine Zeichenfläche. Wie könnte das gezeichnete abgespeicherte werden?

Dasist ein klein wenig anspruchsvoller. Sehen Sie sich dazu bitte einmal die Vorlage "Einfache Zeichenfläche" an, die Sie beim Anlegen einer neuen Frage beim Fragetyp "Datei-Inhalte übertragen" angeboten bekommen.

Ein wichtiger Hinweis: Wenn Sie eine Komponente von einer externen URL in den Fragebogen einbinden, werden dabei Daten (z.B. IP-Adressen) an den Anbieter übertragen. Ob das mit der DSGVO vereinbar ist, müssten sie ggf. mit dem Datenschutzbeauftragten Ihrer Einrichtung klären.

Das dürfte auch insofern relevant sein, als diese Komponente üblicherweise wohl kostenpflichtig lizenziert werden muss (http://www.wiris.com/en/mathtype)

by s109993 (11.8k points)
Das mit den IDs ist ein guter Punkt. Das müsste wahrscheinlich auch mit dem Anbieter besprochen werden. Das es kostenpflichtig ist, war mir bewusst und sollte kein Problem darstellen. Ich habe bisher auch keine so übersichtliche Open Source Variante gefunden. Ich werde versuchen es nach ihrer Anleitung zu machen, ggf. muss ich sonst nochmal Nachfragen.

Danke für die (wie immer) sehr schnelle Rückmeldung!
by s109993 (11.8k points)
Ich habe leider  doch etwas mehr Probleme als ich dachte und konnte bisher die Daten nicht erfolgreich abspeichern.

Am Anfang der Seite habe ich die interne Variable eingefügt. Danach folgendes Script:

<script>
SoSciTools.attachCheck(function() {

var input = document.getElementById("A001_01");

var wert = getMathML;

input.value = wert();

})
</script>

Ich bin allerdings an drei Stellen unsicher: 1) wie die SoSci Funktion funtioniert, 2) wie ich getMathML auslesen kann und 3) die Position des Scripts

Falls das zuviel an der Stelle ist erstelle ich auch gerne eine neue Frage.
by SoSci Survey (325k points)
(1) Machen Sie sich an dieser Stelle mal über SoSci Survey keine Sorgen - die Herausfordeung ist, dass Sie erstmal an den Wert kommen. Um das zu testen, können Sie mittels console.log() und einem Blick in die JavaScript-Konsole Ihres Browsers prüfen, wie weit Sie schon sind.

(2) getMathML() ist eine Methode des JavaScript-Objekts, das Sie erzeugen. Das könnte z.B. die Variable editor sein, die in Ihrem JS-Code oben auftaucht. Der Aufruf wäre dann editor.getMathML().

Versuchen Sie mal ein console.log(editor.getMathML()) und prüfen Sie, was die Entwicklerkonsole in Ihrem Browser dazu sagt.

(3) Sie können den JavaScript-Code direkt in dem Script platzieren, das Sie bereits für die Einbindung der Bibliothek verwenden. Dieses wiederum sollte unterhalb der internen Variable stehen, welche Sie ja auch auf der Seite einbinden müssen.
by s109993 (11.8k points)
3) dieser Punkt war dann korrekt.

zu 2) wenn ich console.log(editor.getMathML()) in den window.onload function integriere, wird <math xmlns="http://www.w3.org/1998/Math/MathML"/> ausgegeben. In diesem Momentan ist der Editor noch leer. Ich habe es (bisher) nicht geschafft, zu testen, was console.log(editor.getMathML()) ausgibt, nachdem ich etwas in den Editor geschrieben haben.
Dafür müsste erst der Wert richtig übergeben werden. Auch interessant: die Console gibt mir eine Fehlermeldung aus: SoSciTools.attachCheck is not a function.
by SoSci Survey (325k points)
> SoSciTools.attachCheck is not a function.

Pardon, es müsste heißen:

SoSciTools.questionnaire.attachCheck()

> wird <math xmlns="http://www.w3.org/1998/Math/MathML"/> ausgegeben

Das sieht schonmal gut aus. Sie können in den Entwicklerwerkzeugen des Browsers in der Konsole auch JavaScript-Code ausführen, so müsste unten ein >> oder so etwas sein.

Tragen Sie erstmal etwas in die Formel ein und führen Sie dann mit dieser Funktion editor.getMathML() aus.
by s109993 (11.8k points)
edited by s109993
> Das sieht schonmal gut aus. Sie können in den Entwicklerwerkzeugen des Browsers in der Konsole auch JavaScript-Code ausführen, so müsste unten ein >> oder so etwas sein

Ich wusste nicht, dass das möglich ist, klasse. Wenn ich in den Editor Wurzel aus 77 eintrage, ist der return von editor.getMathML(): "<math xmlns="http://www.w3.org/1998/Math/MathML"><msqrt><mn>77</mn></msqrt></math>".
Das heißt, es wird abgespeichert. Ich müsste es nur noch in eine Variable bekommen und einen Koverter finden. Den müsste es irgendwo auf der Website geben.

Komischerweise kann ich bei SoSciTools.questionnaire.attachCheck() den Weiter Button nicht mehr betätigen bzw. dieser bringt mich nicht mehr auf die nächste Seite.
by SoSci Survey (325k points)
> Ich müsste es nur noch in eine Variable bekommen

Nun, dafür ziehen Sie einfach Ihre interne Variable (A001 laut Ihrem Code oben) auf die Seite und schreiben das Script minimal um:

SoSciTools.questionnaire.attachCheck(function() {
  var input = document.getElementById("A001_01");
  var wert = editor.getMathML();
  input.value = wert;
  return true;
});

Dann sollten die Angaben nach dem "Weiter" im Datensatz landen. Natürlich sollten Sie dies mit unterschiedlichen Browsern testen.

> und einen Koverter finden

Es kommt darauf an, was Sie mit den Daten machen möchten. Im Prinzip sind sie als Text sogar einfacher auszuwerten denn als Bild.

> Komischerweise kann ich bei SoSciTools.questionnaire.attachCheck() den Weiter Button nicht mehr betätigen

Da fehlte einfach noch das return true (s.o.), denn attachCheck() soll ja eigentlich für eine Überprüfung der Angaben auf der Seite sorgen. Und je nachdem, ob alles passt, wird das "Weiter" von der Funktion erlaubt (true) oder nicht (nicht true, z.B. undefined oder false).
by s109993 (11.8k points)
super, passt. Vielen Dank!
Es wäre nicht schlecht wenn bei den SoSci Tools ein paar Beispiele in der Doku verlinkt wären, dann wäre ich vielleicht selbst darauf gekommen, das ein "return true" fehlt. :)
by SoSci Survey (325k points)
Steht auf der TODO-Liste ... aber nur mit mittlerer Priorität, weil die meisten Nutzer nicht so besonders gerne mit JavaScript arbeiten :)

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
...