bb3eed1e7d
Small muted footer below all screens crediting PeopleCert International Ltd and noting personal study use only. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
83 lines
2.8 KiB
HTML
83 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>PRINCE2 7 Foundation Quiz</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="quiz-wrap">
|
|
<h1 class="sr-only">PRINCE2 7 Foundation oefenquiz</h1>
|
|
|
|
<!-- Language selection -->
|
|
<div id="lang" class="screen">
|
|
<div class="lang-screen">
|
|
<h2>PRINCE2 7 Foundation Quiz</h2>
|
|
<p>Selecteer een taal / Select a language</p>
|
|
<div class="lang-grid" id="lang-grid"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Start / question count -->
|
|
<div id="start" class="screen">
|
|
<div class="start-screen">
|
|
<h2>PRINCE2 7 Foundation Quiz</h2>
|
|
<p>Kies hoeveel vragen je wilt oefenen</p>
|
|
<div class="count-grid" id="count-grid"></div>
|
|
<button class="start-btn" onclick="startQuiz()" disabled id="start-btn">Start</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quiz -->
|
|
<div id="quiz" class="screen">
|
|
<div class="quiz-screen">
|
|
<div class="progress-bar-bg">
|
|
<div class="progress-bar-fill" id="progress-fill" style="width:0%"></div>
|
|
</div>
|
|
<div class="question-meta">
|
|
<span id="q-meta"></span>
|
|
<span id="timer-display">0:00 | gem. —</span>
|
|
</div>
|
|
<div class="question-text" id="q-text"></div>
|
|
<div class="options-list" id="options"></div>
|
|
<div class="explanation-box" id="explanation" style="display:none"></div>
|
|
<button class="next-btn" id="next-btn" onclick="nextQuestion()" style="display:none"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Result -->
|
|
<div id="result" class="screen">
|
|
<div class="result-screen">
|
|
<div class="score-circle" id="score-circle"></div>
|
|
<div class="result-label" id="result-label"></div>
|
|
<div class="result-sub" id="result-sub"></div>
|
|
<div class="result-grid">
|
|
<div class="result-stat">
|
|
<div class="result-stat-val" id="stat-correct"></div>
|
|
<div class="result-stat-lbl">goed</div>
|
|
</div>
|
|
<div class="result-stat">
|
|
<div class="result-stat-val" id="stat-wrong"></div>
|
|
<div class="result-stat-lbl">fout</div>
|
|
</div>
|
|
<div class="result-stat">
|
|
<div class="result-stat-val" id="stat-time"></div>
|
|
<div class="result-stat-lbl">gem. tijd/vraag</div>
|
|
</div>
|
|
</div>
|
|
<div class="result-actions">
|
|
<button onclick="goStart()">Nieuwe ronde</button>
|
|
<button onclick="retryWrong()" id="retry-btn" style="display:none">Fout gegane vragen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="copyright">Vragen © PeopleCert International Ltd. Uitsluitend voor persoonlijk studiegebruik.</footer>
|
|
|
|
<script src="data/questions-nl.js"></script>
|
|
<script src="data/questions-en.js"></script>
|
|
<script src="js/quiz.js"></script>
|
|
</body>
|
|
</html>
|