calcul: affichage de fraction de deux nombres ( avec mathjax )

degbegnon
Javascript

Bonjour, Je souhaiterais afficher la formule mathématique de la fraction de deux nombres en utilisant mathjax avec ce code

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Décrivez ici votre code ou ce que vous cherchez à faire

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)'],['[tex]','[/tex]']]}}); </script>
     <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Activité Mentale</title>

</head>
<body>

    <div class="calcul" id="calcul">  </div>
   <script>
    game.prototype.generateCalcul = function(){

        var i = 0;
        var n1 = 0;
        var n2 = 0;

        for(i; i < this.nb; i++){

            n1 = this.todo.n1[Math.floor(Math.random() * this.todo.n1.length)];
            n2 = this.todo.n2[Math.floor(Math.random() * this.todo.n2.length)];

                var c = n1/n2;
                var tex = "   \\frac{"+n1+"}{"+n2+"}   " ;
               this.calcul.innerHTML = " \\["+tex+"\\] ";
               MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.calcul]);

            this.calcul.push({
                'display':  tex   ,
                'id' : i + 1
            });
        }
    };
   </script>
 game.prototype.generateCalcul();
</body>
</html> ```

Ce que je veux

Décrivez ici ce que vous cherchez à obtenir

Ce que j'obtiens

Décrivez ici vos erreurs ou ce que vous obtenez à la place de ce que vous attendez :(

5 réponses

Huggy

En nettoyant un peu ton code et en rajoutant un bouton pour lancer la fonction, voici ce que j'obtiens

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script src='//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>
<script>
    var generateCalcul = function(){

        var n1 = Math.floor(Math.random() * 100);
        var n2 = Math.floor(Math.random() * 100);

        var c = n1/n2;
        var tex = "   \\frac{"+n1+"}{"+n2+"}" ;
        //var tex = "{" + n1 + "\\over" + n2 + "}";
        //var tex = "<math><mfrac><mrow><mi>" + n1 + "</mi></mrow><mrow><mi>" + n2 + "</mi></mrow></mfrac></math>"
        var calcul = document.getElementById('calcul');
        calcul.innerHTML = " \\["+tex+"\\] ";
        MathJax.Hub.Queue(["Typeset",MathJax.Hub, calcul]);
    };

   </script>

</head>
<body>
    <button onclick="generateCalcul()">Calculer</button> 
    <div id="calcul"></div>
</body>
</html>
degbegnon
Auteur

Bonjour;
Merci pour votre aide, mais quand je l'execute sous mozilla ou chrome, la fraction ne s'affiche pas correctement. J'ai plutot un affichage de ce type : [ \frac{56}{5}] . L'interpretation de la formule mathématique ne se fait pas.

degbegnon
Auteur

sans passer par Js Bin, les navigateurs mozilla et chrome n'affichent pas correctement la fraction. J'ai plutot un affichage de ce type : [ \frac{29}{3}] . L'interpretation de la formule mathématique ne se fait pas

Huggy

Regarde avec les outils de dev si mathjax est bien chargé depuis le cdn
regarde aussi dans la console js si tu as des erreurs.
j'ai recopié mon exemple depuis ce site et ça fonctionne

degbegnon
Auteur

Bonjour,
Merci pour votre aide.
Excusez moi pour le dérangement.
ca fonctionne toujours pas de mon coté.
j'ai été dans l'outil de developpement puis console du navigateur et du web de mozilla mais j'ai pas pu trouver la solution.
Pourriez vous me dire exactement comment faire pour voir si mathjax est bien bien chargé depuis le cdn pour pouvoir le corriger dans le cas contraire s'il vous plait ? Je suis prof de maths avec très peu de compétences de developpement.
D'avance Merci pour votre aide