どうも！LSSです！！
ふと、「JavaScriptを使わず、CSSだけでクイズシステムを作れないか？」と思いついてしまい、作ってみちゃいました^^
選択肢をクリックすると〇か×がつく、というだけのものですが、とりあえず遊べますｗ
突然ですがクイズです！
問１ apple、日本語で言うと？
問２ 次のうち、王族は誰？
コード
<style><!--
#q1a,#q1b,#q1c{display:none;}
#q1a:checked~label:before{content:"〇";font-weight:bold;color:blue;}
#q1b:checked~label:before{content:"×";font-weight:bold;color:red;}
#q1c:checked~label:before{content:"×";font-weight:bold;color:red;}
--></style>
<p>問１ apple、日本語で言うと？</p>
<p><input id="q1a" name="q1r" type="radio" /><label for="q1a">りんご</label></p>
<p><input id="q1b" name="q1r" type="radio" /><label for="q1b">みかん</label></p>
<p><input id="q1c" name="q1r" type="radio" /><label for="q1c">バナナ</label></p>
<p> </p>
<style><!--
#q2a,#q2b,#q2c{display:none;}
#q2a:checked~label:before{content:"×";font-weight:bold;color:red;}
#q2b:checked~label:before{content:"〇";font-weight:bold;color:blue;}
#q2c:checked~label:before{content:"×";font-weight:bold;color:red;}
--></style>
<p>問２ 次のうち、王族は誰？</p>
<p><input id="q2a" name="q2r" type="radio" /><label for="q2a">[]魔法使いチャッピー[]</label></p>
<p><input id="q2b" name="q2r" type="radio" /><label for="q2b">[]魔法使いサリー[]</label></p>
<p><input id="q2c" name="q2r" type="radio" /><label for="q2c">[]魔女っ子メグちゃん[]</label></p>
コードについて説明
コードのうち、
<style><!--
#q1a,#q1b,#q1c{display:none;}
#q1a:checked~label:before{content:"〇";font-weight:bold;color:blue;}
#q1b:checked~label:before{content:"×";font-weight:bold;color:red;}
#q1c:checked~label:before{content:"×";font-weight:bold;color:red;}
--></style>
<p>問１ apple、日本語で言うと？</p>
<p><input id="q1a" name="q1r" type="radio" /><label for="q1a">りんご</label></p>
<p><input id="q1b" name="q1r" type="radio" /><label for="q1b">みかん</label></p>
<p><input id="q1c" name="q1r" type="radio" /><label for="q1c">バナナ</label></p>
が１つの問題のセットです。
問題を増やす場合、このセットをコピペして、赤字部分の数字を２問めなら2、３問めなら3、というように書き換える事で、何問でも追加できます^^
正解・不正解の判定ですが、
#q1a:checked~label:before{content:"〇";font-weight:bold;color:blue;}
#q1b:checked~label:before{content:"×";font-weight:bold;color:red;}
#q1c:checked~label:before{content:"×";font-weight:bold;color:red;}
この問題の場合、１つめの回答が正解なので、１つめだけ
content:"〇";font-weight:bold;color:blue;
と青字で〇がつくようになっており、２つめと３つめは
content:"×";font-weight:bold;color:red;
と赤字で×が表示されるようになっています。
正解がいくつめの回答か、に応じて { } の内容を置き換える事で、正解・不正解を表現しています^^
また、サンプルコードの２問めについてですが、
<p><input id="q2a" name="q2r" type="radio" /><label for="q2a">[]魔法使いチャッピー[]</label></p>
のように、答えの前後に [] をつけています。
…問題例に、この問題のように固有名詞が回答にくるものを使ってしまった場合、はてなブログではキーワード機能が働いてしまい、クリックできなくなってしまう事があるので、キーワード化を防ぐために [] で囲んでいます^^;::
そんな注意点もありますが、問題文や選択肢部分は好きな文章に変更できますし、改行や装飾も自由にできたりしますよ^^
余談：問２の問題の内容について
「魔法使いチャッピー」は魔法の国の貴族の娘、「魔法使いサリー」は王女、「魔女っ子メグちゃん」は魔界の次期女王候補（王家の血縁というわけではない）、という設定だそうです。
…知ってても何も得しない情報でしたねｗｗｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
