Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads
<?php
session_start();
include "db.php";
if (!isset($_SESSION['user_id'])) {
header("Location: login.php");
exit();
}
$user_id = $_SESSION['user_id'];
$list_id = isset($_GET['list_id']) ? (int)$_GET['list_id'] : 0;
// Verify list belongs to user
$stmt = $conn->prepare("SELECT * FROM word_lists WHERE id = ? AND user_id = ?");
$stmt->execute([$list_id, $user_id]);
$list = $stmt->fetch();
if (!$list) {
header("Location: my_lists.php");
exit();
}
// Get words for this list
$stmt = $conn->prepare("SELECT * FROM list_words WHERE list_id = ? ORDER BY id");
$stmt->execute([$list_id]);
$words = $stmt->fetchAll();
// Handle score submission
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['submit_score'])) {
$score = (int)$_POST['score'];
// Update list score
$stmt = $conn->prepare("UPDATE word_lists SET score = ? WHERE id = ? AND user_id = ?");
$stmt->execute([$score, $list_id, $user_id]);
// Redirect to list page with success message
header("Location: my_lists.php?list_id=$list_id&score_updated=1");
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning: <?= htmlspecialchars($list['name']) ?> - ELearner</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="font-styles.css">
</head>
<body class="bg-gray-100 min-h-screen">
<div class="container mx-auto px-4 py-4 sm:py-8">
<header class="bg-white rounded-lg shadow-md p-4 sm:p-6 mb-6 sm:mb-8">
<div class="flex flex-wrap items-center justify-between">
<div class="flex items-center">
<a href="homepage.php">
<img src="images/icon-e-learner-blue.png" alt="ELearner Logo" class="h-10 sm:h-12 mr-3 sm:mr-4">
</a>
<div>
<h1 class="text-2xl sm:text-3xl font-bold text-blue-600">ELearner</h1>
<p class="text-sm sm:text-base text-gray-600">Learning: <?= htmlspecialchars($list['name']) ?></p>
</div>
</div>
<!-- Mobile menu button -->
<button id="mobileMenuBtn" class="md:hidden p-2 rounded text-blue-600 hover:bg-blue-100">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
<nav id="desktopMenu" class="hidden md:block">
<ul class="flex space-x-4 sm:space-x-6">
<li><a href="homepage.php" class="text-blue-500 font-medium hover:underline">Home</a></li>
<li><a href="index.php" class="text-blue-500 font-medium hover:underline">Vocabulary Tool</a></li>
<li><a href="my_lists.php" class="text-blue-500 font-medium hover:underline">My Lists</a></li>
<li><a href="list_hub.php" class="text-blue-500 font-medium hover:underline">List Hub</a></li>
<li><a href="profile.php" class="text-blue-500 font-medium hover:underline">My Profile</a></li>
<?php if(isset($_SESSION['is_admin']) && $_SESSION['is_admin'] == 1): ?>
<li><a href="admin.php" class="text-purple-500 font-medium hover:underline">Admin</a></li>
<?php endif; ?>
<li><a href="logout.php" class="text-red-500 font-medium hover:underline">Logout</a></li>
<li>
<button id="fontToggleBtn" class="bg-purple-500 text-white px-3 py-1 rounded hover:bg-purple-600">
Toggle Font
</button>
</li>
</ul>
</nav>
</div>
<!-- Mobile menu, hidden by default -->
<nav id="mobileMenu" class="md:hidden hidden mt-4 pb-2">
<ul class="flex flex-col space-y-3">
<li><a href="homepage.php" class="block text-blue-500 font-medium hover:underline">Home</a></li>
<li><a href="index.php" class="block text-blue-500 font-medium hover:underline">Vocabulary Tool</a></li>
<li><a href="my_lists.php" class="block text-blue-500 font-medium hover:underline">My Lists</a></li>
<li><a href="list_hub.php" class="block text-blue-500 font-medium hover:underline">List Hub</a></li>
<li><a href="profile.php" class="block text-blue-500 font-medium hover:underline">My Profile</a></li>
<?php if(isset($_SESSION['is_admin']) && $_SESSION['is_admin'] == 1): ?>
<li><a href="admin.php" class="block text-purple-500 font-medium hover:underline">Admin</a></li>
<?php endif; ?>
<li><a href="logout.php" class="block text-red-500 font-medium hover:underline">Logout</a></li>
<li>
<button id="mobileFontToggleBtn" class="bg-purple-500 text-white px-3 py-1 rounded hover:bg-purple-600">
Toggle Font
</button>
</li>
</ul>
</nav>
</header>
<main class="bg-white rounded-lg shadow-lg p-4 sm:p-6">
<div class="flex flex-wrap justify-between items-center mb-6">
<h2 class="text-xl sm:text-2xl font-bold">Learning: <?= htmlspecialchars($list['name']) ?></h2>
<div>
<a href="my_lists.php?list_id=<?= $list_id ?>" class="text-blue-500 hover:underline">Back to List</a>
</div>
</div>
<?php if (count($words) === 0): ?>
<div class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded mb-4">
This list is empty. Please add words before learning.
</div>
<div class="mt-4">
<a href="my_lists.php?list_id=<?= $list_id ?>" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
Return to List
</a>
</div>
<?php else: ?>
<!-- Learning interface - initially hidden -->
<div id="learningInterface" class="space-y-6">
<div class="flex flex-wrap justify-between items-center">
<div class="text-lg font-medium mb-2 sm:mb-0">
Progress: <span id="progressText">0/<?= count($words) ?></span>
</div>
<div id="timer" class="text-lg font-medium">Time: 00:00</div>
</div>
<div class="bg-blue-50 p-4 rounded-md">
<div class="mb-2 text-gray-600"><span id="sourceLanguage">Dutch</span> word:</div>
<div id="wordToTranslate" class="text-xl sm:text-2xl font-bold mb-4"></div>
<form id="answerForm" class="flex flex-col sm:flex-row items-start sm:items-end space-y-2 sm:space-y-0 sm:space-x-2">
<div class="w-full sm:flex-grow">
<label for="translationAnswer" class="block text-gray-600 mb-1"><span id="targetLanguage">English</span> translation:</label>
<input type="text" id="translationAnswer" class="w-full p-2 border rounded text-base" autocomplete="off">
</div>
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 w-full sm:w-auto">Enter</button>
</form>
</div>
<div id="feedback" class="p-4 rounded-md hidden"></div>
</div>
<!-- Results view - initially hidden -->
<div id="resultsView" class="space-y-6 hidden">
<h3 class="text-xl font-bold">Learning Complete!</h3>
<div class="bg-blue-50 p-6 rounded-md text-center">
<div class="text-3xl font-bold mb-2" id="scoreDisplay">0%</div>
<div class="text-lg" id="scoreDetails">You got 0 out of <?= count($words) ?> words correct</div>
</div>
<div class="mt-6">
<h4 class="text-lg font-medium mb-3">Results:</h4>
<div id="resultsTable" class="border rounded overflow-hidden">
<div class="grid grid-cols-4 bg-gray-100 font-medium">
<div class="p-2 border-b border-r">Question</div>
<div class="p-2 border-b border-r">Direction</div>
<div class="p-2 border-b border-r">Your Answer</div>
<div class="p-2 border-b">Correct</div>
</div>
<div id="resultsContent" class="overflow-x-auto"></div>
</div>
</div>
<form method="post" class="mt-6">
<input type="hidden" name="score" id="finalScore" value="0">
<div class="flex flex-wrap gap-3">
<button type="submit" name="submit_score" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
Save Score
</button>
<button type="button" id="restartButton" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
Try Again
</button>
</div>
</form>
</div>
<?php endif; ?>
</main>
</div>
<?php if (count($words) > 0): ?>
<script>
// Mobile menu toggle
document.getElementById("mobileMenuBtn").addEventListener("click", function() {
const mobileMenu = document.getElementById("mobileMenu");
mobileMenu.classList.toggle("hidden");
});
// Copy font toggle functionality to mobile button
if (document.getElementById("mobileFontToggleBtn")) {
document.getElementById("mobileFontToggleBtn").addEventListener("click", function() {
// Trigger the same behavior as the desktop button
document.getElementById("fontToggleBtn").click();
});
}
// Store words in JavaScript
const words = <?= json_encode($words) ?>;
// Learning state variables
let currentWordIndex = 0;
let correctAnswers = 0;
let userAnswers = [];
let startTime;
let timerInterval;
let isEnglishToDutch = false; // Tracks current direction
// DOM elements
const learningInterface = document.getElementById('learningInterface');
const resultsView = document.getElementById('resultsView');
const wordToTranslateElement = document.getElementById('wordToTranslate');
const sourceLanguageElement = document.getElementById('sourceLanguage');
const targetLanguageElement = document.getElementById('targetLanguage');
const answerForm = document.getElementById('answerForm');
const answerInput = document.getElementById('translationAnswer');
const feedbackElement = document.getElementById('feedback');
const progressTextElement = document.getElementById('progressText');
const timerElement = document.getElementById('timer');
const scoreDisplayElement = document.getElementById('scoreDisplay');
const scoreDetailsElement = document.getElementById('scoreDetails');
const resultsContentElement = document.getElementById('resultsContent');
const finalScoreInput = document.getElementById('finalScore');
const restartButton = document.getElementById('restartButton');
// Function to start the learning session
function startLearning() {
currentWordIndex = 0;
correctAnswers = 0;
userAnswers = [];
// Show learning interface
learningInterface.classList.remove('hidden');
resultsView.classList.add('hidden');
// Show first word
showCurrentWord();
// Start timer
startTime = new Date();
timerInterval = setInterval(updateTimer, 1000);
}
// Function to show the current word
function showCurrentWord() {
if (currentWordIndex < words.length) {
// Randomly determine direction (Dutch->English or English->Dutch)
isEnglishToDutch = Math.random() < 0.5;
const currentWord = words[currentWordIndex];
if (isEnglishToDutch) {
// Show English, ask for Dutch
wordToTranslateElement.textContent = currentWord.english;
sourceLanguageElement.textContent = "English";
targetLanguageElement.textContent = "Dutch";
} else {
// Show Dutch, ask for English
wordToTranslateElement.textContent = currentWord.dutch;
sourceLanguageElement.textContent = "Dutch";
targetLanguageElement.textContent = "English";
}
progressTextElement.textContent = `${currentWordIndex + 1}/${words.length}`;
feedbackElement.classList.add('hidden');
answerInput.value = '';
answerInput.disabled = false;
answerInput.focus();
} else {
// Learning complete, show results
showResults();
}
}
// Function to check answer
function checkAnswer(userAnswer) {
const currentWord = words[currentWordIndex];
// Determine correct answer based on current direction
const correctAnswer = isEnglishToDutch ? currentWord.dutch.toLowerCase().trim() : currentWord.english.toLowerCase().trim();
userAnswer = userAnswer.toLowerCase().trim();
const isCorrect = userAnswer === correctAnswer;
// Store user's answer
userAnswers.push({
question: isEnglishToDutch ? currentWord.english : currentWord.dutch,
direction: isEnglishToDutch ? "English → Dutch" : "Dutch → English",
userAnswer: userAnswer,
correctAnswer: isEnglishToDutch ? currentWord.dutch : currentWord.english,
isCorrect: isCorrect
});
if (isCorrect) {
correctAnswers++;
feedbackElement.innerHTML = `<p>Correct!</p>`;
feedbackElement.className = 'p-4 rounded-md bg-green-100 text-green-800';
} else {
feedbackElement.innerHTML = `<p>Incorrect. The correct answer is: <strong>${isEnglishToDutch ? currentWord.dutch : currentWord.english}</strong></p>`;
feedbackElement.className = 'p-4 rounded-md bg-red-100 text-red-800';
}
feedbackElement.classList.remove('hidden');
answerInput.disabled = true;
// Move to next word after a delay
setTimeout(() => {
currentWordIndex++;
showCurrentWord();
}, 1500);
}
// Function to show results
function showResults() {
// Stop timer
clearInterval(timerInterval);
// Calculate score
const score = Math.round((correctAnswers / words.length) * 100);
// Update results view
scoreDisplayElement.textContent = `${score}%`;
scoreDetailsElement.textContent = `You got ${correctAnswers} out of ${words.length} words correct`;
finalScoreInput.value = score;
// Generate results table
resultsContentElement.innerHTML = '';
userAnswers.forEach(answer => {
const rowClass = answer.isCorrect ? 'bg-green-50' : 'bg-red-50';
resultsContentElement.innerHTML += `
<div class="grid grid-cols-4 ${rowClass} border-b">
<div class="p-2 border-r">${answer.question}</div>
<div class="p-2 border-r">${answer.direction}</div>
<div class="p-2 border-r ${answer.isCorrect ? 'text-green-600' : 'text-red-600'}">${answer.userAnswer}</div>
<div class="p-2">${answer.correctAnswer}</div>
</div>
`;
});
// Hide learning interface and show results
learningInterface.classList.add('hidden');
resultsView.classList.remove('hidden');
}
// Function to update timer
function updateTimer() {
const now = new Date();
const diff = now - startTime;
const minutes = Math.floor(diff / 60000);
const seconds = Math.floor((diff % 60000) / 1000);
timerElement.textContent = `Time: ${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
// Form submission handler
answerForm.addEventListener('submit', function(event) {
event.preventDefault();
if (!answerInput.disabled) {
checkAnswer(answerInput.value);
}
});
// Restart button handler
restartButton.addEventListener('click', startLearning);
// Start learning when page loads
document.addEventListener('DOMContentLoaded', startLearning);
</script>
<?php endif; ?>
<script src="font-toggle.js"></script>
</body>
</html>