JavaScriptで簡単な10問テストページの作り方

スポンサーリンク
javascript問題1ブログ初心者
javascript問題1
スポンサーリンク
・動的なページを作りたいな・・・。でも、難しいのかな??
・そもそも動的なページでどうやって作るのかな??
・あんまり凝ったページではなくていいので、簡単に作れないかな!?
当記事では、動的なページをJavaScriptを使って簡単に作る方法をお教えします。
サンプル題材として、10問テストページを作ります。
具体的には、10コの問題を出して、最後に採点結果を表示するページを作ります。
 
当ブログを書いているくうねるチャンネル@kuuneruchannel)です。詳細なプロフィールが気になる方は、「くうねるチャンネルのプロフィール」をご覧ください。どうぞよろしくお願いします。
 
まず簡単な動的ページを作成しながら力をつけていきましょう。
なぜなら、いきなり凝ったものを作り始めると完成させるのに時間がかかり、
途中であきてしまうかもしれないからです。
 
小さく作って、少しずつパワーアップさせていけば、
最終的にはそこそこの仕組みができますよ。
スポンサーリンク

1.10問テストページの全体像

テストページ全体像

テストページ全体像

これから作る10問テストページの全体像は上記です。

  1. トップページ
  2. 問題出題ページ(問題1~問題10まであります。)
  3. 答えページ(答え1~答え10まであります。)
  4. 最終結果発表ページ(採点結果を表示します。)

※[2] -> [3] -> [2] -> [3] というのを10回繰り返し、[4]に移動します。

 

手っ取り早く全体像をつかんで頂くために、実際のページを用意しました。

漢字のよみがなテストページとなります。

読み間違えやすい漢字のよみがなテスト10問」です。

ぜひアクセスして全体像をつかんでください。できれば、全問正解を目指してください。

ちなみに、正解数によって「最終結果発表ページ」に表示される文言が変わります。

2.今回作るページに必要な機能

今回作成しようとしているページに必要となる機能は以下の4つです。

  • 画面遷移すること
  • 4択のクイズ問題を表示すること
  • 合計10問出題すること
  • 得点を計算して、最後に発表すること

3.今回作るページに必要な知識

  • HTML (Webページの基本となる部分です。)
  • CSS (見た目にもこだわりましょう。)
  • JavaScript (動的なページ作成には必須です。)

3-1.HTML

言わずもがな、HTMLの知識がないとWEBページを作成できません。
覚えるしかないですが、基礎的なレベルが書けるようになれば十分です。

以下の書籍がオススメです。

 

 

 

 

3-2.CSS

どうせ作るなら見た目のデザインには少しくらいこだわりたいです。
カッコいい、カワイイページを作るには多少の知識が必要です。

上記以外には、以下の書籍もオススメです。

 

 

 

 

3-3.JavaScript

今回のページの目玉は、JavaScriptです。
動的なページを作るには必要です。
しかし、全てを覚えてからページ作成するのではなく、
必要な部分をその都度覚えながら進めれば十分です。
あせりは禁物です。千里の道も一歩からですよ。

 

 

 

 

4.今回作成したテストページのソース公開

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 Frame
Remove 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>&copy; 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 Frame
Remove 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>&copy; Copyright by くうねるチャンネル</p>
</footer>
</div>
</body>
</html>
問題出題ページは問題1(question01.html)から問題10(question10.html)を
用意する必要があります。
12行目は、Javascript(question.js)の読み込みをしています。
21行目から30行目までは、問題文(それぞれの問題で内容を変える必要があります)です。
31行目から37行目までは、答え選択ボタンを表現しています。

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";
}
}

4行目は、ページ読み込み時にJavascript関数を読み込みするようにセットしています。

5行目から8行目までは、URLの「?」以降を取得している。

9行目から21行目までは、押されたボタンによって飛び先の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 Frame
Remove 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>&copy; Copyright by くうねるチャンネル</p>
</footer>
</div>
</body>
</html>

答えページは答え1(answer01.html)から答え10(answer10.html)を
用意する必要があります。

12行目では、JavaScript(answer.js)の読み込みを表現しています。

21行目では、答え(答え1から答え10のそれぞれの答えに書き換える必要があります。)を表現しています。

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;
  }
}
}

10行目から15行目では、正解・不正解を判断しています。

16行目では最終結果発表ページに遷移させるか、次の問題ページに遷移させるかを
制御しています。

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 Frame
Remove 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>&copy; Copyright by くうねるチャンネル</p>
</footer>
</div>
</body>
</html>

12行目では、JavaScript(result.js)の読み込みを表現しています。

21行目には、動的に結果が表示されます。

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 + "点です。";
}
}

10行目から17行目では、採点結果によりページに表示する文言を切り替えています。

5.今後の改良点

問題出題ページ(HTML)と答えページ(HTML)が問題数分(10問)
それぞれで必要となっており、煩雑でした。
ほとんど同じ内容で、少しだけ違うページが複数ある場合、
デザインを少し変更するのに、同じ変更を全てのページに対して行う必要がある。

よって、問題出題ページと答えページはそれぞれ1つのページで問題・答えを
切り替えれるようにすれば、煩雑さをなくすことができます。

 

コメント