質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • JavaScript

    16331questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Monaca

    975questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

monaca クイズ アプリ “.js”ファイル中の問題が読み込めない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 424

raaarta

score 4

 前提・実現したいこと

こんにちは。
クイズ アプリの作成の際、jsファイルに記入された問題文が画面側に表示できません。
解決方法をご存知の方、手数ですがアドバイス頂けましたらありがたいです。


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

問題文が読み込めていない状態の画像です。
イメージ説明

 該当のソースコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.theme-1.1.1.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" />
        <link rel="stylesheet" href="css/quiz.css"/>

        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

        <script src="js/custom-scripting.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

        <script src="js/quiz.js"></script>

        <title>quiz47</title>
    </head>
    <body>
        <!--  =====▽▽この下にページごとの処理を記述します▽▽===== -->
        <!--  ============================ページ区切り[スタート]============================ -->
        <div data-role="page" id="topPage">

            <div data-role="header">
                <h1>Quiz47</h1>
            </div>

            <div data-role="content">
                <div style="text-align:center;">
                    <h1>47都道府県クイズ</h1>
                    <img src="images/japan.gif" style="width: 50%">
                </div>
                <a data-role="button" href="#questionPage">スタート</a>
            </div>

            <div data-role="footer">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#scorePage" data-icon="info" data-rel="dialog">正解率</a></li>
                    </ul>
                </div>
            </div>

        </div>


        <!--  ============================ページ区切り[問題]============================ -->
        <div data-role="page" id="questionPage">

            <div data-role="header">
                <a href="#topPage" data-icon="home">トップ</a>
                <h1>問題</h1>
            </div>

            <div data-role="content">
                <h1 style="text-align:center;">
                    次の中で<br />
                    面積が<br />
                    一番広いのは?
                </h1>
                <ul data-role="listview" data-inset="true" id="questionList">
                    <li><a href="#answerPage" id="1"></a></li>
                    <li><a href="#answerPage" id="2"></a></li>
                    <li><a href="#answerPage" id="3"></a></li>
                </ul>
            </div>

        </div>

        <!--  ============================ページ区切り[解答]============================ -->
        <div data-role="page" id="answerPage">

            <div data-role="header">
                <a href="#topPage" data-icon="home">トップ</a>
                <h1>解答</h1>
            </div>

            <div data-role="content">
                <h1 style="text-align:center;" id="judge"></h1>

                <table style="font-size:1.5em">
                    <tr>
                        <td>1位:</td>
                        <td id="todofuken1"></td>
                        <td class="areaSize" id="areaSize1"></td>
                    </tr>
                    <tr>
                        <td>2位:</td>
                        <td id="todofuken2"></td>
                        <td class="areaSize" id="areaSize2"></td>
                    </tr>
                    <tr>
                        <td>3位:</td>
                        <td id="todofuken3"></td>
                        <td class="areaSize" id="areaSize3"></td>
                    </tr>
                </table>
                <p>
                    <a data-role="button" id="nextButton" href="#questionPage">
                        次の問題
                    </a>
            </p>
            </div>

        </div>

        <!--  ============================ページ区切り[正解率]============================ -->
        <div data-role="page" id="scorePage">

            <div data-role="header">
                <h1>正解率</h1>
            </div>

            <div data-role="content">
                <table>
                    <tr>
                        <td style="width: 6em;">解答数</td>
                        <td id="totalQuestion"></td>
                    </tr>
                    <tr>
                        <td>正解数</td>
                        <td id="correctAnswer"></td>
                    </tr>
                    <tr>
                        <td>正解率</td>
                        <td id="correctRatio"></td>
                    </tr>
                </table>
                <a data-role="button" href="#topPage">
                    閉じる
                </a>
            </div>

        </div>
        <!--  ===================================================================================== -->

    </body>

</html>

 quiz.js です (04/23ご指摘を受け追記)

// ===========================================
// 47都道府県クイズ JavaScript
// ===========================================

//  ============アプリ共通変数の定義============

//グローバルオブジェクト(空オブジェクト)
var MYQUIZ = {};

//都道府県データ(名称、面積(平方km))
MYQUIZ.todofuken = [
    ["北海道", "83457"],["青森県", "9644"],  ["岩手県", "15279"], 
    ["宮城県", "7286"], ["秋田県", "11636"], ["山形県", "9323"],
    ["福島県", "13783"],["茨城県", "6096"],  ["栃木県", "6408"],
    ["群馬県", "6363"], ["埼玉県", "3797"],  ["千葉県", "5157"],
    ["東京都", "2188"], ["神奈川県", "2416"],["新潟県", "12584"],
    ["富山県", "4248"], ["石川県", "4186"],  ["福井県", "4190"],
    ["山梨県", "4465"], ["長野県", "13562"], ["岐阜県", "10621"],
    ["静岡県", "7780"], ["愛知県", "5165"],  ["三重県", "5777"],
    ["滋賀県", "4017"], ["京都府", "4613"],  ["大阪府", "1898"],
    ["兵庫県", "8396"], ["奈良県", "3691"],  ["和歌山県","4726"],
    ["鳥取県", "3507"], ["島根県", "6708"],  ["岡山県", "7113"],
    ["広島県", "8479"], ["山口県", "6113"],  ["徳島県", "4147"],
    ["香川県", "1877"], ["愛媛県", "5678"],  ["高知県", "7105"],
    ["福岡県", "4977"], ["佐賀県", "2440"],  ["長崎県", "4105"],
    ["熊本県", "7405"], ["大分県", "6340"],  ["宮崎県", "7736"],
    ["鹿児島県","9189"],["沖縄県", "2276"]
];

//スコアの初期化
if(!localStorage.totalQuestion){
    localStorage.totalQuestion = 0;
    localStorage.correctAnswer = 0;
}

//  =====▽▽この下にページごとの処理を記述します▽▽=====

//  ============ページ区切り[問題]============
$(document).on("pageinit", "#questionPage", function(){

   //画面表示時の処理
    $("#questionPage").on("pageshow", function() {

        var randNum = new Array(3);

        //0から46までの重複のない整数を3つ取得
        do{
            for(var i = 0; i < randNum.length ; i++){
                randNum[i] = Math.floor(Math.random() * 47);
            }
        }while(MYQUIZ.isDuplicate(randNum));

        //問題を表示       
        $("#1").html(MYQUIZ.todofuken[randNum[0]][0]);
        $("#2").html(MYQUIZ.todofuken[randNum[1]][0]);
        $("#3").html(MYQUIZ.todofuken[randNum[2]][0]);

        //都道府県番号をsessionStorageに保存     
        sessionStorage.randNum1 = randNum[0];
        sessionStorage.randNum2 = randNum[1];
        sessionStorage.randNum3 = randNum[2];
    });

    //都道府県名の選択時の処理
    $("#questionList a").on("click", function() {
        var selectedId = $(this).attr("id");
        sessionStorage.selectedNumber = sessionStorage["randNum" + selectedId];
    });

});

//配列内の値の重複を確認
MYQUIZ.isDuplicate = function(array){
    array.sort();
    for(var i = 0; i < (array.length - 1); i++){
        if(array[i] === array[i + 1]) return true;
    }
    return false;
} 


//  ============ページ区切り[解答]============
$(document).on("pageinit", "#answerPage", function(){

    //画面表示時の処理
    $("#answerPage").on("pageshow", function() {
        var selectedNum = sessionStorage.selectedNumber;
        var randNum = new Array(3);
        randNum[0] = sessionStorage.randNum1;
        randNum[1] = sessionStorage.randNum2;
        randNum[2] = sessionStorage.randNum3;

        var questionData = new Array(3);
        for(var i = 0; i < questionData.length; i++){
            questionData[i] = new Array(2);
            questionData[i][0] = MYQUIZ.todofuken[randNum[i]][0];
            questionData[i][1] = MYQUIZ.todofuken[randNum[i]][1];
        }
        questionData.sort(MYQUIZ.arraySort);

        //正誤の判定と表示
        if(questionData[0][0] === MYQUIZ.todofuken[selectedNum][0]){
            $("#judge").html("正解").css("color","green");
            localStorage.correctAnswer++;
        }else{
            $("#judge").html("ハズレ").css("color","red");
        }

        //ランキング表示
        for(var i = 0; i < questionData.length; i++){
            $("#todofuken" + (i+1) ).html(questionData[i][0]);
            $("#areaSize" + (i+1) ).html(questionData[i][1] + "平方Km");
        }

        //総解答数の更新
        localStorage.totalQuestion++;
    });
});

//2次元配列ソート(並べ替え)用の関数
MYQUIZ.arraySort = function(a, b){
    return b[1] - a[1];
}

//  ============ページ区切り[正解率]============
$(document).on("pageinit", "#scorePage", function(){

   //画面表示時の処理
    $("#scorePage").on("pageshow", function() {
       $("#totalQuestion").html(localStorage.totalQuestion); 
       $("#correctAnswer").html(localStorage.correctAnswer);
       var ratio = Math.floor((localStorage.correctAnswer / localStorage.totalQuestion) * 100);
       $("#correctRatio").html(ratio + "%"); 
    });

});

 試したこと

旧ファイル名"quiz.index"のままになっている個所があるかと思い、プログラム内を検索しましたが、ありませんでした。

 補足情報(FW/ツールのバージョンなど)

本のプログラムダウンロードサイト
http://ec.nikkeibp.co.jp/nsp/dl/09617/index.shtml
Link

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • haru_hime

    2018/04/26 00:22

    翻訳:安全でないスクリプト 'http://code.jquery.com/jquery-1.7.1.min.js&#039;を要求しました。このリクエストはブロックされました。 原文:but requested an insecure script 'http://code.jquery.com/jquery-1.7.1.min.js&amp;#039;. This request has been blocked; 英語が得意で無いので翻訳しながらでしたがjqueryがブロックされているようですね。 monacaを良く知りませんので解決方法はわかる方にパスします。

    キャンセル

  • raaarta

    2018/04/26 22:49

    haru_himeさん、レスポンスありがとうございます!了解です。取り急ぎ。

    キャンセル

  • haru_hime

    2018/04/27 01:53

    問題がまだ解決していない場合は質問に追記をお願い致します。解決した場合はベストアンサーを選択して質問を閉じましょう。

    キャンセル

回答 1

checkベストアンサー

+1

外部サーバーにあるスクリプトを読み込む時に、そのサーバーがhttpなのでスクリプトの読み込みがブロックされているようです。
index.htmlの
http://code.jquery.com/jquery-1.7.1.min.js
などを全て
https://code.jquery.com/jquery-1.7.1.min.js
にする(httpsでの接続は確認できました)

または、一回外部にあるスクリプトを全てダウンロードしてから、プロジェクト内にアップロードし、プロジェクト内のパスでスクリプトを読み込んでください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/26 22:52

    namimonさん
    ありがとうございます、できました!!
    ①index.html内でのhttp:で検索ヒットが4件、その全てをhttps:にしました。
    ②置換後にindex.htmlを保存し、再度monaca画面右側の疑似スマートフォン画面を操作するも、、かわらず、ゲゲゲ、、と思いましたが
    ③monacaを表示させているChromeをF5で更新させると、、、クイズの回答・選択肢がでてきました。
    namimonさん、またharu_himeさん、ご親切に本当にありがとうございました!!"webアプリのデバッグ"がほんの少し、わかったきがします。monacaでindex.htmlを編集後保存してもダメでChromeのリロードで本当の意味で更新されるってなんやねん、、とも思いましたが、本当にいいナレッジを頂きました。ひたすら、感謝です!

    キャンセル

  • 2018/04/27 09:15

    キャッシュが残っていたのかもしれませんね。
    解決につながったのでしたら、ベストアンサーいただけると幸いです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    JavaScriptでクイズを作成したい

    前提・実現したいこと javaScriptで、クイズを作成したいと思っています。 問題表示→正誤・解説表示→次の問題…というようにページが遷移してくようにつくりたいです。また、

  • 解決済

    html/css/jsでグルグルアニメーションの仕方について(ローディングじゃないよ!)

    前提・実現したいこと HTML(css/js)でドット風に配置された要素(10*10マス)を表示する際に、 ドラクエ1の敵モンスターが出現する時のエフェクトと"似た"事がしたい e

  • 解決済

    jQueryでの年計算について

    jQueryでプルダウンの年計算を作っているのですがどうしてもわからないところがあります。 $(function() { for (var i = 2017; i >= 190

  • 受付中

    ページトップにスクロールできません

    実装したい内容・問題点 ・jQueryを用いてページの一番上までスクロールするボタンを作成したい ・https://syncer.jp/jquery-to-top-buttonやh

  • 解決済

    JQueryのアニメーションが上手くいかない

    実現したいこと JQueryで文字をfadeinさせたいです。 カルーセルの左右のインディケータをクリックすると、キャプション(画面中の文字)が浮かび上がってくるイメージです。

  • 解決済

    JavaScriptでクイズ作成(結果によりボタンを表示)

    前提・実現したいこと JavaScriptで以下のようなクイズを作成したいと思っています。 問題を表示(ラジオボタン)→ 正解を選択→ 結果によりボタンを表示 【2問とも正解を

  • 解決済

    【初心者】jquaryでマス目を作る

     前提・実現したいこと 最近Jsとjquaryの勉強を始めた初心者です。 4×4の16マスのマス目でルーレットを作っているのですが、マス目もjquaryで作ると言う課題が 理解出来

  • 解決済

    jQueryで配列のソートをしたい

     前提・実現したいこと jQueryで配列のソート機能を実現したい 配列に入ったそれぞれの値を下記のように昇順にソートしたいです。 「1」「2」「3」 ↓ 「3」「2」「1

同じタグがついた質問を見る

  • JavaScript

    16331questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Monaca

    975questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。