36629-vm/take_test.php

<?php
require_once 'includes/header.php';
require_once 'db/config.php';

// Redirect if not logged in
if (!isset($_SESSION['user_id'])) {
    header('Location: login.php');
    exit();
}

// Check for test ID
if (!isset($_GET['test_id']) || !is_numeric($_GET['test_id'])) {
    echo "<div class='container mt-5'><div class='alert alert-danger'>Invalid test ID.</div></div>";
    require_once 'includes/footer.php';
    exit();
}

$test_id = intval($_GET['test_id']);
$user_id = $_SESSION['user_id'];

try {
    $db = db();

    // Check if user has already taken this test
    $checkStmt = $db->prepare("SELECT COUNT(*) FROM user_tests WHERE user_id = :user_id AND test_id = :test_id");
    $checkStmt->execute(['user_id' => $user_id, 'test_id' => $test_id]);
    if ($checkStmt->fetchColumn() > 0) {
        echo "<div class='container mt-5'><div class='alert alert-info'>You have already completed this test. <a href='test_results.php?test_id=$test_id'>View your results</a>.</div></div>";
        require_once 'includes/footer.php';
        exit();
    }

    // Fetch test details
    $stmt = $db->prepare("SELECT title, description FROM tests WHERE id = :id");
    $stmt->execute(['id' => $test_id]);
    $test = $stmt->fetch(PDO::FETCH_ASSOC);

    if (!$test) {
        echo "<div class='container mt-5'><div class='alert alert-danger'>Test not found.</div></div>";
        require_once 'includes/footer.php';
        exit();
    }

    // Fetch questions and options
    $questionsStmt = $db->prepare("
        SELECT q.id AS question_id, q.question_text, o.id AS option_id, o.option_text, o.score
        FROM questions q
        JOIN options o ON q.id = o.question_id
        WHERE q.test_id = :test_id
        ORDER BY q.id, o.id
    ");
    $questionsStmt->execute(['test_id' => $test_id]);
    $questionsData = $questionsStmt->fetchAll(PDO::FETCH_GROUP | PDO::FETCH_ASSOC);
    $question_keys = array_keys($questionsData);
} catch (PDOException $e) {
    die("Database error: " . $e->getMessage());
}
?>
<style>
    .question-container {
        display: none;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }
    .question-container.active {
        display: block;
        opacity: 1;
    }
    .progress-bar-container {
        width: 100%;
        background-color: #e9ecef;
        border-radius: .25rem;
    }
    .progress-bar-fill {
        height: 10px;
        background-color: #28a745;
        border-radius: .25rem;
        transition: width 0.3s ease-in-out;
    }
</style>

<div class="container mt-5">
    <div class="card">
        <div class="card-header">
            <h2><?php echo htmlspecialchars($test['title']); ?></h2>
        </div>
        <div class="card-body">
            <p class="lead"><?php echo nl2br(htmlspecialchars($test['description'])); ?></p>
            <hr>

            <?php if (empty($questionsData)): ?>
                <div class="alert alert-warning">This test has no questions yet.</div>
            <?php else: ?>
                <div class="progress-bar-container mb-4">
                    <div class="progress-bar-fill" id="progress-bar"></div>
                </div>
                <p id="progress-text" class="text-center"></p>

                <form id="test-form" action="submit_test.php" method="post">
                    <input type="hidden" name="test_id" value="<?php echo $test_id; ?>">
                    
                    <?php foreach ($question_keys as $index => $question_id):
                        $options = $questionsData[$question_id];
                        $is_first = ($index === 0);
                        $is_last = ($index === count($question_keys) - 1);
                    ?>
                        <div class="question-container <?php if ($is_first) echo 'active'; ?>" data-question-index="<?php echo $index; ?>">
                            <div class="mb-4">
                                <h5><?php echo htmlspecialchars($options[0]['question_text']); ?></h5>
                                <?php foreach ($options as $option): ?>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="answers[<?php echo $question_id; ?>]" id="option_<?php echo $option['option_id']; ?>" value="<?php echo $option['option_id']; ?>" required>
                                        <label class="form-check-label" for="option_<?php echo $option['option_id']; ?>">
                                            <?php echo htmlspecialchars($option['option_text']); ?>
                                        </label>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                            <div class="d-flex justify-content-between">
                                <?php if (!$is_first): ?>
                                    <button type="button" class="btn btn-secondary btn-prev">Previous</button>
                                <?php endif; ?>
                                <?php if (!$is_last): ?>
                                    <button type="button" class="btn btn-primary btn-next ml-auto">Next</button>
                                <?php endif; ?>
                                <?php if ($is_last): ?>
                                    <button type="submit" class="btn btn-success ml-auto">Submit Answers</button>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </form>
            <?php endif; ?>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const questions = document.querySelectorAll('.question-container');
    const progressBar = document.getElementById('progress-bar');
    const progressText = document.getElementById('progress-text');
    let currentQuestionIndex = 0;
    const totalQuestions = questions.length;

    function updateProgress() {
        const progressPercentage = ((currentQuestionIndex + 1) / totalQuestions) * 100;
        progressBar.style.width = progressPercentage + '%';
        progressText.textContent = `Question ${currentQuestionIndex + 1} of ${totalQuestions}`;
    }

    function showQuestion(index) {
        questions.forEach((question, i) => {
            if (i === index) {
                question.classList.add('active');
            } else {
                question.classList.remove('active');
            }
        });
        currentQuestionIndex = index;
        updateProgress();
    }

    document.getElementById('test-form').addEventListener('click', function(e) {
        if (e.target.classList.contains('btn-next')) {
            const currentQuestion = questions[currentQuestionIndex];
            const radio = currentQuestion.querySelector('input[type="radio"]:checked');
            if(radio){
                showQuestion(currentQuestionIndex + 1);
            } else {
                alert('Please select an answer.');
            }
        }
        if (e.target.classList.contains('btn-prev')) {
            showQuestion(currentQuestionIndex - 1);
        }
    });

    // Initial setup
    showQuestion(0);
});
</script>

<?php require_once 'includes/footer.php'; ?>