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

Need help
1

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:

2

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

1 Like
3

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
4

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:

Capture.PNG1110×861 116 KB

5

I added a page called vega:

Pasted image864×409 27.9 KB

Which yields:

Pasted image706×264 8.26 KB

7

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
8

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