subfertility1.1/exam1c.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MRCOG Part 3 Exam UI</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.1.3/marked.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        #timer {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #f8f9fa;
            font-size: 24px;
            font-weight: bold;
            padding: 10px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            z-index: 1000;
        }
        #exam-content {
            margin-top: 60px;
        }
        #task-title, #task-content, #notes {
            margin-bottom: 20px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
        }
        #task-content {
            border: 1px solid #ccc;
            padding: 15px;
            background-color: #f9f9f9;
        }
        #notes {
            width: 100%;
            height: 150px;
            resize: vertical;
        }
    </style>
</head>
<body>
    <div id="timer"></div>
    <div id="exam-content">
        <h1>MRCOG Part 3 Exam UI</h1>
        <div id="start-screen">
            <button id="start-btn">Start Exam</button>
        </div>
        <div id="exam-screen" style="display: none;">
            <div id="task-title"></div>
            <div id="task-content"></div>
            <textarea id="notes" placeholder="Type your notes here..."></textarea>
        </div>
    </div>

    <script>
        const startBtn = document.getElementById('start-btn');
        const startScreen = document.getElementById('start-screen');
        const examScreen = document.getElementById('exam-screen');
        const timerDisplay = document.getElementById('timer');
        const taskTitleDisplay = document.getElementById('task-title');
        const taskContentDisplay = document.getElementById('task-content');
        const notesArea = document.getElementById('notes');

        let tasks = [];
        let currentTask = 0;
        let timer;
        let timeLeft;

        startBtn.addEventListener('click', startExam);

        function loadTasks() {
            return fetch('mrcog-exam-tasks.json')
                .then(response => response.json())
                .then(data => {
                    tasks = data.tasks;
                })
                .catch(error => console.error('Error loading tasks:', error));
        }

        function startExam() {
            loadTasks().then(() => {
                startScreen.style.display = 'none';
                examScreen.style.display = 'block';
                nextTask();
            });
        }

        function startTimer(seconds, label) {
            clearInterval(timer);
            timeLeft = seconds;
            updateTimerDisplay(label);

            timer = setInterval(() => {
                timeLeft--;
                updateTimerDisplay(label);

                if (timeLeft <= 0) {
                    clearInterval(timer);
                    if (label === 'Reading Time') {
                        startTimer(600, 'Task Time');
                    } else {
                        nextTask();
                    }
                }
            }, 1000);
        }

        function updateTimerDisplay(label) {
            const minutes = Math.floor(timeLeft / 60);
            const seconds = timeLeft % 60;
            timerDisplay.textContent = `${label}: ${minutes}:${seconds.toString().padStart(2, '0')}`;
        }

        function showTask() {
            const task = tasks[currentTask];
            taskTitleDisplay.textContent = task.title;
            
            fetch(task.file)
                .then(response => response.text())
                .then(markdown => {
                    taskContentDisplay.innerHTML = marked.parse(markdown);
                })
                .catch(error => console.error('Error loading task content:', error));

            notesArea.value = ''; // Clear notes for new task
        }

        function nextTask() {
            if (currentTask < tasks.length) {
                showTask();
                startTimer(120, 'Reading Time');
            } else {
                endExam();
            }
            currentTask++;
        }

        function endExam() {
            examScreen.innerHTML = '<h2>Exam Completed</h2><p>Thank you for taking the MRCOG Part 3 Exam.</p>';
        }
    </script>
</body>
</html>