JavaScriptでテストを作る

2016/06/12HTML/JavaScriptiyo

JavaScriptでテストを作成できる”examination.js”が完成し、~~“The Main Line”にて~~公開を開始しました。
“配布ファイル一覧“より”テストキット”を選ぶとダウンロードが可能です。

2020年11月03日より、”examination_v2.js”の配布を開始しました。一問一答が可能となったほか、いくつか改良を加えています。”配布ファイル一覧“より、”テストキットv2″をご選択ください。v2について詳細を見る>>(2020/12/06)

このファイルは、以前に”The Main Line”で公開されていた駅名検定コーナーで使用するために作成したもので、それを配布用に改修しています。”examination.js”は採点などのプログラムや解答、点数の定義が含まれており、問題を表示するHTMLファイルと合わせるとテストが出来上がります。

主な仕様は以下の通りです。

自動採点
合格基準を、点数(～点以上)または問題数(～問以上)に設定することが可能
解答表示
Twitter投稿用のボタンを表示(非表示にすることも可能)
1つのグローバル変数”examination”を使用

こんな感じですかね。下の見本にもあるように、解答欄は入力(記述)と選択の2種類があり、選択肢を作らない分、前者のほうが作成は簡単です。

imgタグを使えば問題に画像を表示させることもできます。HTML5になり、inputタグではさまざまな種類の入力欄ができたので、新しいものを使うのも手ですね。

最後に、配布ファイルに同梱の”sample.html”の内容を見本として掲載します。”採点”ボタンを押すと結果が表示されます。

数字や英字、記号はすべて半角小文字で、それ以外は全角文字で記入してください。

「JavaScriptでテストを作る」への20件のフィードバック

卒業研究に全てを賭ける男 より:

2019/09/16 17:02

☆iyoさん
お久しぶりです。卒業研究に全てを賭ける男です。
こちらも返信が16日遅れて申し訳ありません。
今ようやくWeb制作が一先ず完成致しました。
まず中央揃えの仕方、一問一答形式は本当にありがとうございます。
一問一答は私がなんとかつくりあげましたが、☆iyoさんのシステムなら
私よりもしっかりしたプログラムになっていると思います。
決して水の泡になっていません。
これから改善していきより良い作品をつくっていきます。
私もまだまだ頑張りますのでこれからもよろしくお願い致します。

返信
卒業研究に全てを賭ける男 より:

2019/08/17 21:04

一応図としては
————————————————
　　　　　　　　問題文
┌────
│ 　　　│
│　　　 │
└────
　　　　　　　　答え
　　　　　　(採点) ※()がボタンです。
　　　　　　↓
(正解すれば　［次に進む］　違う場合　［もう一度］)(解答を表示)
————————————————
というようにしたいです。
次に進むは次の問題に進む感じです

返信
1. iyo より:
  
  2019/08/31 17:18
  
  すみません返信遅れました
  
  画像と回答欄とボタンを中央に移動したい
  
  これはCSSを検索していただくとすぐに分かるのですが、body {text-align:center;}と記述すれば中央に揃います。
  
  1問1問次のページの問題に進む
  
  これは少し時間を下さい。考え方としては問題文がli要素で構成されていますので、一旦1問目のli以外をelem.style.display = "none"で非表示にしてから解答するごとに1つずつ表示するliを送っていく方法があります。こうすると1問ごとにhtmlファイルを作る必要がなくなるため手間が省けます。
  
  現在はこの”一問一答式”のプログラムを作成中で、時期は未定ですが他のプログラムと同様に配布する予定です。
  配布の目処が立ちましたらお知らせしますので今しばらくお待ちください。
卒業研究に全てを賭ける男 より:

2019/08/13 12:24

あともう一つあります。
私のテスト問題は画像を使います。
その画像と回答欄とボタンを中央に移動したいです。
どうしたらよいのでしょうか。

返信
卒業研究に全てを賭ける男 より:

2019/08/12 14:01

こんにちは
★iyoさん
少しご相談したいごとがあるのですが、よろしいでしょうか。
この前ゼミの卒業生が来て
制作中の作品を見せたのですが
「なんで問題の数が5問なの？」と
冷たくいわれてショックを受けました。
（あんまり人間性は良くなっかたのですが見る目はあります）
問題は1問次1問で答えた方がやりやすいと
いわれました。
私も★iyoさんのシステムを改造してやったのですが
次の問題に進めるようには難しいです。
もし1問1問次のページの問題に進む
んだったらどうすればよいですか。
解答を表示、採点終了のボタンを次に進むのボタンにしたいです。

返信
卒業研究に全てを賭ける男 より:

2019/08/02 14:18

★iyoさん
お久しぶりです。
本当にありがとうございます。
今後とも言葉を選んで少しでも自分で考えるように
頑張ります。
7月では卒業研究中間発表会がありましたが
審査員の教授方が内容を全て理解し、高評価を頂きました。
これも★iyoさんの応援のおかげです。
期待を裏切らないようにしますのでよろしくお願いいたします。

返信
1. iyo より:
  
  2019/08/02 21:10
  
  高評価、おめでとうございます！
  お役に立てて何よりです。
  また何かありましたらご質問ください！
卒業研究に全てを賭ける男 より:

2019/07/27 16:07

★iyoさん
これまで何度も色々聞いてしまいまして
すみませんでした。
これまで私がコメントした内容は
スマホ版の仕方以外自分で考えれば直せるものでした。
また、感情論になったり変な質問してしまったことを
深くお詫びします。
本当に申し訳ありませんでした。

返信
1. iyo より:
  
  2019/07/27 17:31
  
  すみません返信遅れました
  既に変更方法がお分かりになったかもしれませんが、ここに簡潔ながら質問にお答えしたいと思います。
  
  リストマーカー(番号)を”A”にしたい
  
  上から順にA、B、C、…とするならスタイルをol {list-style-type:"upper-alpha";}とすれば良いですが、すべて”A”にするにはhtmlファイルそのものを書き換えるしかないと思います。
  
  正答と誤答で色の表示を変えたい
  
  elem.style.backgroundColorをelem.style.colorにすると背景色ではなく文字色が変わります。
  
  スマホからの閲覧に対応させたい
  
  これはhtmlファイルの<head>から</head>までの間ににコードを追加する必要があります。このブログでは<meta name="viewport" content="width=device-width">が適用されています。
  
  卒業研究がすばらしいものになるよう応援しています。
卒業研究に全てを賭ける男 より:

2019/07/27 14:32

何度も質問したりしてすみません。
このテストをスマホ版に対応したいのですが
どのようにすればよいのでしょうか。
またとある指摘を頂きまして
スマホ版でも見えるようにしてくれといわれました。
ごめんなさい。お願いします。

返信
卒業研究に全てを賭ける男 より:

2019/07/18 14:27

こんにちは。解答のときに色の表示についてですが、一つの問題に正しい答えと間違った答えの色の表示を別々で表示したいのですが、教えてもらえないでしょうか。

返信
卒業研究に全てを賭ける男 より:

2019/07/07 13:12

あともう一つよろしいでしょうか。
回答欄の横に番号が表示されていますよね。
あそこを番号ではなくA(answerの頭文字)で
表示したいのですが、プログラムを確認して
直したらずっと番号のままです。
ご迷惑おかけします。

例
１．□　　←図でいえばこれです

返信
卒業研究に全てを賭ける男 より:

2019/07/07 13:04

表示できるようになりました！
ありがとうございます！
これで文句いった彼らにぎゃふんといわせそうです！（笑）

>どのような問題を作成されたかわからない

私は手話(耳が聞こえない人に主に使うコミュニケーション手段)の
eラーニングを作成しておりまして詳細はあまり話せませんが
画像と選択肢を使った問題を卒業研究として作成しています。
それを作成して★iyoさんのホームページを
見てとても参考になっています。

何かお礼をすることはできませんが
結果を報告したいです。
また何度かお聞きするかもしれませんが
宜しくお願い致します。

返信
卒業研究に全てを賭ける男 より:

2019/07/03 22:55

★iyoさん。
この前はどうも本当にありがとうございました。
参考にしたおかげで卒業研究の進捗が
他の人たちよりも早く進みました。

本題ですが、このクイズで答え合わせのときに
〇と×を表示してわかりやすくしたいのですが
もしよろしければ教えてもらえないでしょうか。

実は同級生に「色じゃわからないので〇×にしろ」と
文句をいわれ、どう表現するか困っています。
(ランダムに問題を表示しろや見やすくしろと意見がいわれましたが
それは全て実行できるようにしました。)
〇×じゃなくても構いませんので参考になることを教えて頂ければ
いいなと思います。お願いします。

返信
1. iyo より:
  
  2019/07/06 21:41
  なるほど、良い文句を頂きました(笑)
  どのような問題を作成されたのかは分かりませんが、サンプルでは問題がすべて1行ずつなので、それぞれの番号の後ろにOXを表示させるのが良いのではないかと思います。
  jsファイルの中間付近のif (elem.value === ansArr[i]) {から始まる部分を以下のように変更すれば表示されるはずです。
  
  if (elem.value === ansArr[i]) { score += scoreArr[i]; elem.style.backgroundColor = clrCorr; elem.parentNode.insertAdjacentHTML("afterbegin", "O "); } else { elem.style.backgroundColor = clrInco; elem.parentNode.insertAdjacentHTML("afterbegin", "X "); }
  
  input/select要素の親であるli要素の開始タグの直後にHTMLを追加しています。
卒業研究に全てを賭ける男 より:

2019/06/29 00:20

あとすみません。
一応ですが
ツイート投稿用のボタンを
別のURLのページに移動するボタンに
変えたいのですが
教えて頂きませんか？

返信
1. iyo より:
  
  2019/06/29 11:31
  jsファイルの下のほうに、window.open()という関数が見当たると思いますが、まさにそれが別のページに移動するためのものです。
```
window.open("http://example.com");
  //新しいタブを開く
location.href = "http://example.com";
  //実行中のタブから移動
```
  必要に応じて使い分けてください。
卒業研究に全てを賭ける男 より:

2019/06/29 00:18

おおおお！！！
教えてくれてありがとうございます！
またわからないことがあったら
質問するかもしれませんが
よろしくお願いします。

返信

こんにちは
私はe-ラーニングを卒業研究でつくるため
このテストのプログラムを使いたいのですが
採点やコメントを送信で使われている
オレンジ色のボタンをテストのプログラムを作りたいの
ですが、どのようにソースコードを書き換えれば
いいのでしょうか。

返信

初めましてこんにちは。ご利用ありがとうございます。
余談ですが、あなたのコメントはこのブログで初めてのスパムではないコメントです。おめでとうございます(?)

さて、ボタンを当ブログと同じスタイルにする方法ですが、JavaScriptのファイルではなくhtmlファイルに手を加えることをおすすめします。
具体的には、sample.htmlの”<title>”と”</head>”の間に以下の内容を書き足すことで実現できます。

<style>
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	background: #e05d22; /* Old browsers */
	background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
	border: none;
	border-bottom: 3px solid #b93207;
	border-radius: 2px;
	color: #fff;
	display: inline-block;
	padding: 11px 24px 10px;
	text-decoration: none;
}

button:hover,
button:focus,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus {
	background: #ed6a31; /* Old browsers */
	background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */
	outline: none;
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
	background: #d94412; /* Old browsers */
	background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #d94412 0%, #e05d22 100%); /* W3C */
	border: none;
	border-top: 3px solid #b93207;
	padding: 10px 24px 11px;
}
</style>

これらのコードは当ブログと同じもので、ボタンの状態(クリックされている等)によってどのように装飾するかを定義しています。

web無番地

個人サークル市岡町創作所開発&更新情報

JavaScriptでテストを作る

1 : 入力方式(1問6点x5=30点)

2 : 選択方式(1問4点x5=20点)

「JavaScriptでテストを作る」への20件のフィードバック

コメントコメントをキャンセル

1 : 入力方式(1問6点x5=30点)

2 : 選択方式(1問4点x5=20点)

「JavaScriptでテストを作る」への20件のフィードバック

コメント コメントをキャンセル

コメントコメントをキャンセル