<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chan Hall Training Quiz</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #2d1f1a 0%, #4a3728 50%, #2d1f1a 100%);
            min-height: 100vh;
            padding: 20px;
            color: #333;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
        }

        .card {
            background: linear-gradient(180deg, #faf8f5 0%, #f5f0e8 100%);
            border-radius: 16px;
            padding: 30px;
            margin-bottom: 20px;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(212, 175, 55, 0.3);
        }

        header {
            text-align: center;
            margin-bottom: 20px;
        }

        .lotus-icon {
            font-size: 3rem;
            margin-bottom: 10px;
        }

        h1 {
            color: #5c4033;
            font-size: 1.8rem;
            margin-bottom: 5px;
        }

        .subtitle {
            color: #8b7355;
            font-size: 1rem;
        }

        /* Progress Bar */
        .progress-container {
            margin: 20px 0;
        }

        .progress-text {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 0.9rem;
            color: #5c4033;
        }

        .progress-bar {
            height: 8px;
            background: #e0d5c5;
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #d4af37, #f4d03f);
            border-radius: 4px;
            transition: width 0.3s ease;
        }

        /* Quiz Content */
        .quiz-area {
            text-align: center;
        }

        .image-container {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: inset 0 2px 8px rgba(0,0,0,0.1);
            min-height: 250px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .item-image {
            max-width: 100%;
            max-height: 220px;
            border-radius: 8px;
            object-fit: contain;
        }

        .placeholder-image {
            width: 200px;
            height: 200px;
            background: linear-gradient(135deg, #e8e0d5 0%, #d5cbbf 100%);
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #8b7355;
            font-size: 4rem;
        }

        .placeholder-image span {
            font-size: 0.9rem;
            margin-top: 10px;
        }

        .question-text {
            font-size: 1.2rem;
            color: #5c4033;
            margin: 20px 0;
            font-weight: 500;
        }

        /* Answer Options */
        .options {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-top: 20px;
        }

        @media (max-width: 500px) {
            .options {
                grid-template-columns: 1fr;
            }
        }

        .option-btn {
            background: #fff;
            border: 2px solid #d5cbbf;
            border-radius: 10px;
            padding: 15px 20px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.2s;
            color: #5c4033;
        }

        .option-btn:hover {
            border-color: #d4af37;
            background: #fffbf0;
            transform: translateY(-2px);
        }

        .option-btn.correct {
            background: #d4edda;
            border-color: #28a745;
            color: #155724;
        }

        .option-btn.incorrect {
            background: #f8d7da;
            border-color: #dc3545;
            color: #721c24;
        }

        .option-btn:disabled {
            cursor: not-allowed;
            transform: none;
        }

        /* Feedback */
        .feedback {
            margin-top: 20px;
            padding: 15px;
            border-radius: 10px;
            display: none;
        }

        .feedback.show {
            display: block;
        }

        .feedback.correct {
            background: #d4edda;
            color: #155724;
        }

        .feedback.incorrect {
            background: #f8d7da;
            color: #721c24;
        }

        .feedback-title {
            font-weight: 600;
            margin-bottom: 5px;
        }

        /* Next Button */
        .next-btn {
            background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
            color: #3d2914;
            border: none;
            border-radius: 10px;
            padding: 15px 40px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            margin-top: 20px;
            display: none;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .next-btn.show {
            display: inline-block;
        }

        .next-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
        }

        /* Results Screen */
        .results {
            text-align: center;
            display: none;
        }

        .results.show {
            display: block;
        }

        .score-circle {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 30px auto;
            box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
        }

        .score-number {
            font-size: 2.5rem;
            font-weight: bold;
            color: #3d2914;
        }

        .score-label {
            font-size: 0.9rem;
            color: #5c4033;
        }

        .results-message {
            font-size: 1.3rem;
            color: #5c4033;
            margin: 20px 0;
        }

        .restart-btn {
            background: linear-gradient(135deg, #5c4033 0%, #8b7355 100%);
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 15px 40px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .restart-btn:hover {
            transform: translateY(-2px);
        }

        /* Start Screen */
        .start-screen {
            text-align: center;
        }

        .start-screen p {
            color: #5c4033;
            margin: 15px 0;
            line-height: 1.6;
        }

        .start-btn {
            background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
            color: #3d2914;
            border: none;
            border-radius: 10px;
            padding: 18px 50px;
            font-size: 1.2rem;
            font-weight: 600;
            cursor: pointer;
            margin-top: 20px;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .start-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
        }

        .item-count {
            background: #e8e0d5;
            display: inline-block;
            padding: 8px 20px;
            border-radius: 20px;
            color: #5c4033;
            font-size: 0.9rem;
            margin-top: 15px;
        }

        /* Footer */
        footer {
            text-align: center;
            color: rgba(255,255,255,0.6);
            padding: 20px;
            font-size: 0.85rem;
        }

        footer a {
            color: #d4af37;
        }

        /* Admin link */
        .admin-link {
            text-align: center;
            margin-top: 10px;
        }

        .admin-link a {
            color: #8b7355;
            font-size: 0.85rem;
            text-decoration: none;
        }

        .admin-link a:hover {
            color: #d4af37;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <header>
                <div class="lotus-icon">🪷</div>
                <h1>Chan Hall Training Quiz</h1>
                <p class="subtitle">Acolyte Ceremony Items</p>
            </header>

            <!-- Start Screen -->
            <div id="startScreen" class="start-screen">
                <p>Test your knowledge of the items used during Buddhist ceremonies in the Chan Hall.</p>
                <p>You'll see an image and need to identify the correct item name.</p>
                <div class="item-count" id="itemCount">15 items to learn</div>
                <br>
                <button class="start-btn" onclick="startQuiz()">Begin Training</button>
            </div>

            <!-- Quiz Area -->
            <div id="quizArea" class="quiz-area" style="display: none;">
                <div class="progress-container">
                    <div class="progress-text">
                        <span>Question <span id="currentQ">1</span> of <span id="totalQ">15</span></span>
                        <span id="scoreDisplay">Score: 0</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" id="progressFill" style="width: 0%"></div>
                    </div>
                </div>

                <div class="image-container">
                    <img id="itemImage" class="item-image" src="" alt="Identify this item" style="display: none;">
                    <div id="placeholderImage" class="placeholder-image">
                        <span id="placeholderEmoji">🔔</span>
                        <span>Image placeholder</span>
                    </div>
                </div>

                <p class="question-text">What is this item called?</p>

                <div class="options" id="options"></div>

                <div class="feedback" id="feedback">
                    <div class="feedback-title" id="feedbackTitle"></div>
                    <div id="feedbackText"></div>
                </div>

                <button class="next-btn" id="nextBtn" onclick="nextQuestion()">Next Question</button>
            </div>

            <!-- Results Screen -->
            <div id="resultsScreen" class="results">
                <h2 style="color: #5c4033;">Training Complete!</h2>
                <div class="score-circle">
                    <div class="score-number" id="finalScore">0%</div>
                    <div class="score-label">Score</div>
                </div>
                <p class="results-message" id="resultsMessage"></p>
                <button class="restart-btn" onclick="restartQuiz()">Practice Again</button>
            </div>

            <div class="admin-link">
                <a href="edit.html">✏️ Edit quiz items</a>
            </div>
        </div>
    </div>

    <footer>
        <p>Chan Hall Acolyte Training | <a href="/">Back to Home</a></p>
    </footer>

    <script>
        // Default quiz items - can be customized via edit.html
        const defaultItems = [
            {
                id: 1,
                name: "Singing Bowl",
                chinese: "引磬",
                pinyin: "yǐn qìng",
                description: "A metal bowl struck with a mallet to mark transitions in ceremony and meditation.",
                emoji: "🔔",
                image: "images/singing-bowl.jpg"
            },
            {
                id: 2,
                name: "Wooden Fish",
                chinese: "木魚",
                pinyin: "mù yú",
                description: "Hollow wooden percussion instrument shaped like a fish, used to keep rhythm during chanting.",
                emoji: "🐟",
                image: "images/wooden-fish.jpg"
            },
            {
                id: 3,
                name: "Incense Burner",
                chinese: "香爐",
                pinyin: "xiāng lú",
                description: "Vessel for burning incense offerings, often placed on the altar.",
                emoji: "🏺",
                image: "images/incense-burner.jpg"
            },
            {
                id: 4,
                name: "Incense Sticks",
                chinese: "香",
                pinyin: "xiāng",
                description: "Fragrant sticks burned as offerings, symbolizing the spreading of dharma.",
                emoji: "🧘",
                image: "images/incense-sticks.jpg"
            },
            {
                id: 5,
                name: "Meditation Cushion",
                chinese: "蒲團",
                pinyin: "pú tuán",
                description: "Round cushion for sitting meditation, elevates hips for proper posture.",
                emoji: "⭕",
                image: "images/meditation-cushion.jpg"
            },
            {
                id: 6,
                name: "Prayer Beads",
                chinese: "念珠",
                pinyin: "niàn zhū",
                description: "String of 108 beads used for counting mantras and prostrations.",
                emoji: "📿",
                image: "images/prayer-beads.jpg"
            },
            {
                id: 7,
                name: "Bell",
                chinese: "鈴",
                pinyin: "líng",
                description: "Handheld bell rung to signal the start and end of meditation periods.",
                emoji: "🔔",
                image: "images/bell.jpg"
            },
            {
                id: 8,
                name: "Dharma Drum",
                chinese: "法鼓",
                pinyin: "fǎ gǔ",
                description: "Large drum used during ceremonies to accompany chanting.",
                emoji: "🥁",
                image: "images/dharma-drum.jpg"
            },
            {
                id: 9,
                name: "Prostration Mat",
                chinese: "拜墊",
                pinyin: "bài diàn",
                description: "Padded mat for performing prostrations (bowing) during ceremonies.",
                emoji: "🧎",
                image: "images/prostration-mat.jpg"
            },
            {
                id: 10,
                name: "Altar Cloth",
                chinese: "桌圍",
                pinyin: "zhuō wéi",
                description: "Decorative cloth covering the altar table, often in traditional colors.",
                emoji: "🎨",
                image: "images/altar-cloth.jpg"
            },
            {
                id: 11,
                name: "Candle Holders",
                chinese: "燭台",
                pinyin: "zhú tái",
                description: "Stands for holding candles on the altar, representing wisdom.",
                emoji: "🕯️",
                image: "images/candle-holders.jpg"
            },
            {
                id: 12,
                name: "Flower Vase",
                chinese: "花瓶",
                pinyin: "huā píng",
                description: "Vessel for fresh flower offerings, symbolizing impermanence.",
                emoji: "💐",
                image: "images/flower-vase.jpg"
            },
            {
                id: 13,
                name: "Sutra Book",
                chinese: "經書",
                pinyin: "jīng shū",
                description: "Buddhist scripture text used for group chanting during services.",
                emoji: "📖",
                image: "images/sutra-book.jpg"
            },
            {
                id: 14,
                name: "Offering Tray",
                chinese: "供盤",
                pinyin: "gōng pán",
                description: "Tray for presenting fruit, tea, or other offerings to the Buddha.",
                emoji: "🍎",
                image: "images/offering-tray.jpg"
            },
            {
                id: 15,
                name: "Keisu",
                chinese: "磬",
                pinyin: "qìng",
                description: "Bowl-shaped gong struck to signal sections of the service.",
                emoji: "🔊",
                image: "images/keisu.jpg"
            }
        ];

        // Load custom items from localStorage or use defaults
        let quizItems = JSON.parse(localStorage.getItem('chanHallItems')) || defaultItems;

        let currentQuestion = 0;
        let score = 0;
        let shuffledItems = [];
        let answered = false;

        function shuffleArray(array) {
            const shuffled = [...array];
            for (let i = shuffled.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
            }
            return shuffled;
        }

        function startQuiz() {
            // Reload items in case they were edited
            quizItems = JSON.parse(localStorage.getItem('chanHallItems')) || defaultItems;

            shuffledItems = shuffleArray(quizItems);
            currentQuestion = 0;
            score = 0;
            answered = false;

            document.getElementById('startScreen').style.display = 'none';
            document.getElementById('quizArea').style.display = 'block';
            document.getElementById('resultsScreen').classList.remove('show');
            document.getElementById('totalQ').textContent = shuffledItems.length;

            showQuestion();
        }

        function showQuestion() {
            answered = false;
            const item = shuffledItems[currentQuestion];

            // Update progress
            document.getElementById('currentQ').textContent = currentQuestion + 1;
            document.getElementById('scoreDisplay').textContent = `Score: ${score}`;
            document.getElementById('progressFill').style.width =
                `${((currentQuestion) / shuffledItems.length) * 100}%`;

            // Show image or placeholder
            const img = document.getElementById('itemImage');
            const placeholder = document.getElementById('placeholderImage');

            if (item.image) {
                img.src = item.image;
                img.style.display = 'block';
                placeholder.style.display = 'none';
            } else {
                img.style.display = 'none';
                placeholder.style.display = 'flex';
                document.getElementById('placeholderEmoji').textContent = item.emoji || '❓';
            }

            // Generate options (1 correct + 3 random)
            const otherItems = quizItems.filter(i => i.id !== item.id);
            const wrongAnswers = shuffleArray(otherItems).slice(0, 3);
            const allOptions = shuffleArray([item, ...wrongAnswers]);

            const optionsContainer = document.getElementById('options');
            optionsContainer.innerHTML = '';

            allOptions.forEach(option => {
                const btn = document.createElement('button');
                btn.className = 'option-btn';
                btn.textContent = option.name;
                if (option.chinese) {
                    btn.textContent += ` (${option.chinese})`;
                }
                btn.onclick = () => selectAnswer(option.id === item.id, item);
                optionsContainer.appendChild(btn);
            });

            // Hide feedback and next button
            document.getElementById('feedback').classList.remove('show', 'correct', 'incorrect');
            document.getElementById('nextBtn').classList.remove('show');
        }

        function selectAnswer(isCorrect, item) {
            if (answered) return;
            answered = true;

            const buttons = document.querySelectorAll('.option-btn');
            buttons.forEach(btn => {
                btn.disabled = true;
                const btnName = btn.textContent.split(' (')[0];
                if (btnName === item.name) {
                    btn.classList.add('correct');
                } else if (!isCorrect && btn === event.target) {
                    btn.classList.add('incorrect');
                }
            });

            const feedback = document.getElementById('feedback');
            const feedbackTitle = document.getElementById('feedbackTitle');
            const feedbackText = document.getElementById('feedbackText');

            if (isCorrect) {
                score++;
                feedback.classList.add('correct');
                feedbackTitle.textContent = '✓ Correct!';
            } else {
                feedback.classList.add('incorrect');
                feedbackTitle.textContent = '✗ Not quite';
            }

            let desc = item.description;
            if (item.pinyin) {
                desc = `${item.chinese} (${item.pinyin}): ${desc}`;
            }
            feedbackText.textContent = desc;

            feedback.classList.add('show');
            document.getElementById('nextBtn').classList.add('show');
            document.getElementById('scoreDisplay').textContent = `Score: ${score}`;
        }

        function nextQuestion() {
            currentQuestion++;

            if (currentQuestion >= shuffledItems.length) {
                showResults();
            } else {
                showQuestion();
            }
        }

        function showResults() {
            document.getElementById('quizArea').style.display = 'none';
            document.getElementById('resultsScreen').classList.add('show');

            const percentage = Math.round((score / shuffledItems.length) * 100);
            document.getElementById('finalScore').textContent = `${percentage}%`;

            let message;
            if (percentage === 100) {
                message = "🪷 Perfect! You know all the Chan Hall items!";
            } else if (percentage >= 80) {
                message = "Excellent work! Almost ready to serve.";
            } else if (percentage >= 60) {
                message = "Good progress! Keep practicing.";
            } else {
                message = "Keep studying—you'll get there!";
            }
            document.getElementById('resultsMessage').textContent = message;
        }

        function restartQuiz() {
            document.getElementById('resultsScreen').classList.remove('show');
            document.getElementById('startScreen').style.display = 'block';
        }

        // Update item count on load
        document.getElementById('itemCount').textContent = `${quizItems.length} items to learn`;
    </script>
</body>
</html>
