<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trắc Nghiệm Thực Vật Dược - Phần 2</title>
<style>
:root {
--primary: #2e7d32;
--primary-light: #e8f5e9;
--primary-dark: #1b5e20;
--secondary: #0288d1;
--correct: #4caf50;
--correct-bg: #e8f5e9;
--incorrect: #ef5350;
--incorrect-bg: #ffebee;
--bg: #f4f6f8;
--card-bg: #ffffff;
--text: #2c3e50;
--text-light: #607d8b;
--border: #e0e0e0;
--shadow: 0 4px 6px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
body {
background-color: var(--bg);
color: var(--text);
line-height: 1.6;
padding-bottom: 60px;
}
header {
background: linear-gradient(135deg, var(--primary-dark), var(--primary));
color: white;
padding: 25px 20px;
text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
position: sticky;
top: 0;
z-index: 100;
}
header h1 {
font-size: 1.8rem;
margin-bottom: 5px;
font-weight: 700;
}
header p {
font-size: 0.95rem;
opacity: 0.9;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 20px 15px;
}
/* Mode Selection & Stats Dashboard Bar */
.controls-card {
background: var(--card-bg);
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
box-shadow: var(--shadow);
border: 1px solid var(--border);
}
.mode-selector {
display: flex;
gap: 12px;
margin-bottom: 20px;
border-bottom: 2px solid var(--primary-light);
padding-bottom: 15px;
}
.mode-btn {
flex: 1;
padding: 12px 15px;
border: 2px solid var(--primary);
background: transparent;
color: var(--primary);
font-weight: 600;
font-size: 1rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.25s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.mode-btn.active {
background: var(--primary);
color: white;
box-shadow: 0 3px 8px rgba(46, 125, 50, 0.3);
}
.mode-btn:hover:not(.active) {
background: var(--primary-light);
}
.stats-bar {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
background: var(--primary-light);
padding: 15px 20px;
border-radius: 8px;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
}
.stat-val {
font-size: 1.3rem;
font-weight: 700;
color: var(--primary-dark);
}
.stat-label {
font-size: 0.8rem;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.action-btns {
display: flex;
gap: 10px;
width: 100%;
margin-top: 15px;
}
.btn {
padding: 10px 18px;
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
font-size: 0.9rem;
}
.btn-reset {
background: #eceff1;
color: #37474f;
}
.btn-reset:hover {
background: #cfd8dc;
}
.btn-reshuffle {
background: var(--secondary);
color: white;
display: none; /* Only shown in shuffle mode */
}
.btn-reshuffle:hover {
background: #0277bd;
}
/* Questions List */
.question-card {
background: var(--card-bg);
border-radius: 12px;
padding: 22px;
margin-bottom: 20px;
box-shadow: var(--shadow);
border: 1px solid var(--border);
transition: border-color 0.3s ease;
}
.question-card.answered-correct {
border-left: 6px solid var(--correct);
}
.question-card.answered-incorrect {
border-left: 6px solid var(--incorrect);
}
.q-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
gap: 10px;
}
.q-number {
font-weight: 700;
color: var(--primary);
font-size: 1.05rem;
background: var(--primary-light);
padding: 4px 10px;
border-radius: 6px;
display: inline-block;
}
.q-origin-tag {
font-size: 0.82rem;
color: var(--secondary);
background: #e1f5fe;
padding: 4px 8px;
border-radius: 4px;
font-weight: 600;
}
.q-text {
font-size: 1.05rem;
font-weight: 600;
color: var(--text);
margin-bottom: 16px;
line-height: 1.5;
}
/* Options */
.options-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.option-item {
display: flex;
align-items: center;
padding: 12px 15px;
border: 1.5px solid var(--border);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
background: #fafafa;
position: relative;
}
.option-item:hover:not(.disabled) {
background: #f0f7f0;
border-color: var(--primary);
}
.option-prefix {
width: 28px;
height: 28px;
border-radius: 50%;
background: #e0e0e0;
color: #424242;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.9rem;
margin-right: 12px;
flex-shrink: 0;
transition: all 0.2s ease;
}
.option-text {
font-size: 0.98rem;
flex-grow: 1;
color: #333;
}
/* Feedback Styles (Immediate Check) */
.option-item.selected-correct {
background: var(--correct-bg) !important;
border-color: var(--correct) !important;
color: var(--primary-dark);
font-weight: 600;
}
.option-item.selected-correct .option-prefix {
background: var(--correct);
color: white;
}
.option-item.selected-incorrect {
background: var(--incorrect-bg) !important;
border-color: var(--incorrect) !important;
color: #c62828;
}
.option-item.selected-incorrect .option-prefix {
background: var(--incorrect);
color: white;
}
.option-item.is-correct-answer {
background: var(--correct-bg) !important;
border-color: var(--correct) !important;
}
.option-item.is-correct-answer .option-prefix {
background: var(--correct);
color: white;
}
.option-item.disabled {
cursor: default;
}
.feedback-badge {
margin-top: 14px;
padding: 10px 14px;
border-radius: 6px;
font-size: 0.92rem;
font-weight: 600;
display: none;
align-items: center;
gap: 8px;
}
.feedback-badge.show-correct {
display: flex;
background: var(--correct-bg);
color: var(--primary-dark);
border: 1px solid #a5d6a7;
}
.feedback-badge.show-incorrect {
display: flex;
background: var(--incorrect-bg);
color: #c62828;
border: 1px solid #ef9a9a;
}
/* Floating Navigation / Scroll Top */
.float-nav {
position: fixed;
bottom: 20px;
right: 20px;
background: var(--primary);
color: white;
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
cursor: pointer;
border: none;
transition: transform 0.2s;
z-index: 99;
}
.float-nav:hover {
transform: scale(1.1);
}
@media (max-width: 600px) {
.mode-selector {
flex-direction: column;
}
.stats-bar {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.q-header {
flex-direction: column;
align-items: flex-start;
}
}
</style>
</head>
<body>
<header>
<h1>PHẦN 2: THỰC VẬT DƯỢC</h1>
<p>Ôn luyện trắc nghiệm tự động - Kiểm tra đáp án tức thì</p>
</header>
<div class="container">
<!-- Dashboard Controls -->
<div class="controls-card">
<div class="mode-selector">
<button class="mode-btn active" id="btnModeOriginal" onclick="setMode('original')">
📌 Giữ Nguyên Câu Hỏi
</button>
<button class="mode-btn" id="btnModeShuffle" onclick="setMode('shuffle')">
🔀 Đảo Câu Hỏi
</button>
</div>
<div class="stats-bar">
<div class="stat-item">
<span class="stat-val" id="statTotal">60</span>
<span class="stat-label">Tổng số câu</span>
</div>
<div class="stat-item">
<span class="stat-val" id="statAnswered">0</span>
<span class="stat-label">Đã làm</span>
</div>
<div class="stat-item">
<span class="stat-val" style="color: #2e7d32;" id="statCorrect">0</span>
<span class="stat-label">Câu đúng</span>
</div>
<div class="stat-item">
<span class="stat-val" style="color: #c62828;" id="statIncorrect">0</span>
<span class="stat-label">Câu sai</span>
</div>
<div class="stat-item">
<span class="stat-val" style="color: #0288d1;" id="statScore">0%</span>
<span class="stat-label">Tỷ lệ đúng</span>
</div>
</div>
<div class="action-btns">
<button class="btn btn-reset" onclick="resetQuiz()">🔄 Làm lại từ đầu</button>
<button class="btn btn-reshuffle" id="btnReshuffle" onclick="reshuffleQuestions()">🎲 Tráo lại câu hỏi</button>
</div>
</div>
<!-- Question List Container -->
<div id="quizContainer">
<!-- Questions injected via JS -->
</div>
</div>
<button class="float-nav" onclick="window.scrollTo({top: 0, behavior: 'smooth'})" title="Lên đầu trang">⬆</button>
<script>
// Database of 60 questions exact from photos + accurate answers verified
const RAW_QUESTIONS = [{'id': 'CH001', 'num': 1, 'question': 'Nghiên cứu cấu tạo vi học bên trong của cây thuốc thuộc lĩnh vực của:', 'options': ['Sinh lý học thực vật', 'Hệ thống học thực vật', 'Hình thái học thực vật', 'Giải phẫu học thực vật'], 'answer': 3}, {'id': 'CH002', 'num': 2, 'question': 'Nghiên cứu về cách sắp xếp các thực vật thành từng nhóm dựa vào hệ thống tiến hóa của thực vật thuộc lĩnh vực của:', 'options': ['Sinh lý học thực vật', 'Hệ thống học thực vật', 'Hình thái học thực vật', 'Giải phẫu học thực vật'], 'answer': 1}, {'id': 'CH003', 'num': 3, 'question': 'Cây nào sau đây KHÔNG thuộc họ gừng:', 'options': ['Sa nhân', 'Thảo quả', 'Củ gấu', 'Nghệ'], 'answer': 2}, {'id': 'CH004', 'num': 4, 'question': 'Thể sống nhỏ nào có vai trò tổng hợp năng lượng:', 'options': ['Ty thể', 'Thể lạp', 'Thể golgi', 'Thể ribo'], 'answer': 0}, {'id': 'CH005', 'num': 5, 'question': 'Thể sống nhỏ nào có vai trò tổng hợp protein:', 'options': ['Ty thể', 'Thể lạp', 'Thể golgi', 'Thể ribo'], 'answer': 3}, {'id': 'CH006', 'num': 6, 'question': 'Thể sống nhỏ nào có vai trò tạo màng khung tế bào:', 'options': ['Ty thể', 'Thể lạp', 'Thể golgi', 'Thể ribo'], 'answer': 2}, {'id': 'CH007', 'num': 7, 'question': 'Thể sống nhỏ nào là nơi chứa chất dự trữ hay cặn bã:', 'options': ['Thể lạp', 'Thể golgi', 'Thể ribo', 'Thể vùi'], 'answer': 3}, {'id': 'CH008', 'num': 8, 'question': 'Mô có chức năng nâng đỡ:', 'options': ['Mô dày', 'Mô giậu', 'Mô gỗ', 'Mô phân sinh'], 'answer': 0}, {'id': 'CH009', 'num': 9, 'question': 'Biểu bì thuộc loại mô nào:', 'options': ['Mô phân sinh', 'Mô mềm', 'Mô che chở', 'Mô nâng đỡ'], 'answer': 2}, {'id': 'CH010', 'num': 10, 'question': 'Bần và thụ bì thuộc loại mô nào:', 'options': ['Mô che chở', 'Mô phân sinh', 'Mô mềm', 'Mô nâng đỡ'], 'answer': 0}, {'id': 'CH011', 'num': 11, 'question': 'Mô dày thuộc loại mô nào:', 'options': ['Mô phân sinh', 'Mô nâng đỡ', 'Mô che chở', 'Mô dẫn'], 'answer': 1}, {'id': 'CH012', 'num': 12, 'question': 'Mô cứng thuộc loại mô nào:', 'options': ['Mô phân sinh', 'Mô nâng đỡ', 'Mô che chở', 'Mô dẫn'], 'answer': 1}, {'id': 'CH013', 'num': 13, 'question': 'Trong thịt quả lê, quả na có loại mô nâng đỡ nào:', 'options': ['Mô dày góc', 'Tế bào mô cứng', 'Thể cứng', 'Sợi mô cứng'], 'answer': 1}, {'id': 'CH014', 'num': 14, 'question': 'Bốn góc của thân cây họ Bạc hà (Lamiaceae) thường có loại mô:', 'options': ['Mô cứng', 'Mô mềm', 'Mô dày', 'Mô dẫn'], 'answer': 2}, {'id': 'CH015', 'num': 15, 'question': 'Mô nào thuộc loại mô mềm:', 'options': ['Biểu bì', 'Bần và thụ bì', 'Mô giậu', 'Mô dày'], 'answer': 2}, {'id': 'CH016', 'num': 16, 'question': 'Mô khuyết thuộc loại mô nào:', 'options': ['Mô mềm', 'Mô che chở', 'Mô nâng đỡ', 'Mô dẫn'], 'answer': 0}, {'id': 'CH017', 'num': 17, 'question': 'Những tế bào chứa nhiều lạp lục, thường ở ngay dưới biểu bì của lá và thân cây non thuộc loại mô nào:', 'options': ['Mô mềm hấp thụ', 'Mô mềm đồng hóa', 'Mô mềm dự trữ', 'Mô dày'], 'answer': 1}, {'id': 'CH018', 'num': 18, 'question': 'Thành phần nào của libe có khả năng hình thành các men giúp mạch rây thực hiện các phản ứng sinh hóa:', 'options': ['Mạch rây', 'Tế bào kèm', 'Sợi libe', 'Mô mềm libe'], 'answer': 1}, {'id': 'CH019', 'num': 19, 'question': 'Thành phần nào của libe làm nhiệm vụ chứa chất dự trữ:', 'options': ['Mạch rây', 'Tế bào kèm', 'Sợi libe', 'Mô mềm libe'], 'answer': 3}, {'id': 'CH020', 'num': 20, 'question': 'Thành phần nào của libe làm nhiệm vụ nâng đỡ:', 'options': ['Mạch rây', 'Tế bào kèm', 'Sợi libe', 'Mô mềm libe'], 'answer': 2}, {'id': 'CH021', 'num': 21, 'question': 'Libe có cấu tạo gồm:', 'options': ['Mạch ngăn, tế bào kèm, sợi libe và mô mềm libe', 'Mạch rây, tế bào kèm, sợi libe và mô mềm libe', 'Mạch rây, sợi libe và mô mềm libe', 'Mạch thông, sợi libe và mô mềm libe'], 'answer': 1}, {'id': 'CH022', 'num': 22, 'question': 'Lỗ khí và lông nằm trên loại mô che chở nào:', 'options': ['Biểu bì', 'Bần', 'Thụ bì', 'Chu bì'], 'answer': 0}, {'id': 'CH023', 'num': 23, 'question': 'Loại mô nào thường ở mặt ngoài các cơ quan của cây, gồm các tế bào xếp xít nhau, vách tế bào biến thành chất không thấm nước và khí:', 'options': ['Mô phân sinh', 'Mô mềm', 'Mô che chở', 'Mô nâng đỡ'], 'answer': 2}, {'id': 'CH024', 'num': 24, 'question': 'Lớp mô che chở phủ lên mặt ngoài lớp bần gọi là:', 'options': ['Biểu bì', 'Thụ bì', 'Chu bì', 'Lục bì'], 'answer': 1}, {'id': 'CH025', 'num': 25, 'question': 'Chu bì bao gồm:', 'options': ['Bần, lục bì', 'Bần, tầng sinh bần, biểu bì', 'Bần, tầng sinh bần, thụ bì', 'Bần, tầng sinh bần, lục bì'], 'answer': 3}, {'id': 'CH030', 'num': 30, 'question': 'Mô mềm hấp thụ có vai trò:', 'options': ['Quang hợp', 'Hấp thụ nước và muối khoáng', 'Giúp dẫn nhựa', 'Chứa chất dự trữ'], 'answer': 1}, {'id': 'CH031', 'num': 31, 'question': 'Chức năng của gỗ:', 'options': ['Vai trò nâng đỡ', 'Dẫn nhựa luyện', 'Dẫn nhựa nguyên', 'Vai trò che chở'], 'answer': 2}, {'id': 'CH032', 'num': 32, 'question': 'Nhựa nguyên là:', 'options': ['Dự trữ trong thân cây', 'Nước và muối khoáng do rễ hấp thụ', 'Do lá đúc luyện từ nước và muối khoáng', 'Dự trữ ở rễ cây'], 'answer': 1}, {'id': 'CH033', 'num': 33, 'question': 'Nhựa luyện là:', 'options': ['Dự trữ trong thân cây', 'Nước và muối khoáng do rễ hấp thụ', 'Dung dịch các chất hữu cơ do lá đúc luyện', 'Dự trữ ở rễ cây'], 'answer': 2}, {'id': 'CH034', 'num': 34, 'question': 'Cánh hoa hồng có loại mô tiết nào có thể tiết ra tinh dầu thơm:', 'options': ['Biểu bì tiết', 'Lông tiết', 'Tế bào tiết', 'Túi tiết'], 'answer': 0}, {'id': 'CH035', 'num': 35, 'question': 'Đặc điểm của chóp rễ:', 'options': ['Tồn tại một thời gian rồi rụng đi', 'Phát triển cùng với rễ cái', 'Cây dưới nước có chóp rễ phát triển', 'Tồn tại một thời gian rồi rụng đi, riêng cây dưới nước có chóp rễ phát triển'], 'answer': 3}, {'id': 'CH036', 'num': 36, 'question': 'Phần nào của rễ cây gồm các tế bào có vách ngoài hóa nhầy để giảm sự va chạm của rễ vào đất là:', 'options': ['Chóp rễ', 'Miền sinh trưởng', 'Miền lông hút', 'Miền hóa bần'], 'answer': 0}, {'id': 'CH037', 'num': 37, 'question': 'Miền sinh trưởng của rễ cây có đặc điểm:', 'options': ['Nằm trên chóp rễ', 'Nằm trên miền lông hút', 'Nằm xen kẽ với miền lông hút', 'Gồm nhiều tế bào chứa tinh bột'], 'answer': 0}, {'id': 'CH038', 'num': 38, 'question': 'Miền nào sau đây của rễ có sự phân nhánh sinh ra các rễ con:', 'options': ['Miền sinh trưởng', 'Miền lông hút', 'Miền hoá bần', 'Cổ rễ'], 'answer': 2}, {'id': 'CH039', 'num': 39, 'question': 'Bắt đầu từ dưới lên, các phần của rễ lần lượt là:', 'options': ['Chóp rễ, miền hóa bần, miền lông hút, miền sinh trưởng, cổ rễ', 'Chóp rễ, miền sinh trưởng, miền lông hút, miền hóa bần, cổ rễ', 'Miền sinh trưởng, chóp rễ, miền lông hút, miền hóa bần, cổ rễ', 'Chóp rễ, miền lông hút, miền hóa bần, miền sinh trưởng, cổ rễ'], 'answer': 1}, {'id': 'CH040', 'num': 40, 'question': 'Rễ hô hấp là loại rễ:', 'options': ['Mọc dưới nước', 'Mọc trên không', 'Mọc đứng lên khỏi mặt nước'], 'answer': 2}, {'id': 'CH041', 'num': 41, 'question': 'Rễ bám là loại rễ:', 'options': ['Mọc dưới nước', 'Mọc trên không', 'Mọc ra từ mấu thân', 'Mọc bám vào cây chủ'], 'answer': 2}, {'id': 'CH042', 'num': 42, 'question': 'Rễ biểu sinh là loại rễ:', 'options': ['Mọc đâm sâu xuống đất', 'Mọc trên không', 'Mọc bám vào cây chủ để hút nước dọc thân cây', 'Mọc đâm sâu vào cây chủ'], 'answer': 2}, {'id': 'CH043', 'num': 43, 'question': 'Cây có rễ cà kheo là:', 'options': ['Cây đước', 'Cây đa', 'Cây phong lan', 'Cây tầm gửi'], 'answer': 0}, {'id': 'CH044', 'num': 44, 'question': 'Cây có rễ khí sinh là:', 'options': ['Cây đước', 'Cây đa', 'Cây phong lan', 'Cây tầm gửi'], 'answer': 2}, {'id': 'CH045', 'num': 45, 'question': 'Cây có rễ ký sinh là:', 'options': ['Cây đước', 'Cây đa', 'Cây phong lan', 'Cây tầm gửi'], 'answer': 3}, {'id': 'CH046', 'num': 46, 'question': 'Cấu tạo cấp I của rễ cây lớp ngọc lan và lớp hành gồm:', 'options': ['Tầng lông hút, vỏ cấp I, trụ giữa', 'Tầng lông hút, tầng phát sinh ngoài, tầng phát sinh trong', 'Biểu bì, vỏ cấp I, trụ giữa', 'Biểu bì, tầng phát sinh ngoài, tầng phát sinh trong'], 'answer': 0}, {'id': 'CH047', 'num': 47, 'question': 'Cấu tạo phần trụ giữa của rễ cây gồm các phần sau:', 'options': ['Trụ bì, hệ thống dẫn, ruột và tia ruột', 'Nội bì, hệ thống dẫn, ruột', 'Ngoại bì, hệ thống dẫn, ruột và tia ruột', 'Trụ bì, hệ thống dẫn, tia ruột'], 'answer': 0}, {'id': 'CH048', 'num': 48, 'question': 'Chức năng của nội bì trong cấu tạo cấp I của rễ cây là:', 'options': ['Ngăn sự xâm nhập của nước vào trụ giữa', 'Giúp phân biệt vỏ cấp I với trụ giữa', 'Bao bọc xung quanh các bó libe – gỗ', 'Giúp hình thành nên tia ruột'], 'answer': 0}, {'id': 'CH049', 'num': 49, 'question': 'Một lớp hay nhiều lớp tế bào có vách mỏng nằm xen kẽ với tế bào nội bì là phần nào trong cấu tạo cấp I của rễ cây:', 'options': ['Biểu bì', 'Mô mềm vỏ ngoài', 'Mô mềm vỏ trong', 'Trụ bì'], 'answer': 3}, {'id': 'CH050', 'num': 50, 'question': 'Rễ cây hấp thụ nước và muối vô cơ hòa tan nhờ bộ phận nào của rễ?', 'options': ['Miền sinh trưởng', 'Miền lông hút', 'Miền hóa bần', 'Rễ chín'], 'answer': 1}, {'id': 'CH051', 'num': 51, 'question': 'Cây có rễ củ là:', 'options': ['Cỏ mần trầu', 'Cây đa', 'Cây bách bộ', 'Cây lúa'], 'answer': 2}, {'id': 'CH052', 'num': 52, 'question': 'Loại rễ phát triển mạnh và mang nhiều chất dự trữ như tinh bột là:', 'options': ['Rễ trụ', 'Rễ củ', 'Rễ chùm', 'Rễ phụ'], 'answer': 1}, {'id': 'CH053', 'num': 53, 'question': 'Loại rễ đâm sâu vào mô mềm và bó mạch của cây chủ, hấp thụ chất hữu cơ có sẵn của cây chủ:', 'options': ['Rễ trụ', 'Rễ biểu sinh', 'Rễ bám', 'Rễ ký sinh'], 'answer': 3}, {'id': 'CH054', 'num': 54, 'question': 'Loại rễ được sinh ra từ thân, sau khi chạm đất sẽ to dần lên như những cái cột nâng đỡ cây:', 'options': ['Rễ củ', 'Rễ phụ', 'Rễ biểu sinh', 'Rễ bám'], 'answer': 1}, {'id': 'CH055', 'num': 55, 'question': 'Họ thực vật nào sau đây có rễ chùm:', 'options': ['Họ trúc đào', 'Họ cam', 'Họ lúa', 'Họ táo ta'], 'answer': 2}, {'id': 'CH056', 'num': 56, 'question': 'Cây nào sau đây có rễ phụ:', 'options': ['Cây trầu không', 'Cây đa', 'Cây phong lan', 'Cây tầm gửi'], 'answer': 1}, {'id': 'CH057', 'num': 57, 'question': 'Cây nào sau đây có rễ ký sinh:', 'options': ['Cây lúa', 'Cây trầu không', 'Cây đa', 'Cây tơ hồng'], 'answer': 3}, {'id': 'CH058', 'num': 58, 'question': 'Cây nào sau đây có rễ trụ:', 'options': ['Cỏ mần trầu', 'Cây lúa', 'Cây đậu tương', 'Cây ngô'], 'answer': 2}, {'id': 'CH059', 'num': 59, 'question': 'Cây nào sau đây có rễ củ:', 'options': ['Cây mạch môn, thiên môn', 'Cây mạch môn, su hào', 'Cây su hào, lá lốt', 'Cây ngô, khoai tây'], 'answer': 0}, {'id': 'CH060', 'num': 60, 'question': 'Cây nào sau đây có rễ hô hấp:', 'options': ['Cây tầm gửi', 'Cây bụt mọc', 'Cây lúa', 'Cây cà rốt'], 'answer': 1}, {'id': 'CH061', 'num': 61, 'question': 'Mô nào sau đây gồm các tế bào chết:', 'options': ['Bần', 'Mô phân sinh', 'Mô mềm', 'Mô dày'], 'answer': 0}, {'id': 'CH062', 'num': 62, 'question': 'Rễ cây ngô thuộc loại rễ gì:', 'options': ['Rễ trụ', 'Rễ chùm', 'Rễ phụ', 'Rễ bám'], 'answer': 1}, {'id': 'CH063', 'num': 63, 'question': 'Su hào thuộc loại thân nào:', 'options': ['Thân rễ', 'Thân củ', 'Thân bò', 'Thân hành'], 'answer': 1}, {'id': 'CH064', 'num': 64, 'question': 'Cây Gừng có thân thuộc loại thân nào:', 'options': ['Thân hành', 'Thân bò', 'Thân rễ', 'Thân củ'], 'answer': 2}];
let currentMode = 'original'; // 'original' or 'shuffle'
let currentQuestions = [];
let userAnswers = {}; // { questionId: selectedOptionIndex }
// Initialize App
function initApp() {
setMode('original');
}
function setMode(mode) {
currentMode = mode;
document.getElementById('btnModeOriginal').classList.toggle('active', mode === 'original');
document.getElementById('btnModeShuffle').classList.toggle('active', mode === 'shuffle');
document.getElementById('btnReshuffle').style.display = mode === 'shuffle' ? 'inline-block' : 'none';
prepareQuestions();
renderQuiz();
updateStats();
}
function prepareQuestions() {
if (currentMode === 'original') {
// Keep original sequential order
currentQuestions = JSON.parse(JSON.stringify(RAW_QUESTIONS));
} else {
// Shuffle array deep copy
let arr = JSON.parse(JSON.stringify(RAW_QUESTIONS));
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
currentQuestions = arr;
}
}
function reshuffleQuestions() {
if (currentMode === 'shuffle') {
userAnswers = {}; // reset answers on reshuffle
prepareQuestions();
renderQuiz();
updateStats();
window.scrollTo({top: 0, behavior: 'smooth'});
}
}
function renderQuiz() {
const container = document.getElementById('quizContainer');
container.innerHTML = '';
const prefixes = ['A', 'B', 'C', 'D'];
currentQuestions.forEach((q, index) => {
const card = document.createElement('div');
card.className = 'question-card';
card.id = `q-card-${q.id}`;
const selected = userAnswers[q.id];
if (selected !== undefined) {
if (selected === q.answer) {
card.classList.add('answered-correct');
} else {
card.classList.add('answered-incorrect');
}
}
// Header
let headerHtml = `<div class="q-header">`;
headerHtml += `<span class="q-number">Câu ${index + 1}</span>`;
if (currentMode === 'shuffle') {
headerHtml += `<span class="q-origin-tag">Gốc: ${q.id} (Câu ${q.num})</span>`;
} else {
headerHtml += `<span class="q-origin-tag">Mã: ${q.id}</span>`;
}
headerHtml += `</div>`;
// Question Text
let textHtml = `<div class="q-text">${q.question}</div>`;
// Options
let optionsHtml = `<div class="options-list">`;
q.options.forEach((opt, optIdx) => {
let optClass = 'option-item';
if (selected !== undefined) {
optClass += ' disabled';
if (optIdx === q.answer) {
optClass += ' is-correct-answer';
}
if (selected === optIdx) {
if (optIdx === q.answer) {
optClass += ' selected-correct';
} else {
optClass += ' selected-incorrect';
}
}
}
optionsHtml += `
<div class="${optClass}" onclick="selectAnswer('${q.id}', ${optIdx})">
<span class="option-prefix">${prefixes[optIdx]}</span>
<span class="option-text">${opt}</span>
</div>
`;
});
optionsHtml += `</div>`;
// Feedback Badge
let feedbackHtml = '';
if (selected !== undefined) {
if (selected === q.answer) {
feedbackHtml = `
<div class="feedback-badge show-correct">
<span>CHÍNH XÁC!</span> 🎉 Đáp án đúng là <strong>${prefixes[q.answer]}. ${q.options[q.answer]}</strong>
</div>
`;
} else {
feedbackHtml = `
<div class="feedback-badge show-incorrect">
<span>CHƯA ĐÚNG!</span> ❌ Đáp án đúng là: <strong>${prefixes[q.answer]}. ${q.options[q.answer]}</strong>
</div>
`;
}
}
card.innerHTML = headerHtml + textHtml + optionsHtml + feedbackHtml;
container.appendChild(card);
});
}
function selectAnswer(qId, selectedOptIndex) {
// If already answered, do nothing
if (userAnswers[qId] !== undefined) return;
userAnswers[qId] = selectedOptIndex;
// Re-render only that specific question card or update class
renderQuiz();
updateStats();
}
function updateStats() {
const total = RAW_QUESTIONS.length;
const answeredCount = Object.keys(userAnswers).length;
let correctCount = 0;
RAW_QUESTIONS.forEach(q => {
if (userAnswers[q.id] === q.answer) {
correctCount++;
}
});
const incorrectCount = answeredCount - correctCount;
const scorePercent = answeredCount > 0 ? Math.round((correctCount / answeredCount) * 100) : 0;
document.getElementById('statTotal').innerText = total;
document.getElementById('statAnswered').innerText = answeredCount;
document.getElementById('statCorrect').innerText = correctCount;
document.getElementById('statIncorrect').innerText = incorrectCount;
document.getElementById('statScore').innerText = `${scorePercent}%`;
}
function resetQuiz() {
if (confirm('Bạn có chắc chắn muốn làm lại từ đầu không?')) {
userAnswers = {};
renderQuiz();
updateStats();
window.scrollTo({top: 0, behavior: 'smooth'});
}
}
window.onload = initApp;
</script>
</body>
</html>
Error code
ERRW:1.0:K1.0:AS
Were you logged in?
Yes
Your username (if logged in)
vkh2k77
Your HTML
Your JavaScript
'-'Your CSS
'-'