0x .quiz-container {
background: #fff; width: 95%; max-width: 900px;
border-radius: 12px; box-shadow: 0 10px 20px rgba(0,0,0,.2);
overflow: hidden;
}
/* شريط المؤقت */
.timer-bar {
position: sticky; top: 0; z-index: 10;
background: #ffc107; color: #212529;
font-weight: bold; text-align: center;
padding: 10px; font-size: 20px; letter-spacing: 1px;
}
.timer-bar.warning {
background: #dc3545; color: #fff;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { opacity: 1; } 50% { opacity: .7; } 100% { opacity: 1; }
}
/* التبويبات */
.tabs {
display: flex; background: #007bff;
position: sticky; top: 48px; z-index: 9;
}
.tab {
flex: 1; padding: 10px; text-align: center; color: #fff;
border: none; background: transparent; font-weight: bold;
cursor: pointer; transition: background .3s;
}
.tab:hover, .tab.active { background: #0056b3; }
/* المحتوى */
.tab-content { padding: 10px; display: none; min-height: 500px; }
.tab-content.active { display: block; }
/* الأسئلة */
.question-block {
margin-bottom: 10px; padding: 10px;
border: 1px solid #eee; border-radius: 8px; background: #fafafa;
position: relative;
}
.question-number {
position: absolute;
top: -12px;
right: 20px;
background: #007bff;
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 20px;
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
.question-title {
font-weight: bold; margin-bottom: 10px; color: #333;
display: flex; justify-content: space-between; align-items: center;
padding-right: 10px;
}
.question-points {
color: #007bff; font-size: .95em;
background: #e7f3ff; padding: 3px 8px; border-radius: 4px;
}
.answers-container label {
display: block; margin: 10px 0; padding: 10px;
font-weight: bold;
border: 2px solid #eee; border-radius: 8px; cursor: pointer;
transition: all .3s ease;
}
.answers-container label:hover:not(.disabled) {
background: #f5f5f5;
font-weight: bold;border-color: #007bff;
}
button {
background: #007bff; color: #fff; border: none;
padding: 10px 10px; border-radius: 6px; cursor: pointer;
margin: 10px 5px; font-size: 18px;
}
button:hover:not(:disabled) { background: #0056b3; }
button:disabled { background: #ccc; cursor: not-allowed; }
/* نافذة التأكيد */
.confirmation-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.7);
display: none; align-items: center; justify-content: center; z-index: 1000;
}
.confirmation-box {
background: #fff; padding: 10px; border-radius: 12px;
text-align: center; max-width: 400px; width: 90%;
}
.confirmation-box h3 { color: #dc3545; margin-bottom: 10px; }
.confirmation-box p { margin-bottom: 10px; color: #555; }
.confirmation-buttons { display: flex; gap: 15px; justify-content: center; }
.btn-confirm { background: #dc3545; color: #fff; padding: 10px 10px; border: none; border-radius: 5px; font-weight: bold; }
.btn-cancel { background: #6c757d; color: #fff; padding: 10px 10px; border: none; border-radius: 5px; font-weight: bold; }
/* نتيجة الاختبار - تحسين تلوين الدائرة حسب النسبة */
.score-circle {
width: 180px; height: 180px; border-radius: 50%;
color: #fff; display: flex; align-items: center; justify-content: center;
margin: 20px auto; font-size: 30px; font-weight: bold;
box-shadow: 0 5px 15px rgba(0,0,0,.2);
font-weight: bold;
}
.score-circle.excellent {
background: linear-gradient(135deg, #28a745, #20c997);
box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
}
.score-circle.good {
background: linear-gradient(135deg, #17a2b8, #20c997);
box-shadow: 0 5px 15px rgba(23, 162, 184, 0.4);
}
.score-circle.average {
background: linear-gradient(135deg, #ffc107, #fd7e14);
box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4);
}
.score-circle.poor {
background: linear-gradient(135deg, #dc3545, #fd7e14);
box-shadow: 0 5px 15px rgba(220, 53, 69, 0.4);
}
#results { text-align: center; }
#review {
margin-top: 30px; padding-top: 20px; border-top: 3px solid #007bff; text-align: right;
font-weight: bold;
}
.review-section { margin-bottom: 10px; }
.review-section h4 { color: #007bff; border-bottom: 2px solid #007bff; padding-bottom: 8px; margin-bottom: 10px; }
.review-question {
margin-bottom: 10px; padding: 10px; border: 1px solid #ddd;
border-radius: 8px; background: #fafafa;
position: relative;
}
.review-question h5 { margin: 0 0 10px 0; color: #333; display: flex; justify-content: space-between; }
.review-option { padding: 10px; margin: 5px 0; border-radius: 5px; border: 1px solid #eee; }
.correct-answer {
background: #d4edda;
border-color: #28a745;
color: #155724;
position: relative;
padding-right: 40px;
}
.correct-answer::before {
content: "✅";
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #28a745;
font-weight: bold;
font-size: 20px;
}
.incorrect-answer {
background: #f8d7da;
border-color: #dc3545;
color: #721c24;
position: relative;
padding-right: 40px;
}
.incorrect-answer::before {
content: "✗✅";
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #dc3545;
font-weight: bold;
font-size: 20px;
}
.unanswered {
background: #fff3cd;
border-color: #ffc107;
color: #856404;
position: relative;
padding-right: 40px;
}
.unanswered::before {
content: "؟";
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #856404;
font-weight: bold;
font-size: 20px;
}
/* تحسين عرض الدرجات */
.points-earned {
display: inline-block;
margin-right: 10px;
padding: 10px 10px;
border-radius: 4px;
font-weight: bold;
}
.points-earned.positive {
background: #d4edda;
color: #155724;
}
.points-earned.negative {
background: #f8d7da;
color: #721c24;
}
/* ترقيم الأسئلة في المراجعة */
.review-number {
position: absolute;
top: -12px;
right: 20px;
background: #6c757d;
color: white;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 16px;
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}9989
0x2705;
✅
✅
❌
⚠️
✅
❓
0x2705;
✅
✅
❌
⚠️
✅
❓
اترك تعليقك