B C D
Lời giải chi tiết:<tr> là Table Row. Thẻ khác thẻ | ở điểm nào?
A dùng cho ô tiêu đề, chữ thường in đậm và căn giữaB dùng cho ô dữ liệu bình thườngC dùng cho tiêu đề
Lời giải chi tiết:<th> (Table Header) giúp phân biệt hàng/cột tiêu đề. Để gộp 2 ô theo chiều ngang (gộp cột), ta dùng thuộc tính nào?
Lời giải chi tiết:colspan (column span) xác định số cột một ô chiếm. Để gộp 2 ô theo chiều dọc (gộp hàng), ta dùng thuộc tính nào?
Lời giải chi tiết:rowspan (row span) xác định số hàng một ô chiếm. Cấu trúc tối thiểu của một bảng gồm những thẻ nào theo đúng thứ tự lồng nhau?
Lời giải chi tiết:Bảng chứa hàng, hàng chứa các ô. Muốn danh sách bắt đầu bằng chữ cái A, B, C thay vì 1, 2, 3, ta dùng thuộc tính?
Lời giải chi tiết:Thuộc tính type xác định kiểu đánh số. Để thêm chú thích cho bảng (hiển thị ngay phía trên bảng), dùng thẻ?
A </div></div><div data-question-id="ex_9" data-answer-id="opt_9_1" data-type="single_choice" class="flex items-center p-4 rounded-xl border-2 transition-all duration-150 select-none border-gray-250 dark:border-slate-800/80 hover:bg-gray-50 dark:hover:bg-slate-800/40 text-gray-700 dark:text-slate-300 cursor-pointer option-item"><div class="w-6 h-6 rounded-full mr-3 flex items-center justify-center font-bold text-xs transition-colors border bg-gray-100 border-gray-300 text-gray-500 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400">B</div><div class="text-sm md:text-base font-medium flex-1 [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1"><header></div></div><div data-question-id="ex_9" data-answer-id="opt_9_2" data-type="single_choice" class="flex items-center p-4 rounded-xl border-2 transition-all duration-150 select-none border-gray-250 dark:border-slate-800/80 hover:bg-gray-50 dark:hover:bg-slate-800/40 text-gray-700 dark:text-slate-300 cursor-pointer option-item"><div class="w-6 h-6 rounded-full mr-3 flex items-center justify-center font-bold text-xs transition-colors border bg-gray-100 border-gray-300 text-gray-500 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400">C</div><div class="text-sm md:text-base font-medium flex-1 [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1"><caption></div></div><div data-question-id="ex_9" data-answer-id="opt_9_3" data-type="single_choice" class="flex items-center p-4 rounded-xl border-2 transition-all duration-150 select-none border-gray-250 dark:border-slate-800/80 hover:bg-gray-50 dark:hover:bg-slate-800/40 text-gray-700 dark:text-slate-300 cursor-pointer option-item"><div class="w-6 h-6 rounded-full mr-3 flex items-center justify-center font-bold text-xs transition-colors border bg-gray-100 border-gray-300 text-gray-500 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400">D</div><div class="text-sm md:text-base font-medium flex-1 [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1"><summary></div></div></div><!-- Đúng / Sai Options Container (msq) --><!-- Short Answer Container (sa) --><!-- Essay / Tự luận Container (tl) --><!-- Review Mode: Show Explanation --></div><div class="quiz-feedback-box hidden mt-6 p-6 rounded-2xl border transition-colors duration-200"><div class="flex items-center space-x-3 mb-3"><span class="feedback-icon w-8 h-8 rounded-full flex items-center justify-center text-white"></span><h4 class="feedback-title font-bold text-base"></h4></div><p class="feedback-text text-sm leading-relaxed mb-4"></p><div class="p-4 rounded-xl bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/5"><h5 class="text-xs font-bold text-gray-500 dark:text-slate-400 uppercase tracking-wider mb-1">Lời giải chi tiết:</h5><p class="text-sm text-gray-700 dark:text-slate-300 leading-relaxed font-medium"><caption> dùng để đặt tên cho bảng.</p></div></div></div><div class="quiz-question-wrapper" data-index="10" style="display: none;"><div class="bg-white border border-gray-250 dark:bg-slate-900 dark:border-slate-800/80 rounded-2xl p-6 shadow-sm mb-6 transition-colors duration-200"><!-- Header: Question Number and Difficulty --><div class="flex items-center justify-between mb-4"><span class="inline-flex items-center px-3 py-1 rounded-xl text-xs font-bold bg-gray-100 text-gray-700 dark:bg-slate-800 dark:text-slate-300">Câu 11</span><div class="flex items-center space-x-2"><!-- Question Type --><span class="text-xs font-semibold text-gray-400 dark:text-slate-500">Đúng / Sai</span><!-- Difficulty Badge --><span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-extrabold uppercase bg-amber-50 text-amber-600 dark:bg-amber-950/20 dark:text-amber-400">Trung bình</span></div></div><!-- Question Content --><div class="text-base md:text-lg font-semibold text-gray-800 dark:text-slate-100 mb-6 leading-relaxed whitespace-pre-wrap select-none question-text [&_img]:max-w-full [&_img]:rounded-lg [&_img]:mx-auto [&_img]:my-3 [&_p]:inline"><p>HTML có những loại danh sách nào?</p>
</div><!-- Standard Options Container (single_choice, multiple_choice, true_false) --><!-- Đúng / Sai Options Container (msq) --><div class="space-y-4"><div class="flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl border transition-all gap-3 msq-row border-gray-200 dark:border-slate-800/80 bg-white dark:bg-slate-900" data-answer-id="opt_10_0"><div class="flex items-start flex-1 min-w-0"><span class="msq-letter w-6 h-6 rounded-lg bg-gray-100 dark:bg-slate-800 text-gray-500 dark:text-slate-450 flex items-center justify-center font-bold text-xs mr-3 shrink-0 transition-colors">A</span><div class="msq-text text-sm md:text-base font-medium text-gray-700 dark:text-slate-300 leading-relaxed transition-colors [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1">Danh sách không thứ tự (ul)</div></div><div class="flex items-center gap-3 shrink-0 self-end sm:self-center"><div class="flex items-center gap-2"><button type="button" data-msq-button="Đúng" data-question-id="ex_10" data-answer-id="opt_10_0" data-option-letter="A" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Đúng</button><button type="button" data-msq-button="Sai" data-question-id="ex_10" data-answer-id="opt_10_0" data-option-letter="A" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Sai</button></div></div></div><div class="flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl border transition-all gap-3 msq-row border-gray-200 dark:border-slate-800/80 bg-white dark:bg-slate-900" data-answer-id="opt_10_1"><div class="flex items-start flex-1 min-w-0"><span class="msq-letter w-6 h-6 rounded-lg bg-gray-100 dark:bg-slate-800 text-gray-500 dark:text-slate-450 flex items-center justify-center font-bold text-xs mr-3 shrink-0 transition-colors">B</span><div class="msq-text text-sm md:text-base font-medium text-gray-700 dark:text-slate-300 leading-relaxed transition-colors [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1">Danh sách có thứ tự (ol)</div></div><div class="flex items-center gap-3 shrink-0 self-end sm:self-center"><div class="flex items-center gap-2"><button type="button" data-msq-button="Đúng" data-question-id="ex_10" data-answer-id="opt_10_1" data-option-letter="B" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Đúng</button><button type="button" data-msq-button="Sai" data-question-id="ex_10" data-answer-id="opt_10_1" data-option-letter="B" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Sai</button></div></div></div><div class="flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl border transition-all gap-3 msq-row border-gray-200 dark:border-slate-800/80 bg-white dark:bg-slate-900" data-answer-id="opt_10_2"><div class="flex items-start flex-1 min-w-0"><span class="msq-letter w-6 h-6 rounded-lg bg-gray-100 dark:bg-slate-800 text-gray-500 dark:text-slate-450 flex items-center justify-center font-bold text-xs mr-3 shrink-0 transition-colors">C</span><div class="msq-text text-sm md:text-base font-medium text-gray-700 dark:text-slate-300 leading-relaxed transition-colors [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1">Danh sách mô tả (dl)</div></div><div class="flex items-center gap-3 shrink-0 self-end sm:self-center"><div class="flex items-center gap-2"><button type="button" data-msq-button="Đúng" data-question-id="ex_10" data-answer-id="opt_10_2" data-option-letter="C" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Đúng</button><button type="button" data-msq-button="Sai" data-question-id="ex_10" data-answer-id="opt_10_2" data-option-letter="C" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Sai</button></div></div></div><div class="flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl border transition-all gap-3 msq-row border-gray-200 dark:border-slate-800/80 bg-white dark:bg-slate-900" data-answer-id="opt_10_3"><div class="flex items-start flex-1 min-w-0"><span class="msq-letter w-6 h-6 rounded-lg bg-gray-100 dark:bg-slate-800 text-gray-500 dark:text-slate-450 flex items-center justify-center font-bold text-xs mr-3 shrink-0 transition-colors">D</span><div class="msq-text text-sm md:text-base font-medium text-gray-700 dark:text-slate-300 leading-relaxed transition-colors [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1">Danh sách bảng</div></div><div class="flex items-center gap-3 shrink-0 self-end sm:self-center"><div class="flex items-center gap-2"><button type="button" data-msq-button="Đúng" data-question-id="ex_10" data-answer-id="opt_10_3" data-option-letter="D" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Đúng</button><button type="button" data-msq-button="Sai" data-question-id="ex_10" data-answer-id="opt_10_3" data-option-letter="D" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Sai</button></div></div></div></div><!-- Short Answer Container (sa) --><!-- Essay / Tự luận Container (tl) --><!-- Review Mode: Show Explanation --></div><div class="quiz-feedback-box hidden mt-6 p-6 rounded-2xl border transition-colors duration-200"><div class="flex items-center space-x-3 mb-3"><span class="feedback-icon w-8 h-8 rounded-full flex items-center justify-center text-white"></span><h4 class="feedback-title font-bold text-base"></h4></div><p class="feedback-text text-sm leading-relaxed mb-4"></p><div class="p-4 rounded-xl bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/5"><h5 class="text-xs font-bold text-gray-500 dark:text-slate-400 uppercase tracking-wider mb-1">Lời giải chi tiết:</h5><p class="text-sm text-gray-700 dark:text-slate-300 leading-relaxed font-medium">HTML có 3 loại danh sách: ul, ol, dl.</p></div></div></div><div class="quiz-question-wrapper" data-index="11" style="display: none;"><div class="bg-white border border-gray-250 dark:bg-slate-900 dark:border-slate-800/80 rounded-2xl p-6 shadow-sm mb-6 transition-colors duration-200"><!-- Header: Question Number and Difficulty --><div class="flex items-center justify-between mb-4"><span class="inline-flex items-center px-3 py-1 rounded-xl text-xs font-bold bg-gray-100 text-gray-700 dark:bg-slate-800 dark:text-slate-300">Câu 12</span><div class="flex items-center space-x-2"><!-- Question Type --><span class="text-xs font-semibold text-gray-400 dark:text-slate-500">Đúng / Sai</span><!-- Difficulty Badge --><span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-extrabold uppercase bg-amber-50 text-amber-600 dark:bg-amber-950/20 dark:text-amber-400">Trung bình</span></div></div><!-- Question Content --><div class="text-base md:text-lg font-semibold text-gray-800 dark:text-slate-100 mb-6 leading-relaxed whitespace-pre-wrap select-none question-text [&_img]:max-w-full [&_img]:rounded-lg [&_img]:mx-auto [&_img]:my-3 [&_p]:inline"><p>Thẻ <table> có những thành phần nào?</p>
</div><!-- Standard Options Container (single_choice, multiple_choice, true_false) --><!-- Đúng / Sai Options Container (msq) --><div class="space-y-4"><div class="flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl border transition-all gap-3 msq-row border-gray-200 dark:border-slate-800/80 bg-white dark:bg-slate-900" data-answer-id="opt_11_0"><div class="flex items-start flex-1 min-w-0"><span class="msq-letter w-6 h-6 rounded-lg bg-gray-100 dark:bg-slate-800 text-gray-500 dark:text-slate-450 flex items-center justify-center font-bold text-xs mr-3 shrink-0 transition-colors">A</span><div class="msq-text text-sm md:text-base font-medium text-gray-700 dark:text-slate-300 leading-relaxed transition-colors [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1"><tr> (hàng)</div></div><div class="flex items-center gap-3 shrink-0 self-end sm:self-center"><div class="flex items-center gap-2"><button type="button" data-msq-button="Đúng" data-question-id="ex_11" data-answer-id="opt_11_0" data-option-letter="A" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Đúng</button><button type="button" data-msq-button="Sai" data-question-id="ex_11" data-answer-id="opt_11_0" data-option-letter="A" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Sai</button></div></div></div><div class="flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl border transition-all gap-3 msq-row border-gray-200 dark:border-slate-800/80 bg-white dark:bg-slate-900" data-answer-id="opt_11_1"><div class="flex items-start flex-1 min-w-0"><span class="msq-letter w-6 h-6 rounded-lg bg-gray-100 dark:bg-slate-800 text-gray-500 dark:text-slate-450 flex items-center justify-center font-bold text-xs mr-3 shrink-0 transition-colors">B</span><div class="msq-text text-sm md:text-base font-medium text-gray-700 dark:text-slate-300 leading-relaxed transition-colors [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1"><td> (ô dữ liệu)</div></div><div class="flex items-center gap-3 shrink-0 self-end sm:self-center"><div class="flex items-center gap-2"><button type="button" data-msq-button="Đúng" data-question-id="ex_11" data-answer-id="opt_11_1" data-option-letter="B" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Đúng</button><button type="button" data-msq-button="Sai" data-question-id="ex_11" data-answer-id="opt_11_1" data-option-letter="B" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Sai</button></div></div></div><div class="flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl border transition-all gap-3 msq-row border-gray-200 dark:border-slate-800/80 bg-white dark:bg-slate-900" data-answer-id="opt_11_2"><div class="flex items-start flex-1 min-w-0"><span class="msq-letter w-6 h-6 rounded-lg bg-gray-100 dark:bg-slate-800 text-gray-500 dark:text-slate-450 flex items-center justify-center font-bold text-xs mr-3 shrink-0 transition-colors">C</span><div class="msq-text text-sm md:text-base font-medium text-gray-700 dark:text-slate-300 leading-relaxed transition-colors [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1"><th> (ô tiêu đề)</div></div><div class="flex items-center gap-3 shrink-0 self-end sm:self-center"><div class="flex items-center gap-2"><button type="button" data-msq-button="Đúng" data-question-id="ex_11" data-answer-id="opt_11_2" data-option-letter="C" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Đúng</button><button type="button" data-msq-button="Sai" data-question-id="ex_11" data-answer-id="opt_11_2" data-option-letter="C" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Sai</button></div></div></div><div class="flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl border transition-all gap-3 msq-row border-gray-200 dark:border-slate-800/80 bg-white dark:bg-slate-900" data-answer-id="opt_11_3"><div class="flex items-start flex-1 min-w-0"><span class="msq-letter w-6 h-6 rounded-lg bg-gray-100 dark:bg-slate-800 text-gray-500 dark:text-slate-450 flex items-center justify-center font-bold text-xs mr-3 shrink-0 transition-colors">D</span><div class="msq-text text-sm md:text-base font-medium text-gray-700 dark:text-slate-300 leading-relaxed transition-colors [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1"><list></div></div><div class="flex items-center gap-3 shrink-0 self-end sm:self-center"><div class="flex items-center gap-2"><button type="button" data-msq-button="Đúng" data-question-id="ex_11" data-answer-id="opt_11_3" data-option-letter="D" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Đúng</button><button type="button" data-msq-button="Sai" data-question-id="ex_11" data-answer-id="opt_11_3" data-option-letter="D" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Sai</button></div></div></div></div><!-- Short Answer Container (sa) --><!-- Essay / Tự luận Container (tl) --><!-- Review Mode: Show Explanation --></div><div class="quiz-feedback-box hidden mt-6 p-6 rounded-2xl border transition-colors duration-200"><div class="flex items-center space-x-3 mb-3"><span class="feedback-icon w-8 h-8 rounded-full flex items-center justify-center text-white"></span><h4 class="feedback-title font-bold text-base"></h4></div><p class="feedback-text text-sm leading-relaxed mb-4"></p><div class="p-4 rounded-xl bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/5"><h5 class="text-xs font-bold text-gray-500 dark:text-slate-400 uppercase tracking-wider mb-1">Lời giải chi tiết:</h5><p class="text-sm text-gray-700 dark:text-slate-300 leading-relaxed font-medium">Table gồm <tr>, <td>, <th>. Không có thẻ <list>.</p></div></div></div><div class="quiz-question-wrapper" data-index="12" style="display: none;"><div class="bg-white border border-gray-250 dark:bg-slate-900 dark:border-slate-800/80 rounded-2xl p-6 shadow-sm mb-6 transition-colors duration-200"><!-- Header: Question Number and Difficulty --><div class="flex items-center justify-between mb-4"><span class="inline-flex items-center px-3 py-1 rounded-xl text-xs font-bold bg-gray-100 text-gray-700 dark:bg-slate-800 dark:text-slate-300">Câu 13</span><div class="flex items-center space-x-2"><!-- Question Type --><span class="text-xs font-semibold text-gray-400 dark:text-slate-500">Đúng / Sai</span><!-- Difficulty Badge --><span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-extrabold uppercase bg-amber-50 text-amber-600 dark:bg-amber-950/20 dark:text-amber-400">Trung bình</span></div></div><!-- Question Content --><div class="text-base md:text-lg font-semibold text-gray-800 dark:text-slate-100 mb-6 leading-relaxed whitespace-pre-wrap select-none question-text [&_img]:max-w-full [&_img]:rounded-lg [&_img]:mx-auto [&_img]:my-3 [&_p]:inline"><p>Thuộc tính colspan dùng để?</p>
</div><!-- Standard Options Container (single_choice, multiple_choice, true_false) --><!-- Đúng / Sai Options Container (msq) --><div class="space-y-4"><div class="flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl border transition-all gap-3 msq-row border-gray-200 dark:border-slate-800/80 bg-white dark:bg-slate-900" data-answer-id="opt_12_0"><div class="flex items-start flex-1 min-w-0"><span class="msq-letter w-6 h-6 rounded-lg bg-gray-100 dark:bg-slate-800 text-gray-500 dark:text-slate-450 flex items-center justify-center font-bold text-xs mr-3 shrink-0 transition-colors">A</span><div class="msq-text text-sm md:text-base font-medium text-gray-700 dark:text-slate-300 leading-relaxed transition-colors [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1">Gộp ô theo chiều ngang</div></div><div class="flex items-center gap-3 shrink-0 self-end sm:self-center"><div class="flex items-center gap-2"><button type="button" data-msq-button="Đúng" data-question-id="ex_12" data-answer-id="opt_12_0" data-option-letter="A" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Đúng</button><button type="button" data-msq-button="Sai" data-question-id="ex_12" data-answer-id="opt_12_0" data-option-letter="A" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Sai</button></div></div></div><div class="flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl border transition-all gap-3 msq-row border-gray-200 dark:border-slate-800/80 bg-white dark:bg-slate-900" data-answer-id="opt_12_1"><div class="flex items-start flex-1 min-w-0"><span class="msq-letter w-6 h-6 rounded-lg bg-gray-100 dark:bg-slate-800 text-gray-500 dark:text-slate-450 flex items-center justify-center font-bold text-xs mr-3 shrink-0 transition-colors">B</span><div class="msq-text text-sm md:text-base font-medium text-gray-700 dark:text-slate-300 leading-relaxed transition-colors [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1">Gộp ô theo chiều dọc</div></div><div class="flex items-center gap-3 shrink-0 self-end sm:self-center"><div class="flex items-center gap-2"><button type="button" data-msq-button="Đúng" data-question-id="ex_12" data-answer-id="opt_12_1" data-option-letter="B" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Đúng</button><button type="button" data-msq-button="Sai" data-question-id="ex_12" data-answer-id="opt_12_1" data-option-letter="B" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Sai</button></div></div></div><div class="flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl border transition-all gap-3 msq-row border-gray-200 dark:border-slate-800/80 bg-white dark:bg-slate-900" data-answer-id="opt_12_2"><div class="flex items-start flex-1 min-w-0"><span class="msq-letter w-6 h-6 rounded-lg bg-gray-100 dark:bg-slate-800 text-gray-500 dark:text-slate-450 flex items-center justify-center font-bold text-xs mr-3 shrink-0 transition-colors">C</span><div class="msq-text text-sm md:text-base font-medium text-gray-700 dark:text-slate-300 leading-relaxed transition-colors [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1">Tạo ô mới</div></div><div class="flex items-center gap-3 shrink-0 self-end sm:self-center"><div class="flex items-center gap-2"><button type="button" data-msq-button="Đúng" data-question-id="ex_12" data-answer-id="opt_12_2" data-option-letter="C" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Đúng</button><button type="button" data-msq-button="Sai" data-question-id="ex_12" data-answer-id="opt_12_2" data-option-letter="C" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Sai</button></div></div></div><div class="flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl border transition-all gap-3 msq-row border-gray-200 dark:border-slate-800/80 bg-white dark:bg-slate-900" data-answer-id="opt_12_3"><div class="flex items-start flex-1 min-w-0"><span class="msq-letter w-6 h-6 rounded-lg bg-gray-100 dark:bg-slate-800 text-gray-500 dark:text-slate-450 flex items-center justify-center font-bold text-xs mr-3 shrink-0 transition-colors">D</span><div class="msq-text text-sm md:text-base font-medium text-gray-700 dark:text-slate-300 leading-relaxed transition-colors [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1">Xóa ô</div></div><div class="flex items-center gap-3 shrink-0 self-end sm:self-center"><div class="flex items-center gap-2"><button type="button" data-msq-button="Đúng" data-question-id="ex_12" data-answer-id="opt_12_3" data-option-letter="D" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Đúng</button><button type="button" data-msq-button="Sai" data-question-id="ex_12" data-answer-id="opt_12_3" data-option-letter="D" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Sai</button></div></div></div></div><!-- Short Answer Container (sa) --><!-- Essay / Tự luận Container (tl) --><!-- Review Mode: Show Explanation --></div><div class="quiz-feedback-box hidden mt-6 p-6 rounded-2xl border transition-colors duration-200"><div class="flex items-center space-x-3 mb-3"><span class="feedback-icon w-8 h-8 rounded-full flex items-center justify-center text-white"></span><h4 class="feedback-title font-bold text-base"></h4></div><p class="feedback-text text-sm leading-relaxed mb-4"></p><div class="p-4 rounded-xl bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/5"><h5 class="text-xs font-bold text-gray-500 dark:text-slate-400 uppercase tracking-wider mb-1">Lời giải chi tiết:</h5><p class="text-sm text-gray-700 dark:text-slate-300 leading-relaxed font-medium">Colspan gộp ô theo chiều ngang.</p></div></div></div><div class="quiz-question-wrapper" data-index="13" style="display: none;"><div class="bg-white border border-gray-250 dark:bg-slate-900 dark:border-slate-800/80 rounded-2xl p-6 shadow-sm mb-6 transition-colors duration-200"><!-- Header: Question Number and Difficulty --><div class="flex items-center justify-between mb-4"><span class="inline-flex items-center px-3 py-1 rounded-xl text-xs font-bold bg-gray-100 text-gray-700 dark:bg-slate-800 dark:text-slate-300">Câu 14</span><div class="flex items-center space-x-2"><!-- Question Type --><span class="text-xs font-semibold text-gray-400 dark:text-slate-500">Đúng / Sai</span><!-- Difficulty Badge --><span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-extrabold uppercase bg-amber-50 text-amber-600 dark:bg-amber-950/20 dark:text-amber-400">Trung bình</span></div></div><!-- Question Content --><div class="text-base md:text-lg font-semibold text-gray-800 dark:text-slate-100 mb-6 leading-relaxed whitespace-pre-wrap select-none question-text [&_img]:max-w-full [&_img]:rounded-lg [&_img]:mx-auto [&_img]:my-3 [&_p]:inline"><p>Bảng HTML có thể định dạng bằng?</p>
</div><!-- Standard Options Container (single_choice, multiple_choice, true_false) --><!-- Đúng / Sai Options Container (msq) --><div class="space-y-4"><div class="flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl border transition-all gap-3 msq-row border-gray-200 dark:border-slate-800/80 bg-white dark:bg-slate-900" data-answer-id="opt_13_0"><div class="flex items-start flex-1 min-w-0"><span class="msq-letter w-6 h-6 rounded-lg bg-gray-100 dark:bg-slate-800 text-gray-500 dark:text-slate-450 flex items-center justify-center font-bold text-xs mr-3 shrink-0 transition-colors">A</span><div class="msq-text text-sm md:text-base font-medium text-gray-700 dark:text-slate-300 leading-relaxed transition-colors [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1">Thuộc tính inline</div></div><div class="flex items-center gap-3 shrink-0 self-end sm:self-center"><div class="flex items-center gap-2"><button type="button" data-msq-button="Đúng" data-question-id="ex_13" data-answer-id="opt_13_0" data-option-letter="A" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Đúng</button><button type="button" data-msq-button="Sai" data-question-id="ex_13" data-answer-id="opt_13_0" data-option-letter="A" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Sai</button></div></div></div><div class="flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl border transition-all gap-3 msq-row border-gray-200 dark:border-slate-800/80 bg-white dark:bg-slate-900" data-answer-id="opt_13_1"><div class="flex items-start flex-1 min-w-0"><span class="msq-letter w-6 h-6 rounded-lg bg-gray-100 dark:bg-slate-800 text-gray-500 dark:text-slate-450 flex items-center justify-center font-bold text-xs mr-3 shrink-0 transition-colors">B</span><div class="msq-text text-sm md:text-base font-medium text-gray-700 dark:text-slate-300 leading-relaxed transition-colors [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1">CSS</div></div><div class="flex items-center gap-3 shrink-0 self-end sm:self-center"><div class="flex items-center gap-2"><button type="button" data-msq-button="Đúng" data-question-id="ex_13" data-answer-id="opt_13_1" data-option-letter="B" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Đúng</button><button type="button" data-msq-button="Sai" data-question-id="ex_13" data-answer-id="opt_13_1" data-option-letter="B" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Sai</button></div></div></div><div class="flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl border transition-all gap-3 msq-row border-gray-200 dark:border-slate-800/80 bg-white dark:bg-slate-900" data-answer-id="opt_13_2"><div class="flex items-start flex-1 min-w-0"><span class="msq-letter w-6 h-6 rounded-lg bg-gray-100 dark:bg-slate-800 text-gray-500 dark:text-slate-450 flex items-center justify-center font-bold text-xs mr-3 shrink-0 transition-colors">C</span><div class="msq-text text-sm md:text-base font-medium text-gray-700 dark:text-slate-300 leading-relaxed transition-colors [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1">JavaScript</div></div><div class="flex items-center gap-3 shrink-0 self-end sm:self-center"><div class="flex items-center gap-2"><button type="button" data-msq-button="Đúng" data-question-id="ex_13" data-answer-id="opt_13_2" data-option-letter="C" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Đúng</button><button type="button" data-msq-button="Sai" data-question-id="ex_13" data-answer-id="opt_13_2" data-option-letter="C" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Sai</button></div></div></div><div class="flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl border transition-all gap-3 msq-row border-gray-200 dark:border-slate-800/80 bg-white dark:bg-slate-900" data-answer-id="opt_13_3"><div class="flex items-start flex-1 min-w-0"><span class="msq-letter w-6 h-6 rounded-lg bg-gray-100 dark:bg-slate-800 text-gray-500 dark:text-slate-450 flex items-center justify-center font-bold text-xs mr-3 shrink-0 transition-colors">D</span><div class="msq-text text-sm md:text-base font-medium text-gray-700 dark:text-slate-300 leading-relaxed transition-colors [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1">Flash</div></div><div class="flex items-center gap-3 shrink-0 self-end sm:self-center"><div class="flex items-center gap-2"><button type="button" data-msq-button="Đúng" data-question-id="ex_13" data-answer-id="opt_13_3" data-option-letter="D" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Đúng</button><button type="button" data-msq-button="Sai" data-question-id="ex_13" data-answer-id="opt_13_3" data-option-letter="D" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Sai</button></div></div></div></div><!-- Short Answer Container (sa) --><!-- Essay / Tự luận Container (tl) --><!-- Review Mode: Show Explanation --></div><div class="quiz-feedback-box hidden mt-6 p-6 rounded-2xl border transition-colors duration-200"><div class="flex items-center space-x-3 mb-3"><span class="feedback-icon w-8 h-8 rounded-full flex items-center justify-center text-white"></span><h4 class="feedback-title font-bold text-base"></h4></div><p class="feedback-text text-sm leading-relaxed mb-4"></p><div class="p-4 rounded-xl bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/5"><h5 class="text-xs font-bold text-gray-500 dark:text-slate-400 uppercase tracking-wider mb-1">Lời giải chi tiết:</h5><p class="text-sm text-gray-700 dark:text-slate-300 leading-relaxed font-medium">Bảng định dạng bằng inline, CSS hoặc JavaScript.</p></div></div></div><div class="flex justify-end mt-4 space-x-3"><button id="retry-quiz-btn" class="hidden bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold px-5 py-2.5 rounded-xl shadow-sm text-sm transition dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700">Làm lại</button><button id="check-answer-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-5 py-2.5 rounded-xl shadow text-sm transition">Kiểm tra đáp án</button><button id="next-question-btn" class="hidden bg-blue-600 hover:bg-blue-700 text-white font-semibold px-5 py-2.5 rounded-xl shadow text-sm transition">Làm tiếp</button></div></div><div id="quiz-final-result" class="hidden mt-6 p-8 text-center rounded-2xl bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800/50"><h3 class="text-2xl font-bold text-blue-700 dark:text-blue-400 mb-2">Hoàn thành bài tập!</h3><p class="text-gray-600 dark:text-slate-300 mb-4" id="quiz-final-score"></p><button onclick="window.location.reload()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-6 py-3 rounded-xl shadow-sm transition inline-flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>Làm lại từ đầu</button></div></div><!-- Next / Prev Buttons --><div class="flex items-center justify-between pt-8 border-t border-gray-250 dark:border-slate-850 mt-12 gap-4"><a href="/lms/tin-hoc-12/tin12-bai-08-dinh-dang-van-ban" class="flex-1 group flex flex-col p-4 rounded-2xl border border-gray-200 dark:border-slate-800 hover:border-blue-300 dark:hover:border-blue-700 bg-white dark:bg-slate-900 hover:shadow-md transition-all"><span class="text-xs font-bold text-gray-500 dark:text-slate-400 uppercase tracking-wider mb-2 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 transform group-hover:-translate-x-1 transition-transform" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>Bài trước</span><span class="font-bold text-sm text-gray-900 dark:text-slate-200 group-hover:text-blue-600 dark:group-hover:text-blue-400 line-clamp-2">Định dạng văn bản</span></a><a href="/lms/tin-hoc-12/tin12-bai-10-tao-lien-ket" class="flex-1 group flex flex-col p-4 rounded-2xl border border-gray-200 dark:border-slate-800 hover:border-blue-300 dark:hover:border-blue-700 bg-white dark:bg-slate-900 hover:shadow-md transition-all text-right items-end"><span class="text-xs font-bold text-gray-500 dark:text-slate-400 uppercase tracking-wider mb-2 flex items-center">Bài tiếp theo<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1 transform group-hover:translate-x-1 transition-transform" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></span><span class="font-bold text-sm text-gray-900 dark:text-slate-200 group-hover:text-blue-600 dark:group-hover:text-blue-400 line-clamp-2">Tạo liên kết</span></a></div></div></div></main><footer class="border-t border-scholar/60 dark:border-[#3A3A5C]/70 bg-white/60 dark:bg-[#1A1A2E]/60 pt-12 pb-16 px-6 md:px-8 mt-16 transition-colors duration-200"><div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8"><!-- Column 1: Intro + Auth / Theme Buttons --><div class="md:col-span-2 space-y-4"><a href="/lms/" class="flex items-center space-x-2"><div class="w-8 h-8 rounded-lg bg-vermillion-500 flex items-center justify-center font-bold text-white shadow-lg shadow-vermillion-500/20">L</div><span class="text-xl font-bold tracking-tight font-serif text-ink dark:text-[#E8E0D0]">LỚP 12 LMS</span></a><p class="text-sm text-[#8A7E72] dark:text-[#8A8A9E] max-w-sm leading-relaxed font-medium">Hệ thống học tập, ôn thi trắc nghiệm online bám sát chương trình Giáo dục Phổ thông lớp 12 của Bộ Giáo dục và Đào tạo Việt Nam.</p><p class="text-xs text-[#A89888] dark:text-[#6A6A8A] font-semibold">© 2026 Lớp 12 LMS. Thầy Đồ - v1.2.</p><div class="flex flex-wrap items-center gap-3 pt-2"><a href="/lms/login" class="text-sm font-semibold text-ink dark:text-[#E8E0D0] border border-scholar dark:border-[#3A3A5C] px-5 py-2 rounded-lg hover:bg-vermillion-50 dark:hover:bg-vermillion-900/20 hover:border-vermillion-200 dark:hover:border-vermillion-900/30 hover:text-vermillion-600 dark:hover:text-vermillion-400 transition-all duration-200">Đăng nhập</a><a href="/lms/register" class="text-sm font-semibold bg-vermillion-500 hover:bg-vermillion-600 text-white px-5 py-2 rounded-lg shadow-md shadow-vermillion-500/15 hover:shadow-vermillion-500/25 transition-all duration-200">Đăng ký</a></div></div><!-- Column 2: Quick Links --><div><h4 class="text-xs font-bold text-[#8A7E72] dark:text-[#8A8A9E] uppercase tracking-widest mb-4">Học tập</h4><ul class="space-y-2.5 text-sm font-semibold text-ink dark:text-[#C8C0B0]"><li><a href="/lms/khoa-hoc" class="hover:text-vermillion-500 dark:hover:text-vermillion-400 transition-colors">Khóa học</a></li><li><a href="/lms/ly-thuyet" class="hover:text-vermillion-500 dark:hover:text-vermillion-400 transition-colors">Lý thuyết</a></li><li><a href="/lms/de-thi" class="hover:text-vermillion-500 dark:hover:text-vermillion-400 transition-colors">Đề thi</a></li><li><a href="https://lop12.com" class="hover:text-vermillion-500 dark:hover:text-vermillion-400 transition-colors">Lop12.com</a></li><li><a href="https://booktoan.com" target="_blank" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors flex items-center gap-1.5">Booktoan.com</a></li></ul></div></div></footer></div></div><button id="scrollToTopBtn" class="fixed bottom-6 right-6 p-3 rounded-full bg-vermillion-600 text-white shadow-lg hover:bg-vermillion-700 hover:shadow-xl transition-all duration-300 opacity-0 translate-y-10 pointer-events-none z-50 focus:outline-none focus:ring-2 focus:ring-vermillion-500 focus:ring-offset-2 focus:ring-offset-background" aria-label="Cuộn lên đầu trang" title="Lên đầu trang"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"></path></svg></button><script>
document.addEventListener('DOMContentLoaded', () => {
const scrollToTopBtn = document.getElementById('scrollToTopBtn');
if (!scrollToTopBtn) return;
// Show button when scrolled down 300px
const toggleVisibility = () => {
if (window.scrollY > 300) {
scrollToTopBtn.classList.remove('opacity-0', 'translate-y-10', 'pointer-events-none');
scrollToTopBtn.classList.add('opacity-100', 'translate-y-0');
} else {
scrollToTopBtn.classList.add('opacity-0', 'translate-y-10', 'pointer-events-none');
scrollToTopBtn.classList.remove('opacity-100', 'translate-y-0');
}
};
window.addEventListener('scroll', toggleVisibility);
// Initial check
toggleVisibility();
// Scroll to top on click
scrollToTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
});
</script><!-- KaTeX Math auto render execution --><script>
document.addEventListener('DOMContentLoaded', () => {
if (typeof renderMathInElement === 'function') {
renderMathInElement(document.body, {
delimiters: [
{ left: '$$', right: '$$', display: true },
{ left: '$', right: '$', display: false },
{ left: '\\(', right: '\\)', display: false },
{ left: '\\[', right: '\\]', display: true }
],
throwOnError: false
});
}
});
</script></body></html><script>(function(){const quizData = [{"id":"ex_0","type":"single_choice","correctAnswers":["opt_0_1"],"answers":[{"id":"opt_0_0","content":"\u003cul>","is_correct":false},{"id":"opt_0_1","content":"\u003col>","is_correct":true},{"id":"opt_0_2","content":"\u003cli>","is_correct":false},{"id":"opt_0_3","content":"\u003clist>","is_correct":false}],"answer":1},{"id":"ex_1","type":"single_choice","correctAnswers":["opt_1_1"],"answers":[{"id":"opt_1_0","content":"\u003col>","is_correct":false},{"id":"opt_1_1","content":"\u003cul>","is_correct":true},{"id":"opt_1_2","content":"\u003cli>","is_correct":false},{"id":"opt_1_3","content":"\u003cdl>","is_correct":false}],"answer":1},{"id":"ex_2","type":"single_choice","correctAnswers":["opt_2_1"],"answers":[{"id":"opt_2_0","content":"\u003citem>","is_correct":false},{"id":"opt_2_1","content":"\u003cli>","is_correct":true},{"id":"opt_2_2","content":"\u003col>","is_correct":false},{"id":"opt_2_3","content":"\u003cp>","is_correct":false}],"answer":1},{"id":"ex_3","type":"single_choice","correctAnswers":["opt_3_2"],"answers":[{"id":"opt_3_0","content":"\u003ctd>","is_correct":false},{"id":"opt_3_1","content":"\u003cth>","is_correct":false},{"id":"opt_3_2","content":"\u003ctr>","is_correct":true},{"id":"opt_3_3","content":"\u003ctable>","is_correct":false}],"answer":2},{"id":"ex_4","type":"single_choice","correctAnswers":["opt_4_0"],"answers":[{"id":"opt_4_0","content":"\u003cth> dùng cho ô tiêu đề, chữ thường in đậm và căn giữa","is_correct":true},{"id":"opt_4_1","content":"\u003cth> dùng cho ô dữ liệu bình thường","is_correct":false},{"id":"opt_4_2","content":"\u003ctd> dùng cho tiêu đề","is_correct":false},{"id":"opt_4_3","content":"Không có sự khác biệt","is_correct":false}],"answer":0},{"id":"ex_5","type":"single_choice","correctAnswers":["opt_5_1"],"answers":[{"id":"opt_5_0","content":"rowspan","is_correct":false},{"id":"opt_5_1","content":"colspan","is_correct":true},{"id":"opt_5_2","content":"merge","is_correct":false},{"id":"opt_5_3","content":"align","is_correct":false}],"answer":1},{"id":"ex_6","type":"single_choice","correctAnswers":["opt_6_1"],"answers":[{"id":"opt_6_0","content":"colspan","is_correct":false},{"id":"opt_6_1","content":"rowspan","is_correct":true},{"id":"opt_6_2","content":"valign","is_correct":false},{"id":"opt_6_3","content":"height","is_correct":false}],"answer":1},{"id":"ex_7","type":"single_choice","correctAnswers":["opt_7_1"],"answers":[{"id":"opt_7_0","content":"table > td > tr","is_correct":false},{"id":"opt_7_1","content":"table > tr > td","is_correct":true},{"id":"opt_7_2","content":"tr > table > td","is_correct":false},{"id":"opt_7_3","content":"td > tr > table","is_correct":false}],"answer":1},{"id":"ex_8","type":"single_choice","correctAnswers":["opt_8_1"],"answers":[{"id":"opt_8_0","content":"start","is_correct":false},{"id":"opt_8_1","content":"type=\"A\"","is_correct":true},{"id":"opt_8_2","content":"style","is_correct":false},{"id":"opt_8_3","content":"alphabet","is_correct":false}],"answer":1},{"id":"ex_9","type":"single_choice","correctAnswers":["opt_9_2"],"answers":[{"id":"opt_9_0","content":"\u003ctitle>","is_correct":false},{"id":"opt_9_1","content":"\u003cheader>","is_correct":false},{"id":"opt_9_2","content":"\u003ccaption>","is_correct":true},{"id":"opt_9_3","content":"\u003csummary>","is_correct":false}],"answer":2},{"id":"ex_10","type":"msq","correctAnswers":["opt_10_0","opt_10_1","opt_10_2"],"answers":[{"id":"opt_10_0","content":"Danh sách không thứ tự (ul)","is_correct":true},{"id":"opt_10_1","content":"Danh sách có thứ tự (ol)","is_correct":true},{"id":"opt_10_2","content":"Danh sách mô tả (dl)","is_correct":true},{"id":"opt_10_3","content":"Danh sách bảng","is_correct":false}],"answer":[0,1,2]},{"id":"ex_11","type":"msq","correctAnswers":["opt_11_0","opt_11_1","opt_11_2"],"answers":[{"id":"opt_11_0","content":"\u003ctr> (hàng)","is_correct":true},{"id":"opt_11_1","content":"\u003ctd> (ô dữ liệu)","is_correct":true},{"id":"opt_11_2","content":"\u003cth> (ô tiêu đề)","is_correct":true},{"id":"opt_11_3","content":"\u003clist>","is_correct":false}],"answer":[0,1,2]},{"id":"ex_12","type":"msq","correctAnswers":["opt_12_0"],"answers":[{"id":"opt_12_0","content":"Gộp ô theo chiều ngang","is_correct":true},{"id":"opt_12_1","content":"Gộp ô theo chiều dọc","is_correct":false},{"id":"opt_12_2","content":"Tạo ô mới","is_correct":false},{"id":"opt_12_3","content":"Xóa ô","is_correct":false}],"answer":[0]},{"id":"ex_13","type":"msq","correctAnswers":["opt_13_0","opt_13_1","opt_13_2"],"answers":[{"id":"opt_13_0","content":"Thuộc tính inline","is_correct":true},{"id":"opt_13_1","content":"CSS","is_correct":true},{"id":"opt_13_2","content":"JavaScript","is_correct":true},{"id":"opt_13_3","content":"Flash","is_correct":false}],"answer":[0,1,2]}];
let currentQuestionIndex = 0;
const totalQuestions = quizData.length;
let score = 0;
const selectedAnswersMap = {};
quizData.forEach(q => selectedAnswersMap[q.id] = []);
document.addEventListener('answer-selected', (e) => {
// @ts-ignore
const { questionId, answerId, type, choice, answerText } = e.detail;
let selected = selectedAnswersMap[questionId];
if (!selected || selected.length === 0) {
if (type === 'msq') selected = [{}];
else selected = [];
}
if (type === 'single_choice' || type === 'true_false') {
selected = [answerId];
} else if (type === 'multiple_choice') {
const idx = selected.indexOf(answerId);
if (idx > -1) selected.splice(idx, 1);
else selected.push(answerId);
} else if (type === 'msq') {
if (!selected[0]) selected[0] = {};
selected[0][answerId] = choice;
} else if (type === 'sa' || type === 'tl') {
selected = [answerText];
}
selectedAnswersMap[questionId] = selected;
});
const checkBtn = document.getElementById('check-answer-btn');
const nextBtn = document.getElementById('next-question-btn');
const retryBtn = document.getElementById('retry-quiz-btn');
const counter = document.getElementById('quiz-counter');
if (checkBtn && nextBtn) {
checkBtn.addEventListener('click', () => {
const qData = quizData[currentQuestionIndex];
const selectedAnswersList = selectedAnswersMap[qData.id];
let isCorrect = false;
if (qData.type === 'single_choice' || qData.type === 'multiple_choice') {
if (!selectedAnswersList || selectedAnswersList.length === 0) {
alert('Cậu hãy chọn ít nhất một đáp án trước khi kiểm tra nhé!');
return;
}
const allCorrectSelected = qData.correctAnswers.every(id => selectedAnswersList.includes(id));
const noIncorrectSelected = selectedAnswersList.every(id => qData.correctAnswers.includes(id));
isCorrect = allCorrectSelected && noIncorrectSelected && qData.correctAnswers.length === selectedAnswersList.length;
} else if (qData.type === 'msq') {
const submittedObj = selectedAnswersList[0] || {};
if (Object.keys(submittedObj).length !== qData.answers.length) {
alert('Cậu hãy chọn Đúng/Sai cho tất cả các ý nhé!');
return;
}
isCorrect = true;
qData.answers.forEach(a => {
const expected = qData.correctAnswers.includes(a.id) ? 'Đúng' : 'Sai';
if (submittedObj[a.id] !== expected) isCorrect = false;
});
} else if (qData.type === 'sa') {
const submitted = selectedAnswersList[0] || '';
if (!submitted.trim()) {
alert('Cậu hãy nhập câu trả lời nhé!');
return;
}
const normSub = submitted.trim().toLowerCase().replace(/\s+/g, ' ').replace(',', '.');
const normCorr = (qData.answer || '').toString().trim().toLowerCase().replace(/\s+/g, ' ').replace(',', '.');
isCorrect = normSub === normCorr || (!isNaN(Number(normSub)) && !isNaN(Number(normCorr)) && Number(normSub) === Number(normCorr));
} else if (qData.type === 'tl') {
isCorrect = true;
}
if (isCorrect) score++;
const wrapper = document.querySelector(`.quiz-question-wrapper[data-index="${currentQuestionIndex}"]`);
if (!wrapper) return;
// Visual feedback
if (qData.type === 'single_choice' || qData.type === 'multiple_choice') {
wrapper.querySelectorAll('.option-item').forEach(item => {
// @ts-ignore
item.style.pointerEvents = 'none';
const ansId = item.getAttribute('data-answer-id');
if (qData.correctAnswers.includes(ansId)) {
item.classList.remove('border-blue-500', 'bg-blue-50/50', 'text-blue-700', 'dark:border-blue-500');
item.classList.add('border-emerald-500', 'bg-emerald-50/40', 'text-emerald-700', 'dark:text-emerald-400');
const letter = item.querySelector('.w-6');
if (letter) {
letter.classList.remove('bg-blue-600', 'border-blue-600', 'bg-blue-100', 'border-blue-300', 'text-blue-700', 'dark:bg-blue-900/60', 'dark:border-blue-800', 'dark:text-blue-300');
letter.classList.add('bg-emerald-600', 'border-emerald-600', 'text-white');
}
} else if (selectedAnswersList.includes(ansId)) {
item.classList.remove('border-blue-500', 'bg-blue-50/50', 'text-blue-700', 'dark:border-blue-500');
item.classList.add('border-rose-500', 'bg-rose-50/40', 'text-rose-700', 'dark:text-rose-400');
const letter = item.querySelector('.w-6');
if (letter) {
letter.classList.remove('bg-blue-600', 'border-blue-600', 'bg-blue-100', 'border-blue-300', 'text-blue-700', 'dark:bg-blue-900/60', 'dark:border-blue-800', 'dark:text-blue-300');
letter.classList.add('bg-rose-600', 'border-rose-600', 'text-white');
}
}
});
} else if (qData.type === 'msq') {
const submittedObj = selectedAnswersList[0] || {};
wrapper.querySelectorAll('[data-msq-button]').forEach(btn => {
// @ts-ignore
btn.style.pointerEvents = 'none';
});
wrapper.querySelectorAll('.msq-row').forEach(row => {
const ansId = row.getAttribute('data-answer-id');
const expected = qData.correctAnswers.includes(ansId) ? 'Đúng' : 'Sai';
const submitted = submittedObj[ansId];
const isRowCorrect = submitted === expected;
row.classList.remove('border-blue-500', 'bg-blue-50/30', 'dark:border-blue-500', 'dark:bg-blue-950/20');
const letter = row.querySelector('.msq-letter');
if (isRowCorrect) {
row.classList.add('border-emerald-500', 'bg-emerald-50/40', 'text-emerald-700', 'dark:border-emerald-500');
if (letter) {
letter.classList.remove('bg-blue-600', 'bg-gray-100', 'text-gray-500', 'dark:bg-slate-800', 'dark:text-slate-450');
letter.classList.add('bg-emerald-600', 'text-white', 'dark:bg-emerald-600');
}
} else {
row.classList.add('border-rose-500', 'bg-rose-50/40', 'text-rose-700', 'dark:border-rose-500');
if (letter) {
letter.classList.remove('bg-blue-600', 'bg-gray-100', 'text-gray-500', 'dark:bg-slate-800', 'dark:text-slate-450');
letter.classList.add('bg-rose-600', 'text-white', 'dark:bg-rose-600');
}
}
const btnContainer = row.querySelector('.flex.items-center.gap-3.shrink-0');
if (btnContainer) {
const correctBadge = document.createElement('span');
correctBadge.className = 'ml-2 text-xs font-bold px-2 py-1 rounded border ' + (isRowCorrect ? 'bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-950/20 dark:text-emerald-400' : 'bg-rose-100 text-rose-700 border-rose-200 dark:bg-rose-950/20 dark:text-rose-400');
correctBadge.innerHTML = isRowCorrect ? '✓' : `Đáp án: ${expected}`;
btnContainer.appendChild(correctBadge);
}
});
} else if (qData.type === 'sa' || qData.type === 'tl') {
const inputs = wrapper.querySelectorAll('input, textarea');
inputs.forEach(inp => {
// @ts-ignore
inp.style.pointerEvents = 'none';
if (qData.type === 'sa') {
inp.classList.add(isCorrect ? 'border-emerald-500' : 'border-rose-500');
}
});
}
// Show feedback
const feedbackBox = wrapper.querySelector('.quiz-feedback-box');
const feedbackIcon = wrapper.querySelector('.feedback-icon');
const feedbackTitle = wrapper.querySelector('.feedback-title');
const feedbackText = wrapper.querySelector('.feedback-text');
if (feedbackBox && feedbackIcon && feedbackTitle && feedbackText) {
feedbackBox.classList.remove('hidden');
if (isCorrect) {
feedbackBox.classList.add('bg-emerald-50/50', 'border-emerald-200/50', 'dark:bg-emerald-950/15', 'dark:border-emerald-900/35');
feedbackIcon.className = 'feedback-icon w-8 h-8 rounded-full flex items-center justify-center bg-emerald-500 text-white font-bold';
feedbackIcon.innerHTML = '✓';
feedbackTitle.className = 'feedback-title font-bold text-emerald-800 dark:text-emerald-400 text-base';
feedbackTitle.textContent = qData.type === 'tl' ? 'Đã ghi nhận bài làm!' : 'Chính xác! Chúc mừng cậu.';
feedbackText.className = 'feedback-text text-sm text-emerald-700 dark:text-emerald-300 leading-relaxed mb-4';
feedbackText.textContent = qData.type === 'tl' ? 'Cậu hãy đối chiếu với lời giải chi tiết bên dưới nhé.' : 'Cậu đã phân tích rất tốt và chọn đúng phương án.';
} else {
feedbackBox.classList.add('bg-rose-50/50', 'border-rose-200/50', 'dark:bg-rose-950/15', 'dark:border-rose-900/35');
feedbackIcon.className = 'feedback-icon w-8 h-8 rounded-full flex items-center justify-center bg-rose-500 text-white font-bold';
feedbackIcon.innerHTML = '✗';
feedbackTitle.className = 'feedback-title font-bold text-rose-800 dark:text-rose-400 text-base';
feedbackTitle.textContent = 'Tiếc quá, chưa chính xác mất rồi.';
feedbackText.className = 'feedback-text text-sm text-rose-700 dark:text-rose-300 leading-relaxed mb-4';
if (qData.type === 'sa') {
feedbackText.innerHTML = `Đáp án chính xác là: <strong>${qData.answer}</strong>. Cậu hãy xem kỹ lại lời giải nhé!`;
} else {
feedbackText.textContent = 'Cậu hãy xem kỹ lại lời giải chi tiết bên dưới nhé!';
}
}
// @ts-ignore
if (typeof renderMathInElement === 'function') {
// @ts-ignore
renderMathInElement(feedbackBox, {
delimiters: [ { left: '$$', right: '$$', display: true }, { left: '$', right: '$', display: false } ],
throwOnError: false
});
}
}
checkBtn.classList.add('hidden');
if (currentQuestionIndex < totalQuestions - 1) {
nextBtn.classList.remove('hidden');
} else {
retryBtn.classList.remove('hidden');
const finalResult = document.getElementById('quiz-final-result');
const scoreText = document.getElementById('quiz-final-score');
if (finalResult && scoreText) {
finalResult.classList.remove('hidden');
scoreText.innerHTML = `Cậu đã hoàn thành bài tập. Trả lời đúng <strong>${score}/${totalQuestions}</strong> câu hỏi.`;
}
}
});
nextBtn.addEventListener('click', () => {
const oldWrapper = document.querySelector(`.quiz-question-wrapper[data-index="${currentQuestionIndex}"]`);
if (oldWrapper) {
// @ts-ignore
oldWrapper.style.display = 'none';
}
currentQuestionIndex++;
const newWrapper = document.querySelector(`.quiz-question-wrapper[data-index="${currentQuestionIndex}"]`);
if (newWrapper) {
// @ts-ignore
newWrapper.style.display = 'block';
}
if (counter) counter.textContent = `${currentQuestionIndex + 1} / ${totalQuestions}`;
nextBtn.classList.add('hidden');
checkBtn.classList.remove('hidden');
});
retryBtn.addEventListener('click', () => {
window.location.reload();
});
}
})();</script><script type="module">globalThis.process??={},globalThis.process.env??={};var e=document.getElementById(`lesson-sidebar-toggle`),t=document.getElementById(`lesson-sidebar`);e&&t&&e.addEventListener(`click`,()=>{t.classList.toggle(`hidden`)});</script> | | | |
| |