<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مسابقة المجتمع اليمني - الصف الأول الثانوي</title>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Amiri:wght@700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
<style>
:root{--primary:#8b1e22;--primary-dark:#641115;--gold:#d4af37;--gold-dark:#aa820a;--accent:#1e3a8a;--bg:#f8fafc;--card-bg:#fff;--text:#1e293b;--success:#16a34a;--error:#dc2626}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Cairo',sans-serif}
body{background:radial-gradient(circle at top,#fdfbf7 0%,#e2e8f0 100%);color:var(--text);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px}
.quiz-container{background:var(--card-bg);border-radius:24px;box-shadow:0 15px 35px rgba(0,0,0,.1),0 5px 15px rgba(0,0,0,.05);border:3px solid var(--gold);width:100%;max-width:680px;padding:30px;position:relative;overflow:hidden}
.header-tag{background:var(--primary);color:#fff;display:inline-block;padding:6px 18px;border-radius:50px;font-size:.9rem;font-weight:700;margin-bottom:12px;box-shadow:0 4px 10px rgba(139,30,34,.25)}
h1{color:var(--primary);font-size:1.6rem;font-weight:800;margin-bottom:6px}
.subtitle{color:#64748b;font-size:.95rem;margin-bottom:20px}
.input-box{margin:20px 0;text-align:right}
.input-box label{display:block;font-weight:700;margin-bottom:8px;color:var(--primary-dark)}
.input-box input{width:100%;padding:14px 18px;border:2px solid #cbd5e1;border-radius:12px;font-size:1.05rem;font-family:inherit;outline:none;transition:all .2s}
.input-box input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(139,30,34,.15)}
.btn-main{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;border:none;padding:14px 28px;border-radius:14px;font-size:1.1rem;font-weight:700;cursor:pointer;width:100%;box-shadow:0 8px 18px rgba(139,30,34,.3);transition:.2s}
.btn-main:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(139,30,34,.4)}
.progress-bar-container{background:#e2e8f0;height:10px;border-radius:20px;margin:15px 0 20px;overflow:hidden}
.progress-fill{background:linear-gradient(90deg,var(--gold),var(--primary));height:100%;width:0%;transition:width .3s ease}
.q-meta{display:flex;justify-content:space-between;gap:10px;color:#64748b;font-size:.9rem;font-weight:700;margin-bottom:10px}
.q-text{font-size:1.2rem;font-weight:800;color:#1e293b;line-height:1.7;margin-bottom:24px;background:#f8fafc;padding:16px;border-radius:16px;border-right:5px solid var(--primary)}
.options-grid{display:grid;gap:12px}
.option-btn{background:#fff;border:2px solid #e2e8f0;padding:12px 15px;border-radius:14px;font-size:1rem;font-weight:700;text-align:right;cursor:pointer;display:flex;align-items:center;gap:12px;transition:all .2s;width:100%;color:var(--text)}
.option-btn:hover:not(:disabled){border-color:var(--gold);background:#fffdf5;transform:translateX(-3px)}
.opt-badge{background:#f1f5f9;color:#475569;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:.95rem}
.option-btn.correct,.tf-btn.correct{background:#dcfce7!important;border-color:var(--success)!important;color:#14532d}
.option-btn.wrong,.tf-btn.wrong{background:#fee2e2!important;border-color:var(--error)!important;color:#7f1d1d}
.option-btn:disabled,.tf-btn:disabled{cursor:default}
.tf-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.tf-btn{padding:20px;border-radius:16px;border:2px solid #e2e8f0;font-size:1.15rem;font-weight:800;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff;transition:.2s}
.tf-btn:hover:not(:disabled){transform:translateY(-3px)}
.feedback{margin-top:16px;padding:12px 14px;border-radius:12px;font-weight:700;line-height:1.7}
.feedback.good{background:#dcfce7;color:#14532d}
.feedback.bad{background:#fee2e2;color:#7f1d1d}
.next-btn{margin-top:16px}
.certificate-wrapper{display:none;background:#fff;border:10px double var(--gold);border-radius:16px;padding:30px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.1);position:relative}
.cert-title{font-family:'Amiri',serif;font-size:2.2rem;color:var(--primary);margin-bottom:8px}
.cert-student{font-size:1.7rem;font-weight:900;color:#0f172a;border-bottom:2px dashed var(--gold);display:inline-block;padding:0 20px 6px;margin:15px 0;overflow-wrap:anywhere}
.cert-body{font-size:1.05rem;line-height:1.9;color:#334155;margin-bottom:20px}
.cert-score-badge{background:#fef3c7;border:2px solid var(--gold);color:#78350f;display:inline-block;padding:10px 24px;border-radius:50px;font-size:1.2rem;font-weight:900;margin-bottom:20px}
.cert-footer{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin-top:25px;padding:0 10px}
.cert-sign{font-weight:700;color:#475569}
.cert-seal{width:75px;height:75px;border-radius:50%;border:3px dashed var(--gold);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;color:var(--gold-dark);transform:rotate(-15deg);flex-shrink:0}
.action-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.action-row button{flex:1;min-width:140px}
.btn-secondary{background:#e2e8f0;color:#1e293b;border:none;padding:12px 20px;border-radius:10px;font-weight:800;cursor:pointer}
.btn-print{background:#0f172a;color:#fff;border:none;padding:12px 24px;border-radius:10px;font-weight:700;cursor:pointer;margin-top:20px}
.small-note{font-size:.85rem;color:#64748b;margin-top:12px;line-height:1.7}
@media(max-width:520px){.quiz-container{padding:20px 16px}.cert-title{font-size:1.8rem}.cert-student{font-size:1.35rem}.cert-footer{padding:0}.q-text{font-size:1.08rem}.tf-btn{padding:15px 8px}}
@page{size:A4 landscape;margin:10mm}
@media print{
html,body{background:#fff!important;padding:0!important;margin:0!important;min-height:0!important;display:block!important}
.quiz-container{display:block!important;width:100%!important;max-width:none!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important}
#startScreen,#gameScreen{display:none!important}
.certificate-wrapper{display:block!important;position:static!important;width:100%!important;min-height:175mm;border:8px double #aa820a!important;border-radius:0!important;padding:22mm 15mm!important;box-shadow:none!important;visibility:visible!important;break-inside:avoid;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.certificate-wrapper *{visibility:visible!important}
.btn-print,.no-print{display:none!important}
}
</style>
</head>
<body>
<main class="quiz-container" id="quizContainer">
<section id="startScreen" style="text-align:center">
<span class="header-tag">التعلم التفاعلي</span>
<h1>مسابقة مادة المجتمع اليمني</h1>
<p class="subtitle">الصف الأول الثانوي • اختبري معلوماتك وتفوّقي</p>
<div class="input-box">
<label for="studentName">اسم الطالبة الثلاثي:</label>
<input type="text" id="studentName" placeholder="مثال: فاطمة أحمد علي" autocomplete="name" maxlength="80">
</div>
<button class="btn-main" id="startButton">ابدئي المسابقة الآن ✨</button>
<p class="small-note">تتكون المسابقة من 14 سؤالًا: 7 اختيار من متعدد و7 صح أو خطأ. ستظهر نتيجتك وشهادتك بعد الإجابة عن جميع الأسئلة.</p>
</section>
<section id="gameScreen" style="display:none">
<div class="q-meta"><span id="questionCategory">القسم الأول</span><span id="questionCounter">السؤال 1 من 14</span></div>
<div class="progress-bar-container"><div class="progress-fill" id="progressFill"></div></div>
<div class="q-text" id="questionText"></div>
<div id="optionsContainer"></div>
<div id="feedback" aria-live="polite"></div>
<button class="btn-main next-btn" id="nextButton" style="display:none">السؤال التالي ←</button>
</section>
<section id="certScreen" class="certificate-wrapper">
<div class="header-tag">مسابقة مادة المجتمع اليمني</div>
<h2 class="cert-title">شهادة إنجاز وتفوّق</h2>
<p class="cert-body">تشهد إدارة المسابقة بأن الطالبة</p>
<div class="cert-student" id="certStudent"></div>
<p class="cert-body">قد أتمّت مسابقة مادة المجتمع اليمني للصف الأول الثانوي، وحصلت على النتيجة التالية:</p>
<div class="cert-score-badge" id="certScore"></div>
<p class="cert-body" id="certMessage"></p>
<div class="cert-footer">
<div class="cert-sign">التاريخ: <span id="certDate"></span></div>
<div class="cert-seal">شهادة<br>إنجاز</div>
<div class="cert-sign">بالتوفيق والنجاح</div>
</div>
<button class="btn-print no-print" id="savePdfButton">حفظ الشهادة PDF / طباعة</button>
<div class="action-row no-print">
<button class="btn-main" id="restartButton">إعادة المسابقة</button>
</div>
</section>
</main>
<script>
'use strict';
const questions = [
{type:'mcq', category:'القسم الأول: اختاري الإجابة الصحيحة', question:'إحدى الظواهر الاجتماعية هي:', options:['الطلاق','الثأر','السرقة','البطالة'], answer:3, explanation:'الإجابة الصحيحة: البطالة.'},
{type:'mcq', category:'القسم الأول: اختاري الإجابة الصحيحة', question:'التغير في المشكلات الاجتماعية يكون:', options:['بطيئًا','سريعًا','متوازنًا','متأرجحًا'], answer:0, explanation:'الإجابة الصحيحة: بطيئًا.'},
{type:'mcq', category:'القسم الأول: اختاري الإجابة الصحيحة', question:'ماذا نقصد بجعل العالم قرية صغيرة؟', options:['الهوية','الثقافة','العولمة','المجتمع'], answer:2, explanation:'الإجابة الصحيحة: العولمة.'},
{type:'mcq', category:'القسم الأول: اختاري الإجابة الصحيحة', question:'عند زيادة الثقافات الدخيلة تزداد:', options:['الهوية','العولمة','التطور','الديمقراطية'], answer:1, explanation:'الإجابة الصحيحة وفق الأسئلة المرسلة: العولمة.'},
{type:'mcq', category:'القسم الأول: اختاري الإجابة الصحيحة', question:'توفر المقومات الأدبية والفكرية يساهم في تعزيز:', options:['العولمة','الأمية','الهوية','الفقر'], answer:2, explanation:'الإجابة الصحيحة: الهوية.'},
{type:'mcq', category:'القسم الأول: اختاري الإجابة الصحيحة', question:'ما أقوى وسيلة إعلامية؟', options:['الصحافة','الإذاعة','الإنترنت','التلفزيون'], answer:3, explanation:'الإجابة الصحيحة وفق الأسئلة المرسلة: التلفزيون.'},
{type:'mcq', category:'القسم الأول: اختاري الإجابة الصحيحة', question:'تتحول الظواهر الاجتماعية إلى مشكلات عندما تأخذ صفة:', options:['التوازن','الحدودية','الاستقرار','الاتساع'], answer:3, explanation:'الإجابة الصحيحة: الاتساع.'},
{type:'tf', category:'القسم الثاني: صح أم خطأ', question:'البرامج المحلية تساهم في زيادة الثقافات الدخيلة.', answer:false, explanation:'الإجابة الصحيحة: خطأ.'},
{type:'tf', category:'القسم الثاني: صح أم خطأ', question:'تتحول المشكلات إلى ظواهر إذا عانى منها أفراد المجتمع.', answer:false, explanation:'الإجابة الصحيحة: خطأ.'},
{type:'tf', category:'القسم الثاني: صح أم خطأ', question:'الإعلام سلاح ذو حدين بسبب تأثيره السلبي والإيجابي على الأفراد.', answer:true, explanation:'الإجابة الصحيحة: صح.'},
{type:'tf', category:'القسم الثاني: صح أم خطأ', question:'المشكلات مجموعة السلوكيات والتصرفات التي يعاني منها أفراد المجتمع.', answer:true, explanation:'الإجابة الصحيحة: صح.'},
{type:'tf', category:'القسم الثاني: صح أم خطأ', question:'الهوية الثقافية تزيد مع زيادة العولمة الثقافية.', answer:false, explanation:'الإجابة الصحيحة: خطأ.'},
{type:'tf', category:'القسم الثاني: صح أم خطأ', question:'السرقة والجريمة تُعدّان من الظواهر الاجتماعية في اليمن.', answer:false, explanation:'الإجابة الصحيحة وفق الأسئلة المرسلة: خطأ.'},
{type:'tf', category:'القسم الثاني: صح أم خطأ', question:'الإعلام يساهم في غرس القيم والمبادئ التي تساعد في تعزيز الهوية الثقافية.', answer:true, explanation:'الإجابة الصحيحة: صح.'}
];
let currentQuestion = 0;
let score = 0;
let studentName = '';
let answered = false;
const $ = id => document.getElementById(id);
function startQuiz() {
const name = $('studentName').value.trim();
if (!name) {
$('studentName').focus();
alert('يرجى كتابة اسم الطالبة قبل بدء المسابقة.');
return;
}
studentName = name;
currentQuestion = 0;
score = 0;
$('startScreen').style.display = 'none';
$('certScreen').style.display = 'none';
$('gameScreen').style.display = 'block';
renderQuestion();
}
function renderQuestion() {
answered = false;
const q = questions[currentQuestion];
$('questionCategory').textContent = q.category;
$('questionCounter').textContent = `السؤال ${currentQuestion + 1} من ${questions.length}`;
$('progressFill').style.width = `${(currentQuestion / questions.length) * 100}%`;
$('questionText').textContent = q.question;
$('optionsContainer').innerHTML = '';
$('feedback').innerHTML = '';
$('nextButton').style.display = 'none';
if (q.type === 'mcq') {
const grid = document.createElement('div');
grid.className = 'options-grid';
q.options.forEach((option, index) => {
const button = document.createElement('button');
button.type = 'button';
button.className = 'option-btn';
button.innerHTML = `<span class="opt-badge">${['أ','ب','ج','د'][index]}</span><span></span>`;
button.lastElementChild.textContent = option;
button.addEventListener('click', () => chooseAnswer(index, button));
grid.appendChild(button);
});
$('optionsContainer').appendChild(grid);
} else {
const grid = document.createElement('div');
grid.className = 'tf-grid';
[{label:'صح ✓',value:true},{label:'خطأ ✗',value:false}].forEach(item => {
const button = document.createElement('button');
button.type = 'button';
button.className = 'tf-btn';
button.textContent = item.label;
button.addEventListener('click', () => chooseAnswer(item.value, button));
grid.appendChild(button);
});
$('optionsContainer').appendChild(grid);
}
}
function chooseAnswer(value, selectedButton) {
if (answered) return;
answered = true;
const q = questions[currentQuestion];
const isCorrect = value === q.answer;
if (isCorrect) score++;
$('optionsContainer').querySelectorAll('button').forEach(button => {
button.disabled = true;
});
selectedButton.classList.add(isCorrect ? 'correct' : 'wrong');
if (q.type === 'mcq') {
const buttons = [...$('optionsContainer').querySelectorAll('.option-btn')];
buttons[q.answer].classList.add('correct');
} else {
const buttons = [...$('optionsContainer').querySelectorAll('.tf-btn')];
const correctIndex = q.answer ? 0 : 1;
buttons[correctIndex].classList.add('correct');
}
$('feedback').className = `feedback ${isCorrect ? 'good' : 'bad'}`;
$('feedback').textContent = `${isCorrect ? 'إجابة صحيحة! أحسنتِ.' : 'ليست الإجابة الصحيحة.'} ${q.explanation}`;
$('progressFill').style.width = `${((currentQuestion + 1) / questions.length) * 100}%`;
$('nextButton').textContent = currentQuestion === questions.length - 1 ? 'عرض النتيجة والشهادة' : 'السؤال التالي ←';
$('nextButton').style.display = 'block';
}
function nextQuestion() {
if (!answered) return;
currentQuestion++;
if (currentQuestion < questions.length) renderQuestion();
else showCertificate();
}
function showCertificate() {
$('gameScreen').style.display = 'none';
$('certScreen').style.display = 'block';
$('certStudent').textContent = studentName;
$('certScore').textContent = `${score} من ${questions.length} (${Math.round(score / questions.length * 100)}٪)`;
$('certMessage').textContent = score >= 12 ? 'أحسنتِ! أداء متميز، واصلي الاجتهاد والتعلم.' : score >= 8 ? 'أداء جيد! راجعي الأسئلة التي أخطأتِ فيها وواصلي التقدم.' : 'شكرًا لمشاركتكِ. بالمراجعة والتدريب ستتحسن نتيجتكِ.';
$('certDate').textContent = new Date().toLocaleDateString('ar-YE');
if (typeof confetti === 'function' && score >= 8) {
confetti({particleCount:130,spread:75,origin:{y:0.65}});
}
}
function restartQuiz() {
$('certScreen').style.display = 'none';
$('gameScreen').style.display = 'none';
$('startScreen').style.display = 'block';
$('studentName').value = '';
$('progressFill').style.width = '0%';
$('studentName').focus();
}
$('startButton').addEventListener('click', startQuiz);
$('studentName').addEventListener('keydown', event => {
if (event.key === 'Enter') startQuiz();
});
$('nextButton').addEventListener('click', nextQuestion);
$('restartButton').addEventListener('click', restartQuiz);
$('savePdfButton').addEventListener('click', () => window.print());
</script>
</body>
</html>