<!DOCTYPE html>
<meta http-equiv="content-type" charset="utf-8">
<html>
<head>
        <title>サーモンクイズゲキムズコース｜ひなまつりはノルウェーサーモンで決まり！</title>
 <style>/* クイズのすべてを管理する親要素 */
.quiz_area{
    position: relative;
}

/* 回答後に上に被せてタップできなくするための要素（デフォルト非表示、回答後に一時的に表示） */
.quiz_area .quiz_area_bg{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.3);
    display: none;
    color: #FFF;
    text-align: center;
}

/* 画面に〇、×を表示するための要素（デフォルト非表示、回答後に一時的に表示） */
.quiz_area .quiz_area_icon{
    position: absolute;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    z-index: 9999;
    transform: translate(-50%, -50%);
    color: red;
    display: none;
    font-size: 10em;
    font-weight: bold;
    -webkit-text-stroke: 4px #FFF;
    text-stroke: 4px #FFF;
}

/* .trueまたは.falseのクラスが付与されたら表示するものとみなす */
.quiz_area .quiz_area_icon.true, .quiz_area .quiz_area_icon.false{
    display: block;
}

/* .trueは正解（〇を表示） */
.quiz_area .quiz_area_icon.true:before{
    content: '〇';
    color: red;
}
/* .falseは不正解（×を表示） */
.quiz_area .quiz_area_icon.false:before{
    content: '×';
    color: blue;
}

/* 現在の問題数を表示 */
.quiz_area .quiz_no{
    font-weight: bold;
}

/* 問題文と回答後の結果（デザインは使いまわし） */
.quiz_area .quiz_question, .quiz_result{
    box-sizing: border-box;
    padding: 15px;
    border: 4px solid #777777;
    font-weight: bold;
}

/* 回答後の結果は初期非表示 */
.quiz_area .quiz_result{
    display: none;
    text-align: center;
}


/* 以下クイズの選択肢のデザイン */
.quiz_area .quiz_ans_area ul{
    margin: 10px 0 0 0;
    padding: 0;
    display: block;
}

.quiz_area .quiz_ans_area ul::after{
    content: "";
    display: block;
    clear: both;
}

.quiz_area .quiz_ans_area ul li{
    box-sizing: border-box;
    list-style: none;
    float: left;
    width: 100%;
    padding: 10px 15px;
    border: 2px solid #777777;
    margin: 0 0 -2px 0;
    cursor: pointer;
}

.quiz_area .quiz_ans_area ul li.selected{
    background-color: #bcbcbc;
}</style>
</head>


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4'></script>
<script>
$(function(){
    var quizArea = $('.quiz_area'); //クイズを管理するDOMを指定
    var quiz_html = quizArea.html(); //もう一度　を押した時に元に戻すため初期HTMLを変数で保管
    var quiz_cnt = 0; //現在の問題数を管理
    var quiz_fin_cnt = 10; //何問で終了か設定（クイズ数以下であること）
    var quiz_success_cnt = 0; //問題の正解数
    
    //クイズの配列を設定
    //answerの選択肢の数はいくつでもOK　ただし先頭を正解とすること(出題時に選択肢はシャッフルされる)
    var aryQuiz = [];
    aryQuiz.push(
        {
            question : '世界で最もサケ・サーモンを養殖（ようしょく）している国はどこ？',
            answer : ['ノルウェー', '日本', 'カナダ']
        }
        ,{
            question : '世界で最も食べられているサケ・サーモンはなに？',
            answer : ['アトランティックサーモン', 'ギンザケ', 'キングサーモン']
        }
        ,{
            question : 'サケ・サーモンにたくさん含まれる、血液サラサラ効果がある成分はなに？',
            answer : ['DHA/EPA', '塩分', '食物繊維（しょくもつせんい）']
        }
        ,{
            question : '日本でサケ・サーモンの寿司が食べられるようになったのはいつから？',
            answer : ['約３０年前から', '約３００年前から', '約１００年前から']
        }
        ,{
            question : 'サケ・サーモンの身はどうして赤いの？',
            answer : ['エサに赤い成分が含まれているから', '血管が透けて見えているから', '赤身魚だから']
        }
        ,{
            question : 'サケ・サーモンにたくさん含まれるアスタキサンチンは、私たちの健康にどんな効果があるの？',
            answer : ['美肌効果がある', '歯が白くなる', '関節がやわらかくなる']
        }
        ,{
            question : 'サケ・サーモンが１ｋｇ大きくなるにはどのくらいの量のエサが必要？',
            answer : ['約１．２ｋｇ', '約１２０ｇ', '約１２ｋｇ']
        }
        ,{
            question : 'アトランティックサーモンとサーモントラウトの違いはなに？',
            answer : ['魚の種類が違う', '大きさによって呼び名が違う', '違いはない']
        }
        ,{
            question : 'アトランティックサーモンの食感は？',
            answer : ['とろける', 'パサパサ', 'シャキシャキ']
        }
        ,{
            question : 'サケ・サーモンを表す英語「salmon」はどの言語が語源なの？',
            answer : ['ラテン語', '日本語', 'ノルウェー語']
        }
    );
    
    quizReset();
    
    //回答を選択した後の処理
    quizArea.on('click', '.quiz_ans_area ul li', function(){
        //画面を暗くするボックスを表示（上から重ねて、結果表示中は選択肢のクリックやタップを封じる
        quizArea.find('.quiz_area_bg').show();
        //選択した回答に色を付ける
        $(this).addClass('selected');
        if($(this).data('true')){
            //正解の処理 〇を表示
            quizArea.find('.quiz_area_icon').addClass('true');
            //正解数をカウント
            quiz_success_cnt++;
        }else{
            //不正解の処理
            quizArea.find('.quiz_area_icon').addClass('false');
        }
        setTimeout(function(){
            //表示を元に戻す
            quizArea.find('.quiz_ans_area ul li').removeClass('selected');
            quizArea.find('.quiz_area_icon').removeClass('true false');
            quizArea.find('.quiz_area_bg').hide();
            //問題のカウントを進める
            quiz_cnt++;
            if(quiz_fin_cnt > quiz_cnt){
                //次の問題を設定する
                quizShow();
            }else{
                //結果表示画面を表示
                quizResult();
            }
        }, 1500);
    });
    
    //もう一度挑戦するを押した時の処理
    quizArea.on('click', '.quiz_restart', function(){
        quizReset();
    });
    
    //リセットを行う関数
    function quizReset(){
        quizArea.html(quiz_html); //表示を元に戻す
        quiz_cnt = 0;
        quiz_success_cnt = 0;
        //aryQuiz = arrShuffle(aryQuiz); //毎回出題の順番をシャッフルしたい場合はここのコメントを消してね
        quizShow();
    }
    
    //問題を表示する関数
    function quizShow(){
        //何問目かを表示
        quizArea.find('.quiz_no').text((quiz_cnt + 1));
        //問題文を表示
        quizArea.find('.quiz_question').text(aryQuiz[quiz_cnt]['question']);
        //正解の回答を取得する
        var success = aryQuiz[quiz_cnt]['answer'][0];
        //現在の選択肢表示を削除する
        quizArea.find('.quiz_ans_area ul').empty();
        //問題文の選択肢をシャッフルさせる(自作関数) .concat()は参照渡し対策
        var aryHoge = arrShuffle(aryQuiz[quiz_cnt]['answer'].concat());
        //問題文の配列を繰り返し表示する
        $.each(aryHoge, function(key, value){
            var fuga = '<li>' + value + '</li>';
            //正解の場合はdata属性を付与する
            if(success === value){
                fuga = '<li data-true="1">' + value + '</li>';
            }
            quizArea.find('.quiz_ans_area ul').append(fuga);
        });
    }
    
    //結果を表示する関数
    function quizResult(){
        quizArea.find('.quiz_set').hide();
        var text = quiz_fin_cnt + 'もんちゅう' + quiz_success_cnt + 'もんせいかい！';
        if(quiz_fin_cnt === quiz_success_cnt){
            text += '<br>やったね！ぜんもんせいかいおめでとう！';
        }
        text += '<br><input type="button" value="もういちどやってみる" class="quiz_restart p-10">';
        quizArea.find('.quiz_result').html(text);
        quizArea.find('.quiz_result').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;
    }
});
</script>
<body bgcolor="#EBC4C6">
<body>
<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"></div>
</div>
        <br><br><a href="/answer2.html" target="_blank"><img title="ひなまつりはノルウェーサーモン！" alt="ひなまつりはノルウェーサーモン！" src="images/2020_01.gif"></a><br>
        <a href="/index.html"><img title="ひなまつりはノルウェーサーモン！" alt="ひなまつりはノルウェーサーモン！" src="images/2020_02.gif"></a>
</body>
</html>