Tạo biểu mẫu

Bao quanh các thành phần nhập liệu. Các thuộc tính quan trọng: action (địa chỉ nhận dữ liệu), method (GET hoặc POST).

(ô nhập), (nhập văn bản dài), <select> (danh sách chọn).</div></div><div class="mb-8"><h2 class="text-xl font-bold text-blue-600 dark:text-blue-400 mb-4">Các loại Input</h2><div class="prose-content">type="text", type="password", type="checkbox", type="radio", type="submit".</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 để bắt đầu một biểu mẫu trong HTML?</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"><input></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"><form></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"><select></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"><label></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"><form> là container chứa toàn bộ các trường nhập liệu.</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>Để tạo ô nhập mật khẩu (ẩn các kí tự), ta dùng type nào cho thẻ <input>?</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">text</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">hidden</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">password</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">secret</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">type="password" hiển thị các dấu chấm thay cho kí tự thực.</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>Nút dùng để gửi dữ liệu của form đi được tạo bởi?</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"><input type="button"></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"><input type="submit"></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"><input type="reset"></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"><input type="send"></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">Submit button kích hoạt hành động gửi dữ liệu được định nghĩa trong form.</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>Để người dùng chọn một trong nhiều lựa chọn (chọn duy nhất), dùng type nào?</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">checkbox</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">radio</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">select</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">text</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">Radio button dùng cho các lựa chọn loại trừ nhau (chọn 1 trong n).</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>Để người dùng có thể chọn nhiều lựa chọn cùng lúc, ta dùng?</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">radio</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">checkbox</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">button</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">multiple</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">Checkbox cho phép chọn nhiều mục độc lập.</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>Thẻ nào dùng để tạo ô nhập văn bản nhiều dòng (như phần góp ý)?</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"><input type="text"></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"><textarea></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"><textblock></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"><input type="area"></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"><textarea> cho phép nhập nội dung dài với nhiều dòng.</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>Thuộc tính 'placeholder' trong thẻ input dùng để làm gì?</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">Lưu giá trị mặc định</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">Hiển thị văn bản gợi ý mờ trong ô nhập</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">Mã hóa dữ liệu</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">Căn lề ô nhập</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">Placeholder biến mất khi người dùng bắt đầu gõ.</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>Thẻ <label> dùng để làm gì?</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">Đổi màu chữ</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">Gắn nhãn mô tả cho các ô nhập liệu</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">Tạo nút bấm</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">Chèn ảnh 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">Label giúp người dùng biết ô nhập đó dùng để làm gì và tăng diện tích tương tác.</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>Để tạo danh sách thả xuống (dropdown), ta dùng cặp thẻ nào?</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"><input> và <list></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"><select> và <option></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"><form> và <input></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"><ol> và <li></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"><select> tạo khung, <option> tạo các mục lựa chọn.</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>Thuộc tính 'required' thêm vào thẻ input 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_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 ô nhập to hơn</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">Bắt buộc người dùng phải nhập dữ liệu trước khi gửi form</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">Chỉ cho phép nhập số</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">Tự động điền dữ liệu</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">Đây là cách kiểm tra dữ liệu đơn giản ngay phía trình duyệt.</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>Biểu mẫu HTML có những trường nhập liệu 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">Text</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">Password</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">Email</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">Date</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">Form hỗ trợ nhiều loại input.</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ẻ <form> gửi dữ liệu bằng phương pháp nào?</p> </div><!-- Standard Options Container (single_choice, multiple_choice, true_false) --><!-- Đúng / Sai Options Container (msq) --><div class="space-y-4"><div class="flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl border transition-all gap-3 msq-row border-gray-200 dark:border-slate-800/80 bg-white dark:bg-slate-900" data-answer-id="opt_11_0"><div class="flex items-start flex-1 min-w-0"><span class="msq-letter w-6 h-6 rounded-lg bg-gray-100 dark:bg-slate-800 text-gray-500 dark:text-slate-450 flex items-center justify-center font-bold text-xs mr-3 shrink-0 transition-colors">A</span><div class="msq-text text-sm md:text-base font-medium text-gray-700 dark:text-slate-300 leading-relaxed transition-colors [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1">GET</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">POST</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">PUT</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">DELETE</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">Form HTML hỗ trợ GET và POST.</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 required 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">Bắt buộc nhập liệu</div></div><div class="flex items-center gap-3 shrink-0 self-end sm:self-center"><div class="flex items-center gap-2"><button type="button" data-msq-button="Đúng" data-question-id="ex_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">Kiểm tra định dạng</div></div><div class="flex items-center gap-3 shrink-0 self-end sm:self-center"><div class="flex items-center gap-2"><button type="button" data-msq-button="Đúng" data-question-id="ex_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">Hiển thị gợi ý</div></div><div class="flex items-center gap-3 shrink-0 self-end sm:self-center"><div class="flex items-center gap-2"><button type="button" data-msq-button="Đúng" data-question-id="ex_12" data-answer-id="opt_12_2" data-option-letter="C" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Đúng</button><button type="button" data-msq-button="Sai" data-question-id="ex_12" data-answer-id="opt_12_2" data-option-letter="C" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all border bg-gray-50 border-gray-200 text-gray-600 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-750">Sai</button></div></div></div><div class="flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl border transition-all gap-3 msq-row border-gray-200 dark:border-slate-800/80 bg-white dark:bg-slate-900" data-answer-id="opt_12_3"><div class="flex items-start flex-1 min-w-0"><span class="msq-letter w-6 h-6 rounded-lg bg-gray-100 dark:bg-slate-800 text-gray-500 dark:text-slate-450 flex items-center justify-center font-bold text-xs mr-3 shrink-0 transition-colors">D</span><div class="msq-text text-sm md:text-base font-medium text-gray-700 dark:text-slate-300 leading-relaxed transition-colors [&_img]:max-w-full [&_img]:rounded-md [&_img]:my-1">Tự động điền</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">Required bắt buộc nhập liệu trước khi gửi form.</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>Form HTML chứa những thành phần nào?</p> </div><!-- Standard Options Container (single_choice, multiple_choice, true_false) --><!-- Đúng / Sai Options Container (msq) --><div class="space-y-4"><div class="flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl border transition-all gap-3 msq-row border-gray-200 dark:border-slate-800/80 bg-white dark:bg-slate-900" data-answer-id="opt_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">Input</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">Select</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">Textarea</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">Button</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">Form có input, select, textarea và button.</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-11-chen-tep-tin-da-phuong-tien-va-khung-noi-tuyen" 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">Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web</span></a><a href="/lms/tin-hoc-12/tin12-bai-13-khai-niem-va-vai-tro-cua-css" 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">Khái niệm và vai trò của CSS</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":"\u003cinput>","is_correct":false},{"id":"opt_0_1","content":"\u003cform>","is_correct":true},{"id":"opt_0_2","content":"\u003cselect>","is_correct":false},{"id":"opt_0_3","content":"\u003clabel>","is_correct":false}],"answer":1},{"id":"ex_1","type":"single_choice","correctAnswers":["opt_1_2"],"answers":[{"id":"opt_1_0","content":"text","is_correct":false},{"id":"opt_1_1","content":"hidden","is_correct":false},{"id":"opt_1_2","content":"password","is_correct":true},{"id":"opt_1_3","content":"secret","is_correct":false}],"answer":2},{"id":"ex_2","type":"single_choice","correctAnswers":["opt_2_1"],"answers":[{"id":"opt_2_0","content":"\u003cinput type=\"button\">","is_correct":false},{"id":"opt_2_1","content":"\u003cinput type=\"submit\">","is_correct":true},{"id":"opt_2_2","content":"\u003cinput type=\"reset\">","is_correct":false},{"id":"opt_2_3","content":"\u003cinput type=\"send\">","is_correct":false}],"answer":1},{"id":"ex_3","type":"single_choice","correctAnswers":["opt_3_1"],"answers":[{"id":"opt_3_0","content":"checkbox","is_correct":false},{"id":"opt_3_1","content":"radio","is_correct":true},{"id":"opt_3_2","content":"select","is_correct":false},{"id":"opt_3_3","content":"text","is_correct":false}],"answer":1},{"id":"ex_4","type":"single_choice","correctAnswers":["opt_4_1"],"answers":[{"id":"opt_4_0","content":"radio","is_correct":false},{"id":"opt_4_1","content":"checkbox","is_correct":true},{"id":"opt_4_2","content":"button","is_correct":false},{"id":"opt_4_3","content":"multiple","is_correct":false}],"answer":1},{"id":"ex_5","type":"single_choice","correctAnswers":["opt_5_1"],"answers":[{"id":"opt_5_0","content":"\u003cinput type=\"text\">","is_correct":false},{"id":"opt_5_1","content":"\u003ctextarea>","is_correct":true},{"id":"opt_5_2","content":"\u003ctextblock>","is_correct":false},{"id":"opt_5_3","content":"\u003cinput type=\"area\">","is_correct":false}],"answer":1},{"id":"ex_6","type":"single_choice","correctAnswers":["opt_6_1"],"answers":[{"id":"opt_6_0","content":"Lưu giá trị mặc định","is_correct":false},{"id":"opt_6_1","content":"Hiển thị văn bản gợi ý mờ trong ô nhập","is_correct":true},{"id":"opt_6_2","content":"Mã hóa dữ liệu","is_correct":false},{"id":"opt_6_3","content":"Căn lề ô nhập","is_correct":false}],"answer":1},{"id":"ex_7","type":"single_choice","correctAnswers":["opt_7_1"],"answers":[{"id":"opt_7_0","content":"Đổi màu chữ","is_correct":false},{"id":"opt_7_1","content":"Gắn nhãn mô tả cho các ô nhập liệu","is_correct":true},{"id":"opt_7_2","content":"Tạo nút bấm","is_correct":false},{"id":"opt_7_3","content":"Chèn ảnh nhỏ","is_correct":false}],"answer":1},{"id":"ex_8","type":"single_choice","correctAnswers":["opt_8_1"],"answers":[{"id":"opt_8_0","content":"\u003cinput> và \u003clist>","is_correct":false},{"id":"opt_8_1","content":"\u003cselect> và \u003coption>","is_correct":true},{"id":"opt_8_2","content":"\u003cform> và \u003cinput>","is_correct":false},{"id":"opt_8_3","content":"\u003col> và \u003cli>","is_correct":false}],"answer":1},{"id":"ex_9","type":"single_choice","correctAnswers":["opt_9_1"],"answers":[{"id":"opt_9_0","content":"Làm ô nhập to hơn","is_correct":false},{"id":"opt_9_1","content":"Bắt buộc người dùng phải nhập dữ liệu trước khi gửi form","is_correct":true},{"id":"opt_9_2","content":"Chỉ cho phép nhập số","is_correct":false},{"id":"opt_9_3","content":"Tự động điền dữ liệu","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":"Text","is_correct":true},{"id":"opt_10_1","content":"Password","is_correct":true},{"id":"opt_10_2","content":"Email","is_correct":true},{"id":"opt_10_3","content":"Date","is_correct":true}],"answer":[0,1,2,3]},{"id":"ex_11","type":"msq","correctAnswers":["opt_11_0","opt_11_1"],"answers":[{"id":"opt_11_0","content":"GET","is_correct":true},{"id":"opt_11_1","content":"POST","is_correct":true},{"id":"opt_11_2","content":"PUT","is_correct":false},{"id":"opt_11_3","content":"DELETE","is_correct":false}],"answer":[0,1]},{"id":"ex_12","type":"msq","correctAnswers":["opt_12_0"],"answers":[{"id":"opt_12_0","content":"Bắt buộc nhập liệu","is_correct":true},{"id":"opt_12_1","content":"Kiểm tra định dạng","is_correct":false},{"id":"opt_12_2","content":"Hiển thị gợi ý","is_correct":false},{"id":"opt_12_3","content":"Tự động điền","is_correct":false}],"answer":[0]},{"id":"ex_13","type":"msq","correctAnswers":["opt_13_0","opt_13_1","opt_13_2","opt_13_3"],"answers":[{"id":"opt_13_0","content":"Input","is_correct":true},{"id":"opt_13_1","content":"Select","is_correct":true},{"id":"opt_13_2","content":"Textarea","is_correct":true},{"id":"opt_13_3","content":"Button","is_correct":true}],"answer":[0,1,2,3]}]; 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>