hsk-1
No results found…
/* ========================================== */
/* GOM TOÀN BỘ CSS CHO CÁC BÀI QUIZ */
/* Sử dụng cho Blogger, chèn vào trước */
/* ========================================== */
/* ---------- 1. COMMON: CONTAINER, HEADER, BODY, FOOTER ---------- */
.quiz-container,
.scramble-container,
.cloze-container {
max-width: 750px; /* Mặc định cho hầu hết quiz */
margin: 20px auto;
font-family: "Segoe UI", Arial, sans-serif;
border: 2px solid #2c3e50;
border-radius: 12px;
background: #fafafa;
font-size: 1.3em;
min-height: 300px;
display: flex;
flex-direction: column;
}
/* Riêng Vocabulary Quiz có max-width lớn hơn */
.quiz-container {
max-width: 900px;
}
/* Header chung */
.quiz-header,
.scramble-header,
.cloze-header {
padding: 10px 15px 5px;
text-align: center;
font-weight: bold;
color: #2c3e50;
font-size: 0.95em;
}
/* Body chung */
.quiz-body,
.scramble-body,
.cloze-body {
flex: 1;
padding: 10px 15px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Footer chung */
.quiz-footer,
.scramble-footer,
.cloze-footer {
padding: 12px 15px 15px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px;
border-top: 1px solid #eee;
}
/* ---------- 2. QUESTION COUNTER (BỘ ĐẾM CÂU) ---------- */
.question-counter {
text-align: center;
font-weight: bold;
color: #7f8c8d;
font-size: 0.85em;
padding: 5px 0 10px;
letter-spacing: 1px;
}
/* ---------- 3. NÚT BẤM CHUNG (BUTTONS) ---------- */
.btn {
border: none;
padding: 10px 20px;
font-size: 0.95em;
font-weight: bold;
border-radius: 25px;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
white-space: nowrap;
display: inline-flex;
justify-content: center;
align-items: center;
min-width: 110px; /* Có thể ghi đè ở từng loại nếu cần */
}
.btn:active {
transform: scale(0.95);
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* Các biến thể nút */
.btn-back { background: #e0e4e8; color: #333; }
.btn-back:hover { background: #cfd4d9; }
.btn-exit { background: #e0e4e8; color: #333; }
.btn-exit:hover { background: #cfd4d9; }
.btn-next { background: #2c3e50; color: white; display: none; }
.btn-submit { background: #e74c3c; color: white; display: none; }
.btn-retry { background: #2c3e50; color: white; }
.btn-wrong { background: #e67e22; color: white; }
.btn-check { background: #2980b9; color: white; }
.btn-reset { background: #f39c12; color: white; display: none; }
.btn-reset:hover{ background: #e67e22; }
.btn-countdown { background: #f39c12; color: white; }
/* ---------- 4. OPTION ITEMS (DÙNG CHO TRẮC NGHIỆM) ---------- */
.option-item {
display: block;
background: white;
border: 2px solid #ddd;
border-radius: 8px;
padding: 12px 16px;
cursor: pointer;
transition: all 0.2s;
font-size: 1em; /* Có thể điều chỉnh theo quiz */
text-align: left;
}
.option-item:hover {
background: #f0f2f5;
border-color: #adb5bd;
}
.option-item input {
margin-right: 10px;
transform: scale(1.2);
pointer-events: none;
}
.option-item.selected {
background: #d1ecf1;
border-color: #17a2b8;
}
.option-item.correct-answer {
background: #d4edda;
border-color: #28a745;
}
.option-item.wrong-answer {
background: #f8d7da;
border-color: #dc3545;
}
/* Trạng thái vô hiệu hóa (dùng cho Cloze) */
.option-item.disabled {
pointer-events: none;
opacity: 0.6;
}
/* ---------- 5. SCORE DISPLAY ---------- */
.score-display {
text-align: center;
font-weight: bold;
margin: 10px 0;
font-size: 1em;
display: none; /* Mặc định ẩn, sẽ hiện khi cần */
}
/* ---------- 6. SPEAKER BUTTON (NÚT PHÁT ÂM) ---------- */
.speaker-btn {
background: none;
border: none;
font-size: 1.2em; /* Có thể tăng/giảm tùy context */
cursor: pointer;
opacity: 0.7;
transition: 0.2s;
padding: 0;
line-height: 1;
}
.speaker-btn:hover {
opacity: 1;
}
/* ---------- 7. FEEDBACK & RESULT (DÙNG CHO SCRAMBLE) ---------- */
.feedback {
text-align: center;
margin-top: 5px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
.correct-feedback { color: #27ae60; }
.wrong-feedback { color: #e74c3c; }
.result-message { text-align: center; font-weight: bold; margin: 10px 0; }
/* ---------- 8. VOCABULARY QUIZ SPECIFIC ---------- */
.mode-selection {
padding: 20px;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.mode-label {
font-size: 1.2em;
font-weight: bold;
color: #e67e22;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 20px;
}
.mode-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
max-width: 380px;
margin: 0 auto;
}
.mode-card {
background: white;
border: 2px solid #ddd;
border-radius: 10px;
padding: 16px 8px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
font-weight: bold;
color: #2c3e50;
font-size: 0.95em;
text-align: center;
}
.mode-card:hover {
border-color: #2c3e50;
background: #f0f3f5;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.mode-card.active {
border-color: #e67e22;
background: #fff9f0;
color: #e67e22;
}
.mode-emoji {
font-size: 1.8em;
display: block;
margin-bottom: 6px;
}
/* Phần quiz-practice (ẩn/hiện khi chọn mode) */
.quiz-practice {
display: none;
flex-direction: column;
flex: 1;
}
/* Stimulus text cho Vocabulary */
.stimulus-wrapper {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.stimulus-text {
font-size: 1.8em;
font-weight: bold;
color: #c0392b;
}
/* Extra buttons trong Vocab quiz */
.vocab-extra-buttons {
display: contents; /* Để các nút nằm gọn trong flex footer */
}
/* ---------- 9. SCRAMBLE QUIZ SPECIFIC ---------- */
.token-pool {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-bottom: 20px;
}
.token {
font-family: "Microsoft YaHei","PingFang SC","Noto Sans SC","SimHei",sans-serif;
background: #fff;
border: 2px solid #2980b9;
color: #2980b9;
border-radius: 6px;
padding: 6px 12px;
cursor: pointer;
user-select: none;
font-weight: bold;
transition: 0.2s;
font-size: 1.1em;
}
.token:hover {
background: #2980b9;
color: #fff;
}
.answer-area {
border: 2px dashed #27ae60;
border-radius: 6px;
min-height: 50px;
padding: 8px;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.answer-token {
font-family: "Microsoft YaHei","PingFang SC","Noto Sans SC","SimHei",sans-serif;
background: #d4edda;
border: 2px solid #27ae60;
color: #155724;
border-radius: 6px;
padding: 6px 12px;
cursor: pointer;
user-select: none;
font-weight: bold;
font-size: 1.1em;
}
.answer-token:hover {
background: #c3e6cb;
}
/* ---------- 10. CLOZE QUIZ SPECIFIC ---------- */
.sentence {
font-size: 1.5em;
text-align: center;
margin-bottom: 10px;
}
.blank {
color: #e74c3c;
font-weight: bold;
border-bottom: 2px dashed #e74c3c;
}
.hint {
text-align: center;
font-style: italic;
color: #666;
margin-bottom: 15px;
font-size: 0.9em;
}
/* Countdown button trong Cloze */
.btn-countdown {
background: #f39c12;
color: white;
}
/* ---------- 11. READING & LISTENING QUIZ SPECIFIC ---------- */
.question-text {
font-size: 1.5em;
text-align: center;
margin-bottom: 15px;
}
/* ---------- 12. RESPONSIVE CHO TẤT CẢ QUIZ ---------- */
@media (max-width: 600px) {
.quiz-container,
.scramble-container,
.cloze-container {
font-size: 1.1em; /* Giảm nhẹ font chữ toàn cục */
}
.stimulus-text,
.question-text,
.sentence {
font-size: 1.2em;
}
.option-item,
.token,
.answer-token {
font-size: 0.85em;
padding: 8px 10px;
}
.quiz-footer,
.scramble-footer,
.cloze-footer {
gap: 8px;
padding: 10px;
justify-content: center;
}
.btn {
flex: 1 1 40%;
min-width: unset;
max-width: 100%;
padding: 10px 8px;
font-size: 0.85em;
}
.mode-grid {
gap: 8px;
}
}