<!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>
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Google Fonts: Cairo for Arabic -->
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#5D5CDE',
secondary: '#F39C12',
success: '#2ECC71',
danger: '#E74C3C',
dark: '#181818',
light: '#FFFFFF'
},
fontFamily: {
cairo: ['Cairo', 'sans-serif']
}
}
},
darkMode: 'class'
}
</script>
<style>
body {
font-family: 'Cairo', sans-serif;
}
.quiz-option:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.timer-animation {
transition: width 1s linear;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.pulse-animation {
animation: pulse 0.6s ease-in-out;
}
.correct-answer {
background-color: rgba(46, 204, 113, 0.2);
border-color: #2ECC71 !important;
}
.wrong-answer {
background-color: rgba(231, 76, 60, 0.2);
border-color: #E74C3C !important;
}
/* Dark mode specific styles */
.dark .dark-text-white {
color: white;
}
.dark .dark-bg-dark {
background-color: #232323;
}
.dark .dark-border-gray {
border-color: #444;
}
</style>
</head>
<body class="bg-gray-100 dark:bg-dark">
<!-- Check for dark mode -->
<script>
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
if (event.matches) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
});
</script>
<div class="container mx-auto px-4 py-8 max-w-4xl">
<!-- Quiz Header -->
<div class="text-center mb-8">
<h1 class="text-3xl md:text-4xl font-bold text-primary dark:text-gray-200 mb-2">
<i class="fas fa-brain mr-2"></i>مسابقة المعرفة التفاعلية
</h1>
<p class="text-gray-600 dark:text-gray-400 text-lg">اختبر معلوماتك وتحدى نفسك!</p>
</div>
<!-- Welcome Screen -->
<div id="welcome-screen" class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4 text-center">مرحباً بك في مسابقة المعرفة!</h2>
<p class="text-gray-600 dark:text-gray-300 mb-6 text-center">اختر فئة وصعوبة للبدء في التحدي</p>
<!-- Category Selection -->
<div class="mb-6">
<h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">اختر الفئة:</h3>
<div class="grid grid-cols-2 md:grid-cols-3 gap-3">
<button class="category-btn bg-white dark:bg-gray-700 border-2 border-primary text-primary dark:text-gray-200 px-4 py-3 rounded-lg hover:bg-primary hover:text-white dark:hover:bg-primary transition duration-300" data-category="general">
<i class="fas fa-globe mb-1"></i>
<span class="block">معلومات عامة</span>
</button>
<button class="category-btn bg-white dark:bg-gray-700 border-2 border-primary text-primary dark:text-gray-200 px-4 py-3 rounded-lg hover:bg-primary hover:text-white dark:hover:bg-primary transition duration-300" data-category="math">
<i class="fas fa-calculator mb-1"></i>
<span class="block">رياضيات</span>
</button>
<button class="category-btn bg-white dark:bg-gray-700 border-2 border-primary text-primary dark:text-gray-200 px-4 py-3 rounded-lg hover:bg-primary hover:text-white dark:hover:bg-primary transition duration-300" data-category="riddles">
<i class="fas fa-puzzle-piece mb-1"></i>
<span class="block">ألغاز</span>
</button>
<button class="category-btn bg-white dark:bg-gray-700 border-2 border-primary text-primary dark:text-gray-200 px-4 py-3 rounded-lg hover:bg-primary hover:text-white dark:hover:bg-primary transition duration-300" data-category="history">
<i class="fas fa-landmark mb-1"></i>
<span class="block">تاريخ</span>
</button>
<button class="category-btn bg-white dark:bg-gray-700 border-2 border-primary text-primary dark:text-gray-200 px-4 py-3 rounded-lg hover:bg-primary hover:text-white dark:hover:bg-primary transition duration-300" data-category="logic">
<i class="fas fa-chess mb-1"></i>
<span class="block">منطق</span>
</button>
<button class="category-btn bg-white dark:bg-gray-700 border-2 border-primary text-primary dark:text-gray-200 px-4 py-3 rounded-lg hover:bg-primary hover:text-white dark:hover:bg-primary transition duration-300" data-category="vocabulary">
<i class="fas fa-book mb-1"></i>
<span class="block">مفردات</span>
</button>
</div>
</div>
<!-- Difficulty Selection -->
<div class="mb-6">
<h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">اختر المستوى:</h3>
<div class="grid grid-cols-3 gap-3">
<button class="difficulty-btn bg-white dark:bg-gray-700 border-2 border-green-500 text-green-500 dark:text-green-400 px-4 py-3 rounded-lg hover:bg-green-500 hover:text-white transition duration-300" data-difficulty="easy">
<i class="fas fa-smile mb-1"></i>
<span class="block">سهل</span>
</button>
<button class="difficulty-btn bg-white dark:bg-gray-700 border-2 border-yellow-500 text-yellow-500 dark:text-yellow-400 px-4 py-3 rounded-lg hover:bg-yellow-500 hover:text-white transition duration-300" data-difficulty="medium">
<i class="fas fa-meh mb-1"></i>
<span class="block">متوسط</span>
</button>
<button class="difficulty-btn bg-white dark:bg-gray-700 border-2 border-red-500 text-red-500 dark:text-red-400 px-4 py-3 rounded-lg hover:bg-red-500 hover:text-white transition duration-300" data-difficulty="hard">
<i class="fas fa-dizzy mb-1"></i>
<span class="block">صعب</span>
</button>
</div>
</div>
<div class="text-center">
<button id="start-quiz" class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg text-lg font-semibold transition duration-300 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
<i class="fas fa-play mr-2"></i>ابدأ المسابقة
</button>
</div>
</div>
<!-- Quiz Container -->
<div id="quiz-container" class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-6 hidden">
<!-- Quiz Info -->
<div class="flex flex-col md:flex-row justify-between items-center mb-6">
<div class="flex items-center mb-4 md:mb-0">
<span id="category-badge" class="bg-primary text-white text-sm font-semibold py-1 px-3 rounded-full mr-2">
<i class="fas fa-folder mr-1"></i>معلومات عامة
</span>
<span id="difficulty-badge" class="bg-green-500 text-white text-sm font-semibold py-1 px-3 rounded-full">
<i class="fas fa-signal mr-1"></i>سهل
</span>
</div>
<div class="flex items-center">
<div class="mr-4">
<span class="text-gray-600 dark:text-gray-300 text-sm">السؤال:</span>
<span id="question-number" class="font-bold text-primary dark:text-primary">1</span>
<span class="text-gray-600 dark:text-gray-300 text-sm">من</span>
<span id="total-questions" class="font-bold text-primary dark:text-primary">10</span>
</div>
<div>
<span class="text-gray-600 dark:text-gray-300 text-sm">النقاط:</span>
<span id="score" class="font-bold text-success">0</span>
</div>
</div>
</div>
<!-- Timer -->
<div class="mb-6">
<div class="flex justify-between items-center mb-1">
<span class="text-sm font-medium text-gray-600 dark:text-gray-300">الوقت المتبقي</span>
<span id="timer-text" class="text-sm font-medium text-gray-600 dark:text-gray-300">60 ثانية</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
<div id="timer-bar" class="bg-primary h-2.5 rounded-full timer-animation" style="width: 100%"></div>
</div>
</div>
<!-- Question -->
<div class="mb-6">
<h3 id="question-text" class="text-xl md:text-2xl font-bold text-gray-800 dark:text-white mb-2">ما هي عاصمة مصر؟</h3>
<div id="question-explanation" class="text-gray-600 dark:text-gray-400 text-sm italic mb-2 hidden"></div>
</div>
<!-- Answer Options -->
<div id="answers-container" class="mb-6 space-y-3">
<!-- Multiple choice options will be inserted here dynamically -->
</div>
<!-- Text input for fill in the blank -->
<div id="text-input-container" class="mb-6 hidden">
<input type="text" id="text-answer" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-4 py-3 text-base focus:outline-none focus:border-primary" placeholder="اكتب إجابتك هنا...">
<button id="submit-text-answer" class="mt-3 bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg font-medium transition duration-300">
تقديم الإجابة
</button>
</div>
<!-- Hint Button -->
<div id="hint-container" class="mb-6 text-center">
<button id="hint-button" class="bg-secondary hover:bg-secondary/90 text-white px-4 py-2 rounded-lg font-medium transition duration-300">
<i class="fas fa-lightbulb mr-1"></i>عرض تلميح
</button>
<div id="hint-text" class="mt-3 bg-yellow-50 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200 p-3 rounded-lg hidden"></div>
</div>
<!-- Next Question Button -->
<div class="text-center">
<button id="next-question" class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg text-lg font-semibold transition duration-300 hidden">
السؤال التالي <i class="fas fa-arrow-left ml-2"></i>
</button>
</div>
</div>
<!-- Results Screen -->
<div id="results-screen" class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 text-center hidden">
<div class="mb-4">
<i id="result-icon" class="fas fa-trophy text-6xl text-yellow-500 mb-4"></i>
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">انتهت المسابقة!</h2>
<p id="final-score" class="text-xl text-gray-700 dark:text-gray-300 mb-2">النتيجة النهائية: <span class="font-bold text-primary">0</span> نقطة</p>
<p id="correct-answers" class="text-gray-600 dark:text-gray-400">الإجابات الصحيحة: <span class="font-bold text-success">0</span> من <span>10</span></p>
</div>
<div id="motivational-message" class="bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-200 p-4 rounded-lg mb-6">
أحسنت! لقد قمت بعمل رائع!
</div>
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">شارك نتيجتك:</h3>
<div class="flex justify-center space-x-4 space-x-reverse">
<button class="share-btn bg-[#1877F2] hover:bg-[#1877F2]/90 text-white p-2 rounded-full w-10 h-10 flex items-center justify-center transition duration-300" data-platform="facebook">
<i class="fab fa-facebook-f"></i>
</button>
<button class="share-btn bg-[#1DA1F2] hover:bg-[#1DA1F2]/90 text-white p-2 rounded-full w-10 h-10 flex items-center justify-center transition duration-300" data-platform="twitter">
<i class="fab fa-twitter"></i>
</button>
<button class="share-btn bg-[#25D366] hover:bg-[#25D366]/90 text-white p-2 rounded-full w-10 h-10 flex items-center justify-center transition duration-300" data-platform="whatsapp">
<i class="fab fa-whatsapp"></i>
</button>
<button class="share-btn bg-[#2867B2] hover:bg-[#2867B2]/90 text-white p-2 rounded-full w-10 h-10 flex items-center justify-center transition duration-300" data-platform="linkedin">
<i class="fab fa-linkedin-in"></i>
</button>
</div>
</div>
<div>
<p class="text-gray-700 dark:text-gray-300 mb-4">هل ترغب في المحاولة مرة أخرى؟</p>
<div class="space-x-3 space-x-reverse">
<button id="restart-same" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg font-medium transition duration-300">
<i class="fas fa-redo mr-1"></i>نفس الفئة والمستوى
</button>
<button id="restart-new" class="bg-secondary hover:bg-secondary/90 text-white px-4 py-2 rounded-lg font-medium transition duration-300">
<i class="fas fa-sync-alt mr-1"></i>فئة أو مستوى جديد
</button>
</div>
</div>
</div>
</div>
<!-- Audio Elements -->
<audio id="correct-sound" preload="auto">
<source src="data:audio/mp3;base64,SUQzAwAAAAAAIlRJVDIAAAAZAAAATXAzIGZyb20gd3d3LnRoZW1vdGl2ZS5jb21JQ09NAAAAIAAAAENPTU0gAAAAEgAAAFRoZSBNb3RpdmUgLSAyMDE2VFJDSwAAAAIAAAAxVFlFUgAAAAQAAABUaGVUQUxCAAAAFAAAAFRoZSBNb3RpdmUgLSAyMDE2VFBFMQAAABUAAAB3d3cudGhlbW90aXZlLmNvbSAoYylDT01NAAAAGAAAAGVuZyBHb29kIGpvYiwgY29ycmVjdCFUSVQxAAAADwAAAENvcnJlY3QgQW5zd2VyVFhYWAAAAAIAAAAyVENPTgAAAAUAAABPdGhlckNPTU0AAAAiAAAAZW5nIFNvdW5kIGVmZmVjdHMgdGhlbW90aXZlLmNvbSAyMDE2VENPTQAAAAEAAABHVEVOQwAAAAEAAABUVElUMQAAAAIAAABTV0RSTwAAAAEAAABHQVBJQwAAAAEAAABHAAAAAElEMwMAAABXVEFMQgAAAAEAAABUVEVOQwAAAAEAAABUVENPTgAAAAEAAABDVENPTQAAAAEAAABDVElUMQAAAAIAAABTV0RSTwAAAAEAAABHVERSTQAAAAEAAABHVFNSQwAAAAEAAABH//tAwAAAv/+LAAAAAM0JVEGYwTiFeUHywi8Hu2fH7pHi7/81xfnP73H+c95/Oe//+aY/3b4PhISErZfkj0epIMD8IP0y4IQBP0l5+JRvFGP7kpQ4P9YQVL3r/7lc/5/xWQbRkLCQmvkBAx18rwyggQwf5xCZ5oYPJiP9YQX///5/8VhhT3//5///5YQIGAXs0JQPLEwF3yYPKBfLRJBD+8ED/+sAwAZAUDJFADMGACIcCK1hYwACCQYP/8sIN///yYPLig2Hf/+T//8wYMHoGALEgwfIsBiEDEIcAx/LD/ljB/9Yvf/8Q/KDC9//80JXmCBcBMAQYBBj/lj9TDl//+of/0h//+QYf/9If//+Wg3/+2DAAAAAwf6QgYMH/yRAQYP/lD/+sIP//5MoIA///6kEgYP/+Wj//8sP/+kP//5Qf//kGH//SH///LL//5YAAAAABg//rAMAEAEA+RQBLDAAmfbB//5Qf//yh//5Ah///KH//8of//y0f/+WH/8oDC//8g///IMP//8o//+WEAUAQYMKDCgIMLCQYUCEBhP/+kIGF/lhEgPiQoAoA8MCpg4UEZwwkCkPJHPMX/+WP/6x+sMDCoYLBCH5gp///KDf/8oP//8ocIOxuCDYdzIEK/m1+YqJgzGZgPkHFV//7AMAAAAnRFyAMBACMdRmmC6bUBx4OAIMVEwoJBBgoDjYXAoGGAxAGwSFUFQGMOAwbRIbhIMxMDwdC0YTNgoICEeAuLgJAGVJPuJTB12yMQNRCMSBcTF6cXJHoRuXnFyTpPdVE//sAwAAADDkXKEwwAIGKouOhpQAACq2XCQQu3ikxBTUUzLjk5OKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq" type="audio/mp3">
</audio>
<audio id="wrong-sound" preload="auto">
<source src="data:audio/mp3;base64,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" type="audio/mp3">
</audio>
<audio id="timer-sound" preload="auto">
<source src="data:audio/mp3;base64,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5cQP/pEP/+kw0cKEy+X/lB//+TAf/yYA/8mP//5cf/y//8sPl//l/5YQL/ywgX/y//5f/8sMfL/y//+WL/9If/y4v/5cQP/pD//7AMAAAApBGzCJ7AAiPiNm1TmgA+kw0cKEy+X/lB//+TAf/yYA/8mP//5cf/y//8sPl//l/5YX/9IgH/+WP//5Y//+X/y/8sPl//l/5YQL/ywgX/y//5f/8sMP/5QgMWHyww//L///yYP/Jf//+SGGAwH/S///5MH//5P//5P///+X//8sPl//+WF//rAMAAAAohGzSprQAiZCNllTngA0iB/8mAP/5Mf//y4gIDBw8ODh48GYCAMD4f9I/l/5f/5YX/9IgH//LH//8sf//L/5f+WGPl/5f+WEC/8sP9I///kz///L//l//+WL/9If/y4v/5cQP/pEP/+lQML/5f/5YYeX/l/5YQL/ywuf+X//L//yxf//7QMAwgA3RGzCp7QAiiiNllTjgA/+kQ//yx//L//+WGGBgYD/pH//8mD//8n//8n/y//8mP//5QgGBwx/8mP//5P//5P//5Mf//5cQEBg4eHBw8eDMBAYGBgP+kfy/8v/8sX//0iH/8uP//5Y//l//5YYeX/l/5YQL/yw/0j//+TP///L//l//+WL/9Ih/rAMAAAApZGzCp7QAiViNllTmgA/Li//lxA/+kQ//6VAw8PGBg4ODAwGBhgYGBgYGBgcHBw4ODg4ODiwODg4ODg+ZGEH/SP//5P//5P//5Mf//5cQEBg4eP/5I//+SIP/yY///5I/q19f/yf///J///J///JgP/pB///Jj//+X///y//8sMP//rAMAAAAohGyqpzQAiSCNlkTmgA/5Q//5Yf//0iP/5cQP/pB///Jn/JD//+SIP/yY//+SGGGCBf9Ij//8n//8n//8mP//5P//5I//+SIP/yY///5Mf//5P//y4gYYYGP/kj//5Ig//Jj//5I//+SH//8mP//5MH/5Yf/yww//lDDw8GAwGH//SIA//7QMAvAA5RGzSprQAiaCNllTmgA8sP//5Y//+X//L///kx///5IgIMDgWEgYGGDDgfDAYDA0cMMssMMMsMMMMMMssccccccccgwyyyyzNdc000zXTTL1000000000000003//SH//8n//8n//8mP//5P//5I//+SIP/yY///5MH//5YX/5Yf//kx///+sAwAAAChkbOqntACLAI2TVOaAD/8mD//8mP//5I//+SIP/yY///5I//9I//l///yww//5YYfkwGBhgYGH/yY///5MH//5P/y//5I/SIf//y//5c//L/y//+WP//5Y///L//+X/y//+WP//5Y///L//+X/y//+WP//5Y///L//8sP//5Y///L//+WGH//rAMAAAAm5GzCp7QAizCNklTmgAyww//5YYf/+X//8mD//5I/SP//5Mf//yQ//pE//5YX//KD//+TAf/y4///Jg//pB//+X/y/8v/l/5YX/9IgH//LDA//lB//+TCP//Jg//+SIP//5Mf//5P//5L//y//l//+WP//5Y///L//8sP//5Y//+X//r+X//7QMAwAA65GzaprQAi1CNllTjAAf/LH//8sf//y//8sML/ywx8v/LD//+X/y/8v/L/yw//9Ih//5YYH/8oP//5MH//5MH//5P/y4v//Jj//+X/y/8v/L/ywv/6RD/+WPy//L/5YY+X/y//l/5Yf//0iH/8uMP/5Qf//yYP//Jg//pB//+X/y/8v/L/ywv/6RD/rAMAAAAqRGzqJ7QAiYCNllTmAA+WGP//5Y///l//5YY+X/yxf/L//+X/y/8v/L/yw//9Ih//5YYH/8oP//5MB//Jg//+SIP//5MH//5cf//y//l//+WH//9Ih/8sf//yYP//kgD//5MH//5I//+SIP//kgf//Jg///JEH/5YYf/p+X///yw///yw///7AMAAAAqBGzSprQAikiNmlTmgA/yw///l//+X/y/8sL/+kQ//Jj//+TH//8kP/6RAP/pEA//k//5f/L///5Mf//5P///Jj//+TH/yww//5Ygf/yw//0/L/5f+WH//9Ih//5Y/L/5f+X/yxf//0iH/5YYf/p+X///yw///yw///l/8v/L/5Y///0iH/rAMAAAAn5GzSprQAilCNmVTmgAf/LDA//lhj5f+X/y/+X/y/8sP//5YY+X/yxf/L//+SJ//+SB/+X///5If//yRP//5Y//l//+TD//+TD//5Y/L/5f+X/yxf//0iH//L//+X/y//+TP//+SD//+WH//9Ih//5ZH//5MH/5YYf/yhh4YD/8sMP//7AMAAAAphGzSprQAilCNk1TmgA+WL//+kQ//8sf//yf/5f/8oMP/+WF//SYf//5P//5P//5P//5P/y//5I//+SH//8kP/pEf//y///kx///5IP//5ZH//5MH/5YYf/yhh4YD/8sf//y//5If//yQ//8kP/pEP/+kR//5P//5Y//+WH//8sX///Jj//+TH//pB//rAMAAAAnJGzSprQAihCNlVTmgA/5cf//5P//5P//5Y//+WH//8sX///Jj//+TH//pB//+X/y/8v/L/yxf//0iH//L//+X///yw//lBh//y///k///5P//5P//5f/L/y/8v/L/5Y///0iH//L//+X/y//+X/y/8v/L/y/8sP//5Y///l/8v/L//+sDAAAAKORs4qY0AIo4jZVU5oAP/lxAf/0h//5f/L/y//5f/L/y/8v/LF//9Ih///J//+WL//+WH//9Ih///J///yf//5P//+X/y/8v/L/y/+WL//+kQ///J//+X/y/+X/y/8v/L/5f+WH//9Ih//5Yv/y/+X/y/8v/L/5f+X/+0DAMgAPCRs4qe0AIoYjZtU5oALDDP/+WF//SIf///Jn/+T//5f/L/y/8v/l/5YZ//ywv/6RD///kz//5P//5f/L/y/8v/L/5Yv//6RD///J//+X/y/+X/y/8v/L/5f+WH//9Ih//5Yv/y/+X/y/8v/L/5f+WGf/8sL/+kQ///5M//+T//+X/y/8v/L/rAMAAAAo5GzqprQAieCNl1TmgA5f+WL//+kQ///5M//+T//+X/y/8v/L/y/8sM//5YX/9Ih///yZ//8n//5f/L/y/8v/L/yxf//0iH///J//+X/y/+X/y/8v/L/5f+WH//9Ih///J//+X/y//5f/L/y//+WP//5Y///l//+X/y//5Yf//yw///l///LDD//l/rAMAAAAoRGzyprQAibiNlVTmgB/y/+X/y//5Yf//yw///l///LDD//l/8v/L/5Y//8sf//y//+X/y//lB//+THy//L/5f/L/y/+WH//9Ih//+WF//0iAf/+TH//8mP/5Qf/5//k///JP//5Mf//5cc//5P//5IP//5P//5P//5c//yr//+X//+X/y//y//7QMAAAA5BGzSJ5QAilCNmlTmAAH//5Y//8sf//y///5f//5f/LP//5Y//8sf//y///5f//5f/LP//5Y//8sf//y///5f/L/y//L//5Y//8sf//y///5f//5YX//5Yv//5Y//8sf//y///5f//5YX/y//+WP//LH//8v//+X//+WF//L/rAMAIAAwhGyAJrQAiVCNl0TmgB/5Y//8sf//y///5f//5f/LP//5Y//8sf//y///5f//5f/LP//5Y//8sf//y///5f/L/y//L//5Y//8sf//y///5f//5YX//5YX/y//+WP//LH//8v//+X//+WF//L//5Y//8sf//y///5f//5YX//+sDAAIAK0Rsmqa0AImQjZ1U5oAL/y//+X//+WF//fLH//8v//+X//+X/y//+WP//LH//8v//+X//+WF//L//5Y//8sf//y///5f//5YX/y//+WP//LH//8v//+X//+WF//L//5Y//8sf//y///5f//5YX/ywv//yw///yw///yw//8sP//LD//8sP//7QMAAAA6RGzqphwAipCNlVTDgALD//8sP//LD//8sP//LD//8sL//yw///yw///yw///yw//8sP//LD//8sP//LD//8sP//LD//8sP//LD//8sL//yw///yw///yw///yw//8sP//LD//8sP//LD//8sP//LD//8sL//yw///yw///yw///yx//8sf//LH//7AMAAAAJuRsiCYcAIlQjZuEw4APLD//8sf//LH//8sf//LH//8sL//yx//8sf//LH//8sf//LH//8sf//LH//8sf//LH//8sf//LH//8sf//LH//8sL//yx//8sf//LH//8sf//LH//8sf//LH//8sf//LH//8sL//yx//8sf//LH//8sf//LH//+0DAMgAO0RseqYYAInojZiUw4APLH//8sf//LH//8sf//LA//8sA//ywP//LA//8sD//ywL//ywP//LAv//ywP//LA//8sD//ywP//LA//8sC//ywP//LAv//ywP//LA//8sD//ywP//ywP//LA//8sC//ywP//LAv//LA//8sDf/ywP//LA//8sD//8sDf/rAMAAAAG8DY+Uw4AQAAAAnQwQAA8sD//ywP//LA//8sC//ywP//LAv//LA//8sD//ywP//ywP//ywL//LAv//ywL//LAv//ywL//LAv//LAv//LAv//LAr//LAr//LAr//LAr//LAr//LAr//LAr//LAr//LAr//LAv//LAv//LAv//LAv//LAv//LAv//LAv//LAv/+0DAMgALuEa0k3IABAAAAJsEAAAv//LAv//LAv//LAv//LAv//LAv//LAv//LAv//LAv//LAv//LAv//LAr//LAr//LAr//LAn//LAn//LAj//LAj//LAj//LAj//LAj//LAj//LAj//LAj//LAj//LAj//LAj//LAj//LAj//LAj//LAj//LAj//LAj//LAj//LAj/+0AMMgALOEagE0IABAAAAJQEAAAfLAj//LAj//LAj//LAj//LAj//LAj//LAj//LAj//LAj//LAj//LAj//LAf//LAf//LAX//LAX//LAf5lYCAAQALKDYgGQgAEAAAAkgQAAP/LAP//LAP//LAP//LAP//LAP//LAP//LAP//LAP//LAP//LAP4A==" type="audio/mp3">
</audio>
<!-- Quiz JavaScript -->
<script>
// Data structure to hold quiz questions
const quizData = {
general: {
easy: [
{
type: 'multiple',
question: 'ما هي عاصمة مصر؟',
options: ['القاهرة', 'الإسكندرية', 'الأقصر', 'أسوان'],
correctAnswer: 'القاهرة',
hint: 'تقع على نهر النيل وهي أكبر مدينة في أفريقيا'
},
{
type: 'truefalse',
question: 'الشمس تدور حول الأرض',
options: ['صحيح', 'خطأ'],
correctAnswer: 'خطأ',
hint: 'الأرض هي التي تدور حول الشمس'
},
{
type: 'multiple',
question: 'كم عدد أيام الأسبوع؟',
options: ['5 أيام', '6 أيام', '7 أيام', '8 أيام'],
correctAnswer: '7 أيام',
hint: 'يبدأ بيوم الأحد وينتهي بيوم السبت'
}
],
medium: [
{
type: 'multiple',
question: 'أي من الكواكب التالية هو الأقرب إلى الشمس؟',
options: ['المريخ', 'الأرض', 'عطارد', 'الزهرة'],
correctAnswer: 'عطارد',
hint: 'إنه أصغر كواكب المجموعة الشمسية'
},
{
type: 'fill',
question: 'يتكون الماء من ذرتي هيدروجين وذرة واحدة من _____',
correctAnswer: 'أكسجين',
hint: 'غاز ضروري للتنفس'
},
{
type: 'multiple',
question: 'ما هو أطول نهر في العالم؟',
options: ['نهر الأمازون', 'نهر النيل', 'نهر المسيسيبي', 'نهر اليانغتسي'],
correctAnswer: 'نهر النيل',
hint: 'يمر بمصر والسودان وعدة دول أفريقية أخرى'
}
],
hard: [
{
type: 'multiple',
question: 'من هو مخترع المصباح الكهربائي؟',
options: ['نيكولا تسلا', 'توماس إديسون', 'ألبرت أينشتاين', 'غراهام بيل'],
correctAnswer: 'توماس إديسون',
hint: 'قام بأكثر من ألف محاولة قبل أن ينجح'
},
{
type: 'fill',
question: 'العنصر الكيميائي الذي رمزه "Au" هو _____',
correctAnswer: 'الذهب',
hint: 'معدن ثمين يستخدم في صناعة الحلي'
},
{
type: 'truefalse',
question: 'يمكن رؤية سور الصين العظيم من الفضاء بالعين المجردة',
options: ['صحيح', 'خطأ'],
correctAnswer: 'خطأ',
hint: 'هذه واحدة من الأساطير الشائعة'
}
]
},
math: {
easy: [
{
type: 'multiple',
question: 'ما هو ناتج 5 × 8؟',
options: ['35', '40', '45', '50'],
correctAnswer: '40',
hint: 'فكر في جدول الضرب'
},
{
type: 'fill',
question: '12 + 9 - 6 = _____',
correctAnswer: '15',
hint: 'ابدأ بجمع 12 و 9 ثم اطرح 6'
},
{
type: 'multiple',
question: 'كم ضلعاً للمثلث؟',
options: ['3 أضلاع', '4 أضلاع', '5 أضلاع', '6 أضلاع'],
correctAnswer: '3 أضلاع',
hint: 'إنه أبسط شكل هندسي مغلق'
}
],
medium: [
{
type: 'multiple',
question: 'ما هو الجذر التربيعي للعدد 64؟',
options: ['6', '8', '10', '12'],
correctAnswer: '8',
hint: '8 × 8 = 64'
},
{
type: 'fill',
question: 'إذا كان محيط المربع 20 سم، فإن طول ضلعه هو _____ سم',
correctAnswer: '5',
hint: 'محيط المربع = 4 × طول الضلع'
},
{
type: 'truefalse',
question: 'مجموع زوايا المثلث يساوي 180 درجة',
options: ['صحيح', 'خطأ'],
correctAnswer: 'صحيح',
hint: 'هذه قاعدة أساسية في الهندسة'
}
],
hard: [
{
type: 'multiple',
question: 'ما هو ناتج 0.25 × 0.25؟',
options: ['0.0625', '0.125', '0.5', '0.625'],
correctAnswer: '0.0625',
hint: '0.25 = 1/4، فكر في ضرب الكسور'
},
{
type: 'fill',
question: 'العدد التالي في المتسلسلة: 2, 4, 8, 16, _____',
correctAnswer: '32',
hint: 'كل عدد يساوي ضعف العدد السابق'
},
{
type: 'multiple',
question: 'ما هو احتمال الحصول على العدد 6 عند رمي حجر نرد مرة واحدة؟',
options: ['1/3', '1/4', '1/5', '1/6'],
correctAnswer: '1/6',
hint: 'حجر النرد له 6 أوجه متساوية الاحتمال'
}
]
},
riddles: {
easy: [
{
type: 'multiple',
question: 'ما هو الشيء الذي يمشي ويقف وليس له أرجل؟',
options: ['الساعة', 'السيارة', 'القلم', 'الكرسي'],
correctAnswer: 'الساعة',
hint: 'يقيس الوقت'
},
{
type: 'fill',
question: 'أنا شيء لا تستطيع الإمساك بي، لكن يمكنك أن تفقدني بسهولة. من أنا؟ _____',
correctAnswer: 'الوقت',
hint: 'يقال إنه من ذهب'
},
{
type: 'multiple',
question: 'ما هو الشيء الذي كلما زاد نقص؟',
options: ['الماء', 'العمر', 'المال', 'الثقب'],
correctAnswer: 'العمر',
hint: 'مرتبط بحياة الإنسان'
}
],
medium: [
{
type: 'fill',
question: 'أنا تاج بلا ملك، وساعة بلا عقارب، ما أنا؟ _____',
correctAnswer: 'الأناناس',
hint: 'فاكهة استوائية'
},
{
type: 'multiple',
question: 'ما هو الشيء الذي إذا أكلته كله تعيش، وإذا أكلت نصفه تموت؟',
options: ['الماء', 'الطعام', 'الهواء', 'النار'],
correctAnswer: 'الهواء',
hint: 'نحتاجه للتنفس'
},
{
type: 'fill',
question: 'قلبي من حديد وعقلي من نار، أطير بلا جناح وأعيش بلا طعام. من أنا؟ _____',
correctAnswer: 'الطائرة',
hint: 'وسيلة نقل تطير في السماء'
}
],
hard: [
{
type: 'fill',
question: 'أنا آلة خرساء تتكلم، أنا ما أردت وأحفظ ما استودعت، ما أنا؟ _____',
correctAnswer: 'الكتاب',
hint: 'مصدر للمعرفة يحتوي على صفحات'
},
{
type: 'multiple',
question: 'ما هو الشيء الذي يكون أمامك ولا تراه؟',
options: ['المستقبل', 'الماضي', 'الهواء', 'الظل'],
correctAnswer: 'المستقبل',
hint: 'مرتبط بالزمن'
},
{
type: 'fill',
question: 'أنا شيء إذا أخذت مني واحداً أصبحت لا شيء، من أنا؟ _____',
correctAnswer: 'الصفر',
hint: 'رقم من أرقام الحساب'
}
]
},
history: {
easy: [
{
type: 'multiple',
question: 'من بنى الأهرامات في مصر القديمة؟',
options: ['الفراعنة', 'الرومان', 'الإغريق', 'البابليون'],
correctAnswer: 'الفراعنة',
hint: 'حكام مصر القديمة'
},
{
type: 'truefalse',
question: 'اكتشف كريستوفر كولومبوس أمريكا في عام 1492',
options: ['صحيح', 'خطأ'],
correctAnswer: 'صحيح',
hint: 'كان يبحث عن طريق إلى الهند'
},
{
type: 'multiple',
question: 'من هو أول خليفة في الإسلام؟',
options: ['عمر بن الخطاب', 'أبو بكر الصديق', 'عثمان بن عفان', 'علي بن أبي طالب'],
correctAnswer: 'أبو بكر الصديق',
hint: 'كان أقرب صحابي للنبي محمد ﷺ'
}
],
medium: [
{
type: 'multiple',
question: 'متى انتهت الحرب العالمية الثانية؟',
options: ['1943', '1945', '1947', '1950'],
correctAnswer: '1945',
hint: 'استمرت الحرب لمدة 6 سنوات'
},
{
type: 'fill',
question: 'اسم العالم المسلم الذي اخترع الجبر هو _____',
correctAnswer: 'الخوارزمي',
hint: 'اشتهر أيضاً بالرياضيات والفلك'
},
{
type: 'truefalse',
question: 'تأسست جامعة الدول العربية عام 1945',
options: ['صحيح', 'خطأ'],
correctAnswer: 'صحيح',
hint: 'تأسست في القاهرة بعد الحرب العالمية الثانية'
}
],
hard: [
{
type: 'multiple',
question: 'من هو القائد الذي هزم الصليبيين في معركة حطين؟',
options: ['صلاح الدين الأيوبي', 'نور الدين زنكي', 'قطز', 'سيف الدين قلاوون'],
correctAnswer: 'صلاح الدين الأيوبي',
hint: 'قام بتحرير القدس بعد هذه المعركة'
},
{
type: 'fill',
question: 'المؤرخ العربي الشهير الذي كتب "مقدمة ابن خلدون" هو _____',
correctAnswer: 'ابن خلدون',
hint: 'يعتبر مؤسس علم الاجتماع'
},
{
type: 'multiple',
question: 'أي معركة أدت إلى سقوط الدولة الأموية؟',
options: ['معركة القادسية', 'معركة عين جالوت', 'معركة حطين', 'معركة الزاب'],
correctAnswer: 'معركة الزاب',
hint: 'وقعت عام 750 ميلادية'
}
]
},
logic: {
easy: [
{
type: 'multiple',
question: 'إذا كان اليوم هو الأحد، فما هو اليوم بعد يومين؟',
options: ['الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس'],
correctAnswer: 'الثلاثاء',
hint: 'عد الأيام: الأحد ثم الاثنين ثم...'
},
{
type: 'fill',
question: 'أكمل المتسلسلة: 1, 3, 5, 7, _____',
correctAnswer: '9',
hint: 'أعداد فردية متتالية'
},
{
type: 'multiple',
question: 'إذا كان علي أطول من محمد، ومحمد أطول من أحمد، فمن هو الأقصر؟',
options: ['علي', 'محمد', 'أحمد', 'لا يمكن تحديده'],
correctAnswer: 'أحمد',
hint: 'قارن بين الأطوال المذكورة'
}
],
medium: [
{
type: 'fill',
question: 'أكمل المتسلسلة: 2, 6, 12, 20, _____',
correctAnswer: '30',
hint: 'الفرق بين كل رقمين متتاليين يزيد بمقدار 2'
},
{
type: 'multiple',
question: 'في غرفة، يوجد 4 زوايا. في كل زاوية يوجد قط. كل قط يرى 3 قطط. كم عدد القطط في الغرفة؟',
options: ['3 قطط', '4 قطط', '12 قطا', '16 قطا'],
correctAnswer: '4 قطط',
hint: 'القط في كل زاوية يرى القطط في الزوايا الأخرى'
},
{
type: 'truefalse',
question: 'إذا كان كل الطيور تطير، وكل البطاريق طيور، إذن كل البطاريق تطير.',
options: ['صحيح', 'خطأ'],
correctAnswer: 'خطأ',
hint: 'المقدمة الأولى ليست صحيحة'
}
],
hard: [
{
type: 'multiple',
question: 'لدي 8 كرات متشابهة تماماً ولكن إحداها أثقل قليلاً من البقية. بكم عملية وزن أقل على الأقل أستطيع تحديد الكرة الثقيلة باستخدام ميزان ذو كفتين؟',
options: ['عملية واحدة', 'عمليتان', '3 عمليات', '4 عمليات'],
correctAnswer: 'عمليتان',
hint: 'قسّم الكرات إلى مجموعات'
},
{
type: 'fill',
question: 'أكمل المتسلسلة: 1, 1, 2, 3, 5, 8, 13, _____',
correctAnswer: '21',
hint: 'كل رقم هو مجموع الرقمين السابقين له'
},
{
type: 'multiple',
question: 'خمسة أشخاص يتصافحون فيما بينهم. كم عدد المصافحات الإجمالي؟',
options: ['5 مصافحات', '10 مصافحات', '15 مصافحة', '20 مصافحة'],
correctAnswer: '10 مصافحات',
hint: 'كل شخص يصافح 4 أشخاص، لكن المصافحة تحسب مرة واحدة'
}
]
},
vocabulary: {
easy: [
{
type: 'multiple',
question: 'ما هو مفرد كلمة "كتب"؟',
options: ['كتاب', 'كاتب', 'مكتبة', 'مكتوب'],
correctAnswer: 'كتاب',
hint: 'ما يقرأه الناس للمعرفة'
},
{
type: 'fill',
question: 'جمع كلمة "مدرسة" هو _____',
correctAnswer: 'مدارس',
hint: 'أماكن للتعليم'
},
{
type: 'multiple',
question: 'مضاد كلمة "سعيد" هو:',
options: ['فرح', 'حزين', 'مبتهج', 'مسرور'],
correctAnswer: 'حزين',
hint: 'يشعر بالألم النفسي'
}
],
medium: [
{
type: 'multiple',
question: 'ما معنى كلمة "صلادة"؟',
options: ['نوع من الحلوى', 'إناء للأكل', 'الخبز اليابس', 'حساء ساخن'],
correctAnswer: 'إناء للأكل',
hint: 'تستخدم لتقديم الطعام'
},
{
type: 'fill',
question: 'مفرد كلمة "أراجيز" هو _____',
correctAnswer: 'أرجوزة',
hint: 'نوع من الشعر أو النظم'
},
{
type: 'multiple',
question: 'مرادف كلمة "وجل" هو:',
options: ['خوف', 'شجاعة', 'حزن', 'فرح'],
correctAnswer: 'خوف',
hint: 'مشاعر عند توقع الخطر'
}
],
hard: [
{
type: 'multiple',
question: 'ما معنى كلمة "الفصاحة"؟',
options: ['الكتابة السريعة', 'القراءة الصحيحة', 'البلاغة وحسن البيان', 'حفظ الشعر'],
correctAnswer: 'البلاغة وحسن البيان',
hint: 'مرتبطة بمهارات الخطابة واللغة'
},
{
type: 'fill',
question: 'مضاد كلمة "النفاق" هو _____',
correctAnswer: 'الإخلاص',
hint: 'الصدق في المشاعر والأقوال'
},
{
type: 'multiple',
question: 'ما هي كلمة اللغة العربية التي تبدأ وتنتهي بنفس الحرف "السين"؟',
options: ['سلس', 'سوس', 'سناء', 'سمين'],
correctAnswer: 'سلس',
hint: 'تعني سهل الانقياد أو البسيط'
}
]
}
};
// Variables to track quiz state
let currentCategory = '';
let currentDifficulty = '';
let currentQuestions = [];
let currentQuestionIndex = 0;
let score = 0;
let correctAnswers = 0;
let timer;
let timeLeft = 60; // Default time in seconds
let selectedCategoryBtn = null;
let selectedDifficultyBtn = null;
let hintUsed = false;
// DOM Elements
const welcomeScreen = document.getElementById('welcome-screen');
const quizContainer = document.getElementById('quiz-container');
const resultsScreen = document.getElementById('results-screen');
const categoryBtns = document.querySelectorAll('.category-btn');
const difficultyBtns = document.querySelectorAll('.difficulty-btn');
const startQuizBtn = document.getElementById('start-quiz');
const categoryBadge = document.getElementById('category-badge');
const difficultyBadge = document.getElementById('difficulty-badge');
const questionNumber = document.getElementById('question-number');
const totalQuestions = document.getElementById('total-questions');
const scoreElement = document.getElementById('score');
const timerText = document.getElementById('timer-text');
const timerBar = document.getElementById('timer-bar');
const questionText = document.getElementById('question-text');
const questionExplanation = document.getElementById('question-explanation');
const answersContainer = document.getElementById('answers-container');
const textInputContainer = document.getElementById('text-input-container');
const textAnswer = document.getElementById('text-answer');
const submitTextAnswer = document.getElementById('submit-text-answer');
const hintButton = document.getElementById('hint-button');
const hintText = document.getElementById('hint-text');
const nextQuestion = document.getElementById('next-question');
const finalScore = document.getElementById('final-score');
const correctAnswersElement = document.getElementById('correct-answers');
const motivationalMessage = document.getElementById('motivational-message');
const resultIcon = document.getElementById('result-icon');
const restartSame = document.getElementById('restart-same');
const restartNew = document.getElementById('restart-new');
const shareBtns = document.querySelectorAll('.share-btn');
const correctSound = document.getElementById('correct-sound');
const wrongSound = document.getElementById('wrong-sound');
const timerSound = document.getElementById('timer-sound');
// Initialize event listeners
function initEventListeners() {
// Category selection
categoryBtns.forEach(btn => {
btn.addEventListener('click', () => {
if (selectedCategoryBtn) {
selectedCategoryBtn.classList.remove('bg-primary', 'text-white');
selectedCategoryBtn.classList.add('bg-white', 'dark:bg-gray-700', 'text-primary', 'dark:text-gray-200');
}
btn.classList.remove('bg-white', 'dark:bg-gray-700', 'text-primary', 'dark:text-gray-200');
btn.classList.add('bg-primary', 'text-white');
selectedCategoryBtn = btn;
currentCategory = btn.getAttribute('data-category');
updateStartButtonState();
});
});
// Difficulty selection
difficultyBtns.forEach(btn => {
btn.addEventListener('click', () => {
if (selectedDifficultyBtn) {
const color = selectedDifficultyBtn.getAttribute('data-difficulty') === 'easy' ? 'green-500' :
selectedDifficultyBtn.getAttribute('data-difficulty') === 'medium' ? 'yellow-500' : 'red-500';
selectedDifficultyBtn.classList.remove(`bg-${color}`, 'text-white');
selectedDifficultyBtn.classList.add('bg-white', 'dark:bg-gray-700', `text-${color}`, `dark:text-${color}-400`);
}
const color = btn.getAttribute('data-difficulty') === 'easy' ? 'green-500' :
btn.getAttribute('data-difficulty') === 'medium' ? 'yellow-500' : 'red-500';
btn.classList.remove('bg-white', 'dark:bg-gray-700', `text-${color}`, `dark:text-${color}-400`);
btn.classList.add(`bg-${color}`, 'text-white');
selectedDifficultyBtn = btn;
currentDifficulty = btn.getAttribute('data-difficulty');
updateStartButtonState();
});
});
// Start quiz button
startQuizBtn.addEventListener('click', startQuiz);
// Hint button
hintButton.addEventListener('click', showHint);
// Next question button
nextQuestion.addEventListener('click', loadNextQuestion);
// Text answer submission
submitTextAnswer.addEventListener('click', checkTextAnswer);
textAnswer.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
checkTextAnswer();
}
});
// Results screen buttons
restartSame.addEventListener('click', () => {
welcomeScreen.classList.add('hidden');
resultsScreen.classList.add('hidden');
startQuiz();
});
restartNew.addEventListener('click', () => {
resetQuiz();
welcomeScreen.classList.remove('hidden');
resultsScreen.classList.add('hidden');
});
// Share buttons
shareBtns.forEach(btn => {
btn.addEventListener('click', () => {
const platform = btn.getAttribute('data-platform');
const text = `حصلت على ${score} نقطة في مسابقة المعرفة التفاعلية! جرب وتحدى نفسك!`;
const url = encodeURIComponent(window.location.href);
let shareUrl = '';
switch(platform) {
case 'facebook':
shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}"e=${encodeURIComponent(text)}`;
break;
case 'twitter':
shareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${url}`;
break;
case 'whatsapp':
shareUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(text + ' ' + window.location.href)}`;
break;
case 'linkedin':
shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${url}`;
break;
}
if (shareUrl) {
window.open(shareUrl, '_blank');
}
});
});
}
// Update start button state based on selections
function updateStartButtonState() {
if (currentCategory && currentDifficulty) {
startQuizBtn.disabled = false;
} else {
startQuizBtn.disabled = true;
}
}
// Start the quiz
function startQuiz() {
// Get questions for selected category and difficulty
currentQuestions = [...quizData[currentCategory][currentDifficulty]];
// Shuffle questions
currentQuestions = shuffleArray(currentQuestions);
// Reset quiz state
currentQuestionIndex = 0;
score = 0;
correctAnswers = 0;
// Update UI
welcomeScreen.classList.add('hidden');
quizContainer.classList.remove('hidden');
resultsScreen.classList.add('hidden');
// Set category and difficulty badges
updateCategoryBadge();
updateDifficultyBadge();
// Update question count
totalQuestions.textContent = currentQuestions.length;
// Load first question
loadQuestion();
}
// Update category badge
function updateCategoryBadge() {
let categoryText = '';
let categoryIcon = '';
switch(currentCategory) {
case 'general':
categoryText = 'معلومات عامة';
categoryIcon = 'fa-globe';
break;
case 'math':
categoryText = 'رياضيات';
categoryIcon = 'fa-calculator';
break;
case 'riddles':
categoryText = 'ألغاز';
categoryIcon = 'fa-puzzle-piece';
break;
case 'history':
categoryText = 'تاريخ';
categoryIcon = 'fa-landmark';
break;
case 'logic':
categoryText = 'منطق';
categoryIcon = 'fa-chess';
break;
case 'vocabulary':
categoryText = 'مفردات';
categoryIcon = 'fa-book';
break;
}
categoryBadge.innerHTML = `<i class="fas ${categoryIcon} mr-1"></i>${categoryText}`;
}
// Update difficulty badge
function updateDifficultyBadge() {
let difficultyText = '';
let difficultyIcon = '';
let difficultyClass = '';
switch(currentDifficulty) {
case 'easy':
difficultyText = 'سهل';
difficultyIcon = 'fa-smile';
difficultyClass = 'bg-green-500';
break;
case 'medium':
difficultyText = 'متوسط';
difficultyIcon = 'fa-meh';
difficultyClass = 'bg-yellow-500';
break;
case 'hard':
difficultyText = 'صعب';
difficultyIcon = 'fa-dizzy';
difficultyClass = 'bg-red-500';
break;
}
difficultyBadge.className = `${difficultyClass} text-white text-sm font-semibold py-1 px-3 rounded-full`;
difficultyBadge.innerHTML = `<i class="fas ${difficultyIcon} mr-1"></i>${difficultyText}`;
}
// Load current question
function loadQuestion() {
// Reset state for new question
clearTimeout(timer);
nextQuestion.classList.add('hidden');
hintButton.classList.remove('hidden');
hintText.classList.add('hidden');
questionExplanation.classList.add('hidden');
hintUsed = false;
// Set question info
const currentQuestion = currentQuestions[currentQuestionIndex];
questionNumber.textContent = currentQuestionIndex + 1;
questionText.textContent = currentQuestion.question;
// Set time based on difficulty
switch(currentDifficulty) {
case 'easy':
timeLeft = 60;
break;
case 'medium':
timeLeft = 45;
break;
case 'hard':
timeLeft = 30;
break;
}
// Reset timer UI
updateTimerUI();
startTimer();
// Determine question type and prepare UI
if (currentQuestion.type === 'multiple' || currentQuestion.type === 'truefalse') {
// Multiple choice or True/False
textInputContainer.classList.add('hidden');
answersContainer.classList.remove('hidden');
// Shuffle options for multiple choice
const options = [...currentQuestion.options];
if (currentQuestion.type === 'multiple') {
shuffleArray(options);
}
// Create option buttons
answersContainer.innerHTML = '';
options.forEach(option => {
const optionBtn = document.createElement('button');
optionBtn.className = 'quiz-option w-full border-2 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-800 dark:text-white p-3 rounded-lg text-right transition duration-300';
optionBtn.textContent = option;
optionBtn.addEventListener('click', () => checkAnswer(option));
answersContainer.appendChild(optionBtn);
});
} else if (currentQuestion.type === 'fill') {
// Fill in the blank
answersContainer.classList.add('hidden');
textInputContainer.classList.remove('hidden');
textAnswer.value = '';
textAnswer.focus();
}
}
// Start timer
function startTimer() {
updateTimerUI();
timer = setTimeout(() => {
if (timeLeft > 0) {
timeLeft--;
// Play sound when time is running out
if (timeLeft <= 5) {
timerSound.play();
}
startTimer();
} else {
// Time's up
handleTimeUp();
}
}, 1000);
}
// Update timer UI
function updateTimerUI() {
timerText.textContent = `${timeLeft} ثانية`;
const percentage = (timeLeft / getMaxTime()) * 100;
timerBar.style.width = `${percentage}%`;
// Change color based on time left
if (percentage > 60) {
timerBar.className = 'bg-primary h-2.5 rounded-full timer-animation';
} else if (percentage > 30) {
timerBar.className = 'bg-yellow-500 h-2.5 rounded-full timer-animation';
} else {
timerBar.className = 'bg-red-500 h-2.5 rounded-full timer-animation';
}
}
// Get max time based on difficulty
function getMaxTime() {
switch(currentDifficulty) {
case 'easy':
return 60;
case 'medium':
return 45;
case 'hard':
return 30;
default:
return 60;
}
}
// Handle time up
function handleTimeUp() {
timerSound.play();
// Highlight correct answer
const currentQuestion = currentQuestions[currentQuestionIndex];
if (currentQuestion.type === 'multiple' || currentQuestion.type === 'truefalse') {
const options = answersContainer.querySelectorAll('button');
options.forEach(option => {
option.disabled = true;
if (option.textContent === currentQuestion.correctAnswer) {
option.classList.add('correct-answer');
}
});
} else if (currentQuestion.type === 'fill') {
textAnswer.disabled = true;
submitTextAnswer.disabled = true;
const explanation = document.createElement('p');
explanation.className = 'mt-2 text-success font-semibold';
explanation.textContent = `الإجابة الصحيحة: ${currentQuestion.correctAnswer}`;
textInputContainer.appendChild(explanation);
}
// Show hint if not already shown
if (!hintUsed) {
hintText.textContent = currentQuestion.hint;
hintText.classList.remove('hidden');
}
// Prepare for next question
nextQuestion.classList.remove('hidden');
hintButton.classList.add('hidden');
}
// Check answer for multiple choice and true/false
function checkAnswer(selectedOption) {
clearTimeout(timer);
const currentQuestion = currentQuestions[currentQuestionIndex];
const isCorrect = selectedOption === currentQuestion.correctAnswer;
// Disable all options
const options = answersContainer.querySelectorAll('button');
options.forEach(option => {
option.disabled = true;
if (option.textContent === currentQuestion.correctAnswer) {
option.classList.add('correct-answer');
} else if (option.textContent === selectedOption && !isCorrect) {
option.classList.add('wrong-answer');
}
});
// Update score and give feedback
updateScore(isCorrect);
// Show hint if wrong
if (!isCorrect && !hintUsed) {
hintText.textContent = currentQuestion.hint;
hintText.classList.remove('hidden');
}
// Prepare for next question
nextQuestion.classList.remove('hidden');
hintButton.classList.add('hidden');
}
// Check answer for fill in the blank
function checkTextAnswer() {
clearTimeout(timer);
const currentQuestion = currentQuestions[currentQuestionIndex];
const userAnswer = textAnswer.value.trim();
// Check if answer is correct (case insensitive for fill in the blank)
const isCorrect = userAnswer.toLowerCase() === currentQuestion.correctAnswer.toLowerCase();
// Disable input
textAnswer.disabled = true;
submitTextAnswer.disabled = true;
// Show correct answer
const explanation = document.createElement('p');
explanation.className = isCorrect ? 'mt-2 text-success font-semibold' : 'mt-2 text-danger font-semibold';
explanation.textContent = isCorrect ?
`إجابة صحيحة!` :
`الإجابة الصحيحة: ${currentQuestion.correctAnswer}`;
textInputContainer.appendChild(explanation);
// Update score and give feedback
updateScore(isCorrect);
// Show hint if wrong
if (!isCorrect && !hintUsed) {
hintText.textContent = currentQuestion.hint;
hintText.classList.remove('hidden');
}
// Prepare for next question
nextQuestion.classList.remove('hidden');
hintButton.classList.add('hidden');
}
// Update score
function updateScore(isCorrect) {
// Calculate points based on difficulty, time left, and if hint was used
let points = 0;
if (isCorrect) {
// Base points by difficulty
switch(currentDifficulty) {
case 'easy':
points = 5;
break;
case 'medium':
points = 10;
break;
case 'hard':
points = 15;
break;
}
// Bonus for time left
const timeBonus = Math.floor(timeLeft / 5);
points += timeBonus;
// Penalty for using hint
if (hintUsed) {
points = Math.floor(points * 0.7);
}
// Update score and correct answers
score += points;
correctAnswers++;
// Play sound
correctSound.play();
} else {
// Play wrong sound
wrongSound.play();
}
// Update UI
scoreElement.textContent = score;
// Add animation
scoreElement.classList.add('pulse-animation');
setTimeout(() => {
scoreElement.classList.remove('pulse-animation');
}, 600);
}
// Show hint
function showHint() {
hintUsed = true;
hintText.textContent = currentQuestions[currentQuestionIndex].hint;
hintText.classList.remove('hidden');
hintButton.classList.add('hidden');
}
// Load next question
function loadNextQuestion() {
currentQuestionIndex++;
if (currentQuestionIndex < currentQuestions.length) {
loadQuestion();
} else {
showResults();
}
}
// Show results
function showResults() {
quizContainer.classList.add('hidden');
resultsScreen.classList.remove('hidden');
// Update results info
finalScore.innerHTML = `النتيجة النهائية: <span class="font-bold text-primary">${score}</span> نقطة`;
correctAnswersElement.innerHTML = `الإجابات الصحيحة: <span class="font-bold text-success">${correctAnswers}</span> من <span>${currentQuestions.length}</span>`;
// Calculate percentage
const percentage = (correctAnswers / currentQuestions.length) * 100;
// Update icon and message based on score
if (percentage >= 80) {
resultIcon.className = 'fas fa-trophy text-6xl text-yellow-500 mb-4';
motivationalMessage.className = 'bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-200 p-4 rounded-lg mb-6';
motivationalMessage.textContent = 'ممتاز! أنت حقاً عبقري! استمر في التعلم وتطوير معلوماتك!';
} else if (percentage >= 60) {
resultIcon.className = 'fas fa-medal text-6xl text-blue-500 mb-4';
motivationalMessage.className = 'bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200 p-4 rounded-lg mb-6';
motivationalMessage.textContent = 'أحسنت! نتيجة جيدة جداً، واصل المحاولة لتصل إلى القمة!';
} else if (percentage >= 40) {
resultIcon.className = 'fas fa-thumbs-up text-6xl text-green-500 mb-4';
motivationalMessage.className = 'bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-800 text-yellow-800 dark:text-yellow-200 p-4 rounded-lg mb-6';
motivationalMessage.textContent = 'جيد! يمكنك تحسين نتيجتك بالمزيد من التمرين!';
} else {
resultIcon.className = 'fas fa-book-reader text-6xl text-purple-500 mb-4';
motivationalMessage.className = 'bg-purple-50 dark:bg-purple-900/30 border border-purple-200 dark:border-purple-800 text-purple-800 dark:text-purple-200 p-4 rounded-lg mb-6';
motivationalMessage.textContent = 'لا بأس! كل محاولة هي خطوة للأمام، حاول مرة أخرى وستحسن نتيجتك!';
}
}
// Reset quiz to initial state
function resetQuiz() {
currentCategory = '';
currentDifficulty = '';
currentQuestions = [];
currentQuestionIndex = 0;
score = 0;
correctAnswers = 0;
clearTimeout(timer);
if (selectedCategoryBtn) {
selectedCategoryBtn.classList.remove('bg-primary', 'text-white');
selectedCategoryBtn.classList.add('bg-white', 'dark:bg-gray-700', 'text-primary', 'dark:text-gray-200');
selectedCategoryBtn = null;
}
if (selectedDifficultyBtn) {
const color = selectedDifficultyBtn.getAttribute('data-difficulty') === 'easy' ? 'green-500' :
selectedDifficultyBtn.getAttribute('data-difficulty') === 'medium' ? 'yellow-500' : 'red-500';
selectedDifficultyBtn.classList.remove(`bg-${color}`, 'text-white');
selectedDifficultyBtn.classList.add('bg-white', 'dark:bg-gray-700', `text-${color}`, `dark:text-${color}-400`);
selectedDifficultyBtn = null;
}
startQuizBtn.disabled = true;
}
// Helper function to shuffle array
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Initialize app
function init() {
initEventListeners();
}
// Start the app when DOM is loaded
document.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>
إرسال تعليق