<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lung Sound Quiz</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: linear-gradient(to bottom right, #8A2BE2, #4B0082);
            color: #FFFFFF;
        }
        .quiz-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .question {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .dropdown {
            width: 200px;
            background-color: #FFFFFF;
            color: #4B0082;
            border: 2px solid #8A2BE2;
            border-radius: 5px;
        }
        .button {
            padding: 5px 10px;
            background-color: #4B0082;
            color: #FFFFFF;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .button:hover {
            background-color: #8A2BE2;
        }
        .submit-reset-container {
            margin-top: 20px;
            display: flex;
            gap: 10px;
        }
        .submit-button {
            padding: 10px 20px;
            background-color: #6A5ACD;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }
        .submit-button:hover {
            background-color: #836FFF;
        }
        .reset-button {
            padding: 10px 20px;
            background-color: #BA55D3;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }
        .reset-button:hover {
            background-color: #DDA0DD;
        }
    </style>
    <script>
        document.addEventListener("contextmenu", function(event) {
            event.preventDefault();
        });
        
        function showInfo() {
            const message = `
            <b>This quiz helps you identify different lung sounds.</b><br>
            Listen to the audio and select the correct answer from the dropdown.<br><br>
            <b>Audio Files and Credits:</b><br>
            - Rales (David W. Cugell, MD)<br>
            - Friction Rub (David W. Cugell, MD)<br>
            - Stridor (Merck & Co)<br>
            - Wheezing (David W. Cugell, MD)<br>
            - Normal Vesicular Breath Sounds (David W. Cugell, MD)<br>
            - Normal Bronchial Breath Sounds (David W. Cugell, MD)<br><br>
            <b>Glossary:</b><br>
            <b>Rales:</b> Discontinuous, brief, popping sounds commonly heard in conditions such as pneumonia or pulmonary fibrosis.<br>
            <b>Friction Rub:</b> A grating sound caused by pleural surfaces rubbing together, often indicative of pleuritis.<br>
            <b>Stridor:</b> A high-pitched wheezing sound resulting from airflow obstruction.<br>
            <b>Wheezing:</b> Continuous musical sounds typically associated with asthma or bronchitis.<br>
            <b>Normal Vesicular Breath Sounds:</b> Normal breath sounds heard over most of the lung fields.<br>
            <b>Normal Bronchial Breath Sounds:</b> Hollow, tubular sounds normally heard over the trachea but abnormal if heard in lung fields.<br>`;
            const popup = window.open("", "Info", "width=400,height=600");
            popup.document.body.innerHTML = `<div style='font-family: Arial, sans-serif; padding: 20px; color: #000;'>${message}</div>`;
        }

        let sounds = [
            {file: "Audio stridor (Merck & Co).mp3", label: "Stridor"},
            {file: "Audio crackles (David W. Cugell, MD).mp3", label: "Rales"},
            {file: "Audio vesicular normal_breath_sounds(David W. Cugell, MD).mp3", label: "Normal Vesicular Breath Sounds"},
            {file: "Audio friction_rub (David W. Cugell, MD).mp3", label: "Friction Rub"},
            {file: "Audio wheezing (David W. Cugell, MD).mp3", label: "Wheezing"},
            {file: "Audio normal_bronchial_breath_sounds (David W. Cugell, MD).mp3", label: "Normal Bronchial Breath Sounds"}
        ];

        function submitAll() {
            let score = 0;
            let resultMessage = "Correct Answers:\n";
            sounds.forEach((sound, index) => {
                const userAnswer = document.getElementById(`dropdown-${index}`).value;
                if (userAnswer === sound.label) {
                    score++;
                }
                resultMessage += `Q${index + 1}: ${sound.label}\n`;
            });
            alert(`Your score: ${score} / ${sounds.length}\n${resultMessage}`);
        }

        function checkAnswer(questionIndex) {
            const userAnswer = document.getElementById(`dropdown-${questionIndex}`).value;
            if (userAnswer === "") {
                alert("Please select an answer.");
                return;
            }
            const result = userAnswer === sounds[questionIndex].label ? "Correct" : "Incorrect";
            alert(result);
        }

        function shuffleQuiz() {
            sounds.sort(() => Math.random() - 0.5);
            loadQuiz();
        }

        function loadQuiz() {
            const quizContainer = document.querySelector(".quiz-container");
            quizContainer.innerHTML = "";
            sounds.forEach((sound, index) => {
                const question = document.createElement("div");
                question.className = "question";
                question.innerHTML = `
                    <audio id="audio-${index}" src="${sound.file}" controls preload="auto"></audio>
                    <select id="dropdown-${index}" class="dropdown">
                        <option value="">Select a lung sound</option>
                        ${sounds.map(s => `<option value="${s.label}">${s.label}</option>`).join("")}
                    </select>
                    <button class="button" onclick="checkAnswer(${index})">Check</button>
                `;
                quizContainer.appendChild(question);
            });
        }

        document.addEventListener("DOMContentLoaded", () => {
            loadQuiz();
        });
    </script>
</head>
<body>
    <h1>Lung Sound Quiz <button onclick="showInfo()">𝒾</button></h1>
    <div class="quiz-container"></div>
    <div class="submit-reset-container">
        <button class="submit-button" onclick="submitAll()">Submit All</button>
        <button class="reset-button" onclick="shuffleQuiz()">Reset</button>
    </div>
    <p>© 2025 Dr. Chris Caulkins. All Rights Reserved.</p>
</body>
</html>
