Как правильно вывести решение интеграла с помощью JavaScript и MathJax?

Question

Как правильно вывести решение интеграла с помощью JavaScript и MathJax?

Рейтинг: 0Ответов: 1Опубликовано: 09.02.2015

Здравствуйте.

Мне нужно написать программку решения интеграла с выводом самого решения. Для этого я подключил библиотеку MathJax. Но мне нужно, чтобы в картинках были значения, введенные в Input. А оно просто копирует символы (a, b и т.д.).

Как исправить эту ошибку? Заранее спасибо.

Код:

<html>  
<head>  
<title>Zadanie 1</title>

 <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">

 </script>

 <script type="text/javascript">

  function integral()
 {  
 var value4 = parseInt(document.getElementById("inputa").value);//Schitali a
 var value5 = parseInt(document.getElementById("inputb").value);//Schitali b
 var value6 = parseInt(document.getElementById("inputn").value);//Schitali n
 var d1, chislo1,chislo2, chislo3;

 d1 = value6+1;//Znamenatel i chislitel

 chislo1=(Math.pow(value5,value6+1))/(value6+1);
 chislo2=(Math.pow(value4,value6+1))/(value6+1);
 chislo3=chislo1-chislo2;

 document.getElementById("output1").value = chislo3.toFixed(2);   //Vivodim rezultat
 };

 </script>

</head>

<body>  
Primer 1: Rechit Integral <img src="http://latex.codecogs.com/gif.latex?\int_{a}^{b}{x^n}"/>

 <form name="Chet"><br>
  a  <input type="text" name="inputa" id="inputa" value="0" size="10" />    
  b  <input type="text" name="inputb" id="inputb" value="0" size="10" />
  n  <input type="text" name="inputn" id="inputn" value="0" size="10" />
  <input type="button" value="OK">
  Rezultat  <input type="text" name="output1" id="output1" size="12" />   
 </form>  
 <p>Reshenie:</p><br>
 1. Dan Integral $$\int_{a}^{b}{x^n}$$ <br>
 2. Integriruem $$\frac{x^{n+1} }{n+1}\left.\begin{matrix} b\\a \end{matrix}\right|$$
 3. Podstavlaem znachenia $$\frac{b^{n+1} }{n+1}-\frac{a^{n+1}}{n+1}$$
</body>

</html>

javascript latex mathjax

Источник: Stack Overflow на русском

Answer 1

▲ 1

Делал по примеру http://cdn.mathjax.org/mathjax/latest/test/sample-dynamic.html

<html>  
<head>  
<title>Zadanie 1</title>

 <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">

 </script>

 <script type="text/javascript">
  //
  //  Use a closure to hide the local variables from the
  //  global namespace
  //
  (function () {
    var QUEUE = MathJax.Hub.queue;  // shorthand for the queue
    var math1 = math2 = math3 = null, box1 = box2 = box3 = null;    // the element jax for the math output, and the box it's in

    //
    //  Hide and show the box (so it doesn't flicker as much)
    //
    var HIDEBOX1 = function () {box1.style.visibility = "hidden"}
    var HIDEBOX2 = function () {box2.style.visibility = "hidden"}
    var HIDEBOX3 = function () {box3.style.visibility = "hidden"}
    var SHOWBOX1 = function () {box1.style.visibility = "visible"}
    var SHOWBOX2 = function () {box2.style.visibility = "visible"}
    var SHOWBOX3 = function () {box3.style.visibility = "visible"}

    //
    //  Get the element jax when MathJax has produced it.
    //
    QUEUE.Push(function () {
      math1 = MathJax.Hub.getAllJax("MathOutput1")[0];
      math2 = MathJax.Hub.getAllJax("MathOutput2")[0];
      math3 = MathJax.Hub.getAllJax("MathOutput3")[0];
      box1 = document.getElementById("box1");
      box2 = document.getElementById("box2");
      box3 = document.getElementById("box3");
      SHOWBOX1(); // box is initially hidden so the braces don't show
      SHOWBOX2();
      SHOWBOX3();
    });

    //
    //  The onchange event handler that typesets the math entered
    //  by the user.  Hide the box, then typeset, then show it again
    //  so we don't see a flash as the math is cleared and replaced.
    //
    function replaceStringWithInputValue(str,aVal,bVal,nVal){
        str = str.replace(/\ba\b/ig,aVal);
        str = str.replace(/\bb\b/ig,bVal);
        str = str.replace(/\bn\b/ig,nVal);
        return str;
    }
    window.UpdateMath = function (TeX) {
        var integralStr = "\\int_{a}^{b}{x^n}";
        var integriruemStr = "\\frac{x^{n+1} }{n+1}\\left.\\begin{matrix} b\\\\a \\end{matrix}\\right|";
        var podstavlaemZnacheniaStr = "\\frac{b^{n+1} }{n+1}-\\frac{a^{n+1}}{n+1}";
        var aVal = parseInt(document.getElementById("inputa").value);//Schitali a
        var bVal = parseInt(document.getElementById("inputb").value);//Schitali b
        var nVal = parseInt(document.getElementById("inputn").value);//Schitali n

        QUEUE.Push(HIDEBOX1,["Text",math1,"\\displaystyle{"+replaceStringWithInputValue(integralStr,aVal,bVal,nVal)+"}"],SHOWBOX1);
        QUEUE.Push(HIDEBOX2,["Text",math2,"\\displaystyle{"+replaceStringWithInputValue(integriruemStr,aVal,bVal,nVal)+"}"],SHOWBOX2);
        QUEUE.Push(HIDEBOX3,["Text",math3,"\\displaystyle{"+replaceStringWithInputValue(podstavlaemZnacheniaStr,aVal,bVal,nVal)+"}"],SHOWBOX3);
    }
     function integral()
    {  
    var value4 = parseInt(document.getElementById("inputa").value);//Schitali a
    var value5 = parseInt(document.getElementById("inputb").value);//Schitali b
    var value6 = parseInt(document.getElementById("inputn").value);//Schitali n
    var d1, chislo1,chislo2, chislo3;

    d1 = value6+1;//Znamenatel i chislitel

    chislo1=(Math.pow(value5,value6+1))/(value6+1);
    chislo2=(Math.pow(value4,value6+1))/(value6+1);
    chislo3=chislo1-chislo2;

    document.getElementById("output1").value = chislo3.toFixed(2);   //Vivodim rezultat
    };
    window.onload = function(){
        document.getElementById("calcBtn").onclick = function(){
            integral();
            window.UpdateMath();
        }
    }

  })();

 </script>

</head>

<body>  
Primer 1: Rechit Integral <img src="http://latex.codecogs.com/gif.latex?\int_{a}^{b}{x^n}"/>

 <form name="Chet"><br>
  a  <input type="text" name="inputa" id="inputa" value="0" size="10" />    
  b  <input type="text" name="inputb" id="inputb" value="0" size="10" />
  n  <input type="text" name="inputn" id="inputn" value="0" size="10" />
  <input type="button" value="OK" id="calcBtn">
  Rezultat  <input type="text" name="output1" id="output1" size="12" />   
 </form>  
 <p>Reshenie:</p><br>
 1. Dan Integral  <div id="box1"><div id="MathOutput1" class="output">$${}$$</div></div><br>
 2. Integriruem <div id="box2"><div id="MathOutput2" class="output">$${}$$</div></div>
 3. Podstavlaem znachenia <div id="box3"><div id="MathOutput3" class="output">$${}$$</div></div>
</body>

</html>

Простите за плохой код, писал быстро... Если что-то непонятно, спрашивайте.

Как правильно вывести решение интеграла с помощью JavaScript и MathJax?

Ответы