がくぞうのアイデアブログ

思いついたアイデア、本からの学びや気づきを公開していきます。

【スポンサーリンク】

JavaScriptで簡単な10問テストページを作った話

【スポンサーリンク】

ひさしぶりに『簡単なWEBサイトが作りたいな』と、ふと思いつきました。
どうせなら動的なページにしたいけど、短時間でサクッと完成させたくもあり、
JavaScriptで作ることにしました。

小さく作成して、少しずつパワーアップさせていき、
最終的にはそこそこの仕組みができたらなあと思います。

また、いきなり凝ったものを作り始めると、
完成させるのに時間がかかり、途中であきてしまうから・・・。

作りたいWEBページのイメージ画像

f:id:romabybg:20170617143239p:plain

今回のWEBサイトに必要な機能

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

今回のWEBサイト作成に必要な知識

  • HTML (基礎的なレベル)
  • CSS (わからないところをWEBで調べながらで十分)
  • JavaScript (これも、WEBで調べながらで十分)

完成した今回のWEBサイト作成

漢字のよみがなテストサイトとなりました。
みなさんもぜひ、アクセスしてください。

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

「読み間違えやすい漢字のよみがなテスト10問」の画面構成

[1]トップページ -> [2]問題出題ページ -> [3]答えページ -> [4]採点ページ

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

実際のソース

トップページ(HTML) index.html

問題出題ページ(HTML) question01.html

問題出題ページ(JavaScript) question.js

答えページ(HTML) answer01.html

答えページ(JavaScript) answer.js

採点ページ(HTML) result.html

採点ページ(JavaScript) result.js

今回のWEBサイト作成してみた感想

[2]、[3]ページを合計20ページ必要となり、煩雑だった。
デザインを少し直すだけなのに、20ページに同じことを適用して行く必要があった。

次回の改良点

[2]、[3]ページを1つずつにし、煩雑さを減らす。

以上です。最後まで読んでくれてありがとうございます。