HTMLでオンラインテストを作ってみた話③

連動型セレクトボックスみたいな問題選択画面

前回、出題と解答のシステムを作ったので、今回は問題選択の画面を作ります。

テスト作りをイメージすると、科目で算数・理科・社会と選んで、さらに各科目で領域に分かれます。
算数なら速さ・割合とか、社会なら歴史・地理とか。
で、さらに奈良時代・平安時代とか領域内で単元に分けることになります。

これを一覧表みたくすると、めっちゃ長くなって探しにくい気がします。
そこで思いついたのが、1個目のセレクターで選んだ項目に合わせて、2個目のセレクターの中身が変化するような仕組みです。

思いついた、といっても作り方は思いつくはずもなく、ググってみることにします。
意外とあっさり見つかりました。


これをセレクタ3個に改造してこんな感じに。

See the Pen 連動セレクトボックス by Haru-You (@HaruYou) on CodePen.

3個目の単元セレクトまでArrayを入れてあるのは算数→和と差と、理科→物理、化学だけなので、試す場合はそちらを選んでください。
これなら理屈上、何段階でも連動させられる気がします（Arrayがぐちゃぐちゃになりそうですが）

3個目のセレクトボックスを選んだあと出題画面に行く際に、1個目と2個目で選んだ選択肢をIDとして拾えるようになっています。
問題番号の表示が変わるのをご確認ください。

これで問題選択システムも基本的に完成。
つぎはテストが終わった後に、成績を記録してそいつを閲覧するシステムが欲しいです。