V1rus Private

Viewing: test_pdf.php

<?php
include 'config.php';
if (!isset($_SESSION['student_id'])) {
    header("Location: login.php");
    exit();
}

$category_id = $_GET['category_id'] ?? null;
if (!$category_id) {
    header("Location: student_dashboard.php");
    exit();
}

// Get category details
$stmt = $pdo->prepare("SELECT * FROM categories WHERE id = ?");
$stmt->execute([$category_id]);
$category = $stmt->fetch();

// Create or get existing exam
$stmt = $pdo->prepare("SELECT * FROM exams WHERE student_id = ? AND category_id = ? AND status = 'pending'");
$stmt->execute([$_SESSION['student_id'], $category_id]);
$exam = $stmt->fetch();

if (!$exam) {
    $stmt = $pdo->prepare("INSERT INTO exams (student_id, category_id, started_at) VALUES (?, ?, NOW())");
    $stmt->execute([$_SESSION['student_id'], $category_id]);
    $exam_id = $pdo->lastInsertId();
} else {
    $exam_id = $exam['id'];
}

// Get questions
$stmt = $pdo->prepare("SELECT * FROM questions WHERE category_id = ? ORDER BY RAND() LIMIT ?");
$stmt->execute([$category_id, $category['total_questions']]);
$questions = $stmt->fetchAll();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Taking Exam - <?php echo $category['name']; ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .exam-header {
            background: #343a40;
            color: white;
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .timer-critical {
            color: #dc3545;
            animation: blink 1s infinite;
        }
        @keyframes blink {
            50% { opacity: 0.5; }
        }
        .question-card {
            margin-bottom: 20px;
            border-left: 4px solid #007bff;
        }
        .option-label {
            cursor: pointer;
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            transition: all 0.3s ease;
        }
        .option-label:hover {
            background: #f8f9fa;
        }
        .option-label.selected {
            background: #007bff;
            color: white;
            border-color: #007bff;
        }
        .question-nav {
            position: fixed;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
        }
        .nav-btn {
            width: 40px;
            height: 40px;
            margin: 5px;
            border: 2px solid #007bff;
            background: white;
            color: #007bff;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .nav-btn.answered {
            background: #28a745;
            border-color: #28a745;
            color: white;
        }
        .nav-btn.current {
            background: #007bff;
            color: white;
        }
    </style>
</head>
<body>
    <!-- Exam Header -->
    <div class="exam-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h5 class="mb-0">
                        <i class="fas fa-file-alt"></i> <?php echo $category['name']; ?>
                    </h5>
                </div>
                <div class="col-md-6 text-end">
                    <div class="d-flex justify-content-end align-items-center">
                        <div class="me-4">
                            <strong>Question: </strong>
                            <span id="currentQuestion">1</span>/<?php echo count($questions); ?>
                        </div>
                        <div class="me-4">
                            <strong>Time Left: </strong>
                            <span id="timer" class="fw-bold"></span>
                        </div>
                        <button class="btn btn-warning btn-sm" onclick="submitExam()">
                            <i class="fas fa-paper-plane"></i> Submit
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container mt-4">
        <div class="row">
            <div class="col-md-9">
                <form id="examForm">
                    <input type="hidden" name="exam_id" value="<?php echo $exam_id; ?>">
                    
                    <?php foreach ($questions as $index => $question): ?>
                    <div class="question-card card mb-4" id="question-<?php echo $index + 1; ?>" 
                         style="<?php echo $index > 0 ? 'display: none;' : ''; ?>">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">Question <?php echo $index + 1; ?></h6>
                        </div>
                        <div class="card-body">
                            <p class="question-text fw-bold"><?php echo $question['question_text']; ?></p>
                            
                            <div class="options">
                                <?php for ($i = 1; $i <= 4; $i++): ?>
                                <div class="option-label" onclick="selectOption(<?php echo $index + 1; ?>, <?php echo $i; ?>)">
                                    <input type="radio" name="question_<?php echo $question['id']; ?>" 
                                           id="q<?php echo $question['id']; ?>_opt<?php echo $i; ?>" 
                                           value="<?php echo $i; ?>" style="display: none;">
                                    <strong><?php echo chr(64 + $i); ?>.</strong> 
                                    <?php echo $question['option' . $i]; ?>
                                </div>
                                <?php endfor; ?>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </form>
            </div>
            
            <!-- Question Navigation -->
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h6 class="mb-0"><i class="fas fa-list"></i> Question Navigation</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-2" id="questionNav">
                            <?php for ($i = 1; $i <= count($questions); $i++): ?>
                            <div class="col-3">
                                <div class="nav-btn <?php echo $i == 1 ? 'current' : ''; ?>" 
                                     onclick="showQuestion(<?php echo $i; ?>)" 
                                     id="nav-<?php echo $i; ?>">
                                    <?php echo $i; ?>
                                </div>
                            </div>
                            <?php endfor; ?>
                        </div>
                        
                        <div class="mt-3">
                            <div class="d-flex align-items-center mb-2">
                                <div class="nav-btn current me-2" style="width: 20px; height: 20px;"></div>
                                <small>Current</small>
                            </div>
                            <div class="d-flex align-items-center mb-2">
                                <div class="nav-btn answered me-2" style="width: 20px; height: 20px;"></div>
                                <small>Answered</small>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="nav-btn me-2" style="width: 20px; height: 20px;"></div>
                                <small>Unanswered</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card mt-3">
                    <div class="card-body text-center">
                        <button class="btn btn-success w-100 mb-2" onclick="submitExam()">
                            <i class="fas fa-paper-plane"></i> Submit Exam
                        </button>
                        <small class="text-muted">You can also wait for auto-submit when time expires</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    let currentQuestion = 1;
    const totalQuestions = <?php echo count($questions); ?>;
    let examDuration = <?php echo $category['exam_duration'] * 60; ?>; // in seconds
    let timeLeft = examDuration;
    let timerInterval;
    let answers = {};

    // Timer functionality
    function startTimer() {
        timerInterval = setInterval(function() {
            timeLeft--;
            
            if (timeLeft <= 0) {
                clearInterval(timerInterval);
                submitExam();
                return;
            }
            
            // Update timer display
            const minutes = Math.floor(timeLeft / 60);
            const seconds = timeLeft % 60;
            const timerText = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            
            document.getElementById('timer').textContent = timerText;
            
            // Add warning class when less than 5 minutes
            if (timeLeft <= 300) { // 5 minutes
                document.getElementById('timer').className = 'fw-bold timer-critical';
            }
        }, 1000);
    }

    // Question navigation
    function showQuestion(questionNum) {
        // Hide current question
        document.getElementById(`question-${currentQuestion}`).style.display = 'none';
        document.getElementById(`nav-${currentQuestion}`).classList.remove('current');
        
        // Show new question
        document.getElementById(`question-${questionNum}`).style.display = 'block';
        document.getElementById(`nav-${questionNum}`).classList.add('current');
        
        // Update current question
        currentQuestion = questionNum;
        document.getElementById('currentQuestion').textContent = questionNum;
    }

    function nextQuestion() {
        if (currentQuestion < totalQuestions) {
            showQuestion(currentQuestion + 1);
        }
    }

    function prevQuestion() {
        if (currentQuestion > 1) {
            showQuestion(currentQuestion - 1);
        }
    }

    // Option selection
    function selectOption(questionNum, optionNum) {
        const questionId = <?php echo $questions[0]['id']; ?> + questionNum - 1;
        answers[questionId] = optionNum;
        
        // Update UI
        const questionElement = document.getElementById(`question-${questionNum}`);
        const optionLabels = questionElement.querySelectorAll('.option-label');
        
        optionLabels.forEach(label => {
            label.classList.remove('selected');
            const radio = label.querySelector('input[type="radio"]');
            if (radio.value == optionNum) {
                label.classList.add('selected');
                radio.checked = true;
            }
        });
        
        // Update navigation
        document.getElementById(`nav-${questionNum}`).classList.add('answered');
    }

    // Exam submission
    function submitExam() {
        if (confirm('Are you sure you want to submit the exam? You cannot change answers after submission.')) {
            clearInterval(timerInterval);
            
            const formData = new FormData();
            formData.append('exam_id', <?php echo $exam_id; ?>);
            formData.append('time_taken', examDuration - timeLeft);
            formData.append('answers', JSON.stringify(answers));
            
            fetch('submit_exam.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    window.location.href = 'exam_result.php?exam_id=' + data.exam_id;
                } else {
                    alert('Error submitting exam: ' + data.message);
                }
            });
        }
    }

    // Keyboard navigation
    document.addEventListener('keydown', function(event) {
        if (event.key === 'ArrowRight') {
            nextQuestion();
        } else if (event.key === 'ArrowLeft') {
            prevQuestion();
        } else if (event.key >= '1' && event.key <= '4') {
            selectOption(currentQuestion, parseInt(event.key));
        }
    });

    // Start timer when page loads
    window.onload = function() {
        startTimer();
        // Set initial timer display
        const minutes = Math.floor(timeLeft / 60);
        const seconds = timeLeft % 60;
        document.getElementById('timer').textContent = 
            `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    };

    // Prevent accidental navigation
    window.addEventListener('beforeunload', function(event) {
        event.preventDefault();
        event.returnValue = 'Your exam progress will be lost if you leave this page. Are you sure?';
    });
    </script>
</body>
</html>
User / IP	: 216.73.217.108
Host / Server	: 190.92.174.125 / aerosofthealthcare.com
System	: Linux s3739.bom1.stableserver.net 4.18.0-513.24.1.lve.2.el8.x86_64 #1 SMP Fri May 24 12:42:50 UTC 2024 x86_64