File "mystery_shopping_form.php"
Full Path: /home/ccipcixf/public_html/miportal/mystery_shopping_form.php
File size: 7.06 KB
MIME-type: text/x-php
Charset: utf-8
<?php
session_start();
include("admin/includes/config.php"); // Include your PDO configuration
// Ensure the user is logged in
if (!isset($_SESSION['user_acc_id'])) {
die("Unauthorized access. Please log in first.");
}
$user_id = $_SESSION['user_acc_id'];
try {
// Query to check if the user has already attempted and qualified for the test
$query = "SELECT status FROM mystery_shopper_certification WHERE user_id = :user_id LIMIT 1";
$stmt = $pdo->prepare($query);
$stmt->execute(['user_id' => $user_id]);
$user_attempt = $stmt->fetch();
// If user is "Qualified," prevent test retake; if "Not Qualified," allow retake
if ($user_attempt && $user_attempt['status'] === 'Qualified') {
$status_message = "You have already passed the test and are qualified as a Mystery Shopper.";
echo "<div style='text-align: center; margin-top: 50px;'>
<h3>Test Access Restricted</h3>
<p>$status_message</p>
<a href='user_dashboard.php' class='btn btn-primary'>Return to Dashboard</a>
</div>";
exit; // Prevents further code execution if the user has already qualified
}
// If "Not Qualified," allow the user to reattempt the test (no need to display a message here)
} catch (PDOException $e) {
error_log("Query error: " . $e->getMessage());
die("An error occurred. Please try again later.");
}
// If no "Qualified" record is found, show the test form here
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Mystery Shopping Training</title>
<style>
.slide-container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.slide-image {
width: 100%;
height: auto;
display: none;
}
.slide-image.active {
display: block;
}
.navigation-buttons {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="slide-container">
<h2>Training Slides</h2>
<!-- Slides (make sure each image is named accordingly and available in the 'slides' folder) -->
<img src="slides/assignment/mysteryshopping/1.jpg" class="slide-image active" id="slide-1">
<img src="slides/assignment/mysteryshopping/2.jpg" class="slide-image" id="slide-2">
<img src="slides/assignment/mysteryshopping/3.jpg" class="slide-image" id="slide-3">
<img src="slides/assignment/mysteryshopping/4.jpg" class="slide-image" id="slide-4">
<img src="slides/assignment/mysteryshopping/5.jpg" class="slide-image" id="slide-5">
<img src="slides/assignment/mysteryshopping/6.jpg" class="slide-image" id="slide-6">
<img src="slides/assignment/mysteryshopping/7.jpg" class="slide-image" id="slide-7">
<img src="slides/assignment/mysteryshopping/8.jpg" class="slide-image" id="slide-8">
<img src="slides/assignment/mysteryshopping/9.jpg" class="slide-image" id="slide-9">
<img src="slides/assignment/mysteryshopping/10.jpg" class="slide-image" id="slide-10">
<img src="slides/assignment/mysteryshopping/11.jpg" class="slide-image" id="slide-11">
<img src="slides/assignment/mysteryshopping/12.jpg" class="slide-image" id="slide-12">
<img src="slides/assignment/mysteryshopping/13.jpg" class="slide-image" id="slide-13">
<img src="slides/assignment/mysteryshopping/14.jpg" class="slide-image" id="slide-14">
<img src="slides/assignment/mysteryshopping/15.jpg" class="slide-image" id="slide-15">
<img src="slides/assignment/mysteryshopping/16.jpg" class="slide-image" id="slide-16">
<img src="slides/assignment/mysteryshopping/17.jpg" class="slide-image" id="slide-17">
<img src="slides/assignment/mysteryshopping/18.jpg" class="slide-image" id="slide-18">
<img src="slides/assignment/mysteryshopping/19.jpg" class="slide-image" id="slide-19">
<img src="slides/assignment/mysteryshopping/20.jpg" class="slide-image" id="slide-20">
<img src="slides/assignment/mysteryshopping/21.jpg" class="slide-image" id="slide-21">
<img src="slides/assignment/mysteryshopping/22.jpg" class="slide-image" id="slide-22">
<img src="slides/assignment/mysteryshopping/23.jpg" class="slide-image" id="slide-23">
<img src="slides/assignment/mysteryshopping/24.jpg" class="slide-image" id="slide-24">
<img src="slides/assignment/mysteryshopping/25.jpg" class="slide-image" id="slide-25">
<div class="navigation-buttons">
<div class="container">
<div class="row">
<div class="col-md-12">
<button class="btn btn-dark" type="button" onclick="prevSlide()">Previous</button>
<button class="btn btn-primary" type="button" id="next-btn" onclick="nextSlide()">Next</button>
<div style="display: flex; justify-content: center;" class="p-2">
<button class="btn btn-success text-center" id="take-test-btn" onclick="location.href='assignment_form.php'">Take Test</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// JavaScript to handle slide navigation
let currentSlide = 1;
const totalSlides = 25; // Total number of slides
function showSlide(slideNum) {
// Hide all slides
document.querySelectorAll('.slide-image').forEach(slide => slide.classList.remove('active'));
// Show the specified slide
document.getElementById('slide-' + slideNum).classList.add('active');
// Display "Take Test" button only on the last slide, and hide "Next" button
document.getElementById('take-test-btn').style.display = slideNum === totalSlides ? 'block' : 'none';
document.getElementById('next-btn').style.display = slideNum === totalSlides ? 'none' : 'inline-block';
}
function nextSlide() {
if (currentSlide < totalSlides) {
currentSlide++;
showSlide(currentSlide);
}
}
function prevSlide() {
if (currentSlide > 1) {
currentSlide--;
showSlide(currentSlide);
}
}
// Initialize the first slide
showSlide(currentSlide);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
</body>
</html>