Bài kiểm tra với câu hỏi và câu trả lời trong mã HTML bằng JavaScript
Trong bài này và một vài bài tiếp theo, chúng ta sẽ cùng nhau tạo ra các bài kiểm tra với câu hỏi và câu trả lời. Hãy bắt đầu với những phiên bản đơn giản nhất và dần dần làm phức tạp chúng lên.
Đầu tiên, giả sử chúng ta muốn tạo một bộ câu hỏi, trong đó mỗi câu chỉ có thể có một câu trả lời. Giả sử câu trả lời được người dùng nhập vào các ô input bên dưới chính câu hỏi đó.
Tôi sẽ minh họa những gì đã viết bằng mã HTML:
<div id="test">
<div>
<p>Câu hỏi 1?</p>
<input>
</div>
<div>
<p>Câu hỏi 2?</p>
<input>
</div>
<div>
<p>Câu hỏi 3?</p>
<input>
</div>
</div>
Như bạn thấy, chúng ta có các câu hỏi và các ô input cho câu trả lời. Việc còn lại là nghĩ xem, chúng ta sẽ lưu trữ các câu trả lời đúng ở đâu.
Điều đơn giản nhất có thể nghĩ ra - đó là
lưu trữ câu trả lời ngay trong mã HTML của các ô input,
trong một thuộc tính data- nào đó:
<div id="test">
<div>
<p>Câu hỏi 1?</p>
<input data-right="Câu trả lời 1">
</div>
<div>
<p>Câu hỏi 2?</p>
<input data-right="Câu trả lời 2">
</div>
<div>
<p>Câu hỏi 3?</p>
<input data-right="Câu trả lời 3">
</div>
</div>
Điểm cần suy nghĩ tiếp theo: thời điểm nào chúng ta sẽ thực hiện kiểm tra tính đúng sai của câu trả lời? Ở đây có thể đề xuất hai phương án: hoặc là mỗi ô input ngay lập tức sau khi nhập câu trả lời vào đó sẽ kiểm tra xem câu trả lời này có đúng không, hoặc là sẽ có một nút, khi nhấn vào đó thì tất cả câu trả lời của mọi câu hỏi sẽ được kiểm tra cùng lúc.
Dù chọn phương án nào đi nữa, thì hãy, nếu câu trả lời đúng, chúng ta sẽ tô viền của ô input màu xanh lá cây, còn nếu sai - màu đỏ. Hãy tạo các lớp CSS tương ứng cho việc này:
.right {
border: 1px solid green;
}
.wrong {
border: 1px solid red;
}
Hãy làm sao để việc nhập câu trả lời vào ô input hoàn tất
bằng cách nhấn phím Enter. Giả sử trong trường hợp này
ô input ngay lập tức kiểm tra tính đúng sai của câu trả lời.
Hãy sửa đổi mã của bạn sao cho việc kiểm tra câu trả lời được thực hiện khi nhấn vào một nút.
