A!leys Galerie

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QuizQuest - Teste dein Wissen</title>
    <style>
        :root {
            --primary: #6366f1;
            --secondary: #a855f7;
            --bg: #0f172a;
            --card: #1e293b;
            --text: #f8fafc;
            --success: #22c55e;
            --error: #ef4444;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg);
            color: var(--text);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        #app {
            background: var(--card);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            width: 90%;
            max-width: 500px;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .question-container {
            margin-bottom: 2rem;
        }

        .options {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        button {
            padding: 1rem;
            border: none;
            border-radius: 0.5rem;
            background: var(--primary);
            color: white;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        button:hover {
            background: var(--secondary);
            transform: translateY(-2px);
        }

        button:active {
            transform: translateY(0);
        }

        .score-display {
            margin-top: 2rem;
            font-size: 1.2rem;
            font-weight: bold;
        }

        .feedback {
            margin-top: 1rem;
            font-weight: bold;
            height: 1.5rem;
        }

        .correct {
            color: var(--success);
            animation: pulse 0.5s ease;
        }

        .incorrect {
            color: var(--error);
            animation: shake 0.5s ease;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }

        .hidden {
            display: none;
        }

        .progress-bar {
            height: 8px;
            background: #334155;
            border-radius: 4px;
            margin-bottom: 1rem;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: var(--primary);
            width: 0%;
            transition: width 0.3s ease;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="start-screen">
            <h1>QuizQuest</h1>
            <p>Bist du bereit für die Herausforderung?</p>
            <button onclick="startQuiz()">Starten</button>
        </div>

        <div id="quiz-screen" class="hidden">
            <div class="progress-bar">
                <div id="progress-fill" class="progress-fill"></div>
            </div>
            <div class="question-container">
                <h2 id="question-text">Frage hier</h2>
                <div id="options-container" class="options"></div>
            </div>
            <div id="feedback" class="feedback"></div>
            <div class="score-display">Score: <span id="score">0</span></div>
        </div>

        <div id="result-screen" class="hidden">
            <h1>Ergebnis</h1>
            <p id="final-score"></p>
            <button onclick="resetQuiz()">Nochmal spielen</button>
        </div>
    </div>

    <script>
        const questions = [
            {
                question: "Was ist die Hauptstadt von Frankreich?",
                options: ["Paris", "Lyon", "Marseille", "Bordeaux"],
                correct: 0
            },
            {
                question: "Welches Element hat das Symbol 'H'?",
                options: ["Helium", "Wasserstoff", "Holmium", "Hafnium"],
                correct: 1
            },
            {
                question: "Wie viele Planeten hat unser Sonnensystem?",
                options: ["7", "8", "9", "10"],
                correct: 1
            },
            {
                question: "Welche Farbe hat das Blut von Tintenfischen?",
                options: ["Rot", "Blau", "Grün", "Gelb"],
                correct: 1
            },
            {
                question: "Wer schrieb 'Faust'?",
                options: ["Goethe", "Schiller", "Lessing", "Brecht"],
                correct: 0
            }
        ];

        let currentQuestion = 0;
        let score = 0;

        function startQuiz() {
            document.getElementById('start-screen').classList.add('hidden');
            document.getElementById('quiz-screen').classList.remove('hidden');
            showQuestion();
        }

        function showQuestion() {
            const question = questions[currentQuestion];
            document.getElementById('question-text').innerText = question.question;
            const optionsContainer = document.getElementById('options-container');
            optionsContainer.innerHTML = '';

            question.options.forEach((option, index) => {
                const button = document.createElement('button');
                button.innerText = option;
                button.onclick = () => handleAnswer(index);
                optionsContainer.appendChild(button);
            });

            updateProgress();
        }

        function handleAnswer(selectedIndex) {
            const question = questions[currentQuestion];
            const feedback = document.getElementById('feedback');
            
            if (selectedIndex === question.correct) {
                score++;
                feedback.innerText = 'Richtig!';
                feedback.className = 'feedback correct';
            } else {
                feedback.innerText = `Falsch! Richtig war: ${question.options[question.correct]}`;
                feedback.className = 'feedback incorrect';
            }

            document.getElementById('score').innerText = score;

            setTimeout(() => {
                currentQuestion++;
                if (currentQuestion < questions.length) {
                    showQuestion();
                    feedback.innerText = '';
                    feedback.className = 'feedback';
                } else {
                    showResults();
                }
            }, 1500);
        }

        function updateProgress() {
            const progress = (currentQuestion / questions.length) * 100;
            document.getElementById('progress-fill').style.width = `${progress}%`;
        }

        function showResults() {
            document.getElementById('quiz-screen').classList.add('hidden');
            document.getElementById('result-screen').classList.remove('hidden');
            document.getElementById('final-score').innerText = `Du hast ${score} von ${questions.length} Fragen richtig beantwortet.`;
        }

        function resetQuiz() {
            currentQuestion = 0;
            score = 0;
            document.getElementById('score').innerText = score;
            document.getElementById('result-screen').classList.add('hidden');
            document.getElementById('start-screen').classList.remove('hidden');
        }
    </script>
</body>
</html>