Короткий вопрос: MathJax в моем HTML не отображается соответствующим образом - PullRequest
0 голосов
/ 18 ноября 2018

Так что этого фрагмента кода, над которым я работаю, должно быть достаточно.

КРАТКАЯ ВЕРСИЯ: я хочу запустить скрипт, где при использовании MAthJax скрипт выдаст (Число - число) ^ 2, но в правильной математике, как показано в начале кода.Я не могу понять, почему MathJax не рендерится.Строка 237 - это строка, которая не рендерится :( но 238 прекрасно работает (не mathjax, а то, что я хочу увидеть :()

<head>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>MathJax example</title>
        <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML" async>
        </script>
    </head>

    <body>
        <div id="Table Section">
            <!-- Needs to have one section for a value, dev and dev squared-->
            <table id="Final Results">
                <tr>
                    <!-- Needs to have one section for a value, dev and dev squared-->
                    <th>
                        <!-- Random Numbers -->
                        <p id="Random_Number_1"> R1C1</p>
                    </th>
                    <th>
                        <p id="Deviation_1">R1C2</p>
                    </th>
                    <th>
                        <p id="Deviation_Squared_1">R1C3</p>
                    </th>
                </tr>
                <tr>
                    <!-- Needs to have one section for a value, dev and dev squared-->
                    <th>
                        <!-- Random Numbers -->
                        <p id="Random_Number_2">R2C1</p>
                    </th>
                    <th>
                        <p id="Deviation_2">R2C2</p>
                    </th>
                    <th>
                        <p id="Deviation_Squared_2">R2C3</p>
                    </th>
                </tr>
                <tr>
                    <!-- Needs to have one section for a value, dev and dev squared-->
                    <th>
                        <!-- Random Numbers -->
                        <p id="Random_Number_3">R3C1</p>
                    </th>
                    <th>
                        <p id="Deviation_3">R3C2</p>
                    </th>
                    <th>
                        <p id="Deviation_Squared_3">R3C3</p>
                    </th>
                </tr>
                <tr>
                    <!-- Needs to have one section for a value, dev and dev squared-->
                    <th>
                        <!-- Random Numbers -->
                        <p id="Random_Number_4">R4C1</p>
                    </th>
                    <th>
                        <p id="Deviation_4">R4C2</p>
                    </th>
                    <th>
                        <p id="Deviation_Squared_4">R4C3</p>
                    </th>
                </tr>
            </table>
            <p id="Sum_of_All_Numbers_For_User"></p>
            <p id="Sample_Size_Is"></p>
            <p id="Average_is"></p>
            <p id="Sum_of_Squared_Deviations_is"></p>
            <p id="Variance_is"></p>
            <p id="Standard_Deviation_Final_Answer"></p>
        </div>

        <div id="Beginning_Instructions">
            <p id="Instruction_Number_One">Click the button to display a random number between 1 and 100.</p>
            <p id="Instruction_Number_Two">Once you begin, you will be prompted to find the average of those 4 numbers that will pop up</p>
            <button onclick="Random_Number_Generator_and_Solver()">Try it</button>
            <p id="Testing Ground"> $$ (a-b)^2 $$</p>
        </div>

        <div id="Average">
            <div id="Average_Instructions" hidden>
                <p id="Average_Instructions_Number_Technical"> First let us try to find the sum of all of the random numbers.</p>
                <p id="Average_Instructions_Number_Simplified"> In short add them all up </p>
                <p id="Average_Sum_Value_Text">So the sum of all of those numbers is... <input id="User_Sum_of_Numbers"><button onclick="Sum_of_All_Numbers()">Is this my sum?</button></p>
                <p id="The_Sum_Is" hidden> Incorrect Please add them up again</p>
            </div>


            <div id="Average_Instructions_Part_2" hidden>
                <p id="Average_Instructions_Sample_Size"> How many numbers from the data set are we dealing with?<input id="User_Sample_Size">Is this my Sample Size?<button onclick="Sample_Size_for_Average()"> Check my Sample Size </button> </p>
                <p id="Incorrect_Sample_Size" hidden> Hint: How many numbers are in the first column?</p>
            </div>


            <div id="Average_Instructions_Part_3" hidden>
                <p id="Average_Instructions_Division"> So the actual average is the sum / sample size and that is <input id="User_Average"><button onclick="Continue_to_Deviations()"> Check my Average </button> </p>
                <p id="incorrect average" hidden>Sorry check that again</p>
            </div>
        </div>

        <div id="Deviation">
            <div id="Find_Deviation_1" hidden>
                <p id="Insert_Deviation_Equation_1"></p> <input id="User_Deviation_1"></input>
                <button onclick="First_Deviation()">Check It</button>
                <p id="Error_First_Deviation" hidden> Sorry that is not correct try again
            </div>

            <div id="Find_Deviation_2" hidden>
                <p id="Insert_Deviation_Equation_2"></p> <input id="User_Deviation_2"></input> <button onclick="Second_Deviation()">Check It</button>
                <p id="Error_Second_Deviation" hidden> Sorry that is not correct try again
            </div>

            <div id="Find_Deviation_3" hidden>
                <p id="Insert_Deviation_Equation_3"></p><input id="User_Deviation_3"></input>
                <button onclick="Third_Deviation()">Check It</button>
                <p id="Error_Third_Deviation" hidden> Sorry that is not correct try again
            </div>

            <div id="Find_Deviation_4" hidden>
                <p id="Insert_Deviation_Equation_4"></p><input id="User_Deviation_4"></input>
                <button onclick="Fourth_Deviation()">Check It</button>
                <p id="Error_Fourth_Deviation" hidden> Sorry that is not correct try again
            </div>
        </div>


        <div id="Deviations Squared">
            <div id="Find_Deviation_Squared_1">
                <p id="Insert_Deviation_Squared_Equation_1"></p> <input id="User_Deviation_Squared_1"></input>
                <button onclick="First_Deviation_Squared()">Check It</button>
                <p id="Error_First_Deviation_Squared" hidden> Sorry that is not correct try again
            </div>

            <div id="Find_Deviation_Squared_2" hidden>
                <p id="Insert_Deviation_Squared_Equation_2"></p> <input id="User_Deviation_Squared_2"></input> <button onclick="Second_Deviation_Squared()">Check It</button>
                <p id="Error_Second_Deviation_Squared" hidden> Sorry that is not correct try again
            </div>

            <div id="Find_Deviation_Squared_3" hidden>
                <p id="Insert_Deviation_Squared_Equation_3"></p><input id="User_Deviation_Squared_3"></input>
                <button onclick="Third_Deviation_Squared()">Check It</button>
                <p id="Error_Third_Deviation_Squared" hidden> Sorry that is not correct try again
            </div>

            <div id="Find_Deviation_Squared_4" hidden>
                <p id="Insert_Deviation_Squared_Equation_4"></p><input id="User_Deviation_Squared_4"></input>
                <button onclick="Fourth_Deviation_Squared()">Check It</button>
                <p id="Error_Fourth_Deviation_Squared" hidden> Sorry that is not correct try again
            </div>
        </div>

        <div id="Final Stage">
            <div id="Add Squared Deviations" hidden>
                <p> Now you need to find the sum of every number in the third column <input id="User_Sum_Squared_Deviations"><button onclick="Squared_Deviations_Sum()">Check it</button>
            </div>

            <div id="Divide By Sample Size" hidden>
                <p> Take the Sum of Squared Deviations and Divide that by the sample size <input id="Variance"><button onclick="Variance_Calculation()">Check it</p>
        </div>
        <div id="Take The Square Root" hidden>
            <p> This is the final stage, take the square root of your value. Round to 3 decimal places <input id="Standard_Deviation_User"><button onclick="Final_Stage()">Check it </button>
            </div>
        </div>
        <div id="Finished" hidden>
            <p> You have completed the course :)</p>
        </div>

        <div id="Background_Math" hidden>
            <p id="First_Random_Value"> <input id="First_Random_Value_Fixed"></p>
            <p id="First_Random_Deviation"><input id="First_Random_Deviation_Fixed"></p>
            <p id="First_Random_Deviation_Squared"><input id="First_Random_Deviation_Squared_Fixed"></p>
            <p id="Second_Random_Value"> <input id="Second_Random_Value_Fixed"></p>
            <p id="Second_Random_Deviation"> <input id="Second_Random_Deviation_Fixed"></p>
            <p id="Second_Random_Deviation_Squared"><input id="Second_Random_Deviation_Squared_Fixed"></p>
            <p id="Third_Random_Value"> <input id="Third_Random_Value_Fixed"></p>
            <p id="Third_Random_Deviation"><input id="Third_Random_Deviation_Fixed"></p>
            <p id="Third_Random_Deviation_Squared"><input id="Third_Random_Deviation_Squared_Fixed"></p>
            <p id="Fourth_Random_Value"> <input id="Fourth_Random_Value_Fixed"></p>
            <p id="Fourth_Random_Deviation"><input id="Fourth_Random_Deviation_Fixed"></p>
            <p id="Fourth_Random_Deviation_Squared"><input id="Fourth_Random_Deviation_Squared_Fixed"></p>
            <p id="Sum_of_All_Numbers_Value"> <input id="Sum_of_All_Numbers_Fixed"></p>
            <p id="Average_Value"> <input id="Average_Value_Fixed"></p>
            <p id="Sum_of_Squared_Deviations_Value"> <input id="Sum_of_Squared_Deviations_Fixed"></p>
            <p id="Variance_Value"> <input id="Variance_Value_Fixed"></p>
            <p id="Standard_Deviation_Value"> <input id="Standard_Deviation_Fixed"></p>
        </div>


        <script>
            function Random_Number_Generator_and_Solver() {
                var Random_Number_R1_C1 = Math.floor((Math.random() * 100) + 1);
                document.getElementById("Random_Number_1").innerHTML = Random_Number_R1_C1;
                document.getElementById("First_Random_Value_Fixed").value = Random_Number_R1_C1;
                var Random_Number_R2_C1 = Math.floor((Math.random() * 100) + 1);
                document.getElementById("Random_Number_2").innerHTML = Random_Number_R2_C1;
                document.getElementById("Second_Random_Value_Fixed").value = Random_Number_R2_C1;
                var Random_Number_R3_C1 = Math.floor((Math.random() * 100) + 1);
                document.getElementById("Random_Number_3").innerHTML = Random_Number_R3_C1;
                document.getElementById("Third_Random_Value_Fixed").value = Random_Number_R3_C1;
                var Random_Number_R4_C1 = Math.floor((Math.random() * 100) + 1);
                document.getElementById("Random_Number_4").innerHTML = Random_Number_R4_C1;
                document.getElementById("Fourth_Random_Value_Fixed").value = Random_Number_R4_C1;
                var Sum_of_Values = Random_Number_R1_C1 + Random_Number_R2_C1 + Random_Number_R3_C1 + Random_Number_R4_C1;
                document.getElementById("Sum_of_All_Numbers_Fixed").value = Sum_of_Values;
                var Average = Sum_of_Values / 4;
                document.getElementById("Average_Value_Fixed").value = Average;
                var Sum_of_Squared_Deviations = Math.pow((Random_Number_R1_C1 - Average), 2) + Math.pow((Random_Number_R2_C1 - Average), 2) + Math.pow((Random_Number_R3_C1 - Average), 2) + Math.pow((Random_Number_R4_C1 - Average), 2);
                document.getElementById("Sum_of_Squared_Deviations_Fixed").value = Sum_of_Squared_Deviations;
                var Variance = Sum_of_Squared_Deviations / 4;
                document.getElementById("Variance_Value_Fixed").value = Variance;
                var Standard_Deviation = Math.pow(Variance, .5);
                document.getElementById("Standard_Deviation_Fixed").value = Standard_Deviation;
                var Deviation_1 = Random_Number_R1_C1 - Average;
                document.getElementById("First_Random_Deviation_Fixed").value = Deviation_1;
                var Deviation_2 = Random_Number_R2_C1 - Average;
                document.getElementById("Second_Random_Deviation_Fixed").value = Deviation_2;
                var Deviation_3 = Random_Number_R3_C1 - Average;
                document.getElementById("Third_Random_Deviation_Fixed").value = Deviation_3;
                var Deviation_4 = Random_Number_R4_C1 - Average;
                document.getElementById("Fourth_Random_Deviation_Fixed").value = Deviation_4;
                var Deviation_1_Squared = Math.pow(Deviation_1, 2);
                document.getElementById("First_Random_Deviation_Squared_Fixed").value = Deviation_1_Squared;
                var Deviation_2_Squared = Math.pow(Deviation_2, 2);
                document.getElementById("Second_Random_Deviation_Squared_Fixed").value = Deviation_2_Squared;
                var Deviation_3_Squared = Math.pow(Deviation_3, 2);
                document.getElementById("Third_Random_Deviation_Squared_Fixed").value = Deviation_3_Squared;
                var Deviation_4_Squared = Math.pow(Deviation_4, 2);
                document.getElementById("Fourth_Random_Deviation_Squared_Fixed").value = Deviation_4_Squared;
                document.getElementById("Insert_Deviation_Equation_1").innerHTML = "Now let us calcululate your first deviation " + Random_Number_R1_C1 + " - " + Average;
                document.getElementById("Insert_Deviation_Equation_2").innerHTML = "Now let us calcululate your second deviation " + Random_Number_R2_C1 + " - " + Average;
                document.getElementById("Insert_Deviation_Equation_3").innerHTML = "Now let us calcululate your third deviation " + Random_Number_R3_C1 + " - " + Average;
                document.getElementById("Insert_Deviation_Equation_4").innerHTML = "Now let us calcululate your fourth deviation " + Random_Number_R4_C1 + " - " + Average;
                var squared = "<sup>2</sup>"
                document.getElementById("Insert_Deviation_Squared_Equation_1").innerHTML = "Now let us calcululate your first Deviation Squared $$ (" + Random_Number_R1_C1 + " - " + Average + ")^2 $$"
                document.getElementById("Insert_Deviation_Squared_Equation_2").innerHTML = "Now let us calcululate your second Deviation Squared (" + Random_Number_R2_C1 + " - " + Average + ")" + squared
                document.getElementById("Insert_Deviation_Squared_Equation_3").innerHTML = "Now let us calcululate your third Deviation Squared (" + Random_Number_R3_C1 + " - " + Average + ")" + squared
                document.getElementById("Insert_Deviation_Squared_Equation_4").innerHTML = "Now let us calcululate your fourth Deviation Squared (" + Random_Number_R4_C1 + " - " + Average + ")" + squared
                var x = document.getElementById("Beginning_Instructions");
                x.style.display = 'none';
                var x = document.getElementById("Average_Instructions");
                x.style.display = 'block';
            }

            function Sum_of_All_Numbers() {
                var User_Sum = document.getElementById("User_Sum_of_Numbers").value
                var Calc_Sum = document.getElementById("Sum_of_All_Numbers_Fixed").value
                if (User_Sum == Calc_Sum) {
                    var Show_Average_Part_2 = document.getElementById("Average_Instructions_Part_2")
                    Show_Average_Part_2.style.display = 'block'
                    var Hide_Average_Instructions = document.getElementById("Average_Instructions")
                    Hide_Average_Instructions.style.display = 'none'
                    var Fixed_Sum_Value = document.getElementById("Sum_of_All_Numbers_Fixed").value
                    document.getElementById("Sum_of_All_Numbers_For_User").innerHTML = "The sum of all the numbers is " + Fixed_Sum_Value
                } else {
                    var Incorrect = document.getElementById("The_Sum_Is")
                    Incorrect.style.display = 'block'
                }
            }

            function Sample_Size_for_Average() {
                var sample_size = document.getElementById("User_Sample_Size").value
                if (sample_size == 4) {
                    var Show_Average_Part_3 = document.getElementById("Average_Instructions_Part_3")
                    Show_Average_Part_3.style.display = 'block'
                    var Hide_Average_Part_2 = document.getElementById("Average_Instructions_Part_2")
                    Hide_Average_Part_2.style.display = 'none'
                    document.getElementById("Sample_Size_Is").innerHTML = "The Sample Size is " + sample_size
                } else {
                    var Show_Incorrect_Sample_Size = document.getElementById("Incorrect_Sample_Size")
                    Show_Incorrect_Sample_Size.style.display = 'block'
                }
            }

            function Continue_to_Deviations() {
                var User_Average = document.getElementById("User_Average").value
                var Actual_Average = document.getElementById("Average_Value_Fixed").value
                if (User_Average == Actual_Average) {
                    var Hide_Average_3 = document.getElementById("Average_Instructions_Part_3")
                    Hide_Average_3.style.display = 'none'
                    var Next_Section = document.getElementById("Find_Deviation_1")
                    Next_Section.style.display = 'block'
                    document.getElementById("Average_is").innerHTML = "The Average is " + Actual_Average
                } else {
                    var Incorrect = document.getElementById("incorrect average")
                    Incorrect.style.display = 'block'
                }
            }

            function First_Deviation() {
                var Exact = document.getElementById("First_Random_Deviation_Fixed").value
                var Student = document.getElementById("User_Deviation_1").value
                if (Exact == Student) {
                    var Show_Deviation_2 = document.getElementById("Find_Deviation_2")
                    Show_Deviation_2.style.display = 'block'
                    var hide_deviation_1 = document.getElementById("Find_Deviation_1")
                    hide_deviation_1.style.display = 'none'
                    document.getElementById("Deviation_1").innerHTML = Exact
                } else {
                    var Error_First_Deviation = document.getElementById("Error_First_Deviation")
                    Error_First_Deviation.style.display = 'none'
                }
            }

            function Second_Deviation() {
                var Exact = document.getElementById("Second_Random_Deviation_Fixed").value
                var Student = document.getElementById("User_Deviation_2").value
                if (Exact == Student) {
                    var Show_Deviation_2 = document.getElementById("Find_Deviation_3")
                    Show_Deviation_2.style.display = 'block'
                    var hide_deviation_1 = document.getElementById("Find_Deviation_2")
                    hide_deviation_1.style.display = 'none'
                    document.getElementById("Deviation_2").innerHTML = Exact
                } else {
                    var Error_First_Deviation = document.getElementById("Error_Second_Deviation")
                    Error_First_Deviation.style.display = 'none'
                }
            }

            function Third_Deviation() {
                var Exact = document.getElementById("Third_Random_Deviation_Fixed").value
                var Student = document.getElementById("User_Deviation_3").value
                if (Exact == Student) {
                    var Show_Deviation_2 = document.getElementById("Find_Deviation_4")
                    Show_Deviation_2.style.display = 'block'
                    var hide_deviation_1 = document.getElementById("Find_Deviation_3")
                    hide_deviation_1.style.display = 'none'
                    document.getElementById("Deviation_3").innerHTML = Exact
                } else {
                    var Error_First_Deviation = document.getElementById("Error_Third_Deviation")
                    Error_First_Deviation.style.display = 'none'
                }
            }

            function Fourth_Deviation() {
                var Exact = document.getElementById("Fourth_Random_Deviation_Fixed").value
                var Student = document.getElementById("User_Deviation_4").value
                if (Exact == Student) {
                    var Show_Deviation_2 = document.getElementById("Find_Deviation_Squared_1")
                    Show_Deviation_2.style.display = 'block'
                    var hide_deviation_1 = document.getElementById("Find_Deviation_4")
                    hide_deviation_1.style.display = 'none'
                    document.getElementById("Deviation_4").innerHTML = Exact
                } else {
                    var Error_First_Deviation = document.getElementById("Error_Fourth_Deviation")
                    Error_First_Deviation.style.display = 'none'
                }
            }

            function First_Deviation_Squared() {
                var Exact = document.getElementById("First_Random_Deviation_Squared_Fixed").value
                var Student = document.getElementById("User_Deviation_Squared_1").value
                if (Exact == Student) {
                    var Show_Deviation_2 = document.getElementById("Find_Deviation_Squared_2")
                    Show_Deviation_2.style.display = 'block'
                    var hide_deviation_1 = document.getElementById("Find_Deviation_Squared_1")
                    hide_deviation_1.style.display = 'none'
                    document.getElementById("Deviation_Squared_1").innerHTML = Exact
                } else {
                    var Error_First_Deviation = document.getElementById("Error_First_Deviation_Squared")
                    Error_First_Deviation.style.display = 'none'
                }
            }

            function Second_Deviation_Squared() {
                var Exact = document.getElementById("Second_Random_Deviation_Squared_Fixed").value
                var Student = document.getElementById("User_Deviation_Squared_2").value
                if (Exact == Student) {
                    var Show_Deviation_2 = document.getElementById("Find_Deviation_Squared_3")
                    Show_Deviation_2.style.display = 'block'
                    var hide_deviation_1 = document.getElementById("Find_Deviation_Squared_2")
                    hide_deviation_1.style.display = 'none'
                    document.getElementById("Deviation_Squared_2").innerHTML = Exact
                } else {
                    var Error_First_Deviation = document.getElementById("Error_Second_Deviation_Squared")
                    Error_First_Deviation.style.display = 'none'
                }
            }

            function Third_Deviation_Squared() {
                var Exact = document.getElementById("Third_Random_Deviation_Squared_Fixed").value
                var Student = document.getElementById("User_Deviation_Squared_3").value
                if (Exact == Student) {
                    var Show_Deviation_2 = document.getElementById("Find_Deviation_Squared_4")
                    Show_Deviation_2.style.display = 'block'
                    var hide_deviation_1 = document.getElementById("Find_Deviation_Squared_3")
                    hide_deviation_1.style.display = 'none'
                    document.getElementById("Deviation_Squared_3").innerHTML = Exact
                } else {
                    var Error_First_Deviation = document.getElementById("Error_Third_Deviation_Squared")
                    Error_First_Deviation.style.display = 'none'
                }
            }

            function Fourth_Deviation_Squared() {
                var Exact = document.getElementById("Fourth_Random_Deviation_Squared_Fixed").value
                var Student = document.getElementById("User_Deviation_Squared_4").value
                if (Exact == Student) {
                    var Show_Deviation_2 = document.getElementById("Add Squared Deviations")
                    Show_Deviation_2.style.display = 'block'
                    var hide_deviation_1 = document.getElementById("Find_Deviation_Squared_4")
                    hide_deviation_1.style.display = 'none'
                    document.getElementById("Deviation_Squared_4").innerHTML = Exact
                } else {
                    var Error_First_Deviation = document.getElementById("Error_Fourth_Deviation_Squared")
                    Error_First_Deviation.style.display = 'none'
                }
            }

            function Squared_Deviations_Sum() {
                var Exact = document.getElementById("Sum_of_Squared_Deviations_Fixed").value
                var Student = document.getElementById("User_Sum_Squared_Deviations").value
                if (Exact = Student) {
                    var hide_deviation_squared_1 = document.getElementById("Add Squared Deviations")
                    hide_deviation_squared_1.style.display = 'none'
                    var hide_divide_by_sample_size = document.getElementById("Divide By Sample Size")
                    hide_divide_by_sample_size.style.display = 'block'
                    document.getElementById("Sum_of_Squared_Deviations_is").innerHTML = "Sum of squared devations is " + Student
                }
            }

            function Variance_Calculation() {
                var Exact = document.getElementById("Variance_Value_Fixed").value
                var Student = document.getElementById("Variance").value
                if (Exact == Student) {
                    var hide = document.getElementById("Divide By Sample Size")
                    hide.style.display = 'none'
                    var show = document.getElementById("Take The Square Root")
                    show.style.display = 'block'
                    document.getElementById("Variance_is").innerHTML = "The Variance is " + Student
                }
            }
        </script>
    </body>

</html>

Я раскрыл раздел, который меня больше всего интересует. Как вы можете видеть, когдаВы загружаете код, id = Testing Area отрисовывает код нормально. Я попытался продублировать его в скрипте ниже ... На рисунке я бы показал весь код, который работает в браузере. Примечание: пришлось удалить паруфункции в конце этого из-за ограничения размера.

...