4択クイズの採点ページを作成したいです。

前提・実現したいこと

ソースコードのような4択の質問に対して、採点結果を表示するページを作成したいと考えております。
回答者の選択、正しい回答、回答の説明の三点を表記し、実装したいと考えているのですが、回答者の選択、正しい回答の表記をcssのラジオボタンのみで実装することは可能でしょうか？

発生している問題・エラーメッセージ

該当のソースコード

<div class="question">
Q1 ~~~~~~~~~？
</div>
<div class="answer-choice">
<input type="radio" id="radio1" />
<label for="radio1">a</label>
</div>
<div class=&q
<input type="radio" id="radio2"/>
<label for="radio2">b</label>
</div>
<div class="answer-choice">
<input type="radio" id="radio3"/>
<label for="radio3">c</label>
</div>
<div class="answer-choice">
<input type="radio" id="radio4" />
<label for="radio4">d</label>
</div>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

ベストアンサー

可能ですが、Javascriptなどを使うほうが無難だと思います。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        span {
10            display: block;
11            margin: 15px 0;
12        }
13
14        span[class="All_OK"] {
15            display: none;
16        }
17
18        span[class="All_NG"] {
19            display: none;
20        }
21
22        span[class="Q1_OK"] {
23            display: none;
24        }
25
26        span[class="Q2_OK"] {
27            display: none;
28        }
29
30        input[data-q1="ok"]:checked~input[data-q2="ok"]:checked~span[class="All_OK"] {
31            display: block;
32        }
33
34        input[data-q1="ng"]:checked~input[data-q2="ng"]:checked~span[class="All_NG"] {
35            display: block;
36        }
37
38        input[data-q1="ok"]:checked~input[data-q2="ng"]:checked~span[class="Q1_OK"] {
39            display: block;
40        }
41
42        input[data-q1="ng"]:checked~input[data-q2="ok"]:checked~span[class="Q2_OK"] {
43            display: block;
44        }
45    </style>
46</head>
47
48<body>
49    <span>Q1 今何問目？</span>
50    <input type="radio" name="q1" value="1" data-q1="ok">1問目
51    <input type="radio" name="q1" value="2" data-q1="ng">2問目
52    <input type="radio" name="q1" value="3" data-q1="ng">3問目
53    <input type="radio" name="q1" value="4" data-q1="ng">4問目
54    <span>Q2 今何問目？</span>
55    <input type="radio" name="q2" value="1" data-q2="ng">1問目
56    <input type="radio" name="q2" value="2" data-q2="ok">2問目
57    <input type="radio" name="q2" value="3" data-q2="ng">3問目
58    <input type="radio" name="q2" value="4" data-q2="ng">4問目
59
60    <span class="All_OK">全問正解！</span>
61    <span class="All_NG">全問不正解！</span>
62    <span class="Q1_OK">1問正解 Q1正解 Q2不正解 Q2の答え2問目 </span>
63    <span class="Q2_OK">1問正解 Q2正解 Q1不正解 Q1の答え1問目 </span>
64</body>
65
66</html>
67