# 🏁 MotoGP Circuit Quiz: Do You Know the Championship's Mythical Tracks?

Test your knowledge of legendary MotoGP circuits! 12 questions on iconic corners, speed records, and famous tracks.

---

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


{/* Hero Section */}
<div className="article-container" style={{textAlign: 'center', padding: '40px 20px'}}>
    <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'}}>🏁 MYTHICAL CIRCUITS</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'}}>
        MotoGP Legendary Circuits Quiz
    </h1>
    
    <p style={{fontSize: '1.2em', color: '#cbd5e1', maxWidth: '700px', margin: '0 auto 30px', lineHeight: '1.6'}}>
        From Mugello to Phillip Island, every circuit tells a story. <strong style={{color: '#f77f00'}}>12 captivating questions</strong> on iconic corners, speed records, and the secrets of the world's best tracks!
    </p>
    
    <img src="/images/articles/motogp-circuit-hero.webp" alt="MotoGP Circuit" 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">Mythical Corners</div>
        </div>
        <div className="hero-info-card">
            <div style={{fontSize: '2em', marginBottom: '5px'}}>⚡</div>
            <div className="hero-info-text">Speed Records</div>
        </div>
        <div className="hero-info-card">
            <div style={{fontSize: '2em', marginBottom: '5px'}}>🌍</div>
            <div className="hero-info-text">Global Tracks</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'}}>
        🚀 START QUIZ
    </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'}}>
    <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">Question 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'}}>
    {/* 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'}}>
    <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'}}>Final Result</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'}}>🔄 Restart</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'}}>📊 My Profile</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'}}>📱 Share</a>
        </div>
    </div>
</div>

<img src="/images/articles/motogp-circuit-aerial.webp" alt="Aerial view of circuit" 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: 'Lukey Heights Corner',
        q4: '362.4 km/h',
        q5: 'Circuit de Catalunya',
        q6: 'Losail (Qatar)',
        q7: 'Turn 8 - "Corkscrew"',
        q8: 'Sepang',
        q9: 'Autodromo Termas de Rio Hondo',
        q10: 'Silverstone',
        q11: 'Stoner Corner',
        q12: 'Circuit of the Americas (COTA)'
    };
    
    const questionsDataCircuits = [
        {
            q: 'q1', 
            title: 'Which circuit is nicknamed "The Cathedral" of MotoGP?', 
            cat: '🏛️ LEGEND', 
            options: ['Silverstone', 'Mugello', 'Assen', 'Jerez'],
            info: '🇳🇱 The TT Circuit Assen in the Netherlands'
        },
        {
            q: 'q2', 
            title: 'On which Italian circuit does the "Arrabiata" corner thrill fans?', 
            cat: '🇮🇹 ITALY', 
            options: ['Imola', 'Mugello', 'Misano', 'Monza'],
            info: '🏔️ Mugello - fast uphill corner'
        },
        {
            q: 'q3', 
            title: 'Which corner at Phillip Island offers the best panoramic view?', 
            cat: '🌊 AUSTRALIA', 
            options: ['Gardner Straight', 'Lukey Heights Corner', 'Doohan Corner', 'Southern Loop'],
            info: '🏖️ Overlooking the Pacific Ocean'
        },
        {
            q: 'q4', 
            title: 'What max speed was reached on the Mugello straight?', 
            cat: '⚡ RECORDS', 
            options: ['356.7 km/h', '362.4 km/h', '349.3 km/h', '371.6 km/h'],
            info: '🚀 Fastest straight in the championship'
        },
        {
            q: 'q5', 
            title: 'Which circuit hosts the Catalan Grand Prix?', 
            cat: '🇪🇸 SPAIN', 
            options: ['Circuit Ricardo Tormo', 'Circuit de Catalunya', 'MotorLand Aragon', 'Circuito de Jerez'],
            info: '🏙️ Near Barcelona - very technical circuit'
        },
        {
            q: 'q6', 
            title: 'First circuit to host a night race in MotoGP?', 
            cat: '🌙 NIGHT', 
            options: ['Sepang', 'Losail (Qatar)', 'Yas Marina', 'Singapore'],
            info: '✨ Racing under floodlights since 2008'
        },
        {
            q: 'q7', 
            title: 'What is the most famous corner at Laguna Seca?', 
            cat: '🇺🇸 USA', 
            options: ['Turn 6 - "Rainey Curve"', 'Turn 8 - "Corkscrew"', 'Turn 11', 'Turn 2'],
            info: '🎢 Dizzying 18-meter drop'
        },
        {
            q: 'q8', 
            title: 'Circuit known for extreme temperatures (40°C+)?', 
            cat: '🔥 HEAT', 
            options: ['Buriram', 'Sepang', 'Mandalika', 'Losail'],
            info: '🇲🇾 Malaysia - intense tropical humidity'
        },
        {
            q: 'q9', 
            title: 'Which South American circuit joined the calendar in 2014?', 
            cat: '🌎 SOUTH AMERICA', 
            options: ['Interlagos', 'Autodromo Termas de Rio Hondo', 'Buenos Aires', 'Brasilia'],
            info: '🇦🇷 Argentina - very fast and technical'
        },
        {
            q: 'q10', 
            title: 'British MotoGP circuit since 2010?', 
            cat: '🇬🇧 UK', 
            options: ['Donington Park', 'Silverstone', 'Brands Hatch', 'Cadwell Park'],
            info: '🏎️ Temple of British speed'
        },
        {
            q: 'q11', 
            title: 'Which corner at Phillip Island is named after an Australian champion?', 
            cat: '🏆 TRIBUTE', 
            options: ['Doohan Corner', 'Miller Corner', 'Stoner Corner', 'Gardner Corner'],
            info: '🇦🇺 Casey Stoner - local legend'
        },
        {
            q: 'q12', 
            title: 'Which American circuit has a corner named "Big Red"?', 
            cat: '🏁 TEXAS', 
            options: ['Indianapolis', 'Circuit of the Americas (COTA)', 'Road Atlanta', 'Laguna Seca'],
            info: '🤠 Austin, Texas - spectacular uphill'
        }
    ];
    
    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 = 'Question ' + 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)\'">← Previous</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 ? '🏁 Finish' : 'Next →'}</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 ? 'Perfect! You know the circuits by heart!' : 
                        percentage >= 80 ? 'International track expert!' :
                        percentage >= 60 ? 'Good level, keep exploring!' :
                        percentage >= 40 ? 'Not bad, but room for improvement!' :
                        'Follow more races to progress!';
        const profile = percentage === 100 ? '🏆 Circuit Master' : 
                        percentage >= 80 ? '🏁 Track Expert' : 
                        percentage >= 60 ? '🏍️ Connoisseur' : 
                        percentage >= 40 ? '🏎️ Amateur' : '🛣️ Beginner';
        
        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 = 'I got ' + score + '/12 (' + percentage + '%) on the MotoGP Circuits Quiz! 🏁 Do you know the mythical tracks? Test yourself on 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() {};
`} />