Wiki3 採点付き検定機能の作り方1（× CSS）

•  Top
• 小技・テクニック集
• ムズ
• 採点付き検定機能
• ▶解答欄の作り方１

---

 

 

　検定機能を実装する場合、多くの工程が必要になります。まずは骨組みとなるマークシート（解答欄）を作り、そこから正誤判定が出来るように機能を追加していくのがよいでしょう。

 

実行例

 

問１

Q. トマトは何科の野菜？

 さくらんぼ　　　　　　　　

 ナス　　　　　　　　　　　

 バラ　　　　　　　　　　　

 そもそも野菜じゃねーよハゲ

 さくらんぼ　　　　　　　　

 ナス　　　　　　　　　　　

 バラ　　　　　　　　　　　

 そもそも野菜じゃねーよハゲ

 さくらんぼ　　　　　　　　

 ナス　　　　　　　　　　　

 バラ　　　　　　　　　　　

 そもそも野菜じゃねーよハゲ

 さくらんぼ　　　　　　　　

 ナス　　　　　　　　　　　

 バラ　　　　　　　　　　　

 そもそも野菜じゃねーよハゲ

 さくらんぼ　　　　　　　　

 ナス　　　　　　　　　　　

 バラ　　　　　　　　　　　

 そもそも野菜じゃねーよハゲ

 

 

ソース

準備中

 

解説

 

前提

　今回の目標はラジオボタンを作ることです。ラジオボタンっていうのは同時に二つ以上押せないボタンのことですよ。

 

 

 

　　

 

　　

 

 

　　

 

　　

 

 

　　

 

　　

 

 

　Wiki3が搭載しているフレームワークの一つに Uikit があります。こちらで定義されたアイコンを追加するクラス名 uk-icon とそれを切り替える data-uk-toggle を使えばオンオフボタンは一行で作れます。

 

 

 

※例では分かりやすく style=" cursor: pointer " を与えてます
 

<p class="uk-text-center"><span data-uk-toggle="{target:'.onoff', cls:'uk-icon-dot-circle-o'}"><span class="onoff uk-icon uk-icon-circle-o uk-icon-large">&nbsp;</span></span></p>

 

 

　ですがただ単に３つ並べるだけだと複数選択することができてしまい、ラジオボタンにはなりません。なにゆえ？


 

 

 　　 　　 

 

　このように複数選択することができるボタンをチェックボックスといいます。
 

　もちろん、試験問題を複数回答可能とすることで難易度の高い問題を作ることは可能です。しかし全問そのようにするのはあまり一般的ではないような気がします。

 

 

大問１とかの最終問題にありがちな奴 ↓

問１

Q. 次の野菜のうち、緑黄色野菜の定義を満たさないものを全て選びなさい。（複数回答可）

ピーマン

トマト

ブロッコリー

ニラ

 

 

　ちなみにこういう問題を出題すると今後採点プログラムを書く時の難易度が飛躍的に上がります。なのでできるだけ避けた方がいいです。

　長いので折りたたんでいます。
 

ラジオボタンの仕組みを知ろう

　つまるところ、今作るべきはチェックボックスじゃありませんよという話です。ここでもう一度ラジオボタンとチェックボックスの挙動を確認してみましょう。今度はボタン一個に注目してみてください。

 

 

ラジオボタン

 

　　

 

　　

 

 

　　

 

　　

 

 

　　

 

　　

 

 

 

チェックボックス

 　　 　　 

 

 

　チェックボックスはそれぞれのボタンが別々に動いているのに対し、ラジオボタンはボタン一つ取ってもシステム的には色んな行動パターンがあります。
 

 

1. 自身が押されている　　　　　　　  →　　押せない
2. 他のボタン（A）が押されている　　→　　押すとAの選択を解除する
3. 他のボタン（B）が押されている　　→　　押すとBの選択を解除する

 

 

じゃあどないすんねん

 

 

って話でしょ？　早い話、別のアプローチで疑似的に再現すればいいんです。
 

 

余談

　Uikit ではラジオボタンを作るためのクラス名 uk-button-radio なるものが定義されています。

 

　が、このクラス名は押し込むことが可能なボタンを設置するタグ <button> と併用することを前提としています。Wiki3においては不思議な力によって <button> が封じ込められているので事実上使えません。
 

 

 

ボタン
 

↑ 押し込んでも凹まない ↑

　長いので折りたたんでいます。
 

 

実際に作ってみよう

　ラジオボタンを作るときは、ネタバレ隠しの知識を応用します。具体的なイメージとしては、回答者がとりうるすべての選択肢を網羅した画像を1枚ずつ用意して、
 

 

（　 　　 　　 　）

 　　 　　 

 　　 　　 

 　　 　　 

 

 

　それらを data-uk-toggle でうまいこと表示・非表示を切り替えて圧縮することで「実質」ラジオボタンの役割を持った画像を作っていきます。

 

ボタンが何も押されていない状態の解答欄を作る

　まず初めに、適当な選択肢を一つ作ります。

 

 解答１

 

<p><span class="uk-icon-circle-o">&nbsp;解答１</span></p>

　丸いアイコンは class=" uk-icon " を使いました。uk-icon の詳しい使い方はこちら。
 

　コードがかなり横に長くなるので、慣れない人は「しかく」と打って変換される白抜きの四角形などで代用してもいいです。

 

 

　次に、選択肢をコピペで増やします。

 

 解答１

 解答１

 解答１

 解答１

 

　そうしたらそれらを <div></div> で囲んで、箱を class = " Q_1 " 等と命名します。名前はその箱が「一問目のデフォルト状態の解答欄」であることが分かればなんでもいいです。

 

　あとついでに、名前に uk-text-center と追加して中央ぞろえにしておきましょう。

 

 

 解答１

 解答１

 解答１

 解答１

 

 

<div class="Q_1 uk-text-center">
<p><span class="uk-icon-circle-o">&nbsp;解答１</span></p>

<p><span class="uk-icon-circle-o">&nbsp;解答１</span></p>

<p><span class="uk-icon-circle-o">&nbsp;解答１</span></p>

<p><span class="uk-icon-circle-o">&nbsp;解答１</span></p>
</div>

　こちらの Q_1 が解答欄の土台になります。

 

 

＞＞NEXT　解答欄を完成させよう