%#!platex -kanji=%k

\subsection{クイズ展開モジュール}

	このプログラムは、利用者に学習を楽しいと感じさせることを目的とし
	たプログラムである。背景・セリフ・キャラクターの表情が利用者の操
	作で移り変わっていき、まるでゲームのようにストーリーが展開してい
	く。ストーリー仕立てで利用者を物語に引き込むことで、あたかも自ら
	がこのゲームの主人公であると利用者自身に錯覚させ、ゲーム内の主人
	公の目的を達成させるように仕向けることで、利用者の行動に明確な理
	由付を行うことが出来る。これにより本やネットの情報を流し読みする
	よりも、楽しみのある学習をすることが可能になる。
	

ロード画面： 「jQuery」を使用して作られている。
「jQuery」とは、「JavaScriptライブラリ」と呼ばれるものの１つである。
「JavaScriptライブラリ」とは、JavaScriptの動きを予め大量に記述してある、誰かが制作してくれたJavaScriptファイルのことである。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
という記述をHTMLに追加することで、ネットから「jQuery」と名付けられたJavaScriptファイルを読み込み、「jQuery」が使用できるようになる。
ここからはソースの解説に入る。
(function(){...})と記述すると{...}の中に書かれた動きをHTMLの読み込みが全て完了した後に実行してくれる。
	var h = $(window).height();でhという変数の中にウィンドウの高さを代入している。
  $('#loader-bg ,#loader').height(h).css('display','block');により、ウィンドウの高さに合わせて新たな画面を仮面のように貼り付けている。
  $('#loader-bg').delay(900).fadeOut(800);
  $('#loader').delay(600).fadeOut(300);　
  delay(1000)で1秒間動作の停止。
  HTML要素.fadeOut( 時間(ミリ秒) )でHTML要素を少しずつアニメーションさせながら非表示にすることができるメソッド
  setTimeout('stopload()',5000);
  setTimeout…一定時間後に特定の処理をおこなう（繰り返さずに一度だけ）。これにより５秒たつと強制的にロード画面を非表示にすることが出来る。

   <div id="loader-bg">
    <div id="loader">
      <img src="aiu.gif" width="80" height="80" alt="Now Loading..." />
      <p>Now Loading...</p>
    </div>
  </div>
  という形で実装している。２枚の絵を合体させたgifとNow Loading...の文字をHTML内で追加することで本当のロード画面のように見栄えを良くしている。


操作説明の画面（モーダウィンドウorポップアップ）
  $(function(){
    $('.js-modal-open').on('click',function(){
        $('.js-modal').fadeIn();
        return false;
    });
    $('.js-modal-close').on('click',function(){
        $('.js-modal').fadeOut();
        return false;
    });
  });
  クリックすることで新たな画面をフェードインさせる、クリックすることで画面をフェードアウトさせる、この２つを実装している。

  <div class="content">
  <a class="js-modal-open" href="">クリックで操作のヘルプ画面を表示</a>
</div>
<div class="modal js-modal">
  <div class="modal__bg js-modal-close"></div>
  <div class="modal__content">
    <header>
      <img src="title.PNG" alt="Silk Re:road" class="title">
    </header>
    <p class="center"></P>
    <div class="inner" id="text">
      シナリオが表示されます。
    </div>
    <div class="box">場面に応じてキャラクターの立ち絵と背景画像が表示されます。</div>

  <p class="migisita">次へ進みます。</p>
  <p class="hidarisita">前に戻ります。</p>


  <!-- 再生ボタン -->
  <p id="btn-play">音のON/OFF</p>
      <a class="js-modal-close" href="">ヘルプ画面を閉じる(外の黒い画面をクリックしても閉じれます)</a>
  </div><!--modal__inner-->
HTML内でこのように記述することでウィンドウの中身を実装している。







・（クイズのプログラム）
このプログラムは、利用者に知識を定着させること・意欲的に学習をさせることを目的としたプログラムである。
（４つ）の選択肢から１つを選んでいく形式であり、似たような単語・似たような数字を織り交ぜることで、
ストーリーやゲームの部分を軽視しての学習では回答が難しい問題を採用している。
そのため、真剣に学習に取り組まなければ高得点を取ることは困難である。
さらに、全問題の回答後にランキングを表示させることで、利用者に競争意識をもたせ高得点を意識させている。
これにより利用者に効率的で主体的な学習をもたらすことが可能になっている。


・（VRプログラム）