連動型セレクトボックスみたいな問題選択画面
前回、出題と解答のシステムを作ったので、今回は問題選択の画面を作ります。
https://haruyou-blog.com/2019/05/29/post-5144/
テスト作りをイメージすると、科目で算数・理科・社会と選んで、さらに各科目で領域に分かれます。
算数なら速さ・割合とか、社会なら歴史・地理とか。
で、さらに奈良時代・平安時代とか領域内で単元に分けることになります。
これを一覧表みたくすると、めっちゃ長くなって探しにくい気がします。
そこで思いついたのが、1個目のセレクターで選んだ項目に合わせて、2個目のセレクターの中身が変化するような仕組みです。
思いついた、といっても作り方は思いつくはずもなく、ググってみることにします。
意外とあっさり見つかりました。
https://javascript.programmer-reference.com/js-selectbox-linkage/
これをセレクタ3個に改造してこんな感じに。
See the Pen 連動セレクトボックス by Haru-You (@HaruYou) on CodePen.
3個目の単元セレクトまでArrayを入れてあるのは算数→和と差と、理科→物理、化学だけなので、試す場合はそちらを選んでください。
これなら理屈上、何段階でも連動させられる気がします（Arrayがぐちゃぐちゃになりそうですが）
3個目のセレクトボックスを選んだあと出題画面に行く際に、1個目と2個目で選んだ選択肢をIDとして拾えるようになっています。
問題番号の表示が変わるのをご確認ください。
これで問題選択システムも基本的に完成。
つぎはテストが終わった後に、成績を記録してそいつを閲覧するシステムが欲しいです。