diff --git a/paper/reroad-paper.pdf b/paper/reroad-paper.pdf index c443ae8..ac341bd 100644 --- a/paper/reroad-paper.pdf +++ b/paper/reroad-paper.pdf Binary files differ diff --git a/paper/system-quiz.tex b/paper/system-quiz.tex new file mode 100644 index 0000000..8bba1d6 --- /dev/null +++ b/paper/system-quiz.tex @@ -0,0 +1,93 @@ +%#!platex -kanji=%k + +\subsection{クイズ展開モジュール} + + このプログラムは、利用者に学習を楽しいと感じさせることを目的とし + たプログラムである。背景・セリフ・キャラクターの表情が利用者の操 + 作で移り変わっていき、まるでゲームのようにストーリーが展開してい + く。ストーリー仕立てで利用者を物語に引き込むことで、あたかも自ら + がこのゲームの主人公であると利用者自身に錯覚させ、ゲーム内の主人 + 公の目的を達成させるように仕向けることで、利用者の行動に明確な理 + 由付を行うことが出来る。これにより本やネットの情報を流し読みする + よりも、楽しみのある学習をすることが可能になる。 + + +ロード画面： 「jQuery」を使用して作られている。 +「jQuery」とは、「JavaScriptライブラリ」と呼ばれるものの１つである。 +「JavaScriptライブラリ」とは、JavaScriptの動きを予め大量に記述してある、誰かが制作してくれたJavaScriptファイルのことである。 + +という記述を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…一定時間後に特定の処理をおこなう（繰り返さずに一度だけ）。これにより５秒たつと強制的にロード画面を非表示にすることが出来る。 + +
+
+ Now Loading... +

Now Loading...

+
+
+ という形で実装している。２枚の絵を合体させた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; + }); + }); + クリックすることで新たな画面をフェードインさせる、クリックすることで画面をフェードアウトさせる、この２つを実装している。 + +
+ クリックで操作のヘルプ画面を表示 +
+
+
+
+
+ Silk Re:road +
+

+
+ シナリオが表示されます。 +
+
場面に応じてキャラクターの立ち絵と背景画像が表示されます。
+ +

次へ進みます。

+

前に戻ります。

+ + + +

音のON/OFF

+ ヘルプ画面を閉じる(外の黒い画面をクリックしても閉じれます) +
+HTML内でこのように記述することでウィンドウの中身を実装している。 + + + + + + + +・（クイズのプログラム） +このプログラムは、利用者に知識を定着させること・意欲的に学習をさせることを目的としたプログラムである。 +（４つ）の選択肢から１つを選んでいく形式であり、似たような単語・似たような数字を織り交ぜることで、 +ストーリーやゲームの部分を軽視しての学習では回答が難しい問題を採用している。 +そのため、真剣に学習に取り組まなければ高得点を取ることは困難である。 +さらに、全問題の回答後にランキングを表示させることで、利用者に競争意識をもたせ高得点を意識させている。 +これにより利用者に効率的で主体的な学習をもたらすことが可能になっている。 + + +・（VRプログラム） diff --git a/paper/thesis-system-quiz.tex b/paper/thesis-system-quiz.tex new file mode 100644 index 0000000..9a81374 --- /dev/null +++ b/paper/thesis-system-quiz.tex @@ -0,0 +1,121 @@ +%#!platex -kanji=%k reroad-paper + +\subsection{クイズ展開パート}\label{by-fuga} + +クイズ展開パートは，利用者に学習を楽しいと感じさせることを目的とし +たもので，背景・セリフ・キャラクターの表情が利用者の操 +作で移り変わっていき，ゲーム形式でストーリーが展開していく。 +%ストーリー仕立てで利用者を物語に引き込むことで，あたかも自ら +%がこのゲームの主人公であると利用者自身に錯覚させ，ゲーム内の主人 +%公の目的を達成させるように仕向けることで，利用者の行動に明確な理 +%由付を行うことが出来る。 +これにより書籍やネットの情報を流し読みする +よりも，楽しみのある学習をすることが可能になる。 + + +\begin{figure}[tb] +\subfigure[ロード画面]{ +\includegraphics[width=0.3\columnwidth]{load} +\label{load} +} +\subfigure[クイズの一例]{ +\includegraphics[bb=0 0 904 285,width=0.65\columnwidth]{img/quiz.jpg} +\label{quiz} +} +\caption{ゲームパートの画面} +\end{figure} + + +クイズパートへの遷移では親近感を高めるために +JavaScriptライブラリの一つである +jQuery\footnote{\url{https://jquery.com/}}を利用し， +主要キャラクタが軽やかに踊るロード画面(図~\ref{load})を実装した。 + +クイズとして提供する題材は，松ヶ岡産業より提供頂いた +★★★★★★★★★★★★★★★★★★★★ +あああああああああああああああああああああああああああああああああああ +★★★★★★★★★★★★★★★★★★★★ +などから抜粋し，正解すると先に進めるような構成とした(図~\ref{quiz})。 + +% +% +% +%ロード画面： 「jQuery」を使用して作られている。 +%「jQuery」とは，「JavaScriptライブラリ」と呼ばれるものの１つである。 +%「JavaScriptライブラリ」とは，JavaScriptの動きを予め大量に記述してある，誰かが制作してくれたJavaScriptファイルのことである。 +% +%という記述を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…一定時間後に特定の処理をおこなう（繰り返さずに一度だけ）。これにより５秒たつと強制的にロード画面を非表示にすることが出来る。 +% +%
+%
+% Now Loading... +%

Now Loading...

+%
+%
+% という形で実装している。２枚の絵を合体させた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; +% }); +% }); +% クリックすることで新たな画面をフェードインさせる，クリックすることで画面をフェードアウトさせる，この２つを実装している。 +% +%
+% クリックで操作のヘルプ画面を表示 +%
+%
+%
+%
+%
+% Silk Re:road +%
+%

+%
+% シナリオが表示されます。 +%
+%
場面に応じてキャラクターの立ち絵と背景画像が表示されます。
+% +%

次へ進みます。

+%

前に戻ります。

+% +% +% +%

音のON/OFF

+% ヘルプ画面を閉じる(外の黒い画面をクリックしても閉じれます) +%
+%HTML内でこのように記述することでウィンドウの中身を実装している。 +% +% + + + +% +% +%・（クイズのプログラム） +%このプログラムは，利用者に知識を定着させること・意欲的に学習をさせることを目的としたプログラムである。 +%（４つ）の選択肢から１つを選んでいく形式であり，似たような単語・似たような数字を織り交ぜることで， +%ストーリーやゲームの部分を軽視しての学習では回答が難しい問題を採用している。 +%そのため，真剣に学習に取り組まなければ高得点を取ることは困難である。 +%さらに，全問題の回答後にランキングを表示させることで，利用者に競争意識をもたせ高得点を意識させている。 +%これにより利用者に効率的で主体的な学習をもたらすことが可能になっている。 +% +% +%・（VRプログラム） diff --git a/paper/thesis-system-web.tex b/paper/thesis-system-web.tex index 546a04b..34eda21 100644 --- a/paper/thesis-system-web.tex +++ b/paper/thesis-system-web.tex @@ -56,9 +56,9 @@ %\centering \subfigure[横長表示]{ \includegraphics[width=0.65\columnwidth]{page_yoko} -%\caption{横画面} \label{yoko} } +\caption{縦置き横置きに連動したデザイン} \end{figure} %ロード画面を