How to display Complex Math Equations (Fractions, Integrals, etc) in Bubble

Hi Bubble Community,

I’m creating an exam app and will be featuring questions with complex math equations (Fractions, Integrals, and other symbols). I tried using the Rich Text Input, but it doesn’t quite display it the way I want it to.

Here are samples of these equations.

Have anyone encountered a similar problem?
Does anyone have an idea to solve this? Any feedback is welcome :slight_smile:

You’re probably going to need some sort of LaTeX integration. Maybe they’re an API available

1 Like

I guess https://www.mathjax.org/ and some HTML elements could do it if you add the needed file in the page headers

3 Likes

Thanks @potentialthings and @emmanuel for the responses. I’ve tried adding MathJax in the header and an html element but still it didn’t display it properly (or I’m not implementing it properly). I’ve searched for work arounds in the internet, but I still haven’t found a solution to it.

Here’s a link to a public app I created to solve this
Displaying Complex Math Equations

Can anyone help show it to me?

btw, here’s the program I’ve been building here on Bubble :slight_smile:

I added a page called vega:

Which yields:

1 Like

Problem Solved! Thanks @vega.andrew for the response. :slight_smile:

On a side note, your course in Bubble is amazing. Helped me a lot in creating my app.

1 Like

Just as a quick update for all you math geeks out there, MathJax has discontinued the old CDN for running the script, but here’s an updated bit of code that can get you started if you’re looking to display math expressions:

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      processEscapes: true
    }
  });
</script>

<script type="text/javascript" async
 src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
  $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

AirDev - Custom Software for Everyone

2 Likes

I tried to apply this to the entire page using the page HTML Header, but it doesn’t seem to work.

Anyone has a recommendation?

If you use it o a page it can’t find text in RG or Groups, so i use it inside every HTML element. It also cause some troubles, when it’s a lot of Latex, bur works way more better, then adding the script to page or to hole site

May be ypu find a solution, when you have a lot of text on 1 page? I struggle with this problem for a few years. When i show more then 10-15 html elements (in RG) it doesn.t work well at all