Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>English Vocabulary Learning - Learn English Words</title>
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header class="header">
<div class="container">
<div class="logo">
<h1>🎓 English Vocabulary Trainer</h1>
</div>
<nav class="nav">
<a href="#practice">Practice</a>
<a href="lists.html" id="word-lists-link" class="hidden">My Lists</a>
<a href="#tutorial">Tutorial</a>
<div id="user-menu" class="user-menu hidden">
<span id="username-display"></span>
<button id="logout-btn" class="btn btn-secondary btn-sm">Logout</button>
</div>
<a href="login.html" id="login-link" class="btn btn-primary btn-sm">Login</a>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h2>Master English Vocabulary</h2>
<p>Practice English words with instant feedback and track your progress in real-time!</p>
</div>
</section>
<!-- Tutorial Video Section -->
<section id="tutorial" class="tutorial-section">
<div class="container">
<h2>📹 How to Use This Application</h2>
<div class="video-container">
<div class="video-wrapper">
<!-- Placeholder voor YouTube video -->
<!-- Vervang VIDEO_ID met jouw YouTube video ID -->
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
title="English Vocabulary Learning Tutorial"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<div class="video-description">
<h3>Watch the Tutorial</h3>
<p>Learn how to use this application effectively:</p>
<ul>
<li>✅ Select your preferred category and difficulty level</li>
<li>✅ Type the Dutch translation for each English word</li>
<li>✅ Get instant feedback on your answers</li>
<li>✅ Track your progress and see statistics</li>
<li>✅ Master words by answering correctly 3 times</li>
</ul>
<p class="note"><strong>Note:</strong> Replace the video URL with your own instructional video to complete this section.</p>
</div>
</div>
</div>
</section>
<!-- Practice Section -->
<section id="practice" class="practice-section">
<div class="container">
<h2>Start Practicing</h2>
<!-- Settings Panel -->
<div class="settings-panel">
<div class="setting-group">
<label for="source-select">Word Source:</label>
<select id="source-select">
<option value="default">Default Words</option>
<option value="list" disabled>Custom Lists (Login Required)</option>
</select>
</div>
<div class="setting-group" id="list-select-group" style="display: none;">
<label for="list-select">Select List:</label>
<select id="list-select">
<option value="">Choose a list...</option>
</select>
</div>
<div class="setting-group" id="category-select-group">
<label for="category-select">Category:</label>
<select id="category-select">
<option value="">All Categories</option>
</select>
</div>
<div class="setting-group">
<label for="difficulty-select">Difficulty:</label>
<select id="difficulty-select">
<option value="">All Levels</option>
<option value="beginner">Beginner</option>
<option value="intermediate">Intermediate</option>
<option value="advanced">Advanced</option>
</select>
</div>
<div class="setting-group">
<label for="translation-direction">Translation Direction:</label>
<div class="radio-group">
<label class="radio-label">
<input type="radio" name="direction" id="direction-en-nl" value="en-nl" checked>
<span>English → Dutch</span>
</label>
<label class="radio-label">
<input type="radio" name="direction" id="direction-nl-en" value="nl-en">
<span>Dutch → English</span>
</label>
</div>
</div>
<div class="setting-group">
<label for="word-count">Number of Words:</label>
<input type="number" id="word-count" min="5" max="50" value="10">
</div>
<button id="start-practice" class="btn btn-primary">Start Practice Session</button>
</div>
<!-- Practice Area -->
<div id="practice-area" class="practice-area hidden">
<div class="progress-bar">
<div class="progress-fill" id="progress-fill"></div>
<span class="progress-text" id="progress-text">0 / 0</span>
</div>
<div class="word-card">
<div class="word-category" id="word-category"></div>
<div class="word-difficulty" id="word-difficulty"></div>
<h3 id="translation-prompt">Translate this word to Dutch:</h3>
<div class="english-word" id="question-word">Loading...</div>
<div class="answer-section">
<input
type="text"
id="answer-input"
placeholder="Type your answer..."
autocomplete="off"
>
<button id="check-answer" class="btn btn-success">Check Answer</button>
<button id="skip-word" class="btn btn-secondary">Skip</button>
</div>
<div id="feedback" class="feedback hidden"></div>
</div>
<div class="word-stats">
<div class="stat-item">
<span class="stat-label">Correct:</span>
<span class="stat-value" id="correct-count">0</span>
</div>
<div class="stat-item">
<span class="stat-label">Incorrect:</span>
<span class="stat-value" id="incorrect-count">0</span>
</div>
<div class="stat-item">
<span class="stat-label">Accuracy:</span>
<span class="stat-value" id="accuracy">0%</span>
</div>
</div>
</div>
<!-- Results Section -->
<div id="results-section" class="results-section hidden">
<h2>🎉 Practice Session Complete!</h2>
<div class="results-stats">
<div class="result-card">
<div class="result-value" id="final-correct">0</div>
<div class="result-label">Correct Answers</div>
</div>
<div class="result-card">
<div class="result-value" id="final-total">0</div>
<div class="result-label">Total Words</div>
</div>
<div class="result-card">
<div class="result-value" id="final-score">0%</div>
<div class="result-label">Final Score</div>
</div>
</div>
<button id="restart-practice" class="btn btn-primary">Start New Session</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>© 2025 English Vocabulary Trainer | Built with PHP, MySQL, JavaScript & AJAX</p>
<p>Practice makes perfect! 💪</p>
</div>
</footer>
<script src="js/app.js"></script>
</body>
</html>