Thuật toán làm bài trắc nghiệm đơn giản với Javascript + HTML

Chào các bạn, lâu quá mình không viết bài mới. Hôm nay mình sẽ viết bài viết chia sẻ thủ thuật làm trắc nghiệm đơn giản với javascript + html vì có bạn inbox hỏi mình cách làm ĐƠN GIẢN NHẤT  (ở đây mình chuyên dùng jquery vì nó như là tất yếu, các bạn nếu không muốn nhúng jquery mà chỉ dùng javascript thì để lại bình luận bên dưới nhé).

PHÂN TÍCH : Mình dùng một chuỗi bao gồm câu hỏi và câu trả lời, trong đó các câu hỏi tách nhau bởi ký tự |, trong khi đó trong câu hỏi có các câu trả lời sẽ được tách nhau bởi dấu ; (trong đó câu trả lời đúng sẽ có ký tự [ ở đầu câu). Với câu trúc như vậy, bạn có thể cho bao nhiêu câu hỏi và bao nhiêu câu trả lời cũng được. Các bạn có thể soi code sẽ hiểu. Tương tự, nếu áp dụng cho trắc nghiệm với TOÁN - LÝ - HÓA, các bạn có thể dùng hình ảnh bằng câu trả lời thì sẽ ra được bố cục đẹp hơn. Mình thấy cái này đơn giản nên không code thêm. Bạn nào mà không làm được thì để lại bình luận bên dưới nhé. CHÚC CÁC BẠN THÀNH CÔNG !

P/S : Màu vàng là câu trả lời của bạn. Màu đỏ là câu trả lời đúng.[html]<div id="noi_dung_de" style='display:none;'>
Nội dung nào sau đây thể hiện quyền bình đẳng trong lĩnh vực hôn nhân và gia đình;[Cùng đóng góp công sức để duy trì đời sống phù hợp với khả năng của mình;Tự do lựa chọn nghề nghiệp phù phợp với khả năng của mình;Thực hiện đúng các giao kết trong hợp đồng lao động;Đảm bảo quyền lợi hợp pháp của người lao động.|
Điều nào sau đây không phải là mục dích của hôn nhân:;xây dựng gia đình hạnh phúc;củng cố tình yêu lứa đôi;tổ chức đời sống vật chất của gia đình;[thực hiện đúng nghĩa vụ của công dân đối với đất nước
</div>[/html][js]<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>
//CODE BY THICHCODE.NET
var nd = $("#noi_dung_de").html();
var cau_hoi = nd.split('|');
var html = "";
var tra_loi_dung = 0;
for (var i = 0; i < cau_hoi.length; i++) {
var chi_tiet = cau_hoi[i].split(';');
//alert(chi_tiet[i]);
for (var j = 0; j < chi_tiet.length; j++) {

if (j == 0) html += "<tr><td><b>Câu " + (i + 1) + ":</b></td><td> <b>" + chi_tiet[j].trim() + "</b></td></tr>";
else {
html += "<tr><td></td><td id='" + (i + 1 + String.fromCharCode(64 + j)) + "'><input type='checkbox' name='" + (i + 1 + String.fromCharCode(64 + j)) + "' value='" + chi_tiet[j].trim() + "'> " + String.fromCharCode(64 + j) + ". " + chi_tiet[j].replace("[", "").trim() + "</td></tr>";
}
}
}

$("#noi_dung_de").empty().append("<table>" + html + "</table><input type='submit' value='Trả lời xong' id='tra_loi_xong'>").fadeIn();
$("#noi_dung_de input").click(function() {
//Lấy tên của checkbox
var id = $(this).attr("name");

//Đổi màu nền câu trả lời

if ($(this).is(":checked")) $("td#" + id).css("background-color", "yellow");
else $("td#" + id).css("background-color", "");
});

$("#tra_loi_xong").click(function() {
$('#noi_dung_de input').each(function() {
var id = $(this).attr("name");
var ctl = $(this).val();

//Hiển thị câu đúng với nền là màu đỏ
if (ctl[0] == '[') {
//alert($("td#" + id).css("background-color"));
if ($("td#" + id).css("background-color") == "rgb(255, 255, 0)") {
tra_loi_dung++;
} else $("td#" + id).css("background-color", "red");
}
});
$("#noi_dung_de").append("<p>Trả lời đúng :" + (tra_loi_dung < 0 ? "0" : tra_loi_dung) + " câu</p>");
$("#tra_loi_xong").fadeOut();
});
</script>[/js]