<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Listening Quiz 4</title>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f0f8ff;
    }
    .quiz-container {
        width: 620px;
        height: auto;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        padding: 15px;
        text-align: center;
    }
    h2 {
        color: #333;
        margin-bottom: 10px;
    }
    .play-button {
        background-color: #28a745;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 50px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
        transition: transform 0.2s, box-shadow 0.2s;
        margin-bottom: 15px;
        margin: 5px;
    }
    .play-button:hover {
        transform: scale(1.05);
        box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
    }
    .text-lines {
        text-align: left;
        margin-bottom: 20px;
        font-size: 16px;
    }
    .text-lines p {
        margin-bottom: 5px;
    }
    .answer-boxes {
        display: flex;
        justify-content: space-around;
        margin-bottom: 15px;
        flex-wrap: wrap;
    }
    .answer-box {
        width: 12%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 10px;
    }
    .answer-box label {
        margin-bottom: 5px;
    }
    .answer-box input {
        padding: 8px;
        font-size: 16px;
        text-align: center;
        width: 80%;
        border-radius: 5px;
        border: 1px solid #ccc;
        text-transform: uppercase;
    }
    .score-container {
        display: none;
        margin-top: 15px;
    }
    .score-container h3 {
        font-size: 20px;
        color: #333;
    }
    .play-again {
        background-color: #ff4757;
        color: white;
        padding: 8px 20px;
        font-size: 16px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 10px;
    }
</style>
</head>
<body>
<div class="quiz-container">
    <h2>Listening Quiz</h2>

    <!-- Управление аудио -->
    <button id="audioControl" class="play-button" onclick="toggleAudio()">🎧 Play Audio</button>
    <audio id="quizAudio" src="eating.mp3"></audio>

    <!-- Текстовые строки -->
    <div class="text-lines">
        <p>A. preferring to make food at home</p>
        <p>B. struggling to feel comfortable in restaurants</p>
        <p>C. valuing good service</p>
        <p>D. trying unusual dishes</p>
        <p>E. deciding where to eat</p>
        <p>F.  missing old-fashioned restaurants</p>
        <p>G. paying the bill</p>
        <p>H. ordering more than they need</p>
    </div>

    <!-- Ответы -->
    <div class="answer-boxes">
        <div class="answer-box">
            <label for="answer1">1</label>
            <input type="text" id="answer1" maxlength="1" placeholder="">
        </div>
        <div class="answer-box">
            <label for="answer2">2</label>
            <input type="text" id="answer2" maxlength="1" placeholder="">
        </div>
        <div class="answer-box">
            <label for="answer3">3</label>
            <input type="text" id="answer3" maxlength="1" placeholder="">
        </div>
        <div class="answer-box">
            <label for="answer4">4</label>
            <input type="text" id="answer4" maxlength="1" placeholder="">
        </div>
        <div class="answer-box">
            <label for="answer5">5</label>
            <input type="text" id="answer5" maxlength="1" placeholder="">
        </div>
    </div>

    <!-- Кнопка отправки -->
    <button class="play-button" onclick="submitAnswers()">Submit Answers</button>

    <!-- Блок с результатом -->
    <div class="score-container">
        <h3>Your Score: <span id="finalScore">0</span> / 5</h3>
        <button class="play-again" onclick="resetQuiz()">Play Again</button>
    </div>
</div>

<script>
    const audio = document.getElementById('quizAudio');
    const toggleButton = document.getElementById('audioControl');

    function toggleAudio() {
        if (audio.paused) {
            audio.play();
            toggleButton.textContent = '⏸ Pause Audio';
        } else {
            audio.pause();
            toggleButton.textContent = '🎧 Play Audio';
        }
    }

    function playAudio() {
        audio.play();
        toggleButton.textContent = '⏸ Pause Audio';
    }

    // Правильные ответы
    const correctAnswers = {
        1: "D",
        2: "E",
        3: "B",
        4: "H",
        5: "C"
    };

    function submitAnswers() {
        let score = 0;
        const userAnswers = {
            1: document.getElementById('answer1').value.trim().toUpperCase(),
            2: document.getElementById('answer2').value.trim().toUpperCase(),
            3: document.getElementById('answer3').value.trim().toUpperCase(),
            4: document.getElementById('answer4').value.trim().toUpperCase(),
            5: document.getElementById('answer5').value.trim().toUpperCase()
        };

        for (let key in userAnswers) {
            if (!userAnswers[key]) {
                userAnswers[key] = "";
            }
        }

        for (let key in correctAnswers) {
            if (userAnswers[key] === correctAnswers[key]) {
                score++;
            }
        }

        document.getElementById('finalScore').textContent = score;
        document.querySelector('.score-container').style.display = 'block';
    }

    function resetQuiz() {
        document.getElementById('answer1').value = '';
        document.getElementById('answer2').value = '';
        document.getElementById('answer3').value = '';
        document.getElementById('answer4').value = '';
        document.getElementById('answer5').value = '';
        document.querySelector('.score-container').style.display = 'none';

        // Остановить аудио и сбросить кнопку
        audio.pause();
        audio.currentTime = 0;
        toggleButton.textContent = '🎧 Play Audio';
    }
</script>
</body>
</html>