Q&A
JSONデータのカッコの対応が正しくないのですが、それは意図通りでしょうか？
前提・実現したいこと
クイズの表示ページを作成しているのですが、
chrome上では動作するページがsafari(予定ではipadで使用)で動作しません。
発生している問題
chrome上では動作しているのでコードに問題はないと思うのですが、
どのようにすればよいかわかりません。
エラー等は出ておらず、クイズ画面が表示されません。
色々と試行錯誤をしていたので、怪しいのですが
以前はIOSでも動作していた記憶があります。
該当のソースコード
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/katex.min.css" integrity="sha384-6LkG2wmY8FK9E0vU9OOr8UvLwsaqUg9SETfpq4uTCN1agNe8HRdE9ABlk+fVx6gZ" crossorigin="anonymous"> <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> <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> <link rel="stylesheet" href="quiz1.css"> </head> <body> <div class="timerzone"> <p id="timer">00:03</p> </div> <div class="quiz_area"> <div class="quiz_set"> 第<span class="quiz_no">0</span>問 <div class="quiz_question"></div> <div class="quiz_ans_area"> <ul></ul> </div> <div class="quiz_area_bg"></div> <div class="quiz_area_icon"></div> </div> <div class="quiz_result"> <script src="./main.js"></script> </div> </div> <script> var ans =[]; var quiz_success_cnt = 0; //問題の正解数 var qA = $('.quiz_area'); //クイズを管理するDOMを指定 var quiz_html = qA.html(); //もう一度 を押した時に元に戻すため初期HTMLを変数で保管 var qC = 0; //現在の問題数を管理 var url = './data.json' $(function(){ $.getJSON(url, (data) =>{ //問題を表示する関数 function quizShow(){ //何問目かを表示 qA.find('.quiz_no').text((qC + 1)); //問題文を表示 qA.find('.quiz_question').text(data[qC].question); //正解の回答を取得する var success = data[qC].answer[0]; //現在の選択肢表示を削除する qA.find('.quiz_ans_area ul').empty(); //問題文の選択肢をシャッフルさせる(自作関数) .concat()は参照渡し対策 var aryHoge = arrShuffle(data[qC].answer.concat()); //問題文の配列を繰り返し表示する $.each(aryHoge, function(key, value){ var fuga = '<li>' + value + '</li>'; //正解の場合はdata属性を付与する if(success === value){ fuga = '<li data-true="1">' + value + '</li>'; } qA.find('.quiz_ans_area ul').append(fuga); }); } //リセットを行う関数 function quizReset(){ qA.html(quiz_html); //表示を元に戻す qC = 0; quiz_success_cnt = 0; data = arrShuffle(data); //毎回出題の順番をシャッフル quizShow(); } //回答を選択した後の処理 qA.on('click', '.quiz_ans_area ul li', function(){ //画面を暗くするボックスを表示（上から重ねて、結果表示中は選択肢のクリックやタップを封じる qA.find('.quiz_area_bg').show(); //選択した回答に色を付ける $(this).addClass('selected'); if($(this).data('true')){ //正解の処理 〇を表示 qA.find('.quiz_area_icon').addClass('true'); //正解数をカウント quiz_success_cnt++; ans.push([data[qC].Number,1]) }else{ //不正解の処理 qA.find('.quiz_area_icon').addClass('false'); ans.push([data[qC].Number,0]) } setTimeout(function(){ //表示を元に戻す qA.find('.quiz_ans_area ul li').removeClass('selected'); qA.find('.quiz_area_icon').removeClass('true false'); qA.find('.quiz_area_bg').hide(); //問題のカウントを進める qC++; quizShow(); renderMathInElement(document.body, {delimiters: [ {left: "\[", right: "\]", display: true}, {left: "$", right: "$", display: false} ]}); }, 1500) }); //もう一度挑戦するを押した時の処理 qA.on('click', '.quiz_restart', function(){ quizReset(); }); //結果を表示する関数 function quizResult(){ qA.find('.quiz_set').hide(); ans.sort(function(a,b){return(a[0] - b[0]);}); var text = qC -1 + '問中' + quiz_success_cnt + '問正解！'+ ans; if(quiz_fin_cnt - 1 === quiz_success_cnt){ text += '<br>全問正解おめでとう！'; } text += '<br><input type="button" value="もう一度挑戦する" class="quiz_restart p-10">'; qA.find('.quiz_result').html(text); qA.find('.quiz_send').show(); } //配列をシャッフルする関数 function arrShuffle(arr){ for(i = arr.length - 1; i > 0; i--){ var j = Math.floor(Math.random() * (i + 1)); var tmp = arr[i]; arr[i] = arr[j]; arr[j] = tmp; } return arr; } quizReset(); }); }); </script> <script> var start; var timer_id; var qA = $('.quiz_area'); document.addEventListener("DOMContentLoaded", function() { renderMathInElement(document.body, {delimiters: [ {left: "\[", right: "\]", display: true}, {left: "$", right: "$", display: false} ]}); start = start_timer(); function start_timer() { timer_id = setInterval(count_down, 1000); } var time = 3; var min = 0; var sec = 0; var timer = document.getElementById("timer"); timer.innerHTML = "00:10"; function count_down() { if (time > 0) { var min = Math.floor(time / 60); var sec = time % 60; time--; if (sec >= 0 && sec < 10) { timer.innerHTML = "0" + min + ":0" + sec; } else { timer.innerHTML = "0" + min + ":" + sec; } } else if (time === 0) { /*修正しました*/ timer.innerHTML = "TIME UP!"; clearInterval(timer_id); qA.find('.quiz_set').hide(); ans.sort(function(a,b){return(a[0] - b[0]);}); var text = qC + '問中' + quiz_success_cnt + '問正解！'; if(qC === quiz_success_cnt){ text += '<br>全問正解おめでとう！'; } text += '<form action="/formtest2.cgi" method="GET"><input type="hidden" name = "text" id="ans" value=""><button id="send">送信</button><div id="return"></form>'; qA.find('.quiz_result').html(text); document.getElementById("ans").value=ans qA.find('.quiz_result').show(); console.log(ans); } } }); </script> </body> </html>
[ {"Number":"1","question" : "次の式を微分しなさい。$f(x)=2x-3$","answer" : ["2", "1", "-3", "-2"]}, {"Number":"2","question" : "次の式を微分しなさい。$f(x)=4x-7$","answer" : ["4", "1", "-7", "-4"]}, {"Number":"3","question" : "次の式を微分しなさい。$f(x)=5x-10$","answer" : ["5", "1", "-10", "-5"]}, {"Number":"4","question" : "次の式を微分しなさい。$f(x)=5x-10$","answer" : ["5", "1", "-10", "-5"]}, {"Number":"5","question" : "次の式を微分しなさい。$f(x)=5x-10$","answer" : ["5", "1", "-10", "-5"]} ]
試したこと
Chromeでは動作しているので、エラーは出ていませんが、
window.onloadは動作しないという記事を見つけました。
ご指摘ありがとうございます。
現状chromeでは動作しているので問題ないと考えているのですが、具体的にどこが正しくないでしょうか。
ご確認よろしくお願いします。
回答2件
0
JavaScriptをそのブラウザのデバッグ機能を使わずに開発するのはかなりの苦行なので、
まずは
iOS Safari デバッグ+ 開発に使用しているOS名
で検索して、デバッグ環境を整えてはいかがでしょうか。
投稿2021/10/18 15:34
総合スコア18713
0
とりあえずsafariやIEはアロー関数は使えないですね
javascript
1$.getJSON(url, (data) =>{ 2↓↓↓ 3$.getJSON(url, function(data){
jQueryは互換性重視なので最新のモダンブラウザを前提としても
アロー関数を使うのはやめましょう
投稿2021/10/18 08:26
編集2021/10/18 08:27
総合スコア114833
あなたの回答
tips
プレビュー
