95 lines
3.1 KiB
PHP
95 lines
3.1 KiB
PHP
<?php
|
|
session_start();
|
|
|
|
// Check if user is logged in
|
|
if (!isset($_SESSION['user_id'])) {
|
|
header("Location: register.php");
|
|
exit();
|
|
}
|
|
?>
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Level 2 - Studio RIT</title>
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
<style>
|
|
.timeline {
|
|
display: flex;
|
|
padding: 20px;
|
|
background: #1a1a1a;
|
|
border-radius: 10px;
|
|
min-height: 150px;
|
|
border: 1px solid #00A8FF;
|
|
}
|
|
.clip {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 0 10px;
|
|
background: #A55BFF;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 5px;
|
|
cursor: grab;
|
|
border: 2px solid transparent;
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
}
|
|
.clip.sortable-ghost {
|
|
opacity: 0.4;
|
|
background: #00A8FF;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="container">
|
|
<div class="logo">Studio RIT</div>
|
|
<h2>Level 2: Video Timeline Puzzle</h2>
|
|
<p class="mt-4">Arrange the clips in the correct order (1-2-3-4) by dragging them.</p>
|
|
|
|
<div id="timeline" class="timeline">
|
|
<div class="clip" id="clip3">3</div>
|
|
<div class="clip" id="clip1">1</div>
|
|
<div class="clip" id="clip4">4</div>
|
|
<div class="clip" id="clip2">2</div>
|
|
</div>
|
|
|
|
<button id="checkOrderBtn" class="btn btn-primary mt-4">Check Order</button>
|
|
<p id="feedback" class="mt-3"></p>
|
|
</main>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
|
|
<script>
|
|
const timeline = document.getElementById('timeline');
|
|
new Sortable(timeline, {
|
|
animation: 150,
|
|
ghostClass: 'sortable-ghost'
|
|
});
|
|
|
|
const checkOrderBtn = document.getElementById('checkOrderBtn');
|
|
const feedback = document.getElementById('feedback');
|
|
const correctOrder = ['clip1', 'clip2', 'clip3', 'clip4'];
|
|
|
|
checkOrderBtn.addEventListener('click', () => {
|
|
const clips = timeline.getElementsByClassName('clip');
|
|
const currentOrder = Array.from(clips).map(clip => clip.id);
|
|
|
|
if (JSON.stringify(currentOrder) === JSON.stringify(correctOrder)) {
|
|
feedback.textContent = 'Correct! Proceeding to the next level...';
|
|
feedback.style.color = '#28a745';
|
|
window.location.href = 'update_level2.php';
|
|
} else {
|
|
feedback.textContent = 'Incorrect order. Try again!';
|
|
feedback.style.color = '#FF4B4B';
|
|
}
|
|
});
|
|
</script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|