CODEWITHSUNDEEP
javascriptphpjqueryhtmlmathquill
Ian
Ian

Reputation: 39

How to use Mathquill on my website

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

Upvotes: 3

Views: 3814

Answers (2)

Jeferson Neres
Jeferson Neres

Reputation: 21

<!-- 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>

Upvotes: 2

Nisarg Shah
Nisarg Shah

Reputation: 14541

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>

Upvotes: 3

Related Questions