<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FULOKENT 102 Quiz</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f9f9f9; }
.quiz-container { max-width: 700px; margin: auto; padding: 20px; background: white; border-radius:
10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
h1 { text-align: center; color: #333; }
.timer { font-size: 18px; font-weight: bold; text-align: center; margin-bottom: 15px; color: #e63946; }
.question { font-size: 18px; margin-bottom: 10px; }
.options label { display: block; margin-bottom: 8px; background: #f1f1f1; padding: 10px; border-
radius: 5px; cursor: pointer; }
.navigation { display: flex; justify-content: space-between; margin-top: 15px; }
button { padding: 10px 15px; border: none; background: #457b9d; color: white; border-radius: 5px;
cursor: pointer; }
button:hover { background: #1d3557; }
.result { text-align: center; font-size: 20px; font-weight: bold; margin-top: 20px; }
</style>
</head>
<body>
<div class="quiz-container">
<h1>FULOKENT 102 Quiz</h1>
<div class="timer" id="timer">Time Left: 20:00</div>
<div class="question" id="question"></div>
<div class="options" id="options"></div>
<div class="navigation">
<button onclick="prevQuestion()">Previous</button>
<button onclick="nextQuestion()">Next</button>
<button onclick="submitQuiz()">Submit</button>
</div>
<div class="result" id="result"></div>
</div>
<script>
let questions = [];
let currentQuestion = 0;
let answers = {};
let timeLeft = 20 * 60; // 20 mins in seconds
async function loadQuestions() {
const res = await fetch('fulokent102.json');
questions = await res.json();
shuffleArray(questions);
showQuestion();
startTimer();
}
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
function startTimer() {
const timerElement = document.getElementById('timer');
const countdown = setInterval(() => {
let minutes = Math.floor(timeLeft / 60);
let seconds = timeLeft % 60;
timerElement.textContent = `Time Left: ${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
timeLeft--;
if (timeLeft < 0) {
clearInterval(countdown);
submitQuiz();
}, 1000);
function showQuestion() {
const questionElement = document.getElementById('question');
const optionsElement = document.getElementById('options');
let q = questions[currentQuestion];
questionElement.textContent = `${currentQuestion + 1}. ${q.question}`;
optionsElement.innerHTML = '';
q.options.forEach(option => {
const label = document.createElement('label');
const input = document.createElement('input');
input.type = 'radio';
input.name = 'option';
input.value = option;
input.checked = answers[currentQuestion] === option;
input.onclick = () => answers[currentQuestion] = option;
label.appendChild(input);
label.append(option);
optionsElement.appendChild(label);
});
function prevQuestion() {
if (currentQuestion > 0) {
currentQuestion--;
showQuestion();
}
function nextQuestion() {
if (currentQuestion < questions.length - 1) {
currentQuestion++;
showQuestion();
function submitQuiz() {
let score = 0;
questions.forEach((q, index) => {
if (answers[index] === q.answer) {
score++;
});
let percentage = (score / questions.length) * 100;
const resultElement = document.getElementById('result');
if (percentage >= 50) {
resultElement.innerHTML = `🎉 Congratulations! You passed with ${percentage.toFixed(2)}%`;
resultElement.style.color = 'green';
} else {
resultElement.innerHTML = `❌ You scored ${percentage.toFixed(2)}%. Keep trying!`;
resultElement.style.color = 'red';
}
loadQuestions();
</script>
</body>
</html>
