L
LỚP 12 LMS
Khóa học
Lý thuyết
Đề thi
Khóa học
Lý thuyết
Đề thi
Đăng nhập
Đăng ký
Danh sách bài học
Môn Tin Học
Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web
Hình ảnh (Image)
. Lưu ý các thuộc tính width, height.
Âm thanh và Video
và
với thuộc tính controls để hiển thị bộ điều khiển.
Khung nội tuyến (Iframe)
cho phép nhúng một trang web khác vào bên trong trang web hiện tại (ví dụ nhúng bản đồ Google Maps, video YouTube).</div></div></div></div><!-- Quick Quiz Section --><div class="border-t border-gray-250 dark:border-slate-850 pt-8" id="quick-quiz-section"><div class="flex items-center space-x-2 mb-6"><div class="w-2.5 h-5 rounded-sm bg-blue-600"></div><h2 class="text-xl font-bold text-gray-900 dark:text-white">Luyện tập trắc nghiệm</h2><span class="ml-2 px-2 py-0.5 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 text-xs font-bold" id="quiz-counter">1 / 14</span></div><div id="quick-quiz-container"><div class="quiz-question-wrapper" data-index="0" style><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 1</span><div class="flex items-center space-x-2"><!-- Question Type --><span class="text-xs font-semibold text-gray-400 dark:text-slate-500">Trắc nghiệm đơn</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ẻ nào dùng để chèn hình ảnh vào trang web?</p> </div><!-- Standard Options Container (single_choice, multiple_choice, true_false) --><div class="space-y-3"><div data-question-id="ex_0" data-answer-id="opt_0_0" 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">A</div><div class="text-sm md:text-base font-medium flex-1 [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1"><image></div></div><div data-question-id="ex_0" data-answer-id="opt_0_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"><img></div></div><div data-question-id="ex_0" data-answer-id="opt_0_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"><picture></div></div><div data-question-id="ex_0" data-answer-id="opt_0_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"><src></div></div></div><!-- Đúng / Sai Options Container (msq) --><!-- Short Answer Container (sa) --><!-- Essay / Tự luận Container (tl) --><!-- Review Mode: Show Explanation --></div><script type="module">globalThis.process??={},globalThis.process.env??={},document.querySelectorAll(`.option-item`).forEach(e=>{e.addEventListener(`click`,()=>{let t=e.getAttribute(`data-question-id`),n=e.getAttribute(`data-answer-id`),r=e.getAttribute(`data-type`);if(!t||!n)return;let i=new CustomEvent(`answer-selected`,{detail:{questionId:t,answerId:n,type:r}});if(document.dispatchEvent(i),(r===`single_choice`||r===`true_false`)&&document.querySelectorAll(`.option-item[data-question-id="${t}"]`).forEach(e=>{e.classList.remove(`border-blue-500`,`bg-blue-50/50`,`dark:border-blue-500`,`dark:bg-blue-950/20`,`text-blue-700`,`dark:text-blue-400`);let t=e.querySelector(`.w-6`);t&&(t.classList.remove(`bg-blue-600`,`border-blue-600`,`text-white`),t.classList.add(`bg-gray-100`,`border-gray-300`,`text-gray-500`,`dark:bg-slate-800`,`dark:border-slate-700`,`dark:text-slate-400`))}),r===`multiple_choice`){let t=e.classList.toggle(`border-blue-500`);e.classList.toggle(`bg-blue-50/50`,t),e.classList.toggle(`dark:border-blue-500`,t),e.classList.toggle(`dark:bg-blue-950/20`,t),e.classList.toggle(`text-blue-700`,t),e.classList.toggle(`dark:text-blue-400`,t);let n=e.querySelector(`.w-6`);n&&(n.classList.toggle(`bg-blue-100`,t),n.classList.toggle(`border-blue-300`,t),n.classList.toggle(`text-blue-700`,t),n.classList.toggle(`dark:bg-blue-900/60`,t),n.classList.toggle(`dark:border-blue-800`,t),n.classList.toggle(`dark:text-blue-300`,t),n.classList.toggle(`bg-gray-100`,!t),n.classList.toggle(`border-gray-300`,!t),n.classList.toggle(`text-gray-500`,!t),n.classList.toggle(`dark:bg-slate-800`,!t),n.classList.toggle(`dark:border-slate-700`,!t),n.classList.toggle(`dark:text-slate-400`,!t))}else{e.classList.add(`border-blue-500`,`bg-blue-50/50`,`dark:border-blue-500`,`dark:bg-blue-950/20`,`text-blue-700`,`dark:text-blue-400`);let t=e.querySelector(`.w-6`);t&&(t.classList.remove(`bg-gray-100`,`border-gray-300`,`text-gray-500`,`dark:bg-slate-800`,`dark:border-slate-700`,`dark:text-slate-400`),t.classList.add(`bg-blue-600`,`border-blue-600`,`text-white`))}})}),document.querySelectorAll(`.sa-input`).forEach(e=>{e.addEventListener(`input`,t=>{let n=e.getAttribute(`data-question-id`),r=e.getAttribute(`data-type`),i=t.target.value;if(!n)return;let a=new CustomEvent(`answer-selected`,{detail:{questionId:n,answerText:i,type:r}});document.dispatchEvent(a)})}),document.querySelectorAll(`.tl-textarea`).forEach(e=>{e.addEventListener(`input`,t=>{let n=e.getAttribute(`data-question-id`),r=e.getAttribute(`data-type`),i=t.target.value;if(!n)return;let a=new CustomEvent(`answer-selected`,{detail:{questionId:n,answerText:i,type:r}});document.dispatchEvent(a)})}),document.querySelectorAll(`[data-msq-button]`).forEach(e=>{e.addEventListener(`click`,()=>{let t=e.getAttribute(`data-question-id`),n=e.getAttribute(`data-answer-id`),r=e.getAttribute(`data-msq-button`);if(!t||!n||!r)return;let i=new CustomEvent(`answer-selected`,{detail:{questionId:t,answerId:n,choice:r,type:`msq`}});document.dispatchEvent(i);let a=r===`Đúng`?`Sai`:`Đúng`,o=e.parentElement?.querySelector(`[data-msq-button="${a}"][data-answer-id="${n}"]`);e.classList.remove(`bg-gray-50`,`border-gray-200`,`text-gray-600`,`dark:bg-slate-800`,`dark:border-slate-700`,`dark:text-slate-400`),e.classList.add(`bg-blue-600`,`border-blue-600`,`text-white`),o&&(o.classList.remove(`bg-blue-600`,`border-blue-600`,`text-white`),o.classList.add(`bg-gray-50`,`border-gray-200`,`text-gray-600`,`dark:bg-slate-800`,`dark:border-slate-700`,`dark:text-slate-400`));let s=e.closest(`.msq-row`);if(s){let e=s.querySelector(`.msq-text`);e&&(e.classList.remove(`text-gray-700`,`dark:text-slate-300`),e.classList.add(`text-blue-700`,`dark:text-blue-400`)),s.classList.remove(`border-gray-200`,`dark:border-slate-800/80`,`bg-white`,`dark:bg-slate-900`),s.classList.add(`border-blue-500`,`bg-blue-50/30`,`dark:border-blue-500`,`dark:bg-blue-950/20`);let t=s.querySelector(`.msq-letter`);t&&(t.classList.remove(`bg-gray-100`,`text-gray-500`,`dark:bg-slate-800`,`dark:text-slate-450`),t.classList.add(`bg-blue-600`,`text-white`,`dark:bg-blue-600`))}})});</script><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"><img> là thẻ đơn dùng để hiển thị ảnh.</p></div></div></div><div class="quiz-question-wrapper" data-index="1" 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 2</span><div class="flex items-center space-x-2"><!-- Question Type --><span class="text-xs font-semibold text-gray-400 dark:text-slate-500">Trắc nghiệm đơn</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 'alt' trong thẻ <img> có tác dụng gì?</p> </div><!-- Standard Options Container (single_choice, multiple_choice, true_false) --><div class="space-y-3"><div data-question-id="ex_1" data-answer-id="opt_1_0" 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">A</div><div class="text-sm md:text-base font-medium flex-1 [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1">Định dạng kích thước</div></div><div data-question-id="ex_1" data-answer-id="opt_1_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">Hiển thị văn bản thay thế khi ảnh bị lỗi hoặc cho người khiếm thị</div></div><div data-question-id="ex_1" data-answer-id="opt_1_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">Làm ảnh nét hơn</div></div><div data-question-id="ex_1" data-answer-id="opt_1_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">Tạo khung cho ảnh</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">Alt (Alternative text) rất quan trọng cho SEO và khả năng tiếp cận.</p></div></div></div><div class="quiz-question-wrapper" data-index="2" 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 3</span><div class="flex items-center space-x-2"><!-- Question Type --><span class="text-xs font-semibold text-gray-400 dark:text-slate-500">Trắc nghiệm đơn</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>Để hiển thị thanh điều khiển (Play, Pause, Volume) cho video, ta dùng thuộc tính?</p> </div><!-- Standard Options Container (single_choice, multiple_choice, true_false) --><div class="space-y-3"><div data-question-id="ex_2" data-answer-id="opt_2_0" 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">A</div><div class="text-sm md:text-base font-medium flex-1 [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1">play</div></div><div data-question-id="ex_2" data-answer-id="opt_2_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">controls</div></div><div data-question-id="ex_2" data-answer-id="opt_2_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">buttons</div></div><div data-question-id="ex_2" data-answer-id="opt_2_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">show</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">Không có thuộc tính controls, người dùng sẽ không tương tác được với video.</p></div></div></div><div class="quiz-question-wrapper" data-index="3" 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 4</span><div class="flex items-center space-x-2"><!-- Question Type --><span class="text-xs font-semibold text-gray-400 dark:text-slate-500">Trắc nghiệm đơn</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ẻ nào dùng để nhúng một trang web khác vào trang hiện tại?</p> </div><!-- Standard Options Container (single_choice, multiple_choice, true_false) --><div class="space-y-3"><div data-question-id="ex_3" data-answer-id="opt_3_0" 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">A</div><div class="text-sm md:text-base font-medium flex-1 [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1"><embed></div></div><div data-question-id="ex_3" data-answer-id="opt_3_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"><object></div></div><div data-question-id="ex_3" data-answer-id="opt_3_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"><iframe></div></div><div data-question-id="ex_3" data-answer-id="opt_3_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"><frame></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">Iframe (Inline Frame) là chuẩn để nhúng nội dung ngoại vi.</p></div></div></div><div class="quiz-question-wrapper" data-index="4" 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 5</span><div class="flex items-center space-x-2"><!-- Question Type --><span class="text-xs font-semibold text-gray-400 dark:text-slate-500">Trắc nghiệm đơn</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>Để chèn âm thanh vào trang web, ta dùng thẻ?</p> </div><!-- Standard Options Container (single_choice, multiple_choice, true_false) --><div class="space-y-3"><div data-question-id="ex_4" data-answer-id="opt_4_0" 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">A</div><div class="text-sm md:text-base font-medium flex-1 [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1"><sound></div></div><div data-question-id="ex_4" data-answer-id="opt_4_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"><music></div></div><div data-question-id="ex_4" data-answer-id="opt_4_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"><audio></div></div><div data-question-id="ex_4" data-answer-id="opt_4_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"><mp3></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"><audio> là thẻ HTML5 hỗ trợ phát nhạc.</p></div></div></div><div class="quiz-question-wrapper" data-index="5" 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 6</span><div class="flex items-center space-x-2"><!-- Question Type --><span class="text-xs font-semibold text-gray-400 dark:text-slate-500">Trắc nghiệm đơn</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 'autoplay' trong thẻ <video> có tác dụng gì?</p> </div><!-- Standard Options Container (single_choice, multiple_choice, true_false) --><div class="space-y-3"><div data-question-id="ex_5" data-answer-id="opt_5_0" 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">A</div><div class="text-sm md:text-base font-medium flex-1 [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1">Tự động lặp lại</div></div><div data-question-id="ex_5" data-answer-id="opt_5_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">Tự động phát video khi tải trang</div></div><div data-question-id="ex_5" data-answer-id="opt_5_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">Tắt tiếng video</div></div><div data-question-id="ex_5" data-answer-id="opt_5_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">Làm video to ra</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">Autoplay giúp video chạy ngay mà không cần nhấn Play.</p></div></div></div><div class="quiz-question-wrapper" data-index="6" 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 7</span><div class="flex items-center space-x-2"><!-- Question Type --><span class="text-xs font-semibold text-gray-400 dark:text-slate-500">Trắc nghiệm đơn</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>Định dạng video nào sau đây được hỗ trợ tốt nhất trên các trình duyệt?</p> </div><!-- Standard Options Container (single_choice, multiple_choice, true_false) --><div class="space-y-3"><div data-question-id="ex_6" data-answer-id="opt_6_0" 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">A</div><div class="text-sm md:text-base font-medium flex-1 [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1">MP4</div></div><div data-question-id="ex_6" data-answer-id="opt_6_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">AVI</div></div><div data-question-id="ex_6" data-answer-id="opt_6_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">WMV</div></div><div data-question-id="ex_6" data-answer-id="opt_6_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">FLV</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">MP4 (H.264) là định dạng chuẩn cho web hiện nay.</p></div></div></div><div class="quiz-question-wrapper" data-index="7" 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 8</span><div class="flex items-center space-x-2"><!-- Question Type --><span class="text-xs font-semibold text-gray-400 dark:text-slate-500">Trắc nghiệm đơn</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>Khi chèn ảnh, nếu chỉ đặt thuộc tính width mà không đặt height thì?</p> </div><!-- Standard Options Container (single_choice, multiple_choice, true_false) --><div class="space-y-3"><div data-question-id="ex_7" data-answer-id="opt_7_0" 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">A</div><div class="text-sm md:text-base font-medium flex-1 [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1">Ảnh bị mất</div></div><div data-question-id="ex_7" data-answer-id="opt_7_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">Ảnh tự động thay đổi height để giữ đúng tỉ lệ gốc</div></div><div data-question-id="ex_7" data-answer-id="opt_7_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">Height sẽ bằng 0</div></div><div data-question-id="ex_7" data-answer-id="opt_7_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">Ảnh bị méo</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">Trình duyệt tự cân đối chiều còn lại để bảo toàn tỉ lệ ảnh.</p></div></div></div><div class="quiz-question-wrapper" data-index="8" 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 9</span><div class="flex items-center space-x-2"><!-- Question Type --><span class="text-xs font-semibold text-gray-400 dark:text-slate-500">Trắc nghiệm đơn</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 'src' trong các thẻ đa phương tiện viết tắt của?</p> </div><!-- Standard Options Container (single_choice, multiple_choice, true_false) --><div class="space-y-3"><div data-question-id="ex_8" data-answer-id="opt_8_0" 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">A</div><div class="text-sm md:text-base font-medium flex-1 [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1">Search</div></div><div data-question-id="ex_8" data-answer-id="opt_8_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">Source</div></div><div data-question-id="ex_8" data-answer-id="opt_8_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">Screen</div></div><div data-question-id="ex_8" data-answer-id="opt_8_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">Script</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">Source chỉ định nguồn dẫn của tệp tin.</p></div></div></div><div class="quiz-question-wrapper" data-index="9" 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 10</span><div class="flex items-center space-x-2"><!-- Question Type --><span class="text-xs font-semibold text-gray-400 dark:text-slate-500">Trắc nghiệm đơn</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>Tại sao nên hạn chế nhúng quá nhiều iframe vào một trang?</p> </div><!-- Standard Options Container (single_choice, multiple_choice, true_false) --><div class="space-y-3"><div data-question-id="ex_9" data-answer-id="opt_9_0" 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">A</div><div class="text-sm md:text-base font-medium flex-1 [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1">Làm trang web trông xấu</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">Ảnh hưởng đến tốc độ tải trang và bảo mật</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">Làm máy tính hết pin</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">Làm hỏng trình duyệt</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">Mỗi iframe là một yêu cầu tải thêm một trang web hoàn chỉnh, gây nặng máy.</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 hỗ trợ nhúng những loại file đa phương tiệ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_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">Hình ảnh (img)</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">Video</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">Audio</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">PDF</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 hỗ trợ nhúng hình ảnh, video, audio và PDF.</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ẻ <iframe> dùng để làm gì?</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">Nhúng trang web khá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_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">Nhúng video YouTube</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">Nhúng bản đồ Google Maps</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">Tạo danh sách</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">Iframe nhúng nội dung từ nguồn bên ngoài.</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 alt trong thẻ img 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">Hiển thị khi ảnh không tải đượ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_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">SEO</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">Mô tả ảnh cho người khiếm thị</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">Định dạng ảnh</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">Alt hiển thị khi ảnh lỗi, giúp SEO và hỗ trợ người khiếm thị.</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>HTML5 hỗ trợ thẻ nhúng đa phương tiện nào mới?</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"><video></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"><audio></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"><canvas></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">HTML5 có <video>, <audio>, <canvas>. Flash đã bị ngừng.</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-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"><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">Tạo liên kết</span></a><a href="/lms/tin-hoc-12/tin12-bai-12-tao-bieu-mau" 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 biểu mẫu</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":"\u003cimage>","is_correct":false},{"id":"opt_0_1","content":"\u003cimg>","is_correct":true},{"id":"opt_0_2","content":"\u003cpicture>","is_correct":false},{"id":"opt_0_3","content":"\u003csrc>","is_correct":false}],"answer":1},{"id":"ex_1","type":"single_choice","correctAnswers":["opt_1_1"],"answers":[{"id":"opt_1_0","content":"Định dạng kích thước","is_correct":false},{"id":"opt_1_1","content":"Hiển thị văn bản thay thế khi ảnh bị lỗi hoặc cho người khiếm thị","is_correct":true},{"id":"opt_1_2","content":"Làm ảnh nét hơn","is_correct":false},{"id":"opt_1_3","content":"Tạo khung cho ảnh","is_correct":false}],"answer":1},{"id":"ex_2","type":"single_choice","correctAnswers":["opt_2_1"],"answers":[{"id":"opt_2_0","content":"play","is_correct":false},{"id":"opt_2_1","content":"controls","is_correct":true},{"id":"opt_2_2","content":"buttons","is_correct":false},{"id":"opt_2_3","content":"show","is_correct":false}],"answer":1},{"id":"ex_3","type":"single_choice","correctAnswers":["opt_3_2"],"answers":[{"id":"opt_3_0","content":"\u003cembed>","is_correct":false},{"id":"opt_3_1","content":"\u003cobject>","is_correct":false},{"id":"opt_3_2","content":"\u003ciframe>","is_correct":true},{"id":"opt_3_3","content":"\u003cframe>","is_correct":false}],"answer":2},{"id":"ex_4","type":"single_choice","correctAnswers":["opt_4_2"],"answers":[{"id":"opt_4_0","content":"\u003csound>","is_correct":false},{"id":"opt_4_1","content":"\u003cmusic>","is_correct":false},{"id":"opt_4_2","content":"\u003caudio>","is_correct":true},{"id":"opt_4_3","content":"\u003cmp3>","is_correct":false}],"answer":2},{"id":"ex_5","type":"single_choice","correctAnswers":["opt_5_1"],"answers":[{"id":"opt_5_0","content":"Tự động lặp lại","is_correct":false},{"id":"opt_5_1","content":"Tự động phát video khi tải trang","is_correct":true},{"id":"opt_5_2","content":"Tắt tiếng video","is_correct":false},{"id":"opt_5_3","content":"Làm video to ra","is_correct":false}],"answer":1},{"id":"ex_6","type":"single_choice","correctAnswers":["opt_6_0"],"answers":[{"id":"opt_6_0","content":"MP4","is_correct":true},{"id":"opt_6_1","content":"AVI","is_correct":false},{"id":"opt_6_2","content":"WMV","is_correct":false},{"id":"opt_6_3","content":"FLV","is_correct":false}],"answer":0},{"id":"ex_7","type":"single_choice","correctAnswers":["opt_7_1"],"answers":[{"id":"opt_7_0","content":"Ảnh bị mất","is_correct":false},{"id":"opt_7_1","content":"Ảnh tự động thay đổi height để giữ đúng tỉ lệ gốc","is_correct":true},{"id":"opt_7_2","content":"Height sẽ bằng 0","is_correct":false},{"id":"opt_7_3","content":"Ảnh bị méo","is_correct":false}],"answer":1},{"id":"ex_8","type":"single_choice","correctAnswers":["opt_8_1"],"answers":[{"id":"opt_8_0","content":"Search","is_correct":false},{"id":"opt_8_1","content":"Source","is_correct":true},{"id":"opt_8_2","content":"Screen","is_correct":false},{"id":"opt_8_3","content":"Script","is_correct":false}],"answer":1},{"id":"ex_9","type":"single_choice","correctAnswers":["opt_9_1"],"answers":[{"id":"opt_9_0","content":"Làm trang web trông xấu","is_correct":false},{"id":"opt_9_1","content":"Ảnh hưởng đến tốc độ tải trang và bảo mật","is_correct":true},{"id":"opt_9_2","content":"Làm máy tính hết pin","is_correct":false},{"id":"opt_9_3","content":"Làm hỏng trình duyệt","is_correct":false}],"answer":1},{"id":"ex_10","type":"msq","correctAnswers":["opt_10_0","opt_10_1","opt_10_2","opt_10_3"],"answers":[{"id":"opt_10_0","content":"Hình ảnh (img)","is_correct":true},{"id":"opt_10_1","content":"Video","is_correct":true},{"id":"opt_10_2","content":"Audio","is_correct":true},{"id":"opt_10_3","content":"PDF","is_correct":true}],"answer":[0,1,2,3]},{"id":"ex_11","type":"msq","correctAnswers":["opt_11_0","opt_11_1","opt_11_2"],"answers":[{"id":"opt_11_0","content":"Nhúng trang web khác","is_correct":true},{"id":"opt_11_1","content":"Nhúng video YouTube","is_correct":true},{"id":"opt_11_2","content":"Nhúng bản đồ Google Maps","is_correct":true},{"id":"opt_11_3","content":"Tạo danh sách","is_correct":false}],"answer":[0,1,2]},{"id":"ex_12","type":"msq","correctAnswers":["opt_12_0","opt_12_1","opt_12_2"],"answers":[{"id":"opt_12_0","content":"Hiển thị khi ảnh không tải được","is_correct":true},{"id":"opt_12_1","content":"SEO","is_correct":true},{"id":"opt_12_2","content":"Mô tả ảnh cho người khiếm thị","is_correct":true},{"id":"opt_12_3","content":"Định dạng ảnh","is_correct":false}],"answer":[0,1,2]},{"id":"ex_13","type":"msq","correctAnswers":["opt_13_0","opt_13_1","opt_13_2"],"answers":[{"id":"opt_13_0","content":"\u003cvideo>","is_correct":true},{"id":"opt_13_1","content":"\u003caudio>","is_correct":true},{"id":"opt_13_2","content":"\u003ccanvas>","is_correct":true},{"id":"opt_13_3","content":"\u003cflash>","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>
