JavaScriptを使用したHTMLコードでの選択式クイズ

これまでのレッスンでは、クイズの答えは入力フィールドに入力する必要がありました。しかし実際には、提供された選択肢から 1つを選ぶ形式のクイズもよくあります。そのようなクイズの作り方を学びましょう。

まずはシンプルなバージョンから始めましょう。質問と答えはHTMLコード内に保存され、その後、段階的に複雑にしていきます。

では、選択式クイズの例です：

<div id="test">
	<div>
		<p>質問1？</p>
		
		<label>
			<input type="radio" name="1" data-right>
			選択肢1
		</label>
		<label>
			<input type="radio" name="1">
			選択肢2
		</label>
		<label>
			<input type="radio" name="1">
			選択肢3
		</label>
	</div>
	<div>
		<p>質問2？</p>
		
		<label>
			<input type="radio" name="2">
			選択肢1
		</label>
		<label>
			<input type="radio" name="2" data-right>
			選択肢2
		</label>
		<label>
			<input type="radio" name="2">
			選択肢3
		</label>
	</div>
	<div>
		<p>質問3？</p>
		
		<label>
			<input type="radio" name="3">
			選択肢1
		</label>
		<label>
			<input type="radio" name="3">
			選択肢2
		</label>
		<label>
			<input type="radio" name="3" data-right>
			選択肢3
		</label>
	</div>
</div>

ご覧の通り、ラジオボタンを使用して回答を選択できます。各質問において、正しい選択肢のラジオボタンには属性 data-right が付いています。

質問のいずれかの答えを選択したときに、その答えが即座に正解かどうかチェックされるようにしてください。

コードを修正して、ボタンを押したときに答えのチェックが行われるようにしてください。