如何在我的网站上使用Mathquill

时间:2017-05-17 01:31:57

标签: javascript php jquery html mathquill

我在网站上使用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的话,我感激不尽。 提前谢谢

2 个答案:

答案 0 :(得分:1)

选项1

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

如果您的文件夹(目录)结构如下:

 <script type="text/javascript" charset="utf-8">

            // Wait for device API libraries to load
            //
            document.addEventListener("deviceready", onDeviceReady, false);

            // device APIs are available
            //
            function onDeviceReady() {
                navigator.geolocation.getCurrentPosition(onSuccess, onError);
            }

        function changeLinksAddCoords( lat, long ) {
            $('.toChange').each( function(index) {
                                var el = $(this);

                                var href = el.attr('href');
                                href +=  lat + ',' + long
                                el.attr('href', href);
                                });
        }

        // onSuccess Geolocation
        //
        function onSuccess(position) {
            var element = document.getElementById('geolocation');
            changeLinksAddCoords( position.coords.latitude, position.coords.longitude)
            element.innerHTML = + position.coords.latitude + ',' + position.coords.longitude;
        }

        // onError Callback receives a PositionError object
        //
        function onError(error) {
            alert('code: '    + error.code    + '\n' +
                  'message: ' + error.message + '\n');
        }

            </script>

以下是如何引用CSS和JS文件:

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

检查路径是否正确的简便方法是将整个网址放在浏览器的地址栏中。例如,如果您正在浏览页面:

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

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

www.mydomain.com/mypage.html

选项2

您可以使用CDN获取页面上的JS和CSS文件。只需将以下两行复制到您的html页面,即可开始使用。

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

答案 1 :(得分:0)

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