mathjaxを全画面で反映させたいが画面変更で反映されなくなる。

前提・実現したいこと

javascriptを使ってクイズのページを作成しています。
（追記）公式ページによれば動的環境での動作には表記の際に必要なメソッドがあることは理解しています。

発生している問題・エラーメッセージ

~~数学の問題を表示するためmathjaxを使用したのですが、問題が変わるごとに適用されません。~~
~~最初の問題は反応しているのでjavascriptの書く位置が悪いのかもしれません。~~
~~動的に表示するにはmathjax.typeset()を用いることはご教示いただき、~~
~~いろいろな位置に挿入しましたが問題文が表示されませんでした。~~
現在quiz_show()の最下段に入力されていますが問題文がクリックできなくなりました。

該当のソースコード(編集済み)

html
1<head>
2<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4'></script>
3<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
4<script type="text/x-mathjax-config">
5    MathJax.Hub.Config({
6      TeX: { equationNumbers: { autoNumber: "AMS" }},
7      tex2jax: {
8        inlineMath: [ ['$','$'], ["\(","\)"] ],
9        processEscapes: true
10      },
11      "HTML-CSS": { matchFontHeight: false },
12      displayAlign: "left",
13      displayIndent: "2em"
14    });
15  </script>
16<script>
17$(function(){
18    var quizArea = $('.quiz_area'); //クイズを管理するDOMを指定
19    var quiz_html = quizArea.html(); //もう一度　を押した時に元に戻すため初期HTMLを変数で保管
20    var quiz_cnt = 0; //現在の問題数を管理
21    var quiz_fin_cnt = 5; //何問で終了か設定（クイズ数以下であること）
22    var quiz_success_cnt = 0; //問題の正解数
23    
24    //クイズの配列を設定
25    //answerの選択肢の数はいくつでもOK　ただし先頭を正解とすること(出題時に選択肢はシャッフルされる)
26    var aryQuiz = [];
27    aryQuiz.push(
28        {
29            question : '次の式を微分しなさい。$f(x)=2x-3$',
30            answer : ['2', '1', '-3', '-2']
31        }
32        ,{
33            question : '次の式を微分しなさい。$f(x)=4x-7$',
34            answer : ['4', '1', '-7', '-4']
35        }
36        ,{
37            question : '次の式を微分しなさい。$f(x)=5x-10$',
38            answer : ['5', '1', '-10', '-5']
39        }
40        ,{
41            question : '次の式を微分しなさい。$f(x)=5x^2-10$',
42            answer : ['$10x$', '$5x$', '5', '-10']
43        }
44        ,{
45            question : '次の式を微分しなさい。$f(x)=-5x-20$',
46            answer : ['-5', '2', '1', '-20']
47        }
48    );
49    
50    quizReset();
51    
52    //回答を選択した後の処理
53    quizArea.on('click', '.quiz_ans_area ul li', function(){
54        //画面を暗くするボックスを表示（上から重ねて、結果表示中は選択肢のクリックやタップを封じる
55        quizArea.find('.quiz_area_bg').show();
56        //選択した回答に色を付ける
57        $(this).addClass('selected');
58        if($(this).data('true')){
59            //正解の処理 〇を表示
60            quizArea.find('.quiz_area_icon').addClass('true');
61            //正解数をカウント
62            quiz_success_cnt++;
63        }else{
64            //不正解の処理
65            quizArea.find('.quiz_area_icon').addClass('false');
66        }
67        setTimeout(function(){
68            //表示を元に戻す
69            quizArea.find('.quiz_ans_area ul li').removeClass('selected');
70            quizArea.find('.quiz_area_icon').removeClass('true false');
71            quizArea.find('.quiz_area_bg').hide();
72            //問題のカウントを進める
73            quiz_cnt++;
74            if(quiz_fin_cnt > quiz_cnt){
75                //次の問題を設定する
76                quizShow();
77            }else{
78                //結果表示画面を表示
79                quizResult();
80            }
81        }, 1500);
82    });
83    
84    //もう一度挑戦するを押した時の処理
85    quizArea.on('click', '.quiz_restart', function(){
86        quizReset();
87    });
88    
89    //リセットを行う関数
90    function quizReset(){
91        quizArea.html(quiz_html); //表示を元に戻す
92        quiz_cnt = 0;
93        quiz_success_cnt = 0;
94        aryQuiz = arrShuffle(aryQuiz); //毎回出題の順番をシャッフルしたい場合はここのコメントを消してね
95        quizShow();
96    }
97    
98    //問題を表示する関数
99    function quizShow(){
100        //何問目かを表示
101        quizArea.find('.quiz_no').text((quiz_cnt + 1));
102        //問題文を表示
103        quizArea.find('.quiz_question').text(aryQuiz[quiz_cnt]['question']);
104        //正解の回答を取得する
105        var success = aryQuiz[quiz_cnt]['answer'][0];
106        //現在の選択肢表示を削除する
107        quizArea.find('.quiz_ans_area ul').empty();
108        //問題文の選択肢をシャッフルさせる(自作関数) .concat()は参照渡し対策
109        var aryHoge = arrShuffle(aryQuiz[quiz_cnt]['answer'].concat());
110        //問題文の配列を繰り返し表示する
111        $.each(aryHoge, function(key, value){
112            var fuga = '<li>' + value + '</li>';
113            //正解の場合はdata属性を付与する
114            if(success === value){
115                fuga = '<li data-true="1">' + value + '</li>';
116            }
117            quizArea.find('.quiz_ans_area ul').append(fuga);
118        });
119　　　mathjax.typeset()//追記しました。
120    }
121    
122    //結果を表示する関数
123    function quizResult(){
124        quizArea.find('.quiz_set').hide();
125        var text = quiz_fin_cnt + '問中' + quiz_success_cnt + '問正解！';
126        if(quiz_fin_cnt === quiz_success_cnt){
127            text += '<br>全問正解おめでとう！';
128        }
129        text += '<br><input type="button" value="もう一度挑戦する" class="quiz_restart p-10">';
130        quizArea.find('.quiz_result').html(text);
131        quizArea.find('.quiz_result').show();
132    }
133    
134    //配列をシャッフルする関数
135    function arrShuffle(arr){
136        for(i = arr.length - 1; i > 0; i--){
137            var j = Math.floor(Math.random() * (i + 1));
138            var tmp = arr[i];
139            arr[i] = arr[j];
140            arr[j] = tmp;
141        }
142        return arr;
143    }
144});
145</script>
146<link rel="stylesheet" href="quiz1.css">
147</head>
148<div class="quiz_area">
149    <div class="quiz_set">
150        第<span class="quiz_no">0</span>問
151        <div class="quiz_question"></div>
152        <div class="quiz_ans_area">
153            <ul></ul>
154        </div>
155        <div class="quiz_area_bg"></div>
156        <div class="quiz_area_icon"></div>
157    </div>
158    <div class="quiz_result"></div>
159</div>

試したこと

~~問題文に対してのjavascriptの位置を変更しましたが変わりませんでした。~~
mathjax.typeset()の位置を変更するとそれ以降で動かなくなってしまう。

行動規範の内容に同意します

回答2件

自己解決

mathjaxで作成が自力では不可能だったのでKateXに変更し実装した。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8"/>
5<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
6<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/katex.min.css" integrity="sha384-6LkG2wmY8FK9E0vU9OOr8UvLwsaqUg9SETfpq4uTCN1agNe8HRdE9ABlk+fVx6gZ" crossorigin="anonymous">
7<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/katex.min.js" integrity="sha384-31El76TwmbHj4rF9DyLsygbq6xoIobG0W+jqXim+a3dU9W53tdH3A/ngRPxOzzaB" crossorigin="anonymous"></script>
8<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"></script>
9  <script>
10  $(function(){
11    var quizArea = $('.quiz_area'); //クイズを管理するDOMを指定
12    var quiz_html = quizArea.html(); //もう一度　を押した時に元に戻すため初期HTMLを変数で保管
13    var quiz_cnt = 0; //現在の問題数を管理
14    var quiz_fin_cnt = 5; //何問で終了か設定（クイズ数以下であること）
15    var quiz_success_cnt = 0; //問題の正解数
16    
17    //クイズの配列を設定
18    //answerの選択肢の数はいくつでもOK　ただし先頭を正解とすること(出題時に選択肢はシャッフルされる)
19    var aryQuiz = [];
20    aryQuiz.push(
21        {
22            question : '次の式を微分しなさい。$f(x)=2x-3$',
23            answer : ['2', '1', '-3', '-2']
24        }
25        ,{
26            question : '次の式を微分しなさい。$f(x)=4x-7$',
27            answer : ['4', '1', '-7', '-4']
28        }
29        ,{
30            question : '次の式を微分しなさい。$f(x)=5x-10$',
31            answer : ['5', '1', '-10', '-5']
32        }
33        ,{
34            question : '次の式を微分しなさい。$f(x)=5x-10$',
35            answer :['5', '1', '-10', '-5']
36        }
37        ,{
38            question : '次の式を微分しなさい。$f(x)=5x-10$',
39            answer : ['5', '1', '-10', '-5']
40        }
41    );
42    
43    quizReset();
44    
45    //回答を選択した後の処理
46    quizArea.on('click', '.quiz_ans_area ul li', function(){
47        //画面を暗くするボックスを表示（上から重ねて、結果表示中は選択肢のクリックやタップを封じる
48        quizArea.find('.quiz_area_bg').show();
49        //選択した回答に色を付ける
50        $(this).addClass('selected');
51        if($(this).data('true')){
52            //正解の処理 〇を表示
53            quizArea.find('.quiz_area_icon').addClass('true');
54            //正解数をカウント
55            quiz_success_cnt++;
56        }else{
57            //不正解の処理
58            quizArea.find('.quiz_area_icon').addClass('false');
59        }
60        setTimeout(function(){
61            //表示を元に戻す
62            quizArea.find('.quiz_ans_area ul li').removeClass('selected');
63            quizArea.find('.quiz_area_icon').removeClass('true false');
64            quizArea.find('.quiz_area_bg').hide();
65            //問題のカウントを進める
66            quiz_cnt++;
67            if(quiz_fin_cnt > quiz_cnt){
68                //次の問題を設定する
69                quizShow();
70                renderMathInElement(document.body, {delimiters: [
71        {left: "\[", right: "\]", display: true},
72        {left: "$", right: "$", display: false}
73      ]});
74            }else{
75                //結果表示画面を表示
76                quizResult();
77            }
78        }, 1500);
79    });
80    
81    //もう一度挑戦するを押した時の処理
82    quizArea.on('click', '.quiz_restart', function(){
83        quizReset();
84    });
85    
86    //リセットを行う関数
87    function quizReset(){
88        quizArea.html(quiz_html); //表示を元に戻す
89        quiz_cnt = 0;
90        quiz_success_cnt = 0;
91        aryQuiz = arrShuffle(aryQuiz); //毎回出題の順番をシャッフルしたい場合はここのコメントを消してね
92        quizShow();
93    }
94    
95    //問題を表示する関数
96    function quizShow(){
97        //何問目かを表示
98        quizArea.find('.quiz_no').text((quiz_cnt + 1));
99        //問題文を表示
100        quizArea.find('.quiz_question').text(aryQuiz[quiz_cnt]['question']);
101        //正解の回答を取得する
102        var success = aryQuiz[quiz_cnt]['answer'][0];
103        //現在の選択肢表示を削除する
104        quizArea.find('.quiz_ans_area ul').empty();
105        //問題文の選択肢をシャッフルさせる(自作関数) .concat()は参照渡し対策
106        var aryHoge = arrShuffle(aryQuiz[quiz_cnt]['answer'].concat());
107        //問題文の配列を繰り返し表示する
108        $.each(aryHoge, function(key, value){
109            var fuga = '<li>' + value + '</li>';
110            //正解の場合はdata属性を付与する
111            if(success === value){
112                fuga = '<li data-true="1">' + value + '</li>';
113            }
114            quizArea.find('.quiz_ans_area ul').append(fuga);
115        
116        });
117    }
118    
119    //結果を表示する関数
120    function quizResult(){
121        quizArea.find('.quiz_set').hide();
122        var text = quiz_fin_cnt + '問中' + quiz_success_cnt + '問正解！';
123        if(quiz_fin_cnt === quiz_success_cnt){
124            text += '<br>全問正解おめでとう！';
125        }
126        text += '<br><input type="button" value="もう一度挑戦する" class="quiz_restart p-10">';
127        quizArea.find('.quiz_result').html(text);
128        quizArea.find('.quiz_result').show();
129    }
130    
131    //配列をシャッフルする関数
132    function arrShuffle(arr){
133        for(i = arr.length - 1; i > 0; i--){
134            var j = Math.floor(Math.random() * (i + 1));
135            var tmp = arr[i];
136            arr[i] = arr[j];
137            arr[j] = tmp;
138        }
139        return arr;
140    }
141});
142</script>
143<link rel="stylesheet" href="quiz1.css">
144</head>
145<body>
146<div class="quiz_area">
147    <div class="quiz_set">
148        第<span class="quiz_no">0</span>問
149        <div class="quiz_question"></div>
150        <div class="quiz_ans_area">
151            <ul></ul>
152        </div>
153        <div class="quiz_area_bg"></div>
154        <div class="quiz_area_icon"></div>
155    </div>
156    <div class="quiz_result"></div>
157</div>
158<script>
159    document.addEventListener("DOMContentLoaded", function() {
160      renderMathInElement(document.body, {delimiters: [
161        {left: "\[", right: "\]", display: true},
162        {left: "$", right: "$", display: false}
163      ]});
164    });
165    </script>
166</body>