تطبيق تحدي المعجم




body { font-family: 'Tajawal', sans-serif; background-color: #f8fafc; }
.glass { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); }
.slide-in { animation: slideIn 0.3s ease-out; }
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

// Data derived from lexicography_full_analysis.md
const educationalContent = [
{ id: 1, title: "تعريف المعجم", content: "لغة: من 'عجم' والهمزة للإزالة. اصطلاحاً: كتاب يضم مفردات اللغة مرتبة ومفسرة.", q: "ما معنى الهمزة في كلمة 'أعجم'؟", options: ["همزة التعدية", "همزة الإزالة (السلب)", "همزة الاستفهام"], correct: 1 },
{ id: 2, title: "مدرسة المخارج", content: "ابتكرها الخليل بن أحمد في كتاب العين، تعتمد على مخارج الحروف من الحلق.", q: "من هو مؤسس مدرسة المخارج والتقليبات؟", options: ["ابن منظور", "الجوهري", "الخليل بن أحمد"], correct: 2 },
{ id: 3, title: "مكانة الصرف", content: "الصرف هو البوصلة؛ لا بد من تجريد الكلمة للوصول للجذر قبل البحث.", q: "ما هي الخطوة الصرفية الأولى للبحث في المعجم؟", options: ["تغيير التشكيل", "تجريد الكلمة من الزوائد", "إضافة ال التعريف"], correct: 1 },
{ id: 4, title: "نظام القافية", content: "يرتب الكلمات حسب الحرف الأخير (الباب) ثم الأول (الفصل). خدم الشعراء.", q: "يرتب معجم لسان العرب الكلمات حسب:", options: ["أوائل الحروف", "أواخر الحروف (القافية)", "مخارج الحروف"], correct: 1 },
{ id: 5, title: "شرط عدم الدور", content: "يعني ألا نعرف الكلمة بنفسها (مثل العلم هو ضد الجهل والجهل هو ضد العلم).", q: "ماذا يسمى تعريف الكلمة بضدها الذي يعود إليها؟", options: ["التعريف الجامع", "الدور المنطقي المرفوض", "الإيجاز المخل"], correct: 1 },
{ id: 6, title: "اللغة الواصفة", content: "من خصائص النص المعجمي أنه يستخدم اللغة ليصف اللغة ذاتها.", q: "بماذا يتميز النص المعجمي؟", options: ["أنه نص أدبي إنشائي", "أنه لغة واصفة (Meta-language)", "أنه نص تاريخي فقط"], correct: 1 }
];

let score = 0;
let currentQuizIndex = 0;

const router = {
home: () => {
const html = `
<div class="text-center slide-in mt-10">
<div class="w-32 h-32 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-book-open text-5xl text-indigo-600"></i>
</div>
<h2 class="text-2xl font-bold text-slate-800 mb-2">مرحباً بك في تطبيق المعجم</h2>
<p class="text-slate-500 mb-8 px-6">استعد للامتحان المقالي من خلال التحديات التفاعلية والمراجعة السريعة.</p>
<button onclick="router.quiz()" class="w-full bg-indigo-600 text-white font-bold py-4 rounded-xl shadow-lg hover:bg-indigo-700 transition">ابدأ التحدي الآن</button>
</div>
`;
render(html);
},
flashcards: () => {
let cardsHtml = educationalContent.map(item => `
<div class="bg-white p-6 rounded-2xl shadow-md mb-4 border-r-4 border-amber-400 slide-in">
<h3 class="font-bold text-indigo-900 mb-2">${item.title}</h3>
<p class="text-sm text-slate-600 leading-relaxed">${item.content}</p>
</div>
`).join('');
render(`<div class="w-full slide-in"><h2 class="text-xl font-bold mb-4">البطاقات التعليمية</h2>${cardsHtml}</div>`);
},
quiz: () => {
if (currentQuizIndex >= educationalContent.length) {
render(`
<div class="text-center slide-in mt-10">
<i class="fas fa-check-circle text-6xl text-green-500 mb-4"></i>
<h2 class="text-2xl font-bold">انتهى التحدي!</h2>
<p class="text-lg my-4">نقاطك النهائية: <span class="font-black text-indigo-600">${score}</span></p>
<button onclick="resetQuiz()" class="bg-indigo-600 text-white px-8 py-3 rounded-full font-bold">إعادة المحاولة</button>
</div>
`);
return;
}
const item = educationalContent[currentQuizIndex];
const optionsHtml = item.options.map((opt, i) => `
<button onclick="checkAnswer(${i})" class="w-full text-right p-4 border-2 border-slate-200 rounded-xl hover:bg-slate-50 hover:border-indigo-300 transition mb-3">
${opt}
</button>
`).join('');

render(`
<div class="w-full slide-in">
<div class="flex justify-between items-center mb-6">
<span class="text-xs font-bold text-slate-400">سؤال ${currentQuizIndex + 1} من ${educationalContent.length}</span>
</div>
<h2 class="text-xl font-bold text-indigo-900 mb-6">${item.q}</h2>
<div class="space-y-2">
${optionsHtml}
</div>
</div>
`);
}
};

function checkAnswer(index) {
const correct = educationalContent[currentQuizIndex].correct;
if (index === correct) {
score += 10;
updateScore();
// Show brief success message then next
showFeedback(true);
} else {
showFeedback(false);
}
}

function showFeedback(isCorrect) {
const main = document.getElementById('main-content');
const feedback = document.createElement('div');
feedback.className = `fixed inset-0 flex items-center justify-center z-50 ${isCorrect ? 'bg-green-500/20' : 'bg-red-500/20'}`;
feedback.innerHTML = `
<div class="bg-white p-8 rounded-3xl shadow-2xl text-center scale-up">
<i class="fas ${isCorrect ? 'fa-thumbs-up text-green-500' : 'fa-times-circle text-red-500'} text-6xl mb-4"></i>
<h3 class="text-2xl font-bold">${isCorrect ? 'إجابة صحيحة!' : 'إجابة خاطئة!'}</h3>
<p class="mt-2 text-slate-500">${isCorrect ? '+10 نقاط' : 'حاول مرة أخرى في المراجعة'}</p>
</div>
`;
document.body.appendChild(feedback);
setTimeout(() => {
feedback.remove();
currentQuizIndex++;
router.quiz();
}, 1000);
}

function resetQuiz() {
score = 0;
currentQuizIndex = 0;
updateScore();
router.quiz();
}

function updateScore() {
document.getElementById('score').innerText = `نقاط: ${score}`;
}

function render(html) {
document.getElementById('main-content').innerHTML = html;
}

// Init
window.onload = () => router.home();

The issue body contains a standalone Arabic HTML document with embedded JavaScript and Tailwind CSS, but names no repository file, tests, or requested change. Clarify whether this app is intended for search-samples and specify the target file, expected behavior, and acceptance criteria before starting.

Written by the indexing model from the issue text.