How to use Mathquill on my website

Question

How to use Mathquill on my website

3.3k Views Asked by Ian At 19 October 2024 at 21:56

I'm having problems in using mathquill on my website. I'm new to this. I'm stuck in this part

  <link rel="stylesheet" type="text/css" href="/path/to/mathquill.css">`
  <script src="/path/to/mathquill.min.js"></script>

I dont know what to put on the hrefs because I'm not seeing those files from mathquill file i got from github..

i downloaded the latest mathquill files and its inside htdocs(xampp) or www(wamp) together with my index.php.

Do i have to place my index.php inside mqthquill-0.10.1 folder?

Here is my

  <link rel="stylesheet" href="/path/to/mathquill.css"/>
  <script src="jquery-3.2.1.min.js"></script>
  <script src="/path/to/mathquill.js"></script>

I appreciate if someone could give me the steps on how to use mathquill. thanks in advance

Original Q&A

There are 2 best solutions below

**Nisarg Shah** · Answer 1

Option 1

You can either download the mathquill.css and mathquill.js files from github and use them from your directory.

If you have your folder (directory) structure as below:

appFolder
.. scripts
.... mathquill.js
.... index.js
.. css
.... mathquill.css
 myPage.html

Here's how you would reference the CSS and JS files:

<link rel="stylesheet" type="text/css" href="/css/mathquill.css">`
<script src="/scripts/mathquill.min.js"></script>

An easy way to check if your paths are correct is to put the entire URL in the browser's address bar. For example, if you are browsing the page as:

www.mydomain.com/mypage.html

The links to css and js files in the example folder structure I mentioned above would be:

www.mydomain.com/scripts/mathquill.js
www.mydomain.com/css/mathquill.css

Option 2

You could use the CDN to get the JS and CSS files on your page. Just copy the below two lines on to your html page, and you are ready to go.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.css">`
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.js" type="text/javascript"></script>

**Jeferson Neres** · Answer 2

<!-- COPY AND PAST THIS CODE HTML IN SOME EDITOR FOR BETTER VISUALIZATION, AFTER RUN-->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Run  Mathquill</title>


        <!-- YOU NEED  mathquill.css , jquery and mathquill.js SEARCH AND PICK IT SOMEWHERE, SEARCH ON THE WEB IF THIS DOWN  NOT RUN-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.css"/> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.js"></script>

        <!-- INFORM  THE LATEST AVERSION INTERFACE WITH THIS CODE   -->
        <script>
            var MQ = MathQuill.getInterface(2);
        </script>


    </head>

    <body>

          <!--EXAMPLE COMMON TEXT TRANSFORMED WITH MATHQUILL  -->
         <p>Solve <span id="problem">f(x) = ax^2 + bx + c + = 0</span>.</p>
            <script>
                  var problemSpan = document.getElementById('problem');
                 MQ.StaticMath(problemSpan);
            </script> 




        <!-- EXAMPLE TO  CREATE AN EDITABLE MATH FIELD  -->
        <p><span id="answer">x=</span></p>
        <script>
            var answerSpan = document.getElementById('answer');
            var answerMathField = MQ.MathField(answerSpan, {
                handlers: {
                edit: function() {
                    var enteredMath = answerMathField.latex(); // Get entered math in LaTeX format
                    checkAnswer(enteredMath);
                }
                }
            });
        </script>

    </body>
</html>

How to use Mathquill on my website

There are 2 best solutions below

Option 1

Option 2

Related Questions in JAVASCRIPT

Related Questions in PHP

Related Questions in JQUERY

Related Questions in HTML

Related Questions in MATHQUILL

Trending Questions

Popular # Hahtags

Popular Questions