# 🏁 اختبار حلبات موتو جي بي: هل تعرف المسارات الأسطورية للبطولة؟

اختبر معلوماتك حول حلبات موتو جي بي الأسطورية! 12 سؤالاً حول المنعطفات الشهيرة، وأرقام السرعة القياسية، والميزات التقنية لأروع المسارات في العالم.

---

import ArticleScript from '@/components/ArticleScript';
import ArticleStyle from '@/components/ArticleStyle';


{/* Hero Section */}
<div className="article-container" style={{textAlign: 'center', padding: '40px 20px'}} dir="rtl">
    <div style={{display: 'inline-block', background: 'linear-gradient(135deg, #e63946 0%, #f77f00 100%)', padding: '8px 20px', borderRadius: '20px', marginBottom: '20px'}}>
        <span style={{color: 'white', fontWeight: '700', fontSize: '0.9em'}}>🏁 حلبات أسطورية</span>
    </div>
    
    <h1 style={{fontSize: '2.5em', lineHeight: '1.2', marginBottom: '20px', background: 'linear-gradient(135deg, #ffffff 0%, #94a3b8 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text'}}>
        اختبار حلبات موتو جي بي الأسطورية
    </h1>
    
    <p style={{fontSize: '1.2em', color: '#cbd5e1', maxWidth: '700px', margin: '0 auto 30px', lineHeight: '1.6'}}>
        من موجيلو إلى فيليب آيلاند، كل حلبة تروي قصة. <strong style={{color: '#f77f00'}}>12 سؤالاً شيقاً</strong> حول المنعطفات الشهيرة، وأرقام السرعة القياسية، وأسرار أجمل المسارات في العالم!
    </p>
    
    <img src="/images/articles/motogp-circuit-hero.webp" alt="حلبة موتو جي بي" style={{width: '100%', maxWidth: '800px', borderRadius: '20px', margin: '30px auto', display: 'block', boxShadow: '0 20px 60px rgba(230, 57, 70, 0.4)'}} />
    
    <div className="hero-info-grid">
        <div className="hero-info-card">
            <div style={{fontSize: '2em', marginBottom: '5px'}}>🏎️</div>
            <div className="hero-info-text">منعطفات أسطورية</div>
        </div>
        <div className="hero-info-card">
            <div style={{fontSize: '2em', marginBottom: '5px'}}>⚡</div>
            <div className="hero-info-text">أرقام السرعة</div>
        </div>
        <div className="hero-info-card">
            <div style={{fontSize: '2em', marginBottom: '5px'}}>🌍</div>
            <div className="hero-info-text">مسارات عالمية</div>
        </div>
    </div>
    
    <button id="start-quiz-circuits" style={{background: 'linear-gradient(135deg, #e63946, #f77f00)', color: 'white', border: 'none', padding: '18px 50px', borderRadius: '50px', fontSize: '1.3em', fontWeight: '700', cursor: 'pointer', boxShadow: '0 10px 30px rgba(230, 57, 70, 0.4)', marginTop: '40px', transition: 'all 0.3s'}}>
        🚀 ابدأ الاختبار
    </button>
</div>

{/* Progress Bar */}
<div id="quiz-progress-container-circuits" style={{position: 'sticky', top: '0', zIndex: '100', background: 'rgba(2, 6, 23, 0.95)', backdropFilter: 'blur(10px)', padding: '15px 20px', borderBottom: '1px solid rgba(255,255,255,0.1)', display: 'none'}} dir="rtl">
    <div style={{maxWidth: '800px', margin: '0 auto'}}>
        <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: '8px'}}>
            <span style={{fontSize: '0.9em', color: '#94a3b8'}} id="quiz-progress-text-circuits">سؤال 1/12</span>
            <span style={{fontSize: '0.9em', color: '#f77f00', fontWeight: '600'}} id="quiz-timer-circuits">0:00</span>
        </div>
        <div style={{height: '6px', background: 'rgba(255,255,255,0.1)', borderRadius: '10px', overflow: 'hidden'}}>
            <div id="quiz-progress-bar-circuits" style={{height: '100%', width: '8.33%', background: 'linear-gradient(90deg, #e63946, #f77f00)', transition: 'width 0.3s ease'}}></div>
        </div>
    </div>
</div>

{/* Quiz Form */}
<form id="quiz-form-circuits" style={{maxWidth: '800px', margin: '40px auto', padding: '0 20px', display: 'none'}} dir="rtl">
    {/* Questions dynamically generated */}
</form>

{/* Result Panel */}
<div className="quiz-result-panel" id="quiz-result-circuits" style={{display: 'none', maxWidth: '800px', margin: '60px auto', padding: '0 20px'}} dir="rtl">
    <div style={{background: 'linear-gradient(135deg, rgba(230, 57, 70, 0.1), rgba(247, 127, 0, 0.1))', border: '2px solid rgba(247, 127, 0, 0.3)', borderRadius: '24px', padding: '50px 40px', textAlign: 'center'}}>
        <div style={{fontSize: '4em', marginBottom: '20px'}} id="result-emoji-circuits">🏁</div>
        <h2 style={{fontSize: '2.2em', marginBottom: '15px'}}>النتيجة النهائية</h2>
        <div id="result-score-circuits" style={{fontSize: '3.5em', fontWeight: '800', background: 'linear-gradient(135deg, #e63946, #f77f00)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text'}}></div>
        <p id="result-text-circuits" style={{fontSize: '1.2em', color: '#cbd5e1', margin: '20px 0'}}></p>
        <div id="result-profile-circuits" style={{display: 'inline-block', background: 'rgba(247, 127, 0, 0.2)', padding: '12px 30px', borderRadius: '20px', marginTop: '20px'}}>
            <span style={{color: '#f77f00', fontWeight: '700', fontSize: '1.1em'}} id="profile-badge-circuits"></span>
        </div>

        <div style={{display: 'flex', gap: '15px', justifyContent: 'center', marginTop: '40px', flexWrap: 'wrap'}}>
            <button type="button" className="restart-btn-circuits" style={{background: 'linear-gradient(135deg, #e63946, #f77f00)', color: 'white', border: 'none', padding: '16px 35px', borderRadius: '12px', fontSize: '1.05em', fontWeight: '700', cursor: 'pointer'}}>🔄 إعادة المحاولة</button>
            <a href="/dashboard" style={{background: 'rgba(255,255,255,0.05)', color: 'white', border: '2px solid rgba(255,255,255,0.2)', padding: '16px 35px', borderRadius: '12px', fontSize: '1.05em', fontWeight: '600', textDecoration: 'none'}}>📊 ملفي الشخصي</a>
            <a href="#" id="share-whatsapp-circuits" style={{background: 'linear-gradient(135deg, #25D366, #128C7E)', color: 'white', padding: '16px 35px', borderRadius: '12px', fontSize: '1.05em', fontWeight: '600', textDecoration: 'none'}}>📱 مشاركة</a>
        </div>
    </div>
</div>

<img src="/images/articles/motogp-circuit-aerial.webp" alt="منظر جوي للحلبة" style={{width: '100%', maxWidth: '800px', borderRadius: '20px', margin: '40px auto', display: 'block', boxShadow: '0 10px 40px rgba(0,0,0,0.3)'}} />


<ArticleStyle content={`

/* Fix text overflow in results */
#quiz-result-circuits,
#quiz-result-circuits p,
h3 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}
li, .options-circuits label {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

/* Hero Info Cards */
.hero-info-grid { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.hero-info-card { background: rgba(255,255,255,0.05); padding: 12px 20px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); text-align: center; min-width: 120px; }
.hero-info-text { font-size: 0.9em; color: #94a3b8; }

/* Mobile Responsive */
@media (max-width: 768px) {
    .article-container { padding: 20px 10px; }
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.5em; }
    p { font-size: 1em; }

    .hero-info-grid { gap: 8px; }
    .hero-info-card { padding: 8px 5px; flex: 1; min-width: 80px; }
    .hero-info-card div:first-child { font-size: 1.4em; margin-bottom: 2px; }
    .hero-info-text { font-size: 0.75em; line-height: 1.2; }
    
    .options-circuits label {
        padding: 12px;
        font-size: 0.95em;
    }
    
    button, a, #start-quiz-circuits {
        width: 100%;
        padding: 18px 20px;
        box-sizing: border-box;
        margin-bottom: 10px;
        display: block;
        text-align: center;
        white-space: normal;
    }
    
    .next-btn-circuits, .prev-btn-circuits, .submit-btn-circuits {
        width: 100%;
        margin-bottom: 10px;
    }
}

`} />

<ArticleScript content={`
window.initCircuitsQuiz = function() {
    if (window.initCircuitsQuizDone) return;
    const startBtn = document.getElementById('start-quiz-circuits');
    if (!startBtn) return;
    
    window.initCircuitsQuizDone = true;

    let currentPageCircuits = 1;
    let startTimeCircuits = Date.now();
    let timerIntervalCircuits = null;
    
    const correctAnswersCircuits = {
        q1: 'Assen',
        q2: 'Mugello',
        q3: 'منعطف لوكي هايتس',
        q4: '362,4 كم/ساعة',
        q5: 'Circuit de Catalunya',
        q6: 'Losail (Qatar)',
        q7: 'منعطف 8 - "كورك سكرو"',
        q8: 'Sepang',
        q9: 'Autodromo Termas de Rio Hondo',
        q10: 'Silverstone',
        q11: 'منعطف ستونر',
        q12: 'Circuit des Amériques (COTA)'
    };
    
    const questionsDataCircuits = [
        {
            q: 'q1', 
            title: 'أي حلبة تسمى "كاتدرائية" موتو جي بي؟', 
            cat: 'أسطورة', 
            options: ['سيلفرستون', 'موجيلو', 'آسن', 'خيريز'],
            info: '🇳🇱 حلبة تي تي آسن في هولندا'
        },
        {
            q: 'q2', 
            title: 'في أي حلبة إيطالية يثير منعطف "أرابيتا" حماس الجماهير؟', 
            cat: 'إيطاليا', 
            options: ['إيمولا', 'موجيلو', 'ميزانو', 'مونزا'],
            info: '🏔️ موجيلو - منعطف سريع صاعد'
        },
        {
            q: 'q3', 
            title: 'أي منعطف في فيليب آيلاند يوفر أفضل إطلالة بانورامية؟', 
            cat: 'أستراليا', 
            options: ['مستقيم جاردنر', 'منعطف لوكي هايتس', 'منعطف دوهان', 'الحلقة الجنوبية'],
            info: '🏖️ تطل على المحيط الهادئ'
        },
        {
            q: 'q4', 
            title: 'ما هي السرعة القصوى التي تم الوصول إليها في مستقيم موجيلو؟', 
            cat: 'أرقام قياسية', 
            options: ['356,7 كم/ساعة', '362,4 كم/ساعة', '349,3 كم/ساعة', '371,6 كم/ساعة'],
            info: '🚀 أسرع مستقيم في البطولة'
        },
        {
            q: 'q5', 
            title: 'أي حلبة تستضيف جائزة كتالونيا الكبرى؟', 
            cat: 'إسبانيا', 
            options: ['حلبة ريكاردو تورمو', 'حلبة كتالونيا', 'موتورلاند أراغون', 'حلبة خيريز'],
            info: '🏙️ بالقرب من برشلونة - حلبة تقنية للغاية'
        },
        {
            q: 'q6', 
            title: 'أول حلبة تستضيف سباقاً ليلياً في موتو جي بي؟', 
            cat: 'ليلي', 
            options: ['سيبانغ', 'لوسيل (قطر)', 'ياس مارينا', 'سنغافورة'],
            info: '✨ سباق تحت الأضواء منذ 2008'
        },
        {
            q: 'q7', 
            title: 'ما هو المنعطف الأكثر شهرة في لاغونا سيكا؟', 
            cat: 'الولايات المتحدة', 
            options: ['منعطف 6 - "ريني"', 'منعطف 8 - "كورك سكرو"', 'منعطف 11', 'منعطف 2'],
            info: '🎢 هبوط مذهل بارتفاع 18 متراً'
        },
        {
            q: 'q8', 
            title: 'حلبة معروفة بدرجات حرارة شديدة (40 درجة مئوية+)؟', 
            cat: 'حرارة', 
            options: ['بوريرام', 'سيبانغ', 'مانداليكا', 'لوسيل'],
            info: '🇲🇾 ماليزيا - رطوبة استوائية شديدة'
        },
        {
            q: 'q9', 
            title: 'أي حلبة في أمريكا الجنوبية انضمت إلى التقويم في 2014؟', 
            cat: 'أمريكا الجنوبية', 
            options: ['إنترلاغوس', 'أوتودرومو تيرماس دي ريو هوندو', 'بوينس آيرس', 'برازيليا'],
            info: '🇦🇷 الأرجنتين - سريعة وتقنية للغاية'
        },
        {
            q: 'q10', 
            title: 'حلبة موتو جي بي البريطانية منذ 2010؟', 
            cat: 'المملكة المتحدة', 
            options: ['دونينجتون بارك', 'سيلفرستون', 'براندز هاتش', 'كادويل بارك'],
            info: '🏎️ معبد السرعة البريطاني'
        },
        {
            q: 'q11', 
            title: 'أي منعطف في فيليب آيلاند سمي تيمناً ببطل أسترالي؟', 
            cat: 'تكريم', 
            options: ['منعطف دوهان', 'منعطف ميلر', 'منعطف ستونر', 'منعطف جاردنر'],
            info: '🇦🇺 كيسي ستونر - أسطورة محلية'
        },
        {
            q: 'q12', 
            title: 'أي حلبة أمريكية بها منعطف يسمى "بيج ريد"؟', 
            cat: 'تكساس', 
            options: ['إنديانابوليس', 'حلبة الأمريكتين (COTA)', 'رود أتلانتا', 'لاغونا سيكا'],
            info: '🤠 أوستن، تكساس - صعود مذهل'
        }
    ];
    
    function startTimerCircuits() {
        if (timerIntervalCircuits) clearInterval(timerIntervalCircuits);
        startTimeCircuits = Date.now();
        timerIntervalCircuits = setInterval(updateTimerCircuits, 1000);
    }
    
    function updateTimerCircuits() {
        const elapsed = Math.floor((Date.now() - startTimeCircuits) / 1000);
        const minutes = Math.floor(elapsed / 60);
        const seconds = elapsed % 60;
        const timerEl = document.getElementById('quiz-timer-circuits');
        if (timerEl) timerEl.textContent = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
    }
    
    function updateProgressCircuits() {
        const progressText = document.getElementById('quiz-progress-text-circuits');
        const progressBar = document.getElementById('quiz-progress-bar-circuits');
        const progressContainer = document.getElementById('quiz-progress-container-circuits');
        
        if (progressText) progressText.textContent = 'سؤال ' + currentPageCircuits + '/12';
        if (progressBar) progressBar.style.width = ((currentPageCircuits / 12) * 100) + '%';
        if (progressContainer) progressContainer.style.display = 'block';
    }
    
    function startQuiz() {
        document.getElementById('start-quiz-circuits').style.display = 'none';
        const container = document.getElementById('quiz-form-circuits');
        container.style.display = 'block';
        container.innerHTML = '';
        
        questionsDataCircuits.forEach((data, index) => {
            const pageNum = index + 1;
            const isFirst = pageNum === 1;
            const isLast = pageNum === 12;
            
            const html = \`
    <div className="quiz-page-circuits" id="page-circuits-\${pageNum}" style="background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 40px; margin-bottom: 20px; display: \${isFirst ? 'block' : 'none'};">
        <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 15px;">
            <div style="background: linear-gradient(135deg, #e63946, #f77f00); width: 55px; height: 55px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.6em; font-weight: 800; color: white; box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3);">\${pageNum}</div>
            <div style="text-transform: uppercase; font-size: 0.85em; letter-spacing: 1.2px; color: #f77f00; background: rgba(247, 127, 0, 0.15); padding: 8px 16px; border-radius: 20px; border: 1px solid rgba(247, 127, 0, 0.3);">\${data.cat}</div>
        </div>
        <h3 style="font-size: 1.5em; margin: 25px 0; line-height: 1.5; color: #e2e8f0;">\${data.title}</h3>
        <div style="background: rgba(247, 127, 0, 0.08); border-left: 3px solid #f77f00; padding: 12px 15px; margin-bottom: 25px; border-radius: 8px;">
            <span style="font-size: 0.95em; color: #cbd5e1;">💡 <em>\${data.info}</em></span>
        </div>
        <div className="options-circuits" style="display: grid; gap: 12px;">
            \${data.options.map(opt => \`
                <label style="display: flex; align-items: center; gap: 15px; padding: 20px; background: rgba(255,255,255,0.03); border: 2px solid rgba(255,255,255,0.1); border-radius: 12px; cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden;" onmouseover="this.style.borderColor='rgba(247, 127, 0, 0.5)'; this.style.background='rgba(247, 127, 0, 0.05)';" onmouseout="this.style.borderColor='rgba(255,255,255,0.1)'; this.style.background='rgba(255,255,255,0.03)';">
                    <input type="radio" name="\${data.q}" value="\${opt}" style="width: 22px; height: 22px; accent-color: #f77f00; flex-shrink: 0;" />
                    <span style="font-size: 1.1em; font-weight: 500;">\${opt}</span>
                </label>
            \`).join('')}
        </div>
        <div style="display: flex; gap: 10px; margin-top: 35px;">
            \${!isFirst ? '<button type="button" class="prev-btn-circuits" style="flex:1; background: rgba(255,255,255,0.05); color: #cbd5e1; border: 2px solid rgba(255,255,255,0.2); padding: 16px 32px; border-radius: 12px; font-size: 1.05em; font-weight: 600; cursor: pointer; transition: all 0.3s;" onmouseover="this.style.background=\'rgba(255,255,255,0.1)\'" onmouseout="this.style.background=\'rgba(255,255,255,0.05)\'">← السابق</button>' : ''}
            <button type="button" class="\${isLast ? 'submit-btn-circuits' : 'next-btn-circuits'}" style="flex:2; background: linear-gradient(135deg, \${isLast ? '#22c55e, #16a34a' : '#e63946, #f77f00'}); color: white; border: none; padding: 16px 42px; border-radius: 12px; font-size: 1.1em; font-weight: 700; cursor: pointer; box-shadow: 0 4px 15px rgba(\${isLast ? '34, 197, 94' : '230, 57, 70'}, 0.3); transition: all 0.3s;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(\${isLast ? '34, 197, 94' : '230, 57, 70'}, 0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(\${isLast ? '34, 197, 94' : '230, 57, 70'}, 0.3)'">\${isLast ? '🏁 إنهاء' : 'التالي →'}</button>
        </div>
    </div>\`;
            
            container.insertAdjacentHTML('beforeend', html);
        });
        
        const nextBtns = container.querySelectorAll('.next-btn-circuits');
        for(let i=0; i<nextBtns.length; i++) {
            nextBtns[i].onclick = function() {
                document.getElementById('page-circuits-' + currentPageCircuits).style.display = 'none';
                currentPageCircuits++;
                document.getElementById('page-circuits-' + currentPageCircuits).style.display = 'block';
                updateProgressCircuits();
                document.getElementById('page-circuits-' + currentPageCircuits).scrollIntoView({ behavior: 'smooth', block: 'start' });
            };
        }
        
        const prevBtns = container.querySelectorAll('.prev-btn-circuits');
        for(let i=0; i<prevBtns.length; i++) {
            prevBtns[i].onclick = function() {
                document.getElementById('page-circuits-' + currentPageCircuits).style.display = 'none';
                currentPageCircuits--;
                document.getElementById('page-circuits-' + currentPageCircuits).style.display = 'block';
                updateProgressCircuits();
                document.getElementById('page-circuits-' + currentPageCircuits).scrollIntoView({ behavior: 'smooth', block: 'start' });
            };
        }
        
        const submitBtn = container.querySelector('.submit-btn-circuits');
        if(submitBtn) submitBtn.onclick = submitQuizCircuits;
        
        startTimerCircuits();
        updateProgressCircuits();
        container.scrollIntoView({ behavior: 'smooth' });
    }
    
    function submitQuizCircuits() {
        if (timerIntervalCircuits) clearInterval(timerIntervalCircuits);
        
        let score = 0;
        for (const q in correctAnswersCircuits) {
            const selected = document.querySelector('input[name="' + q + '"]:checked');
            if (selected && selected.value === correctAnswersCircuits[q]) score++;
        }
        
        const percentage = Math.round((score / 12) * 100);
        const emoji = percentage === 100 ? '🏆' : percentage >= 80 ? '🏁' : percentage >= 60 ? '🏍️' : percentage >= 40 ? '🏎️' : '🛣️';
        const message = percentage === 100 ? 'مثالي! أنت تعرف الحلبات عن ظهر قلب!' : 
                        percentage >= 80 ? 'خبير في الحلبات الدولية!' :
                        percentage >= 60 ? 'مستوى جيد، استمر في الاستكشاف!' :
                        percentage >= 40 ? 'ليس سيئاً، ولكن هناك مجال للتحسن!' :
                        'تابع المزيد من السباقات للتقدم!';
        const profile = percentage === 100 ? '🏆 سيد الحلبات' : 
                        percentage >= 80 ? '🏁 خبير حلبات' : 
                        percentage >= 60 ? '🏍️ ذواقة' : 
                        percentage >= 40 ? '🏎️ هاوي' : '🛣️ مبتدئ';
        
        document.getElementById('result-emoji-circuits').textContent = emoji;
        document.getElementById('result-score-circuits').textContent = score + '/12 (' + percentage + '%)';
        document.getElementById('result-text-circuits').textContent = message;
        document.getElementById('profile-badge-circuits').textContent = profile;
        
        try {
            if (typeof window.save2RoueQuizResult === 'function') {
                window.save2RoueQuizResult(score, 12, 'MotoGP Circuits', profile.split(' ').slice(1).join(' '));
            }
        } catch(e) { console.error(e); }
        
        const shareText = 'لقد حصلت على ' + score + '/12 (' + percentage + '%) في اختبار حلبات موتو جي بي! 🏁 هل تعرف المسارات الأسطورية؟ اختبر نفسك على 2roue.com';
        document.getElementById('share-whatsapp-circuits').href = 'https://wa.me/?text=' + encodeURIComponent(shareText);
        
        document.getElementById('quiz-form-circuits').style.display = 'none';
        document.getElementById('quiz-progress-container-circuits').style.display = 'none';
        const resDiv = document.getElementById('quiz-result-circuits');
        resDiv.style.display = 'block';
        resDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
    
    if (startBtn) startBtn.onclick = startQuiz;
    
    const restartBtn = document.querySelector('.restart-btn-circuits');
    if(restartBtn) {
        restartBtn.onclick = function() {
            document.getElementById('quiz-result-circuits').style.display = 'none';
            document.getElementById('quiz-form-circuits').style.display = 'none';
            document.getElementById('start-quiz-circuits').style.display = 'inline-block';
            currentPageCircuits = 1;
            window.scrollTo({top: 0, behavior: 'smooth'});
        };
    }
};

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', window.initCircuitsQuiz);
} else {
    window.initCircuitsQuiz();
}
setTimeout(function() {
    if(!window.initCircuitsQuizDone && window.initCircuitsQuiz) window.initCircuitsQuiz();
}, 500);

window.startTimerCircuits = function() {};
`} />