| Server IP : 172.67.187.206 / Your IP : 162.159.115.42 Web Server : Apache/2.4.25 (Win32) OpenSSL/1.0.2j PHP/5.6.30 System : Windows NT WIN-ECQAAA40806 6.2 build 9200 (Windows Server 2012 Standard Edition) i586 User : SYSTEM ( 0) PHP Version : 5.6.30 Disable Function : NONE MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : E:/Inetpub/www/training/user/ |
Upload File : |
<?php
include("../session.php");
if ($role != 'user') {
header("Location: ../index.php");
exit;
}
include("../db.php");
// ตรวจสอบว่ามีการส่งพารามิเตอร์ที่ต้องการหรือไม่
if (!isset($_GET['exam'])) {
header("Location: dashboard.php");
exit;
}
// ถอดรหัส subject ID
$subject_id = base64_decode($_GET['exam']);
// ตรวจสอบว่าผู้ใช้ได้สอบผ่านวิชานี้แล้วหรือไม่
$user_id = $_SESSION['user_id'];
$check_result = mysqli_query($conn, "SELECT * FROM exam_results WHERE user_id = $user_id AND subject_id = $subject_id AND passed = 1");
if (mysqli_num_rows($check_result) > 0) {
header("Location: dashboard.php");
exit;
}
// ดึงข้อมูลวิชา
$subject_query = mysqli_query($conn, "SELECT * FROM subjects WHERE id = $subject_id");
if (!$subject = mysqli_fetch_assoc($subject_query)) {
header("Location: dashboard.php");
exit;
}
// ดึงข้อสอบทั้งหมดในวิชานี้
$questions_query = mysqli_query($conn, "SELECT * FROM questions WHERE subject_id = $subject_id");
$questions = [];
$total_score = 0;
while ($row = mysqli_fetch_assoc($questions_query)) {
$questions[] = $row;
$total_score += $row['score'];
}
// สุ่มลำดับข้อสอบ
shuffle($questions);
// ถ้าไม่มีข้อสอบในวิชานี้
if (count($questions) == 0) {
$error_message = "ขออภัย วิชานี้ยังไม่มีข้อสอบ";
}
// ตรวจสอบว่ามีการส่งคำตอบหรือไม่
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['submit_exam'])) {
$user_score = 0;
$answers = [];
// ตรวจคำตอบ
foreach ($questions as $question) {
$question_id = $question['id'];
// ตรวจว่าผู้ใช้ตอบข้อนี้หรือไม่
if (isset($_POST['answer'][$question_id])) {
$user_answer = $_POST['answer'][$question_id];
$correct_answer = $question['correct_choice'];
// เก็บข้อมูลการตอบ
$answers[$question_id] = [
'user_answer' => $user_answer,
'correct_answer' => $correct_answer,
'is_correct' => ($user_answer == $correct_answer)
];
// ถ้าตอบถูก เพิ่มคะแนน
if ($user_answer == $correct_answer) {
$user_score += $question['score'];
}
}
}
// คำนวณเปอร์เซ็นต์ที่ได้
$percentage = ($total_score > 0) ? ($user_score / $total_score) * 100 : 0;
$percentage = round($percentage, 2);
// ตรวจสอบว่าผ่านหรือไม่
$passed = ($percentage >= $subject['pass_percentage']) ? 1 : 0;
// บันทึกผลสอบลงฐานข้อมูล
$insert_result = mysqli_query($conn, "INSERT INTO exam_results
(user_id, subject_id, score, percentage, passed)
VALUES ($user_id, $subject_id, $user_score, $percentage, $passed)");
// ส่งไปยังหน้าแสดงผลสอบ
header("Location: exam_result.php?result=" . base64_encode(mysqli_insert_id($conn)));
exit;
}
?>
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ทำข้อสอบ - <?php echo htmlspecialchars($subject['name']); ?></title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
--primary-color: #4e73df;
--secondary-color: #858796;
--success-color: #1cc88a;
--danger-color: #e74a3b;
--warning-color: #f6c23e;
--light-bg: #f8f9fc;
}
body {
background-color: var(--light-bg);
font-family: 'Prompt', sans-serif;
padding-top: 70px;
}
.navbar {
background: linear-gradient(90deg, var(--primary-color) 0%, #224abe 100%);
box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}
.navbar-brand {
color: white;
font-weight: 600;
}
.navbar .nav-link {
color: rgba(255, 255, 255, 0.8);
padding: 0.75rem 1rem;
border-radius: 0.375rem;
transition: all 0.3s;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
color: white;
background-color: rgba(255, 255, 255, 0.1);
}
.navbar .nav-link i {
margin-right: 0.5rem;
}
.dropdown-menu {
border: none;
box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}
.card {
border: none;
border-radius: 0.5rem;
box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
margin-bottom: 1.5rem;
}
.card-header {
background-color: #f8f9fc;
border-bottom: 1px solid #e3e6f0;
padding: 1rem 1.25rem;
}
.question-box {
margin-bottom: 1.5rem;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: white;
box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
}
.choice-list {
margin-top: 1rem;
}
.choice-item {
padding: 0.75rem;
margin-bottom: 0.5rem;
border: 1px solid #e3e6f0;
border-radius: 0.375rem;
transition: all 0.2s;
}
.choice-item:hover {
background-color: #f8f9fc;
}
.exam-instructions {
background: linear-gradient(to right, var(--primary-color), #224abe);
color: white;
border-radius: 0.5rem;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.user-info {
display: flex;
align-items: center;
color: white;
cursor: pointer;
}
.user-info .user-name {
font-weight: bold;
margin-right: 0.5rem;
}
.user-info .user-role {
font-size: 0.8rem;
opacity: 0.8;
}
.question-image, .choice-image {
max-width: 300px;
margin-top: 10px;
border-radius: 0.375rem;
cursor: pointer;
}
/* Modal Image Zoom Styles */
.modal-image-container {
position: relative;
width: 100%;
height: 80vh;
overflow: auto;
display: flex;
justify-content: center;
align-items: center;
}
.modal-image {
max-width: 100%;
max-height: 100%;
transform-origin: center center;
transition: transform 0.2s;
}
.modal-image.zoomed {
cursor: grab;
}
.modal-image.zoomed:active {
cursor: grabbing;
}
</style>
<!-- Font from Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Main Navbar -->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<i class="fas fa-laptop-code me-2"></i>
ระบบข้อสอบออนไลน์
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="dashboard.php">
<i class="fas fa-tachometer-alt"></i> ภาพรวม
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">
<i class="fas fa-edit"></i> ทำข้อสอบ
</a>
</li>
</ul>
<div class="d-flex align-items-center">
<div class="dropdown">
<div class="user-info dropdown-toggle" data-bs-toggle="dropdown">
<div>
<span class="user-name"><?php echo htmlspecialchars($u_name); ?></span>
<!-- <span class="user-role">ผู้ใช้ทั่วไป</span> -->
</div>
<!-- <i class="fas fa-caret-down ms-2"></i> -->
</div>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="../logout.php"><i class="fas fa-sign-out-alt me-2"></i> ออกจากระบบ</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="container mt-4">
<div class="d-flex justify-content-between align-items-center mb-4">
<h3 class="mb-0">ทำข้อสอบวิชา: <?php echo htmlspecialchars($subject['name']); ?></h3>
<a href="dashboard.php" class="btn btn-outline-primary">
<i class="fas fa-arrow-left me-1"></i> กลับหน้าหลัก
</a>
</div>
<?php if (isset($error_message)): ?>
<div class="alert alert-warning">
<p><?php echo $error_message; ?></p>
<p><a href="dashboard.php" class="btn btn-primary">กลับหน้าหลัก</a></p>
</div>
<?php else: ?>
<!-- Exam Instructions -->
<div class="exam-instructions">
<h4><i class="fas fa-info-circle me-2"></i> คำชี้แจง</h4>
<ul class="mb-0">
<li>ข้อสอบมีทั้งหมด <?php echo count($questions); ?> ข้อ</li>
<li>คะแนนเต็ม <?php echo $total_score; ?> คะแนน</li>
<li>ต้องได้คะแนนอย่างน้อย <?php echo $subject['pass_percentage']; ?>% จึงจะผ่าน</li>
<li>คลิกที่รูปภาพเพื่อขยาย</li>
</ul>
</div>
<!-- Exam Form -->
<form method="post" id="exam-form">
<?php $question_num = 1; ?>
<?php foreach ($questions as $question): ?>
<div class="question-box">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="mb-0">ข้อที่ <?php echo $question_num; ?></h5>
<span class="badge bg-primary"><?php echo $question['score']; ?> คะแนน</span>
</div>
<div class="question-text mb-3">
<?php echo htmlspecialchars($question['question']); ?>
<?php if ($question['question_image']): ?>
<br><img src="../Uploads/<?php echo $question['question_image']; ?>" alt="Question Image" class="question-image" data-bs-toggle="modal" data-bs-target="#imageModal" data-image="../Uploads/<?php echo $question['question_image']; ?>">
<?php endif; ?>
</div>
<div class="choice-list">
<?php
$choices = [
1 => ['text' => $question['choice1'], 'image' => $question['choice1_image']],
2 => ['text' => $question['choice2'], 'image' => $question['choice2_image']],
3 => ['text' => $question['choice3'], 'image' => $question['choice3_image']],
4 => ['text' => $question['choice4'], 'image' => $question['choice4_image']]
];
$choices = array_filter($choices, function($choice) {
return !empty($choice['text']) || !empty($choice['image']);
});
?>
<?php foreach ($choices as $choice_num => $choice): ?>
<div class="choice-item">
<div class="form-check">
<input class="form-check-input" type="radio" name="answer[<?php echo $question['id']; ?>]" id="choice_<?php echo $question['id']; ?>_<?php echo $choice_num; ?>" value="<?php echo $choice_num; ?>" required>
<label class="form-check-label" for="choice_<?php echo $question['id']; ?>_<?php echo $choice_num; ?>">
<?php echo htmlspecialchars($choice['text']); ?>
<?php if ($choice['image']): ?>
<br><img src="../Uploads/<?php echo $choice['image']; ?>" alt="Choice Image" class="choice-image" data-bs-toggle="modal" data-bs-target="#imageModal" data-image="../Uploads/<?php echo $choice['image']; ?>">
<?php endif; ?>
</label>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php $question_num++; ?>
<?php endforeach; ?>
<div class="text-center mb-5">
<button type="submit" name="submit_exam" class="btn btn-primary btn-lg px-5">
<i class="fas fa-paper-plane me-2"></i> ส่งคำตอบ
</button>
</div>
</form>
<?php endif; ?>
</div>
<!-- Image Modal -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="imageModalLabel">ภาพประกอบ</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="modal-image-container">
<img src="" alt="Modal Image" class="modal-image" id="modalImage">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ปิด</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Handle image modal display
document.addEventListener('DOMContentLoaded', function () {
const imageModal = document.getElementById('imageModal');
imageModal.addEventListener('show.bs.modal', function (event) {
const image = event.relatedTarget;
const imageUrl = image.getAttribute('data-image');
const modalImage = document.getElementById('modalImage');
modalImage.src = imageUrl;
modalImage.style.transform = 'scale(1)';
});
// Reset zoom when modal is hidden
imageModal.addEventListener('hidden.bs.modal', function () {
const modalImage = document.getElementById('modalImage');
modalImage.style.transform = 'scale(1)';
});
// Zoom functionality
const modalImage = document.getElementById('modalImage');
let scale = 1;
const minScale = 0.5;
const maxScale = 3;
modalImage.addEventListener('wheel', function (e) {
e.preventDefault();
const delta = e.deltaY > 0 ? -0.1 : 0.1;
scale = Math.min(maxScale, Math.max(minScale, scale + delta));
modalImage.style.transform = `scale(${scale})`;
modalImage.classList.toggle('zoomed', scale > 1);
});
// Drag functionality when zoomed
let isDragging = false;
let startX, startY;
modalImage.addEventListener('mousedown', function (e) {
if (scale > 1) {
isDragging = true;
startX = e.clientX - (modalImage.offsetLeft || 0);
startY = e.clientY - (modalImage.offsetTop || 0);
modalImage.style.cursor = 'grabbing';
}
});
modalImage.addEventListener('mousemove', function (e) {
if (isDragging) {
e.preventDefault();
const container = modalImage.parentElement;
const newX = e.clientX - startX;
const newY = e.clientY - startY;
modalImage.style.left = `${newX}px`;
modalImage.style.top = `${newY}px`;
}
});
modalImage.addEventListener('mouseup', function () {
isDragging = false;
modalImage.style.cursor = scale > 1 ? 'grab' : 'default';
});
modalImage.addEventListener('mouseleave', function () {
isDragging = false;
modalImage.style.cursor = scale > 1 ? 'grab' : 'default';
});
});
</script>
</body>
</html>