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”の内容を見本として掲載します。”採点”ボタンを押すと結果が表示されます。
数字や英字、記号はすべて半角小文字で、それ以外は全角文字で記入してください。
☆iyoさん
お久しぶりです。卒業研究に全てを賭ける男です。
こちらも返信が16日遅れて申し訳ありません。
今ようやくWeb制作が一先ず完成致しました。
まず中央揃えの仕方、一問一答形式は本当にありがとうございます。
一問一答は私がなんとかつくりあげましたが、☆iyoさんのシステムなら
私よりもしっかりしたプログラムになっていると思います。
決して水の泡になっていません。
これから改善していきより良い作品をつくっていきます。
私もまだまだ頑張りますのでこれからもよろしくお願い致します。
一応図としては
————————————————
問題文
┌────
│ │
│ │
└────
答え
(採点) ※()がボタンです。
↓
(正解すれば [次に進む] 違う場合 [もう一度])(解答を表示)
————————————————
というようにしたいです。
次に進むは次の問題に進む感じです
すみません返信遅れました
body {text-align:center;}
と記述すれば中央に揃います。elem.style.display = "none"
で非表示にしてから解答するごとに1つずつ表示するliを送っていく方法があります。こうすると1問ごとにhtmlファイルを作る必要がなくなるため手間が省けます。現在はこの”一問一答式”のプログラムを作成中で、時期は未定ですが他のプログラムと同様に配布する予定です。
配布の目処が立ちましたらお知らせしますので今しばらくお待ちください。
あともう一つあります。
私のテスト問題は画像を使います。
その画像と回答欄とボタンを中央に移動したいです。
どうしたらよいのでしょうか。
こんにちは
★iyoさん
少しご相談したいごとがあるのですが、よろしいでしょうか。
この前ゼミの卒業生が来て
制作中の作品を見せたのですが
「なんで問題の数が5問なの?」と
冷たくいわれてショックを受けました。
(あんまり人間性は良くなっかたのですが見る目はあります)
問題は1問次1問で答えた方がやりやすいと
いわれました。
私も★iyoさんのシステムを改造してやったのですが
次の問題に進めるようには難しいです。
もし1問1問次のページの問題に進む
んだったらどうすればよいですか。
解答を表示、採点終了のボタンを次に進むのボタンにしたいです。
★iyoさん
お久しぶりです。
本当にありがとうございます。
今後とも言葉を選んで少しでも自分で考えるように
頑張ります。
7月では卒業研究中間発表会がありましたが
審査員の教授方が内容を全て理解し、高評価を頂きました。
これも★iyoさんの応援のおかげです。
期待を裏切らないようにしますのでよろしくお願いいたします。
高評価、おめでとうございます!
お役に立てて何よりです。
また何かありましたらご質問ください!
★iyoさん
これまで何度も色々聞いてしまいまして
すみませんでした。
これまで私がコメントした内容は
スマホ版の仕方以外自分で考えれば直せるものでした。
また、感情論になったり変な質問してしまったことを
深くお詫びします。
本当に申し訳ありませんでした。
すみません返信遅れました
既に変更方法がお分かりになったかもしれませんが、ここに簡潔ながら質問にお答えしたいと思います。
ol {list-style-type:"upper-alpha";}
とすれば良いですが、すべて”A”にするにはhtmlファイルそのものを書き換えるしかないと思います。elem.style.backgroundColor
をelem.style.color
にすると背景色ではなく文字色が変わります。<meta name="viewport" content="width=device-width">
が適用されています。卒業研究がすばらしいものになるよう応援しています。
何度も質問したりしてすみません。
このテストをスマホ版に対応したいのですが
どのようにすればよいのでしょうか。
またとある指摘を頂きまして
スマホ版でも見えるようにしてくれといわれました。
ごめんなさい。お願いします。
こんにちは。解答のときに色の表示についてですが、一つの問題に正しい答えと間違った答えの色の表示を別々で表示したいのですが、教えてもらえないでしょうか。
あともう一つよろしいでしょうか。
回答欄の横に番号が表示されていますよね。
あそこを番号ではなくA(answerの頭文字)で
表示したいのですが、プログラムを確認して
直したらずっと番号のままです。
ご迷惑おかけします。
例
1.□ ←図でいえばこれです
表示できるようになりました!
ありがとうございます!
これで文句いった彼らにぎゃふんといわせそうです!(笑)
>どのような問題を作成されたかわからない
私は手話(耳が聞こえない人に主に使うコミュニケーション手段)の
eラーニングを作成しておりまして詳細はあまり話せませんが
画像と選択肢を使った問題を卒業研究として作成しています。
それを作成して★iyoさんのホームページを
見てとても参考になっています。
何かお礼をすることはできませんが
結果を報告したいです。
また何度かお聞きするかもしれませんが
宜しくお願い致します。
★iyoさん。
この前はどうも本当にありがとうございました。
参考にしたおかげで卒業研究の進捗が
他の人たちよりも早く進みました。
本題ですが、このクイズで答え合わせのときに
〇と×を表示してわかりやすくしたいのですが
もしよろしければ教えてもらえないでしょうか。
実は同級生に「色じゃわからないので〇×にしろ」と
文句をいわれ、どう表現するか困っています。
(ランダムに問題を表示しろや見やすくしろと意見がいわれましたが
それは全て実行できるようにしました。)
〇×じゃなくても構いませんので参考になることを教えて頂ければ
いいなと思います。お願いします。
なるほど、良い文句を頂きました(笑)
どのような問題を作成されたのかは分かりませんが、サンプルでは問題がすべて1行ずつなので、それぞれの番号の後ろにOXを表示させるのが良いのではないかと思います。
jsファイルの中間付近の
if (elem.value === ansArr[i]) {
から始まる部分を以下のように変更すれば表示されるはずです。input/select要素の親であるli要素の開始タグの直後にHTMLを追加しています。
あとすみません。
一応ですが
ツイート投稿用のボタンを
別のURLのページに移動するボタンに
変えたいのですが
教えて頂きませんか?
jsファイルの下のほうに、
window.open()
という関数が見当たると思いますが、まさにそれが別のページに移動するためのものです。必要に応じて使い分けてください。
おおおお!!!
教えてくれてありがとうございます!
またわからないことがあったら
質問するかもしれませんが
よろしくお願いします。
こんにちは
私はe-ラーニングを卒業研究でつくるため
このテストのプログラムを使いたいのですが
採点やコメントを送信で使われている
オレンジ色のボタンをテストのプログラムを作りたいの
ですが、どのようにソースコードを書き換えれば
いいのでしょうか。
初めましてこんにちは。ご利用ありがとうございます。
余談ですが、あなたのコメントはこのブログで初めてのスパムではないコメントです。おめでとうございます(?)
さて、ボタンを当ブログと同じスタイルにする方法ですが、JavaScriptのファイルではなくhtmlファイルに手を加えることをおすすめします。
具体的には、sample.htmlの”<title>”と”</head>”の間に以下の内容を書き足すことで実現できます。
これらのコードは当ブログと同じもので、ボタンの状態(クリックされている等)によってどのように装飾するかを定義しています。