Math

Answered

What is the pattern of building the dom tree?

Dear myscript team,

I am working on a tutoring app (math only yet). 

Therefore, I integrated your iinkjs software, so the tutoring student is able to write on a graphic tablet or something and gets the typed text in a clean font (see the black box in the file I attached). 

My goal is to let my app react to what the student writes - like a "real" tutor does (see the green box in the file I attached).

To reach my goal, I worked with the DOM elements. So I already found some patterns in the DOM tree (see the right site in the file I attached) and depending on the DOM tree's structure I let my App respond the way I want (see the green box in the file I attached; the content is written in German).

Yet, I have found it hard to understand the pattern of how the classes of the elements in the DOM are named (base, mord, mfrac etc.) and the pattern of how certain elements are positioned in the DOM. 

As there are lots of lessons to learn for the students, it would help me a lot if I could understand these patterns better.

Is there something like a sheet that explains these patterns?

Or is my approach perhaps not the best to ensure functionality?


I would really appreciate any help in achieving the functionality.

Best wishes,

Niklas Vennemann from Germany

domtree.png
(71.1 KB)

Best Answer

Dear Niklas,


Thank you for contacting us.

The DOM elements you are referring to, are the ones from the katex library that we are using in our iinkJS examples to render the maths recognition results that are exported in LaTeX format.

If you take a look at this example:

https://github.com/MyScript/iinkJS/blob/master/examples/v4/websocket_math_iink.html

it corresponds to line 75: katex.render(cleanLatex(exports['application/x-latex']),resultElement);


The recognition results are retrieved by adding an event listener on 'exported' event. In the sample, we display the LaTeX exported result using the katex renderer.

If you want to retrieve the "raw" recognition result in LaTeX format, you can get them from the exports evt details line 72. The exports array contains the different formats that are available for the math export, ie the "application/vnd.myscript.jiix" plus the configured one. In the example, it is the "application/x-latex"


So, if you want to compare them to the expected result, you would have to parse the result according to the grammar format you choose (LaTeX, MathML,...) and compared with the expected one expressed in the same format.


Best regards,


Gwenaëlle




Answer

Dear Niklas,


Thank you for contacting us.

The DOM elements you are referring to, are the ones from the katex library that we are using in our iinkJS examples to render the maths recognition results that are exported in LaTeX format.

If you take a look at this example:

https://github.com/MyScript/iinkJS/blob/master/examples/v4/websocket_math_iink.html

it corresponds to line 75: katex.render(cleanLatex(exports['application/x-latex']),resultElement);


The recognition results are retrieved by adding an event listener on 'exported' event. In the sample, we display the LaTeX exported result using the katex renderer.

If you want to retrieve the "raw" recognition result in LaTeX format, you can get them from the exports evt details line 72. The exports array contains the different formats that are available for the math export, ie the "application/vnd.myscript.jiix" plus the configured one. In the example, it is the "application/x-latex"


So, if you want to compare them to the expected result, you would have to parse the result according to the grammar format you choose (LaTeX, MathML,...) and compared with the expected one expressed in the same format.


Best regards,


Gwenaëlle



Dear Gwenaëlle,

thanks for your quick respond. That should help a lot and I appreciate it very much =)

Many greetings

Niklas Vennemann