Mathematical symbols keyboard

Need help Plugins
1

Hi everyone,

I am building an educational chatbot and would like my users to write equations and use mathematical symbols.

Is there any solution that would allow me to display a maths keyboard to them?

Something that would look like this:

Capture d’écran 2024-01-08 à 13.02.06
Capture d’écran 2024-01-08 à 13.02.061938×726 86.4 KB

I am currently using LaTeX to render the equations, so any solution that would use this would be a big plus. Here is the plugin I use: plugin.

Thanks for your help!

Adrien

3

@adrienlong1

just build it out element by element by yourself.
I dont see a point why it shouldnt work “manualy”.

Groups and text/symbols should be the only elements you need.

4

I think that you already have half of the work with this plugin, that is awsome. Didn’t know about…

Now you only need to build this keyboard and connect each button to a specific text of this plugin in order to have, as the final result, the equation.

If the users clicks the button “/”, you need to write “\over”. And the result will be “3 \over 5”.

image
image830×379 15.9 KB

I know that is nooooot that easy, but as I said, half of the job is done with this plugin…

5

Thank you everyone.

I have found a solution that is pretty convenient.

I have integrated to CortexJS’s MathLive solution, which provides a virtual keyboard and a Mathfield where the entries are rendered in LaTeX.

Cheers everyone

1 Like
6

Hey Adrien,

Great to hear that you have found a solution, is there any way you can record how to integrate CortexJs to bubble? thanks

7

Hi @nurtilek.nba ,

I added an HTML Visual Element to my page with this piece of code:

<!DOCTYPE html>
<html>
<head>
    <title>Math Field with Hidden Menu</title>
    <script defer src="//unpkg.com/mathlive"></script>
    <style>
        .container {
            display: flex;
            justify-content: left;
            align-items: top;
        }

        math-field {
            font-size: 16px; /* Adjust the size of your math field if needed */
            border: none; ;
        }

        /* Hide the menu toggle button */
        math-field::part(menu-toggle) {
            display: none;
        }
            math-field::part(virtual-keyboard-toggle) {
        display: none;
    }
    </style>
</head>
<body>
    <div class="container">
        <math-field id="my-math-field">f(x) = \sin(x+\pi)</math-field>
    </div>
</body>
</html>

This basically allows you to add a math field to your page. Please note that I have personalised mine to hide the menu that normally comes with it, hide the math keyboard, hide the border, and justify to the left.

You can change those settings by updating the code that I provided above. All personalisation options are described in the CortexJS documentation.

If you’re a newbie to JS and HTML like me, I recommend asking ChatGPT to help you make changes and by mentioning CortexJS in your prompt. It worked really well. I barelly had to edit this code manually.

I hope that helps.

1 Like
8

Thank you, much appreciated.

I just couldn’t change the size of the keyboard icon, currently it is 21px, a bit small than I would prefer