💸ドルから円へクエスト🚀

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>💰ドルから円へクイズ🎉</title>
    <style>
        @keyframes bounce {
            0% { transform: scale(1); }
            50% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }
        @keyframes shake {
            0% { transform: translate(1px, 1px) rotate(0deg); }
            10% { transform: translate(-1px, -2px) rotate(-1deg); }
            20% { transform: translate(-3px, 0px) rotate(1deg); }
            30% { transform: translate(3px, 2px) rotate(0deg); }
            40% { transform: translate(1px, -1px) rotate(1deg); }
            50% { transform: translate(-1px, 2px) rotate(-1deg); }
            60% { transform: translate(-3px, 1px) rotate(0deg); }
            70% { transform: translate(3px, 1px) rotate(-1deg); }
            80% { transform: translate(-1px, -1px) rotate(1deg); }
            90% { transform: translate(1px, 2px) rotate(0deg); }
            100% { transform: translate(1px, -2px) rotate(-1deg); }
        }
        @keyframes glow {
            0% { box-shadow: 0 0 5px yellow; }
            50% { box-shadow: 0 0 20px gold; }
            100% { box-shadow: 0 0 5px yellow; }
        }
        .bounce {
            animation: bounce 0.5s;
        }
        .shake {
            animation: shake 0.5s;
        }
        .glow {
            animation: glow 1s infinite;
        }
    </style>
</head>
<body>
    <div style="width: 400px; height: 400px; margin: auto; text-align: center; font-family: Arial, sans-serif;">
        <h1 style="font-size: 24px;">💸ドルから円へクエスト🚀</h1>
        <button id="startBtn" style="padding: 10px 20px; font-size: 18px; cursor: pointer;">🟢 クイズ開始 🟢</button>
        <div id="quizArea" style="margin-top: 20px; display: none;">
            <p id="question" style="font-size: 20px;">❓問題がここに表示されます❓</p>
            <div id="options" style="margin-top: 20px;">
                <button class="optionBtn" style="padding: 10px 15px; margin: 5px; font-size: 16px; cursor: pointer;">選択肢1</button>
                <button class="optionBtn" style="padding: 10px 15px; margin: 5px; font-size: 16px; cursor: pointer;">選択肢2</button>
                <button class="optionBtn" style="padding: 10px 15px; margin: 5px; font-size: 16px; cursor: pointer;">選択肢3</button>
            </div>
            <p id="result" style="font-size: 18px; margin-top: 20px;"></p>
            <button id="nextBtn" style="padding: 8px 16px; font-size: 16px; cursor: pointer; display: none;">🔄 次へ 🔄</button>
        </div>
    </div>
    <script>
        const startBtn = document.getElementById('startBtn');
        const quizArea = document.getElementById('quizArea');
        const questionEl = document.getElementById('question');
        const optionsEl = document.getElementById('options');
        const resultEl = document.getElementById('result');
        const nextBtn = document.getElementById('nextBtn');
        let correctAnswer = 0;

        startBtn.addEventListener('click', startQuiz);
        nextBtn.addEventListener('click', startQuiz);

        function startQuiz() {
            startBtn.style.display = 'none';
            nextBtn.style.display = 'none';
            resultEl.textContent = '';
            optionsEl.style.pointerEvents = 'auto';
            const x = Math.floor(Math.random() * 900) + 1;
            correctAnswer = Math.round((x * 150) / 1000);
            questionEl.innerHTML = `💵$${x} billionは何兆円？📈 (1ドル=150円)`;
            const answers = generateOptions(correctAnswer);
            const buttons = document.querySelectorAll('.optionBtn');
            buttons.forEach((btn, index) => {
                btn.textContent = `🌟 ${answers[index]} 兆円 🌟`;
                btn.className = 'optionBtn';
                btn.style.backgroundColor = '#fff';
                btn.removeEventListener('click', handleOptionClick);
                btn.addEventListener('click', handleOptionClick);
            });
            quizArea.style.display = 'block';
        }

        function generateOptions(correct) {
            let options = [correct];
            while (options.length < 3) {
                let option = correct + Math.floor(Math.random() * 20) - 10;
                if (option > 0 && !options.includes(option)) {
                    options.push(option);
                }
            }
            return shuffle(options);
        }

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

        function handleOptionClick(e) {
            const selected = parseInt(e.target.textContent.replace(/[^0-9]/g, ''));
            if (selected === correctAnswer) {
                e.target.style.backgroundColor = '#a8e6cf';
                e.target.classList.add('glow', 'bounce');
                resultEl.textContent = '🎉 正解です！🎉';
            } else {
                e.target.style.backgroundColor = '#ff8b94';
                e.target.classList.add('shake');
                resultEl.textContent = `😢 不正解。正しい答えは ${correctAnswer} 兆円です。`;
            }
            optionsEl.style.pointerEvents = 'none';
            nextBtn.style.display = 'inline-block';
        }
    </script>
</body>
</html>
```