<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brunei Quiz Challenge</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.quiz-container {
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
max-width: 600px;
width: 100%;
padding: 40px;
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.quiz-header {
text-align: center;
margin-bottom: 30px;
}
.quiz-header h1 {
color: #333;
font-size: 2.5em;
margin-bottom: 10px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.quiz-header p {
color: #666;
font-size: 1.2em;
}
.progress-bar {
width: 100%;
height: 10px;
background: #e0e0e0;
border-radius: 5px;
margin-bottom: 30px;
overflow: hidden;
}
.progress {
height: 100%;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 5px;
transition: width 0.3s ease;
}
.question-container {
text-align: center;
margin-bottom: 30px;
}
.question-number {
color: #667eea;
font-size: 1.2em;
font-weight: bold;
margin-bottom: 10px;
}
.question {
font-size: 1.5em;
color: #333;
margin-bottom: 30px;
line-height: 1.4;
}
.options {
display: grid;
gap: 15px;
}
.option {
background: #f5f5f5;
border: 2px solid transparent;
border-radius: 10px;
padding: 20px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.1em;
text-align: left;
position: relative;
overflow: hidden;
}
.option:hover:not(.disabled) {
background: #e8e8e8;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.option.selected {
background: #667eea;
color: white;
transform: scale(1.02);
}
.option.correct {
background: #4caf50;
color: white;
animation: correctPulse 0.5s ease;
}
.option.incorrect {
background: #f44336;
color: white;
animation: shake 0.5s ease;
}
@keyframes correctPulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.option.disabled {
cursor: not-allowed;
opacity: 0.8;
}
.next-btn {
display: block;
margin: 30px auto 0;
padding: 15px 40px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 30px;
font-size: 1.2em;
cursor: pointer;
transition: all 0.3s ease;
opacity: 0;
transform: translateY(10px);
}
.next-btn.show {
opacity: 1;
transform: translateY(0);
}
.next-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}
.results {
text-align: center;
display: none;
}
.results h2 {
color: #333;
font-size: 2.5em;
margin-bottom: 20px;
}
.score {
font-size: 4em;
font-weight: bold;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 20px;
}
.score-message {
font-size: 1.3em;
color: #666;
margin-bottom: 30px;
}
.restart-btn {
padding: 15px 40px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 30px;
font-size: 1.2em;
cursor: pointer;
transition: all 0.3s ease;
}
.restart-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}
.timer {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.9);
padding: 10px 20px;
border-radius: 20px;
font-size: 1.2em;
font-weight: bold;
color: #667eea;
}
@media (max-width: 600px) {
.quiz-container {
padding: 20px;
}
.question {
font-size: 1.3em;
}
.option {
padding: 15px;
font-size: 1em;
}
}
</style>
</head>
<body>
<div class="quiz-container">
<div class="timer" id="timer">10</div>
<div class="quiz-header">
<h1>Brunei Quiz Challenge</h1>
<p>Test your knowledge about the Abode of Peace</p>
</div>
<div class="progress-bar">
<div class="progress" id="progress"></div>
</div>
<div id="quiz-content">
<div class="question-container">
<div class="question-number" id="question-number">Question 1 of 10</div>
<div class="question" id="question-text">Loading...</div>
</div>
<div class="options" id="options-container">
<!-- Options will be populated by JavaScript -->
</div>
<button class="next-btn" id="next-btn" onclick="nextQuestion()">Next Question</button>
</div>
<div class="results" id="results">
<h2>Quiz Complete!</h2>
<div class="score" id="score">0/10</div>
<div class="score-message" id="score-message"></div>
<button class="restart-btn" onclick="restartQuiz()">Try Again</button>
</div>
</div>
<script>
const questions = [
{
question: "What is the official name of Brunei?",
options: [
"Brunei Darussalam",
"Kingdom of Brunei",
"Republic of Brunei",
"State of Brunei"
],
correct: 0
},
{
question: "Which currency is used in Brunei?",
options: [
"Malaysian Ringgit",
"Brunei Dollar",
"Singapore Dollar",
"Both Brunei Dollar and Singapore Dollar"
],
correct: 3
},
{
question: "What is the capital city of Brunei?",
options: [
"Bandar Seri Begawan",
"Kuala Belait",
"Seria",
"Tutong"
],
correct: 0
},
{
question: "Who is the current Sultan of Brunei?",
options: [
"Sultan Hassanal Bolkiah",
"Sultan Omar Ali Saifuddien",
"Sultan Ahmad Tajuddin",
"Sultan Muhammad Jamalul Alam"
],
correct: 0
},
{
question: "In which year did Brunei gain independence from Britain?",
options: [
"1971",
"1984",
"1990",
"1965"
],
correct: 1
},
{
question: "What is the official religion of Brunei?",
options: [
"Buddhism",
"Christianity",
"Islam",
"Hinduism"
],
correct: 2
},
{
question: "Which famous mosque is located in Bandar Seri Begawan?",
options: [
"Sultan Omar Ali Saifuddien Mosque",
"Jame'Asr Hassanil Bolkiah Mosque",
"Al-Muhtadee Billah Mosque",
"All of the above"
],
correct: 3
},
{
question: "What is the main economic resource of Brunei?",
options: [
"Tourism",
"Oil and Gas",
"Agriculture",
"Manufacturing"
],
correct: 1
},
{
question: "Which neighboring country surrounds Brunei's territory?",
options: [
"Indonesia",
"Thailand",
"Malaysia",
"Philippines"
],
correct: 2
},
{
question: "What does 'Darussalam' mean in Brunei Darussalam?",
options: [
"Land of Peace",
"Abode of Peace",
"Island of Peace",
"Kingdom of Peace"
],
correct: 1
}
];
let currentQuestion = 0;
let score = 0;
let selectedOption = null;
let timerInterval = null;
let timeLeft = 10;
function startTimer() {
timeLeft = 10;
updateTimerDisplay();
clearInterval(timerInterval);
timerInterval = setInterval(() => {
timeLeft--;
updateTimerDisplay();
if (timeLeft <= 0) {
clearInterval(timerInterval);
handleTimeout();
}
}, 1000);
}
function updateTimerDisplay() {
document.getElementById('timer').textContent = timeLeft;
if (timeLeft <= 5) {
document.getElementById('timer').style.color = '#f44336';
} else {
document.getElementById('timer').style.color = '#667eea';
}
}
function handleTimeout() {
const options = document.querySelectorAll('.option');
options.forEach(option => {
option.classList.add('disabled');
if (parseInt(option.dataset.index) === questions[currentQuestion].correct) {
option.classList.add('correct');
}
});
document.getElementById('next-btn').classList.add('show');
}
function loadQuestion() {
const question = questions[currentQuestion];
document.getElementById('question-number').textContent = `Question ${currentQuestion + 1} of ${questions.length}`;
document.getElementById('question-text').textContent = question.question;
const optionsContainer = document.getElementById('options-container');
optionsContainer.innerHTML = '';
question.options.forEach((option, index) => {
const optionDiv = document.createElement('div');
optionDiv.className = 'option';
optionDiv.textContent = option;
optionDiv.dataset.index = index;
optionDiv.onclick = () => selectOption(index);
optionsContainer.appendChild(optionDiv);
});
document.getElementById('next-btn').classList.remove('show');
selectedOption = null;
updateProgressBar();
startTimer();
}
function selectOption(index) {
if (selectedOption !== null) return;
selectedOption = index;
clearInterval(timerInterval);
const options = document.querySelectorAll('.option');
options.forEach(option => {
option.classList.add('disabled');
const optionIndex = parseInt(option.dataset.index);
if (optionIndex === index) {
option.classList.add('selected');
if (optionIndex === questions[currentQuestion].correct) {
option.classList.add('correct');
score++;
} else {
option.classList.add('incorrect');
}
} else if (optionIndex === questions[currentQuestion].correct) {
option.classList.add('correct');
}
});
document.getElementById('next-btn').classList.add('show');
}
function nextQuestion() {
currentQuestion++;
if (currentQuestion < questions.length) {
loadQuestion();
} else {
showResults();
}
}
function updateProgressBar() {
const progress = ((currentQuestion + 1) / questions.length) * 100;
document.getElementById('progress').style.width = progress + '%';
}
function showResults() {
clearInterval(timerInterval);
document.getElementById('quiz-content').style.display = 'none';
document.getElementById('timer').style.display = 'none';
document.getElementById('results').style.display = 'block';
document.getElementById('score').textContent = `${score}/${questions.length}`;
let message = '';
const percentage = (score / questions.length) * 100;
if (percentage === 100) {
message = 'Perfect! You are a true Brunei expert! 🇧🇳';
} else if (percentage >= 80) {
message = 'Excellent! You know Brunei very well! 👏';
} else if (percentage >= 60) {
message = 'Good job! You have solid knowledge about Brunei! 👍';
} else if (percentage >= 40) {
message = 'Not bad! Keep learning more about Brunei! 📚';
} else {
message = 'Time to visit Brunei and learn more! ✈️';
}
document.getElementById('score-message').textContent = message;
}
function restartQuiz() {
currentQuestion = 0;
score = 0;
selectedOption = null;
document.getElementById('quiz-content').style.display = 'block';
document.getElementById('timer').style.display = 'block';
document.getElementById('results').style.display = 'none';
loadQuestion();
}
// Initialize the quiz
loadQuestion();
</script>
</body>
</html>