・そもそも動的なページってどうやって作るのかな？？
・あんまり凝ったページではなくていいので、簡単に作れないかな！？
途中であきてしまうかもしれないからです。
最終的にはそこそこの仕組みができますよ。
１．10問テストページの全体像
テストページ全体像
これから作る10問テストページの全体像は上記です。
- トップページ
- 問題出題ページ（問題1～問題10まであります。）
- 答えページ（答え1～答え10まであります。）
- 最終結果発表ページ（採点結果を表示します。）
※[2] -> [3] -> [2] -> [3] というのを10回繰り返し、[4]に移動します。
手っ取り早く全体像をつかんで頂くために、実際のページを用意しました。
漢字のよみがなテストページとなります。
ぜひアクセスして全体像をつかんでください。できれば、全問正解を目指してください。
ちなみに、正解数によって「最終結果発表ページ」に表示される文言が変わります。
２．今回作るページに必要な機能
今回作成しようとしているページに必要となる機能は以下の4つです。
- 画面遷移すること
- 4択のクイズ問題を表示すること
- 合計10問出題すること
- 得点を計算して、最後に発表すること
３．今回作るページに必要な知識
- HTML （Webページの基本となる部分です。）
- CSS （見た目にもこだわりましょう。）
- JavaScript （動的なページ作成には必須です。）
3-1.HTML
言わずもがな、HTMLの知識がないとWEBページを作成できません。
覚えるしかないですが、基礎的なレベルが書けるようになれば十分です。
以下の書籍がオススメです。
3-2.CSS
どうせ作るなら見た目のデザインには少しくらいこだわりたいです。
カッコいい、カワイイページを作るには多少の知識が必要です。
上記以外には、以下の書籍もオススメです。
3-3.JavaScript
今回のページの目玉は、JavaScriptです。
動的なページを作るには必要です。
しかし、全てを覚えてからページ作成するのではなく、
必要な部分をその都度覚えながら進めれば十分です。
あせりは禁物です。千里の道も一歩からですよ。
４．今回作成したテストページのソース公開
4-1.トップページ（HTML） index.html
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome FrameRemove this if you use the .htaccess --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>10問テストのトップページ</title><meta name="description" content="10問テストのトップページ"><meta name="author" content="くうねるチャンネル"><meta name="viewport" content="width=device-width; initial-scale=1.0"><link href="./css/main.css" rel="stylesheet" type="text/css" media="all" /></head>
<body><div><header><h1>10問テストのトップページ</h1></header><div id="main_div"><p>問題その1 <a href="./ex1/index.html">読み間違えやすい漢字のよみがなテスト10問</a></p></div><hr><footer><p>© Copyright by くうねるチャンネル</p></footer></div></body></html>
11行目はレスポンシブ対応（閲覧している画面サイズに合わせる）の記述です。
このページでは、Javascriptは使用していません。
それ以外は、特に難しい記述はなくシンプルです。
4-2.問題出題ページ（HTML） question01.html
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><!-- Always force latest IE rendering engine (even in intranet) & Chrome FrameRemove this if you use the .htaccess --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>読み間違えやすい漢字のよみがなテスト10問 （1問目）</title><meta name="description" content="読み間違えやすい漢字のよみがなテスト10問"><meta name="author" content="くうねるチャンネル"><meta name="viewport" content="width=device-width; initial-scale=1.0"><script type="text/javascript" src="./js/question.js"></script><link href="./css/main.css" rel="stylesheet" type="text/css" media="all" /></head><body><div><header><h1>読み間違えやすい漢字のよみがなテスト10問 （1問目）</h1></header><div id="main_div"><p>次の漢字の読みを答えよ。</p><p id="mondai">「乳離れ」</p><p id="sentaku"><ol><li>にゅうばなれ</li><li>ちちばなれ</li><li>ちばなれ</li><li>ちちり</li></ol></p><p>以下から正解を選択してください。</p><form method="get" name="mainForm"><input type="button" id="ans_ng1" value="1"><input type="button" id="ans_ng2" value="2"><input type="button" id="ans_ok" value="3"><input type="button" id="ans_ng3" value="4"></form></div><hr><nav><p><a href="./index.html">あきらめて、トップページへ</a></p></nav><footer><p>© Copyright by くうねるチャンネル</p></footer></div></body></html>4-3.問題出題ページ（JavaScript） question.js
/*** @author kuuneruchannel*/
window.onload = function(){var data = location.href.split("?")[1];var nowQ = data.substr(0,2);var allQ = data.substr(2,2);var okQ = data.substr(4,2);
document.getElementById("ans_ok").onclick = function(){location.href = "answer" + nowQ + ".html?" + data + "01";}
document.getElementById("ans_ng1").onclick = function(){location.href = "answer" + nowQ + ".html?" + data + "02";}
document.getElementById("ans_ng2").onclick = function(){location.href = "answer" + nowQ + ".html?" + data + "02";}
document.getElementById("ans_ng3").onclick = function(){location.href = "answer" + nowQ + ".html?" + data + "02";}}
４行目は、ページ読み込み時にJavascript関数を読み込みするようにセットしています。
５行目から８行目までは、URLの「？」以降を取得している。
９行目から２１行目までは、押されたボタンによって飛び先のURLアドレスを設定しています。
4-4.答えページ（HTML） answer01.html
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome FrameRemove this if you use the .htaccess --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>読み間違えやすい漢字のよみがなテスト10問 （1問目の正解発表）</title><meta name="description" content="読み間違えやすい漢字のよみがなテスト10問"><meta name="author" content="くうねるチャンネル"><meta name="viewport" content="width=device-width; initial-scale=1.0"><script type="text/javascript" src="./js/answer.js"></script><link href="./css/main.css" rel="stylesheet" type="text/css" media="all" /></head><body><div><header><h1>読み間違えやすい漢字のよみがなテスト10問 （1問目の正解発表）</h1></header><div id="main_div"><p id="result"></p><p>「ちばなれ」でした。</p><form method="get" name="mainForm"><input type="button" id="question_next" value="次の問題へ"></form></div><hr><nav><p><a href="./index.html">あきらめて、トップページへ</a></p></nav><footer><p>© Copyright by くうねるチャンネル</p></footer></div></body></html>
１２行目では、JavaScript（answer.js）の読み込みを表現しています。
２１行目では、答え（答え１から答え１０のそれぞれの答えに書き換える必要があります。）を表現しています。
4-5.答えページ（JavaScript） answer.js
/*** @author kuuneruchannel*/
window.onload = function(){
var data = location.href.split("?")[1];var nowQ = data.substr(0,2);var allQ = data.substr(2,2);var okQ = data.substr(4,2);var nowA = data.substr(6,2);
if(nowA == "01"){okQ = ("00" + (Number(okQ) + 1)).slice(-2);document.getElementById("result").innerHTML = "お見事、正解です！！";}else{document.getElementById("result").innerHTML = "残念、不正解です！！";}
if(nowQ == allQ){document.getElementById("question_next").value = "最終結果発表へ";document.getElementById("question_next").onclick = function(){location.href = "result.html?" + nowQ + allQ + okQ; }}else{nowQ = ("00" + (Number(nowQ) + 1)).slice(-2);document.getElementById("question_next").value = "次の問題へ";document.getElementById("question_next").onclick = function(){location.href = "question" + nowQ + ".html?" + nowQ + allQ + okQ; }}}
１０行目から１５行目では、正解・不正解を判断しています。
１６行目では最終結果発表ページに遷移させるか、次の問題ページに遷移させるかを
制御しています。
4-6.最終結果発表ページ（HTML） result.html
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome FrameRemove this if you use the .htaccess --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>読み間違えやすい漢字のよみがなテスト10問 （最終結果発表）</title><meta name="description" content="読み間違えやすい漢字のよみがなテスト10問"><meta name="author" content="くうねるチャンネル"><meta name="viewport" content="width=device-width; initial-scale=1.0"><script type="text/javascript" src="./js/result.js"></script><link href="./css/main.css" rel="stylesheet" type="text/css" media="all" /></head>
<body><div><header><h1>読み間違えやすい漢字のよみがなテスト10問 （最終結果発表）</h1></header><div id="main_div"><p id="result"></p></div><hr><nav><p><a href="./index.html">トップページへ</a></p></nav><footer><p>© Copyright by くうねるチャンネル</p></footer></div></body></html>
１２行目では、JavaScript（result.js）の読み込みを表現しています。
２１行目には、動的に結果が表示されます。
4-7.最終結果発表ページ（JavaScript） result.js
/*** @author kuuneruchannel*/
window.onload = function(){
var data = location.href.split("?")[1];var nowQ = data.substr(0,2);var allQ = data.substr(2,2);var okQ = data.substr(4,2);var result = (Number(okQ) / Number(allQ)) * 100;
if(result == 100){document.getElementById("result").innerHTML = "すばらしい！！ 100点です。";}else if(result >= 80){document.getElementById("result").innerHTML = "おしい！！ もう1回チャレンジしてね。 " + result + "点です。";}else{document.getElementById("result").innerHTML = "残念！！ あと3回チャレンジすれば、満点とれるかも。 " + result + "点です。";}}
１０行目から１７行目では、採点結果によりページに表示する文言を切り替えています。
５．今後の改良点
問題出題ページ（HTML）と答えページ（HTML）が問題数分（１０問）
それぞれで必要となっており、煩雑でした。
ほとんど同じ内容で、少しだけ違うページが複数ある場合、
デザインを少し変更するのに、同じ変更を全てのページに対して行う必要がある。
よって、問題出題ページと答えページはそれぞれ１つのページで問題・答えを
切り替えれるようにすれば、煩雑さをなくすことができます。
コメント