ここから本文です

Javascriptで複数選択問題を作成しようと思います。 色々と考えているのですが...

tak********さん

2016/5/1010:03:47

Javascriptで複数選択問題を作成しようと思います。

色々と考えているのですがわからないので教えてください。

チェックボックスを使った問題で複数解答できるタイプです。

正解なら正解不正解なら不正解と表示し正しい解答が表示されること。
同じページに複数問題が出力できるものを考えています。

例えば以下のようにイメージです。

問題1

パリーグのチームを答えなさい

ソフトバンクホークス
阪神タイガース
西武ライオンズ
広島カープ

解答

問題2

九州の県を答えなさい。
佐賀
岡山
長崎
千葉
福岡
東京

解答

で問題1では
チェックボックスにソフトバンクと西武ライオンズだけチェックしてある場合だけ
解答をクリックしたら正解となり他のチェックボックスにチェックしてあったりした場合は
不正解となり正しい解答が表示される。

問題2でも同じ要領です。

このような問題はできるのでしょうか?
教えてください

閲覧数:
560
回答数:
3

違反報告

ベストアンサーに選ばれた回答

khu********さん

2016/5/1017:53:51

適当にサンプルを作ってみました。
http://khurata.dtdns.net/QA/q14159153004/

すでにある回答と違い、このサンプルでは問題のデータに応じて HTML DOM を生成しています。
そのため、設問を変更したい場合、データだけを書き換えれば対応できます。
(現状では19~26行目)

その後に続くプログラムは、一見すると難しそうですが、面倒なだけで、さほど難しいものではありません。
以下のような HTML を手で打ち込む代わりに、プログラムに作らせているだけです。

<div>
<div>問題1<br><br>パリーグのチームを答えなさい<br><br>
<form>
<div>
<input name="selection_0" type="checkbox" value="福岡ソフトバンクホークス"> 福岡ソフトバンクホークス<br>
</div>
<div>
<input name="selection_0" type="checkbox" value="埼玉西武ライオンズ"> 埼玉西武ライオンズ<br>
</div>
<div>
<input name="selection_0" type="checkbox" value="阪神タイガース"> 阪神タイガース<br>
</div>
<div>
<input name="selection_0" type="checkbox" value="広島東洋カープ"> 広島東洋カープ<br>
</div>
<input id="qAnswer_0" type="button" value="解答">
</form>
<br>
</div>
</div>

質問の例では、2問しかないので、上記を手入力しても大した手間ではありませんが、これが5問になったり10問になったり、あるいは選択肢が多くなったりすると、全てを打ち込んでいくのは大変です。

また、「手打ち」だと、選択肢が常に同じ順で表示されるので、クイズとしては多少面白味に欠けると思います。

いったんプログラムにしてしまえば、(プログラムを作る最初のひと手間は面倒ですけれども)あとはデータだけ書き換えれば、自動的に設問の HTML が生成されるので、長い目で見れば楽でしょう。
また、プログラム実行では選択肢をランダム順に表示させることができるので(本サンプルはそうしています)、リロードするたびにチェックすべき位置が変わり、面白味も演出できます。

この質問は投票によってベストアンサーに選ばれました!

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

プロフィール画像

カテゴリマスター

sii********さん

2016/5/1011:33:15

sample: quiz by using checkbox - JSFiddle
https://jsfiddle.net/sii_side/roc35rgj/

kit********さん

2016/5/1011:27:07

もちろんできます。

やり方ですが、
前提として複数選択ではなく単一選択の場合でしたら記述できますか?

あわせて知りたい

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる