サーバー構築不要！スマートフォンアプリ向けの新クラウド

トップ >ドキュメント >チュートリアル（JavaScript & Monaca）:チュートリアル（後半）のサンプルコード

チュートリアル（JavaScript & Monaca）

チュートリアル（後半）のサンプルコード

クイズ検索処理を実装する

quiz.jsにselectQuizメソッドを追加

quiz.jsの末尾に以下のコードを追加してください。

 
var quizSize = 0;
//クイズを検索する
function selectQuiz(){
    //クイズを検索するncmb.Queryクラスのインスタンスを作成する
    var QuizClass = ncmb.DataStore("Quiz");
    
    //指定された条件に合致するクイズの件数を調べる
    QuizClass.count().fetchAll()
                     .then(function(objects){
                            //登録されたクイズの数を保持する
                            quizSize = objects.count;
                     })
                     .catch(function(error) {
                            // エラー
                            console.log("error:" + error.message);
                     });
    
    //作成したクエリに条件を設定する
    QuizClass.skip(Math.floor(Math.random() * quizSize))
             .fetch()
             .then(function(result){
                displayQuiz(result);
             })
             .catch(function(error) {
                console.log("error:" + error.message);
             });
}
answerQuiz.html
 
<ons-page id="answer_page">
    <div style="text-align: center">
        <h1>問題</h1>
        
        <p id="question"></p>
        
        <div id="answer_options">
        </div>
        
    </div>
</ons-page>

連続正解数のランキングを表示する

quiz.jsにmenu.html読み込み完了時のイベントを追記

quiz.jsを開くと、ファイルの上側に以下のような
ページ初期化時の処理が書かれている部分があります。
そこに、★マークのコメントが書かれているところの処理を追記してください。

 
//mobile backendのAPIキーを設定
var ncmb = new NCMB("YOURAPPKEY","YOURCLIENTKEY");
    
//ページの初期化が完了したら実行される
$(function (){
   
    //クイズを表示するイベントを登録
    $(document.body).on('pageinit', '#answer_page', function() {refreshQuiz();});
    
    //クイズ作成ボタンを表示するイベトを登録
    //HTMLに記述したボタンはJSで操作できない
    $(document.body).on('pageinit', '#create_quiz_page', function() {displayButton();});
    
    //スコアを表示するイベントを登録★
    $(document.body).on('pageinit', '#menu_page', function() {findScore();});
    
});
quiz.jsにスコア表示処理を追加

quiz.jsの末尾に追加してください。

 
//上位5番目までのスコアを持つユーザーを取得
function findScore(){
    $("#ranking").html("");
    
    //会員クラスを検索するクエリを作成
    ncmb.User.order("score", true)
        .limit(5)
        .fetchAll()
        .then(function(results){
                //検索が成功した場合は会員情報のリストをdisplayRankingメソッドに渡す
                displayRanking(results);              
        })
        .catch(function(error){
                console.log("error:" + error.message);   
                if(error.status == "401") {
                    logout();
                    //未ログインの場合はログイン画面を表示
                    quizNavi.pushPage("login.html", options);
                }
        });
}

//上位5番目までのランキングを表示
function displayRanking(ranking){
    for (var i = 0; i < ranking.length; i++){
        var topUser = ranking[i];
        $("#ranking").append((i+1) + "...userName:" + topUser.get("userName") + ", score:" + topUser.get("score") + "<br/>");
    }
}

 
<ons-page id="menu_page">
    <div style="text-align: center">
        <h1>メニュー</h1>
        
        <p>
            <ons-button id="answer_quiz_button" onclick="quizNavi.pushPage('answerQuiz.html')">
            クイズを解く！
            </ons-button>
            <br/>
            <br/>
            <ons-button id="create_quiz_button" onclick="quizNavi.pushPage('createQuiz.html')">
            クイズを作る！
            </ons-button>

            <!-- ★ランキング表示の場合はコメントアウトを外してください
            <br/>
            <br/>
            連続正解数ランキング
            <br/>
            <span id="ranking"></span>
            <br/>
            <br/>
            ★ -->

            <ons-button id="logout_button" onclick="logout()">
            ログアウト
            </ons-button>
        </p>
    </div>
</ons-page>

お探しの内容が見つからなかった場合はユーザーコミュニティ もご活用ください。（回答保証はいたしかねます）
なお、 Expertプラン以上のお客様はテクニカルサポートにてご質問を承らせて頂きます。

推奨画面サイズ1024×768px以上

ページの先頭へ