如何在我的网站上使用 Mathquill答案

【问题标题】：How to use Mathquill on my website如何在我的网站上使用 Mathquill
【发布时间】：2017-10-16 06:41:59
【问题描述】：

我在我的网站上使用 mathquill 时遇到问题。我是新手。我被困在这部分

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

我不知道在 hrefs 上放什么，因为我没有从我从 github 获得的 mathquill 文件中看到这些文件..

我下载了最新的 mathquill 文件及其内部的 htdocs(xampp) 或 www(wamp) 以及我的 index.php。

我必须将 index.php 放在 mqthquill-0.10.1 文件夹中吗？

这是我的

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

如果有人能给我有关如何使用 mathquill 的步骤，我将不胜感激。提前致谢

【问题讨论】：

我刚刚通过 the docs 中的“最新版本”链接从 Github 下载了 .zip，其中有一个 mathquill.js 和 mathquill.css 文件。
我已经下载了文件，但我不知道如何使用它......就像代码一样。并调用它。我将它复制并粘贴到我的网站上，但它不起作用。我认为有些事情我没有做..
文档有一整节关于“入门”。阅读并跟随。
伙计，我想知道的是我不知道在 href 上放什么。我需要保持原样还是需要更改它。我对这件事很陌生。我对编程没有那么了解

标签： javascript php jquery html mathquill

【解决方案1】：

选项 1

您可以从 github 下载 mathquill.css 和 mathquill.js 文件并从您的目录中使用它们。

如果你的文件夹（目录）结构如下：

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

以下是引用 CSS 和 JS 文件的方法：

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

检查您的路径是否正确的一种简单方法是将整个 URL 放在浏览器的地址栏中。例如，如果您正在浏览页面：

www.mydomain.com/mypage.html

我上面提到的示例文件夹结构中的 css 和 js 文件的链接是：

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

选项 2

您可以使用 CDN 获取页面上的 JS 和 CSS 文件。只需将以下两行复制到您的 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>

【讨论】：

感谢老兄的澄清......但我的问题是我在从 github 下载的文件中看不到 mathquill.js 和 mathquill.css ......“mathquill-0.10.1.tgz”
您可能需要解压缩它。使用 7zip 或其他工具从中获取文件。
也许我从 mathquill.com 的文档中无法理解。我英语不好...
没关系，我正在发布 CDN 链接。希望他们会为您简化。
是的...我完成了文件的提取。 ...并且已经将它与我的 index.php 放在一起我看到了 intro.js 和其他人。我看不到 mathquill.js 和 mathquill.css

【解决方案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>

【讨论】：

你能补充一些解释吗？
我试着用 cmets 解释，它们写在示例代码来自 Mathquill 网站。但简而言之，您需要中的文件“scr”和中的一些使用代码。我无法使用 github 文件运行。只有我在网上找到的 CDN 链接。我也在学习如何使用它。 :) 好吗？
checkAnswer(enteredMath);这在这有什么作用