初めてのクイズゲーム、処理が遅いです。

前提・実現したいこと

JavaScriptで初めてクイズゲームを作りました。
動いてはくれたのですが、動作が重くて（？）10問ほどで遅くなってしまいます。

実現したい挙動は
「配列からランダムに問題文を取り出して表示→回答→答えと回答が一致しているなら次の問題へ、していないならもう一度その問題→全問答えたらもう一度シャッフルして第一問から」
です。

クイズに答える度に関数 mondai() が２回実行されている（？）と思い、関数を一度だけ実行する方法を調べて試してみたのですが、上手くいきませんでした。

どうすれば速い処理ができるでしょうか？
加えて、その他の良くない点についても指摘していたただけると幸いです。

勉強を始めて数日の初学者故、見当違いな質問をしているかもしれませんが、どうかお力添えお願い致します。

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

エラーメッセージ

該当のソースコード

JavaScript
1
2<!DOCTYPE HTML>
3
4<html lang="japa">
5<head>
6  <meta charset="utf-8">
7  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
8  <title>練習</title>
9  <audio src="correct1.mp3" id="correct1"></audio>
10  <audio src="incorrect1.mp3" id="incorrect1"></audio>
11  <style>
12  body{
13    background-color: #222;
14  }
15
16  #question{
17    margin:  100px auto 70px;
18    background: green;
19    width: 600px;
20    height: 174px;
21    border-radius: 0 12px 12px 12px;
22    position: relative;
23    box-shadow: 1px 1px 2px 0px #3f1,-1px -1px 1px 0px #3f1, 0px 0px 500px 0px #3f1;
24  }
25
26  #question_number{
27    color: #fff;
28    position: absolute;
29    background-color: green;
30    height: 45px;
31    width: 150px;
32    top: -45px;
33    border-radius: 12px 12px 0 0;
34    text-align: center;
35    font-size: 23px;
36    text-shadow: 0 0 50px #3f1, 0 0 30px #3f1;
37    box-shadow: 1px -1px 2px 0px #3f1, -1px -1px 2px 0px #3f1;
38    line-height: 45px;
39    vertical-align: middle;
40  }
41
42  #sentence{
43    color: #fff;
44    position: absolute;
45    top: 50%;
46    left: 50%;
47    width: 540px;
48    transform: translate(-50%,-50%);
49    font-size: 17.2px;
50    text-align: center;
51  }
52
53  #answer{
54    margin-left: 50%;
55    transform: translateX(-50%);
56    background: green;
57    width: 400px;
58    height: 80px;
59    box-shadow: 0px 0px 500px 0px #3f1;
60    line-height: 80px;
61    vertical-align: middle;
62    font-size: 18px;
63    text-align: center;
64  }
65
66
67
68  #button{
69    margin: 20px auto;
70    background: linear-gradient(#6795fd 0%, #67ceff 100%);
71    border-bottom: solid 5px #5e7fca;
72    border-radius: 4px;
73    width: 180px;
74    height: 50px;
75    line-height: 50px;
76    vertical-align:middle;
77    text-align: center;
78    font-size: 26px;
79    cursor: pointer;
80    color: #222;
81  }
82
83  #button:active{
84    transform: translateY(5px);
85    border-bottom: none;
86  }
87
88  #button:active + #attention{
89    transform: translateY(5px);
90  }
91
92  #attention{
93    color: #bbb;
94    font-size: 10px;
95  }
96  </style>
97</head>
98<body>
99
100  <div id="question">
101    <div id="question_number">第<span id="num"></span>問</div>
102    <div id="sentence">
103    </div>
104  </div>
105  <input type="text" id="answer">
106  <div id="button">OK</div>
107
108  <div id="attention">漢字は正しく入力してください。</div>
109
110  <script>
111  //問題文と答えの2次元配列↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
112  var que = [
113    ["「天地創造」「最後の審判」の作者を答えよ。","ミケランジェロ",],
114    ["マキァヴェリの著作において、「君主論」の他に何があるか。","ローマ史論"],
115    ["「聖フランチェスコの生涯」の作者を答えよ。","ジョット"],
116    ["サンタ＝マリア大聖堂を完成させた人物を答えよ。","ブルネレスキ"],
117    ["「太陽の都」の作者を答えよ。","カンパネラ"],
118    ["トマス＝モアの代表作を答えよ。","ユートピア"],
119    ["「カンタベリ物語」の著者を答えよ。","チョーサー"],
120    ["チョーサーの代表作を答えよ。","カンタベリ物語"],
121    ["ドン・キホーテの作者が参加した戦争をなんというか。","レパントの海戦"],
122    ["西欧人にとっての伝説のキリスト教国を支配していたとされるのは誰か。","プレスター＝ジョン"],
123    ["1498年カリカットに到達したポルトガル人を答えよ。","ヴァスコ＝ダ＝ガマ"],
124    ["ニューファンドランドを探検したイタリアの探検家を答えよ。","カボット"],
125    ["パナマ地峡を横断したスペインの探検家を答えよ。","バルボア"],
126    ["史上２番目に世界周航を達成した人物を答えよ","ドレーク"],
127    ["スペインのフィリピン経営の拠点としてマニラを建設した人物を答えよ。","レガスピ"],
128    ["大航海時代、スペイン領とポルトガル領を分けた条約を答えよ","トルデシリャス条約"],
129    ["トルデシリャス条約締結の一年前、教皇子午線を設置した人物を答えよ。","アレクサンデル６世"],
130    ["大航海時代、西欧諸国が主に用いた船舶の種類を答えよ。","ガレオン船"],
131    ["プランテーションはラテンアメリカでは何という名で普及したか。","アシエンダ制"],
132    ["新大陸の発見後に栄えたスペインの開港都市を答えよ。","セビリャ"],
133    ["宗教改革を引き起こした免罪符の発行をした人物を答えよ。","レオ１０世"],
134    ["ルターの代表的著作を答えよ。","キリスト者の自由"],
135  ];
136  //↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
137
138
139  //シャッフルの関数↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
140  function shuffle(array) {
141    var n = array.length, t, i;
142
143    while (n) {
144      i = Math.floor(Math.random() * n--);
145      t = array[n];
146      array[n] = array[i];
147      array[i] = t;
148    }
149
150    return array;
151  }
152  //↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
153
154
155  //メインの処理↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
156  $(function(){
157
158    var count = 1;
159    var mondai = function(){
160      if (count < que.length+1) {
161
162        console.log(count);
163
164        $("#answer").focus();
165        $("#num").text(count);
166        $("#sentence").text(que[count-1][0]);
167
168        $("#answer").keypress(function(){
169          var enter = event.keyCode;
170          if(enter === 13){
171            var $a = $("#answer").val();
172            $("#answer").val("");
173            if ($a === que[count-1][1]) {
174              $("#correct1")[0].play();
175              count += 1;
176            }
177              mondai();
178          }
179        });
180
181        $("#button").click(function(){
182          var $a = $("#answer").val();
183          $("#answer").val("");
184          if ($a === que[count-1][1]) {
185            $("#correct1")[0].play();
186            count += 1;
187          }
188          mondai();
189        });
190
191      } else {
192        location.reload();
193      }
194    }
195    shuffle(que);
196      mondai();
197  });
198
199  //↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
200  </script>
201</body>
202</html>
203
204