Insérer des formules mathématiques dynamiquement

**zozoman** · 14/05/2014, 22h02

Bonjour à tous,

Je veux créer un site ou l'utilisateur tape des formules sur une calculatrice virtuelle et les formules apparaissent immédiatement. J'ai réussi à faire apparaitre des formules en utilisant MathML et MathJax, ça marche parfaitement mais MathML pose quelques problèmes avec le CSS. J'ai fait apparaitre ces formules avec du PHP et du JavaScript.

Par contre, quand l'utilisateur appuie sur la touche racine, j'ai le code Latex \sqrt{R} qui apparait, pas le symbole. Je joins mes codes PHP et JavaScript. Je suis débutant.

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
 
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta name="author" content="Vincent & Leo" />
        <meta name="keywords" content="" />           
        <meta content="text/html; Charset=UTF-8" http-equiv="Content-Type" />
        <link rel="stylesheet" href="style.css" type="text/css" />
        <title>Balise Math</title>
        <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
        <script type="text/javascript" src="fonction.js"></script>
    </head>
 
    <body>
        <header>
            <h1>Mon super site</h1>
            <h2>Mon super site permet de faire plein de super trucs</h2>
        </header>
 
        <div id="centrePage">
            <nav>
                <!-- Menu -->
            </nav>
 
            <div id="coeurSite">
                <h1>Multiplications et divisions de fractions<br />en utilisant la balise math</h1>
                <div id="fraction">
    <?php
    echo'               <table>'."\n";
    // 5 lignes
    for($i=0;$i<5;$i++)
    {
        echo'                   <tr class="ligne">'."\n";
        // 4 colonnes
        for($j=0;$j<3;$j++)
        {
            $alea1=rand(2,11);
            $alea2=rand(2,11);
            $alea3=rand(2,10);
            $alea4=rand(2,10);
            $alea5=rand(2,10);
            $alea6=rand(2,10);
            $n1=$alea1*$alea3;
            $d2=$alea1*$alea6;
            $n2=$alea2*$alea4;
            $d1=$alea2*$alea5;
            echo'                       <td class="formule">'."\n";
            echo'                           <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">'."\n";
            echo'                               <mrow>'."\n";
            echo'                                   <mfrac>'."\n";
            echo'                                       <mrow>'."\n";
            echo'                                           <mn id="n1">'.$n1.'</mn>'."\n";
            echo'                                       </mrow>'."\n";
            echo'                                       <mrow>'."\n";
            echo'                                           <mn id="d1">'.$d1.'</mn>'."\n";
            echo'                                       </mrow>'."\n";
            echo'                                   </mfrac>'."\n";
            echo'                                   <mo>&times;</mo>'."\n";
            echo'                                   <mfrac>'."\n";
            echo'                                       <mrow>'."\n";
            echo'                                           <mn id="n2">'.$n2.'</mn>'."\n";
            echo'                                       </mrow>'."\n";
            echo'                                       <mrow>'."\n";
            echo'                                           <mn id="d2">'.$d2.'</mn>'."\n";
            echo'                                       </mrow>'."\n";
            echo'                                   </mfrac>'."\n";                       
            echo'                                   <mo>=</mo>'."\n";
            echo'                               </mrow>'."\n";
            echo'                           </math>'."\n";
            echo'                       </td>'."\n";
        }
        echo'                   </tr>'."\n";
    }
    echo'               </table>'."\n";
    ?>              
                </div>
 
                <div>
                    <table id="calculatrice">
                        <caption>Calculatrice</caption>
                        <thead>
                            <tr>
                                <th id="ecranCalculatrice" colspan="5">
                                    <form>
 
                                    </form>
                                </th>
                            </tr>
                        </thead>
 
                        <tbody>
                            <tr class="ligneCalculatrice">
                                <td id="toucheRac" class="uneToucheCalculatriceSpeciale" onclick="return afficherTouche(18);"><a href="#calculatrice">\(\sqrt{\ x}\)</a></td>
                                <td id="toucheFrac" class="uneToucheCalculatriceSpeciale" onclick="return afficherTouche(19);"><a href="#calculatrice">\(\frac{N}{D}\)</a></td>
                                <td id="toucheCos" class="uneToucheCalculatriceSpeciale" onclick="return afficherTouche(20);"><a href="#calculatrice">cos</a></td>
                                <td id="toucheSin" class="uneToucheCalculatriceSpeciale" onclick="return afficherTouche(21);"><a href="#calculatrice">sin</a></td>
                                <td id="toucheTan" class="uneToucheCalculatriceSpeciale" onclick="return afficherTouche(22);"><a href="#calculatrice">tan</a></td>
                            </tr>
                            <tr class="ligneCalculatrice">
                                <td id="touche7" class="uneToucheCalculatrice" onclick="return afficherTouche(0);"><a href="#calculatrice">7</a></td>
                                <td id="touche8" class="uneToucheCalculatrice" onclick="return afficherTouche(1);"><a href="#calculatrice">8</a></td>
                                <td id="touche9" class="uneToucheCalculatrice" onclick="return afficherTouche(2);"><a href="#calculatrice">9</a></td>
                                <td id="toucheAC" class="deuxToucheCalculatrice" colspan="2" onclick="return afficherTouche(3);"><a href="#calculatrice">AC</a></td>
                            </tr>
                            <tr class="ligneCalculatrice">
                                <td id="touche4" class="uneToucheCalculatrice" onclick="return afficherTouche(4);"><a href="#calculatrice">4</a></td>
                                <td id="touche5" class="uneToucheCalculatrice" onclick="return afficherTouche(5);"><a href="#calculatrice">5</a></td>
                                <td id="touche6" class="uneToucheCalculatrice" onclick="return afficherTouche(6);"><a href="#calculatrice">6</a></td>
                                <td id="toucheFois" class="uneToucheCalculatrice" onclick="return afficherTouche(7);"><a href="#calculatrice"> × </a></td>
                                <td id="toucheDiv" class="uneToucheCalculatrice" onclick="return afficherTouche(8);"><a href="#calculatrice"> ÷ </a></td>
                            </tr>
                            <tr class="ligneCalculatrice">
                                <td id="touche1" class="uneToucheCalculatrice" onclick="return afficherTouche(9);"><a href="#calculatrice">1</a></td>
                                <td id="touche2" class="uneToucheCalculatrice" onclick="return afficherTouche(10);"><a href="#calculatrice">2</a></td>
                                <td id="touche3" class="uneToucheCalculatrice" onclick="return afficherTouche(11);"><a href="#calculatrice">3</a></td>
                                <td id="touchePlus" class="uneToucheCalculatrice" onclick="return afficherTouche(12);"><a href="#calculatrice"> + </a></td>
                                <td id="toucheMoins" class="uneToucheCalculatrice" onclick="return afficherTouche(13);"><a href="#calculatrice"> - </a></td>
                            </tr>
                            <tr class="ligneCalculatrice">
                                <td id="toucheDel" class="uneToucheCalculatrice" onclick="return afficherTouche(14);"><a href="#calculatrice">←</a></td>
                                <td id="touche0" class="uneToucheCalculatrice" onclick="return afficherTouche(15);"><a href="#calculatrice">0</a></td>
                                <td id="touchePoint" class="uneToucheCalculatrice" onclick="return afficherTouche(16);"><a href="#calculatrice">.</a></td>
                                <td id="toucheEgal" class="deuxToucheCalculatrice" colspan="2" onclick="return afficherTouche(17);"><a href="#calculatrice">=</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
 
            <div id="aide">
                <!-- aide -->
            </div>
        </div>
 
        <footer>
            <!-- footer -->
            <script type="text/javascript">
                document.write('<math xmlns="http:\/\/www.w3.org\/1998\/Math\/MathML" display="block">');
                document.write('    <mrow>');
                document.write('        <mfrac>');
                document.write('            <mrow>');
                document.write('                <mn id="n1">120</mn>');
                document.write('            </mrow>');
                document.write('            <mrow>');
                document.write('                <mn id="d1">36</mn>');
                document.write('            </mrow>');
                document.write('        </mfrac>'); 
                document.write('        <mo>=</mo>');
                document.write('    </mrow>');
                document.write('</math>');
            </script>
 
            <script type="text/javascript">
                document.write('<math xmlns="http:\/\/www.w3.org\/1998\/Math\/MathML" display="block">');
                document.write('    <mrow>');
                document.write('        <mfrac>');
                document.write('            <mrow>');
                document.write('                <mn id="n1">&nbsp;░&nbsp;</mn>');
                document.write('            </mrow>');
                document.write('            <mrow>');
                document.write('                <mn id="d1">&nbsp;░&nbsp;</mn>');
                document.write('            </mrow>');
                document.write('        </mfrac>'); 
                document.write('        <mo>=</mo>');
                document.write('    </mrow>');
                document.write('</math>');
            </script>
        </footer>        
    </body>
</html>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
 
function afficherTouche(i)
{
 
 
 
    (function () {
  var head = document.getElementsByTagName("head")[0], script;
  script = document.createElement("script");
  script.type = "text/x-mathjax-config";
  script[(window.opera ? "innerHTML" : "text")] =
    "MathJax.Hub.Config({\n" +
    "  tex2jax: { inlineMath: [['$','$'], ['\\\\(','\\\\)']] }\n" +
    "});"
  head.appendChild(script);
  script = document.createElement("script");
  script.type = "text/javascript";
  script.src  = "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";
  head.appendChild(script);
})();
 
 
 
 
    var toucheId="";
    var caractereValue="";
    var caractereId="";
    var caractereDejaAffiche="";
 
    switch (i)
    {
        case 0 : 
            toucheId="touche7";
            break;
        case 1 : 
            toucheId="touche8";
            break;
        case 2 : 
            toucheId="touche9";
            break;
        case 3 : 
            toucheId="toucheAC";
            break;
        case 4 : 
            toucheId="touche4";
            break;
        case 5 : 
            toucheId="touche5";
            break;
        case 6 : 
            toucheId="touche6";
            break;
        case 7 : 
            toucheId="toucheFois";
            break;
        case 8 : 
            toucheId="toucheDiv";
            break;
        case 9 : 
            toucheId="touche1";
            break;
        case 10 : 
            toucheId="touche2";
            break;
        case 11 : 
            toucheId="touche3";
            break;
        case 12 : 
            toucheId="touchePlus";
            break;
        case 13 : 
            toucheId="toucheMoins";
            break;
        case 14 : 
            toucheId="toucheDel";
            break;
        case 15 : 
            toucheId="touche0";
            break;
        case 16 : 
            toucheId="touchePoint";
            break;
        case 17 : 
            toucheId="toucheEgal";
            break;
        case 18 : 
            toucheId="toucheRac";
            break;
        case 19 : 
            toucheId="toucheFrac";
            break;
        case 20 : 
            toucheId="toucheCos";
            break;
        case 21 : 
            toucheId="toucheSin";
            break;
        case 22 : 
            toucheId="toucheTan";
            break;
    }
 
    caractereValue=document.getElementById(toucheId).textContent;
    caractereId=document.getElementById(toucheId).id;
    caractereDejaAffiche=document.getElementById("ecranCalculatrice").textContent;
 
    if( caractereId==="touche0" || 
        caractereId==="touche1" || 
        caractereId==="touche2" || 
        caractereId==="touche3" || 
        caractereId==="touche4" || 
        caractereId==="touche5" || 
        caractereId==="touche6" || 
        caractereId==="touche7" || 
        caractereId==="touche8" || 
        caractereId==="touche9" ||
        caractereId==="touchePoint"   ||
        caractereId==="touchePlus"    || 
        caractereId==="toucheMoins"   || 
        caractereId==="toucheFois"    ||
        caractereId==="toucheDiv"  )
    {
        document.getElementById("ecranCalculatrice").innerHTML = caractereDejaAffiche+caractereValue;
    }
 
    if(caractereId==="toucheRac")
    {
        document.getElementById("ecranCalculatrice").innerHTML = "\\\sqrt{R}\\";
    }
 
    // nettoyage de l'écran
    if(caractereId==="toucheAC")
    {
        caractereValue="";
        caractereDejaAffiche="";
        document.getElementById('ecranCalculatrice').innerHTML = caractereDejaAffiche;
    }
 
    // bouton delete
    if(caractereId==="toucheDel")
    {
        var dernierCaracterAffiche=caractereDejaAffiche.substring(caractereDejaAffiche.length-1,caractereDejaAffiche.length);
        if(dernierCaracterAffiche===String.fromCharCode(160))
        {
            caractereDejaAffiche=caractereDejaAffiche.substring(0,caractereDejaAffiche.length-3);
        }
        else
        {
            caractereDejaAffiche=caractereDejaAffiche.substring(0,caractereDejaAffiche.length-1);
        }
        document.getElementById('ecranCalculatrice').innerHTML = caractereDejaAffiche;
    }
 
    // test de l'expression et calcul de l'expression
    var erreur=0;
    if(caractereId==="toucheEgal")
    {
        document.getElementById('ecranCalculatrice').innerHTML = caractereDejaAffiche+"<br /><br />"+caractereValue;
        // Commence ou fini par par un opérateur
        var exprReg1=/^(\s-\s|\s\+\s|\s×\s|\s÷\s)|(\s-\s|\s\+\s|\s×\s|\s÷\s)$/;
        if(exprReg1.test(caractereDejaAffiche))
        {
            alert("Commence ou fini par par un opérateur");
            erreur++;
        }
        else
        {
            // Contient deux opérateurs consécutifs
            var exprReg2=/(\s×\s\s×\s|\s×\s\s÷\s|\s×\s\s\+\s|\s×\s\s-\s|\s÷\s\s×\s|\s÷\s\s÷\s|\s÷\s\s\+\s|\s÷\s\s-\s|\s\+\s\s×\s|\s\+\s\s÷\s|\s\+\s\s\+\s|\s\+\s\s-\s|\s-\s\s×\s|\s-\s\s÷\s|\s-\s\s\+\s|\s-\s\s-\s)/;
            if(exprReg2.test(caractereDejaAffiche))
            {
                alert("Contient deux opérateurs consécutifs");
                erreur++;
            }
            else
            {
                //alert("Test des nombres");
                var exprReg3=/\s×\s|\s÷\s|\s\+\s|\s-\s/;
                var tableauNombre=caractereDejaAffiche.split(exprReg3);
                for(var i=0; i<tableauNombre.length;i++)
                {
                    // Chaque nombre ne contient qu'un point
                    var exprReg4=/^[0-9]+(\.[0-9]+)?$/;
                    if(exprReg4.test(tableauNombre[i]))
                    {
                        tableauNombre[i]=parseFloat(tableauNombre[i]);
                        //alert(tableauNombre[i]);
                    }
                    else
                    {
                        alert(tableauNombre[i]+" n'est pas un nombre");
                    }
                }
                //alert("Test des opérateurs");
                alert(caractereDejaAffiche);
                var exprReg5=/([+\-×÷])/g;
                var tableauOperateur=caractereDejaAffiche.match(exprReg5);
                for(var j=0; j<tableauOperateur.length;j++)
                {
                    alert(tableauOperateur[j]);
                }
            }
        }
    }
}

Merci pour votre aide

**zozoman** · 15/05/2014, 19h11

Pour info, le script suivant n'affiche rien :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
            document.write('\\(\sqrt{\ x}\\)');
</script>

Celui-ci affiche sqrt x en italique :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<script type="text/javascript">
            document.write('\\(\sqrt{\ x}\\)');
</script>

Ce travail est possible : voici un lien très intéressant : http://www.calcenstock.fr/smartcas.html

Je ne comprend rien au code par contre

Pourriez vous m'aider ?

Insérer des formules mathématiques dynamiquement

JavaScript

Discussions similaires

Partager

Partager