简体   繁体   English

如何在我的网站上使用 Mathquill

[英]How to use Mathquill on my website

I'm having problems in using mathquill on my website.我在我的网站上使用 mathquill 时遇到问题。 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..我不知道在 hrefs 上放什么,因为我没有看到我从 github 获得的 mathquill 文件中的那些文件。

i downloaded the latest mathquill files and its inside htdocs(xampp) or www(wamp) together with my index.php.我下载了最新的 mathquill 文件及其内部的 htdocs(xampp) 或 www(wamp) 以及我的 index.php。

Do i have to place my index.php inside mqthquill-0.10.1 folder?我必须将我的 index.php 放在 mqthquill-0.10.1 文件夹中吗?

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.如果有人能给我有关如何使用 mathquill 的步骤,我将不胜感激。 thanks in advance提前致谢

Option 1选项1

You can either download the mathquill.css and mathquill.js files from github and use them from your directory.您可以从 github 下载 mathquill.css 和 mathquill.js 文件,然后从您的目录中使用它们。

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:以下是引用 CSS 和 JS 文件的方法:

<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.检查路径是否正确的一种简单方法是将整个 URL 放在浏览器的地址栏中。 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:我上面提到的示例文件夹结构中 css 和 js 文件的链接是:

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

Option 2选项 2

You could use the CDN to get the JS and CSS files on your page.您可以使用 CDN 获取页面上的 JS 和 CSS 文件。 Just copy the below two lines on to your html page, and you are ready to go.只需将以下两行复制到您的 html 页面上,您就可以开始了。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM