Bài kiểm tra với các lựa chọn trả lời trong mã HTML bằng JavaScript
Trong các bài học trước, câu trả lời cho các câu hỏi kiểm tra phải được nhập vào các ô input. Tuy nhiên, trong thực tế, cũng thường có những bài kiểm tra mà trong đó có thể chọn một phương án trả lời trong số các phương án được đề xuất. Hãy học cách tạo ra những bài kiểm tra như vậy.
Hãy lại bắt đầu với phiên bản đơn giản, khi các câu hỏi và câu trả lời được lưu trữ trong mã HTML, và sau đó chúng ta sẽ dần dần phức tạp hóa nó.
Vậy, đây là bài kiểm tra với các lựa chọn trả lời:
<div id="test">
<div>
<p>câu hỏi 1?</p>
<label>
<input type="radio" name="1" data-right>
phương án 1
</label>
<label>
<input type="radio" name="1">
phương án 2
</label>
<label>
<input type="radio" name="1">
phương án 3
</label>
</div>
<div>
<p>câu hỏi 2?</p>
<label>
<input type="radio" name="2">
phương án 1
</label>
<label>
<input type="radio" name="2" data-right>
phương án 2
</label>
<label>
<input type="radio" name="2">
phương án 3
</label>
</div>
<div>
<p>câu hỏi 3?</p>
<label>
<input type="radio" name="3">
phương án 1
</label>
<label>
<input type="radio" name="3">
phương án 2
</label>
<label>
<input type="radio" name="3" data-right>
phương án 3
</label>
</div>
</div>
Như bạn thấy, chúng ta có thể
chọn các phương án trả lời bằng nút radio. Đồng thời,
trong mỗi câu hỏi, nút radio với phương án đúng
được đánh dấu bằng thuộc tính data-right.
Hãy làm sao để khi chọn một trong các câu trả lời của câu hỏi thì câu trả lời đó lập tức được kiểm tra tính đúng đắn.
Sửa đổi mã của bạn sao cho việc kiểm tra các câu trả lời được thực hiện khi nhấn vào một nút.
