どうも！LSSです！！
昨日の記事、
【CSS】突然ですがクイズです！ - Little Strange Software
ですが、コードの簡略化に成功しました^^
問題の追加がやりやすく、文字数も少なくできるようになっています。
ついでに、選択肢の後に「説明文」をつける事もできるようになりました。
突然ですが、クイズです！その２
問１ 「iPhone」の名称、日本で商標登録しているのは？
問２ TVアニメ「デビルマン」の主人公は？
原作漫画の方はそうでした。
TVアニメ版では「不動明の体を乗っ取った悪魔デビルマン」が人間側に寝返り…という話になっています。
原作漫画で不動明が手に入れた悪魔の体の元の持ち主、ですね。
コード
<style><!--
.chk{display:none;}
.chk:checked~.atr:before{content:"〇";font-weight:bold;color:blue;}
.chk:checked~.hzr:before{content:"×";font-weight:bold;color:red;}
.atxt{display:none;}
.chk:checked~.atxt{display:inline-block;font-weight:bold;color:blue;}
--></style>
<p>問１ 「iPhone」の名称、日本で商標登録しているのは？</p>
<p><input id="q1a" class="chk" name="q1r" type="radio" /><label class="hzr" for="q1a">Apple</label></p>
<p><input id="q1b" class="chk" name="q1r" type="radio" /><label class="hzr" for="q1b">Google</label></p>
<p><input id="q1c" class="chk" name="q1r" type="radio" /><label class="atr" for="q1c">アイホン株式会社</label></p>
<p> </p>
<p>問２ TVアニメ「デビルマン」の主人公は？</p>
<p><input id="q2a" class="chk" name="q2r" type="radio" /><label class="hzr" for="q2a">不動 明</label><span class="atxt">原作漫画の方はそうでした。</span></p>
<p><input id="q2b" class="chk" name="q2r" type="radio" /><label class="atr" for="q2b">デビルマン</label><span class="atxt">TVアニメ版では「不動明の体を乗っ取った悪魔デビルマン」が人間側に寝返り…という話になっています。</span></p>
<p>
<input id="q2c" class="chk" name="q2r" type="radio" /><label class="hzr" for="q2c">勇者アモン</label><span class="atxt">原作漫画で不動明が手に入れた悪魔の体の元の持ち主、ですね。</span></p>
クイズ問題の追加の方法について
昨日のバージョンでは<style>～</style>タグまで一問づつコピペし、あちこち書き換える方式でしたが、こちらはHTML部分のみのコピペ＆書き換えで問題を追加できます！
ひとつの問題は、
<p>問題の文章</p>
<p>
<input id="q1a" class="chk" name="q1r" type="radio" />
<label class="hzr" for="q1a">選択肢A</label>
<span class="atxt">説明文A</span>
</p>
<p>
<input id="q1b" class="chk" name="q1r" type="radio" />
<label class="atr" for="q1b">選択肢B</label>
<span class="atxt">説明文B</span>
</p>
<p>
<input id="q1c" class="chk" name="q1r" type="radio" />
<label class="hzr" for="q1c">選択肢C</label>
<span class="atxt">説明文C</span>
</p>
という形式になっています。
このうち、ひとつの選択肢だけに着目すると、
<p>
<input id="q1a" class="chk" name="q1r" type="radio" />
<label class="atrまたはhzr" for="q1a">選択肢A</label>
<span class="atxt">説明文A</span>
</p>
となります。
青字の数字が問題番号で、１つの問題ごとに2、3、と連番をふっていく事で、何問でも作成できます^^
class="atrまたはhzr"
の部分は、その選択肢が正解なら「class="atr"」、不正解なら「class="hzr"」と入れておく事で、選択された時に〇がつくか×がつくかが変わります。（正解・不正解の違いはここだけです）
<span class="atxt">説明文A</span>
この「class="atxt"」を指定した部分は最初非表示で、選択肢がクリックされた時だけ、選択肢の後ろに表示されます。
選択肢についての説明文にいいですね^^
説明文が不要な場合は、この部分をまるごと削除して構いません。
（このサンプルのコードの問１部分がまるごと削除した例です。）
はてなブログ限定の注意点
選択肢に、はてなキーワードの対象となる単語を使用しているとクリックできない場合があります。
その場合は
[]選択肢の単語[]
のように、前後に [] を入れて挟む事で回避できます。
また、選択肢部分に、はてなブログで画像を挿入したタグを貼り付けた場合、
<img src="画像ファイルのURL" alt="f:id:（中略）:plain" width="1200" height="630" loading="lazy" title="" class="hatena-fotolife" itemprop="image" />
のようなタグになりますが、このうち
class="hatena-fotolife"
部分を削除する事で、はてなブログの画像クリック時の挙動を回避する事ができます^^
やっと自分で納得できるコードになりました^^
【CSS】本をめくる、のページ追加方法について - Little Strange Software
も そうなんですが、inputタグをlabelタグを組み合わせた場合のCSSセレクタを、いかに簡略化するか？
が、色々とどうするのがいいか考えさせられます。（CSSの字数を減らすとHTMLの字数が増える、とか）
今回のコードは、
<style><!--
.chk{display:none;}
.chk:checked~.atr:before{content:"〇";font-weight:bold;color:blue;}
.chk:checked~.hzr:before{content:"×";font-weight:bold;color:red;}
.atxt{display:none;}
.chk:checked~.atxt{display:inline-block;font-weight:bold;color:blue;}
--></style>
を一回だけ入れておいて、あとはHTMLの変更だけで問題追加できる、という綺麗なカタチになりました^^
…そしてサンプルの問題がまた、問２がアラフォー～アラフィフ向けになっているのはご愛敬ｗ
（問１もちょっと意外性があります、よね？ 参考→アイホン - Wikipedia）
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
