learningequality / kolibri

Kolibri Learning Platform: the offline app for universal education
https://learningequality.org/kolibri/
MIT License
784 stars 651 forks source link

Mathematical notation is not rendered in certain CK-12 Math content #7224

Open dylanmccall opened 4 years ago

dylanmccall commented 4 years ago

Observed behavior

In the CK-12 Math content (channel ID 1d8f6d84618153c18c695d85074952a7), mathematical notation is usually rendered nicely. However, in some exercises, it appears as the original latex source. For example, in Definition of Derivative Practice (node ID 563c6392629e5cdd86b2027a8a5181c0), the mathematical notation looks right:

Screen Shot 2020-06-30 at 11 23 17

… while in Differentiability Implies Continuity Practice (node ID 5ddca1c75a1a5643baa8797c4cfea0fb), it does not:

Screen Shot 2020-06-30 at 11 23 18

Expected behavior

Instead, the mathematical notation should look nice in either case :)

User-facing consequences

The current situation makes it extremely difficult for an average learner to do certain exercises.

Errors and logs

Browser console (from Differentiability Implies Continuity Practice):

This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”. learn
Source map error: Error: request failed with status 404
Resource URL: http://localhost:8080/en/learn/#/topics/c/5ddca1c75a1a5643baa8797c4cfea0fb
Source Map URL: kolibri.core.user_agent-0.13.3a0.dev0+git.62.g5d05c61b.js.map
Kolibri Modules: kolibri.plugins.learn.app registered pluginMediator.js:122:14
Some cookies are misusing the recommended “sameSite“ attribute 2
Kolibri Modules: kolibri_exercise_perseus_plugin.main registered pluginMediator.js:122:14

kolibri.txt (from loading Differentiability Implies Continuity Practice):

INFO 2020-06-30 11:33:06,150 cherrypy.access.140652778681488 127.0.0.1 - - "GET /static/assets/fonts/noto-common.css?v=0.13.3a0.dev0+git.62.g5d05c61b HTTP/1.1" 304 - "http://localhost:8080/en/learn/" "Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0"
INFO 2020-06-30 11:33:06,152 cherrypy.access.140652778681488 127.0.0.1 - - "GET /static/assets/fonts/noto-subset.en.css?v=0.13.3a0.dev0+git.62.g5d05c61b HTTP/1.1" 304 - "http://localhost:8080/en/learn/" "Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0"
INFO 2020-06-30 11:33:06,153 cherrypy.access.140652778681488 127.0.0.1 - - "GET /static/kolibri.core.default_frontend/kolibri.core.default_frontend0.13.3a0.dev0+git.62.g5d05c61b.css HTTP/1.1" 304 - "http://localhost:8080/en/learn/" "Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0"
INFO 2020-06-30 11:33:06,156 cherrypy.access.140652778681488 127.0.0.1 - - "GET /static/kolibri.plugins.learn.app/kolibri.plugins.learn.app0.13.3a0.dev0+git.62.g5d05c61b.css HTTP/1.1" 304 - "http://localhost:8080/en/learn/" "Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0"
INFO 2020-06-30 11:33:06,159 cherrypy.access.140652778681488 127.0.0.1 - - "GET /static/kolibri.core.default_frontend/kolibri.core.default_frontend-0.13.3a0.dev0+git.62.g5d05c61b.js HTTP/1.1" 304 - "http://localhost:8080/en/learn/" "Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0"
INFO 2020-06-30 11:33:06,159 cherrypy.access.140652778681488 127.0.0.1 - - "GET /static/kolibri.plugins.learn.app/kolibri.plugins.learn.app-0.13.3a0.dev0+git.62.g5d05c61b.js HTTP/1.1" 304 - "http://localhost:8080/en/learn/" "Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0"
INFO 2020-06-30 11:33:06,252 cherrypy.access.140652778681488 127.0.0.1 - - "GET /static/assets/fonts/noto-full.en.modern.css?v=0.13.3a0.dev0+git.62.g5d05c61b HTTP/1.1" 304 - "http://localhost:8080/en/learn/" "Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0"
INFO 2020-06-30 11:33:06,372 cherrypy.access.140652778681488 127.0.0.1 - - "GET /static/kolibri.core.default_frontend/kolibri.core.default_frontend-0.13.3a0.dev0+git.62.g5d05c61b.js.map HTTP/1.1" 304 - "" "Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0"
INFO 2020-06-30 11:33:06,619 cherrypy.access.140652778681488 127.0.0.1 - - "GET /static/kolibri.core.default_frontend/kolibri-logo.svg?625360a31b0628f83d4ca2ef861dbd30 HTTP/1.1" 304 - "http://localhost:8080/en/learn/" "Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0"
INFO 2020-06-30 11:33:07,165 cherrypy.access.140652778681488 127.0.0.1 - - "GET /static/mathjax/2.1/images/MenuArrow-15.png HTTP/1.1" 304 - "http://localhost:8080/en/learn/" "Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0"
INFO 2020-06-30 11:33:07,263 cherrypy.access.140652778681488 127.0.0.1 - - "GET /static/kolibri.core.default_frontend/kolibri.core.default_frontend-0.13.3a0.dev0+git.62.g5d05c61b.js.map HTTP/1.1" 304 - "" "Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0"
INFO 2020-06-30 11:33:07,266 cherrypy.access.140652778681488 127.0.0.1 - - "GET /static/kolibri_exercise_perseus_plugin.main/kolibri_exercise_perseus_plugin.main-1.3.1.js.map HTTP/1.1" 304 - "" "Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0"
INFO 2020-06-30 11:33:07,267 cherrypy.access.140652778681488 127.0.0.1 - - "GET /static/kolibri.plugins.learn.app/kolibri.plugins.learn.app-0.13.3a0.dev0+git.62.g5d05c61b.js.map HTTP/1.1" 304 - "" "Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0"
INFO 2020-06-30 11:33:07,528 cherrypy.access.140652778681488 127.0.0.1 - - "GET /static/kolibri_exercise_perseus_plugin.main/kolibri_exercise_perseus_plugin.main-extra-widgets-1.3.1.js.map HTTP/1.1" 304 - "" "Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0"

Context

The specific content I am referring to here is available from Kolibri Studio, in the CK-12 channel under Math / Calculus / Derivatives and Applications of Derivatives.

I have reproduced this behaviour in Kolibri 0.13.3 with Firefox 78.0, and the Kolibri GNOME app (WebKitGTK+).

jonboiser commented 4 years ago

In the example, part of the full KaTeX expression looks to be in the LaTeX Computer Modern Font, so it might be the expresson was mis-parsed. @ivanistheone Do you think this could have been a error when scraping this content?

image

dylanmccall commented 4 years ago

Here is the offending content on ck12.org, by the way:

https://www.ck12.org/assessment/ui/?test/view/practice/calculus/continuity-and-differentiability-practice

Can't find the Definition of Derivative Practice, but the Kolibri version of this one works fine:

https://www.ck12.org/assessment/ui/?test/view/practice/calculus/derivatives-and-applications-of-derivatives-practice

jaltekruse commented 2 years ago

It looks like there was some translation of the 'align' environment to matrices, but the parser used to do the translation didn't recognize align* and didn't start/end each of the expressions wrapped in it's own environment. Maybe it was intentional to try to put these three expressions each as a line in a matrix? But that didn't work successfully if that was the intent.

I paused the javascript execution on ck-12 to get the source latex in the original form:

image

Finished rendering of the problem, no matrix is used: image

\begin{align*}f(x)=x^2\end{align*}
\begin{align*}g(x)=12x+9\end{align*}
\begin{align*}h(x)=\frac{12}{4-x}\end{align*}

And the full html in the ck-12 page

<p>
   If 
   <span class="x-ck12-mathjax">
      <span class="MathJax_Preview">\begin{align*}f(x)=x^2\end{align*}</span><script type="math/tex">\begin{align*}f(x)=x^2\end{align*}</script>
   </span>
   <!--<img src="//www.ck12.org/flx/math/inline/f(x)%3Dx%5E2"   class="x-ck12-math" alt="f(x)=x^2"> -->, 
   <span class="x-ck12-mathjax">
      <span class="MathJax_Preview">\begin{align*}g(x)=12x+9\end{align*}</span><script type="math/tex">\begin{align*}g(x)=12x+9\end{align*}</script>
   </span>
   <!--<img src="//www.ck12.org/flx/math/inline/g(x)%3D12x%2B9"   class="x-ck12-math" alt="g(x)=12x+9"> --> and 
   <span class="x-ck12-mathjax">
      <span class="MathJax_Preview">\begin{align*}h(x)=\frac{12}{4-x}\end{align*}</span><script type="math/tex">\begin{align*}h(x)=\frac{12}{4-x}\end{align*}</script>
   </span>
   <!--<img src="//www.ck12.org/flx/math/inline/h(x)%3D%5Cfrac%7B12%7D%7B4-x%7D"   class="x-ck12-math" alt="h(x)=\frac{12}{4-x}"> -->, then which of the following is true?
</p>
jaltekruse commented 2 years ago

I'd be happy to try to pick up fixing this, is the code that was used to do the scraping open source? Would you like effort to be put in to trying to just manually update these type of problems so they render correctly in the short term?