@media (max-width: 768px) .main-content padding: 20px; .question-text font-size: 1.1em; button padding: 10px 20px; </style> </head> <body> <div class="container"> <div class="header"> <h1>🚗 MPU Test Simulation</h1> <p>Medizinisch-Psychologische Untersuchung - Stuttgart Edition</p> <div class="stuttgart-badge"> 🏰 Stuttgart | Mercedesstraße | Cannstatter Wasen </div> </div>
.question-container background: #f9f9f9; padding: 30px; border-radius: 15px; margin-bottom: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
function updateStats() const answered = userAnswers.filter(a => a !== null).length; const correct = userAnswers.filter((a, idx) => a === questions[idx].correct).length; correctCountEl.textContent = correct; currentQuestionEl.textContent = currentIndex + 1; const progress = ((currentIndex + 1) / totalQuestions) * 100; progressFill.style.width = `$progress%`; progressFill.textContent = `$Math.round(progress)%`; stuttgart,mpu testsimulation stuttgart
function finishTest() const totalCorrect = userAnswers.filter((a, idx) => a === questions[idx].correct).length; const percentage = (totalCorrect / totalQuestions) * 100; let resultText = ''; let recommendationText = ''; let passed = percentage >= 70; if (passed) resultText = `🎊 Glückwunsch! Sie haben $totalCorrect von $totalQuestions Fragen richtig beantwortet ($percentage%).`; recommendationText = "Ihre MPU-Chancen stehen gut! Mit dieser Vorbereitung sind Sie auf dem richtigen Weg. Denken Sie an die persönliche Vorbereitung und Reflexion Ihres Verhaltens."; else resultText = `📊 Sie haben $totalCorrect von $totalQuestions Fragen richtig beantwortet ($percentage%).`; recommendationText = "Sie benötigen mehr Vorbereitung für die MPU in Stuttgart. Empfehlung: Besuchen Sie einen MPU-Vorbereitungskurs und reflektieren Sie Ihr Fahrverhalten ehrlich."; document.getElementById('resultText').innerHTML = resultText; document.getElementById('recommendationText').innerHTML = recommendationText; document.querySelector('.question-container').style.display = 'none'; resultArea.classList.add('show');
function nextQuestion() if (!answerSubmitted && userAnswers[currentIndex] === null) alert('Bitte wählen Sie eine Antwort aus!'); return; if (currentIndex < totalQuestions - 1) currentIndex++; loadQuestion(); else finishTest(); @media (max-width: 768px)
.stuttgart-badge background: rgba(255,255,255,0.2); display: inline-block; padding: 5px 15px; border-radius: 20px; margin-top: 15px; font-size: 0.9em;
.progress-section margin-bottom: 30px;
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Stuttgart MPU Test Simulation</title> <style> * margin: 0; padding: 0; box-sizing: border-box; body font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px;