Editor als Bild abspeichern

Question

Liebes SoSci Team,

ich habe mir bei der Speicherung der Daten des Editors nocheinmal Gedanken gemacht. Da die Ablage jetzt funktioniert, wollte ich mich erkundigen, inwiefern man den Editor als Bild abspeichern könnte.
Sie hatten mir in folgendem Thread (https://support.soscisurvey.de/?qa=24032/formeleditor-mit-api-in-sosci-laden) gesagt, ich sollte mir die SoSci interne Zeichenfläche anschauen. Und genau dieses Format stelle ich mir vor.

"Leider" übersteigt das Skript (komplett...) meine js Kentnisse.

Ich nehme an das folgender Part essentiell ist zum Abschicken

  function sendImage() {
    var imageBlob = canvas.toBlob(%q.id%.sendBLOB);
    state = "sent";
    return true;
  }

Aber ich kann nicht entschlüsseln, mit welchen anderen Stellen der Teil verknüpft ist.

Jetzt zu meiner Frage: Wäre es möglich (bzw. wie aufwändig wäre es) das Skript umzuschreiben, dass es einfach nur den Editor (aus dem Obem erwähnten Thread) als Bild abspeichert, nachdem man auf "Weiter" drückt.

Viele Grüße

Answer 1

Aber ich kann nicht entschlüsseln, mit welchen anderen Stellen der Teil verknüpft ist.

Der Knackpunkt ist, dass Sie die Zeichenfläche (Canvas) des Editos brauchen. Wenn Sie diese haben, dann brauchen Sie nur noch einen Auslöser, wann die Daten übermittelt werden sollen. Das sollte erneut mit dem SoSciTools.questionnaire.attachCheck() funktionieren - deshalb auch das return true in der obigen Funktion ;)

Jetzt zu meiner Frage: Wäre es möglich (bzw. wie aufwändig wäre es) das Skript umzuschreiben, dass es einfach nur den Editor (aus dem Obem erwähnten Thread) als Bild abspeichert,

Setzen SIe statt canvas einfach nur eine Variable ein, welche auf die Zeichenfläche des Editors verweist.

Comments

hm.. gut, dann werde ich das so probieren, danke.

---

So klingt Begeisterung ;) Aber ja, kann ich gut nachvolllziehen.

In der Anleitung des Tools (https://docs.wiris.com/en/mathtype/mathtype_web/sdk-api/embedding#controlling_the_canvas_size) steht, dass die Zeichenfläche direkt an den Container angepasst wird. Evtl. reicht es schon, wenn Sie den Container als Variable haben und davon die Eigenschaft firstChild verwenden, also z.B.

var canvas = document.getElementById("handContainer").firstChild;

Oder auch

var canvas = document.getElementById("handContainer").getElementsByTagName("canvas")[0];

Ich finde in der Anleitung spontan keine Methode, um direkt auf den Canvas zuzugreifen.

---

Ich war nur schon am Krübeln, das sollte in keiner Weise unhöflich erscheinen. JS fällt mir nur sehr schwer, da ich es nie gelernt habe :)

Macht es einen Unterschied, ob ich ein Bild von der Zeichenfläche möchte oder nur von dem Editor (also da, wo eine Person mit dem Keyboard schreibt). Letzteres würde nämlich genügen. Und ein Canvas gibt es doch eigentlich nur bei Zeichenflächen, oder? Würde bei dem Editor dann nicht var newVar = editor.getMathML() wieder ausreichen?

---

> JS fällt mir nur sehr schwer, da ich es nie gelernt habe :)

Ist es auch - und nein, ich hatte es nicht unhöflich verstanden, nur ein Leiden aus den Worten vernommen. Da wollte ich noch ein wenig helfen :)

> Macht es einen Unterschied, ob ich ein Bild von der Zeichenfläche möchte oder nur von dem Editor (also da, wo eine Person mit dem Keyboard schreibt).

Ich habe mir das Tool nicht im Detail angesehen, aber vermutlich verwendet der Editor eine Zeichenfläche (Canvas), um die Ausgabe auf den Bildschirm zu bringen. Das müsste also alles dasselbe sein. Das "Zeichnen" bedeutet in dem Fall, dass der Editor Striche (z.B. eine Wurzel), Buchstaben und Zahlen wie in einem Grafikprogramm beliebig in dem Bereich platzieren kann. Es ist kein Zeichnen durch die Nutzer gemeint.

> Würde bei dem Editor dann nicht var newVar = editor.getMathML() wieder ausreichen?

Nein, das ist das JavaScript-Objekt, welches sich um die Steuerung des Ganzen kümmert. Also quasi der Zeichner. Dieses Objekt legt aber auf der Fragebogenseite (vermutlich) ein Canvas-Objekt an. Und an dieses müssen Sie herankommen, um den Inhalt (also das Bild) auszulesen.

Sie können mal die Entwickler-Tools Ihres Browsers bemühen. Diese sollten Ihnen zeigen, ob es da ein Canvas-HTML-Objekt gibt. Und/oder Sie können gerne auch mal einen Pretest-Link direkt (!) zu der Fragebogen-Seite posten.

---

Gerne: https://ofb.iea-hamburg.de/coactiv_test/?act=uhv3AD59dc8x5n74LUcy3rId

Wenn ich von dem Editor auf das Zeichentool wechsel, gibt es ein <canvas> tag mit einer class= "wrs_canvas".

Mein bisheriger Ansatz war, das folgende Script innerhalb der Funktion SoSciTools.questionnaire.attachCheck(function() {} zu platzieren:

var canvas = document.getElementsByClassName("wrs_canvas");

  function sendImage() {
    var imageBlob = canvas.toBlob(sendBLOB);
    state = "sent";
    return true;
  }

Noch ohne Erfolg- aber ich bin weiterhin am Probieren.

---

Danke für den Link. Ich habe mir das Ganze einmal angesehen und leider keine guten Nachrichten: Der Formeleditor verwendet zur Ausgabe tatsächlich ganz sauber (viele) einzelne HTML-Elemente - keine Zeichenfläche (Canvas).

Das heißt allerdings auch, dass man an das grafische Ergebnis kaum herankommen wird. Es gibt eine Bibliothek html2canvas (vgl. https://stackoverflow.com/questions/36077391/can-you-clone-contents-of-an-element-into-canvas), welche da u.U. helfen könnte und in Chrome gibt es eine API dafür, die aber evtl. nur für AddOns zur Verfügung steht (https://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-in-browser-screenshots). Ich habe mit beiden Optionen bisher aber nicht gearbeitet und kann nichts dazu sagen, wie zuverlässig das funktioniert.

Wahrscheinlich könnten Sie auch den HTML-Code einfach als Dateiinhalt übermitteln. Dann hätten Sie HTML-Dateien, die Sie ansehen könnten. Aber ich muss zugeben, dass ich das bisher noch nie gebastelt habe ... und "basteln" beschreibt die dafür notwendige Arbeit wahrscheinlich auch recht akkurat. Zumindest dann, wenn man das komplette HTML-Gerät bauen will inkl. Verweis auf die CSS-Datei des Formel-Editors (alternativ könnte man das in der Nachbereitung ergänzen).

---

Das dachte ich mir, ich hatte auch kein Canvas gefunden. Aber jetzt kann ich die Information wenigstens so weitergeben. Ich würde ungern noch mehr libraries/APIs einbinden. Das Risiko ist mir zu groß, dass irgendetwas nicht mehr kompatibel ist.

In den HTML Dateien sehe ich auch keine "Verbesserung" zur jetzigen Datenablage. Ich bin noch mit den API Entwicklern im Gespräch, da gibt es wohl eine eingebaute Lösung. Wenn ich da etwas neues erfahre ergänze ich das gerne an dieser Stelle.

Danke das Sie sich die Zeit hierfür genommen haben!