Quiz code
Uploaded by
bestcool06Quiz code
Uploaded by
bestcool06<!
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dynamic Quiz</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(to right, #74ebd5, #ACB6E5);
margin: 0;
padding: 0;
}
.container {
max-width: 700px;
background: #fff;
margin: 50px auto;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.question {
font-size: 22px;
margin-bottom: 20px;
}
.options label {
display: block;
margin: 10px 0;
font-size: 18px;
cursor: pointer;
padding: 8px;
border: 1px solid #ddd;
border-radius: 5px;
transition: background 0.3s, border 0.3s;
}
.options label:hover {
background: #f0f0f0;
border-color: #ccc;
}
button {
padding: 12px 25px;
font-size: 18px;
border: none;
border-radius: 5px;
background: #4CAF50;
color: #fff;
cursor: pointer;
transition: background 0.3s;
margin-top: 20px;
}
button:hover {
background: #45a049;
}
.result {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.feedback div {
margin-bottom: 20px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
background: #f9f9f9;
}
.correct {
color: green;
font-weight: bold;
}
.wrong {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div id="quiz"></div>
</div>
<script>
// Define a pool of questions (General Knowledge and Asia-related)
const allQuestions = [
{
question: "What is the capital of Japan?",
options: ["Tokyo", "Osaka", "Kyoto", "Hiroshima"],
answer: 0
},
{
question: "Which is the largest continent in the world?",
options: ["Asia", "Africa", "Europe", "Antarctica"],
answer: 0
},
{
question: "What is the longest river in Asia?",
options: ["Yangtze", "Ganges", "Mekong", "Yellow River"],
answer: 0
},
{
question: "Who wrote the play 'Hamlet'?",
options: ["William Shakespeare", "Charles Dickens", "Mark Twain", "Jane Austen"],
answer: 0
},
{
question: "Which is the largest country in Asia by land area?",
options: ["China", "India", "Russia", "Mongolia"],
answer: 2
},
{
question: "What is the official language of Brazil?",
options: ["Spanish", "Portuguese", "English", "French"],
answer: 1
},
{
question: "Which Asian country is famous for the Great Wall?",
options: ["India", "China", "Japan", "South Korea"],
answer: 1
},
{
question: "What is the smallest country in the world?",
options: ["Monaco", "Vatican City", "Nauru", "San Marino"],
answer: 1
},
{
question: "Which element has the chemical symbol 'O'?",
options: ["Gold", "Oxygen", "Osmium", "Iron"],
answer: 1
},
{
question: "Who is known as the father of computers?",
options: ["Albert Einstein", "Charles Babbage", "Isaac Newton", "Alan Turing"],
answer: 1
},
{
question: "What is the largest desert in Asia?",
options: ["Gobi Desert", "Arabian Desert", "Kalahari Desert", "Sahara Desert"],
answer: 0
},
{
question: "Which country hosted the 2018 FIFA World Cup?",
options: ["Russia", "Qatar", "Brazil", "Germany"],
answer: 0
},
{
question: "Which Asian country is known for sushi?",
options: ["China", "South Korea", "Japan", "Vietnam"],
answer: 2
},
{
question: "What is the tallest mountain in the world?",
options: ["K2", "Kangchenjunga", "Mount Everest", "Lhotse"],
answer: 2
},
{
question: "Who painted the Mona Lisa?",
options: ["Pablo Picasso", "Leonardo da Vinci", "Vincent van Gogh", "Claude
Monet"],
answer: 1
}
];
// Utility function to shuffle an array (Fisher-Yates shuffle)
function shuffle(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]];
}
return array;
}
// Randomly select 10 questions from the pool
const questions = shuffle(allQuestions.slice()).slice(0, 10);
let currentQuestionIndex = 0;
let score = 0;
let userAnswers = [];
// Display one question at a time
function showQuestion() {
const quizDiv = document.getElementById('quiz');
quizDiv.innerHTML = "";
if (currentQuestionIndex < questions.length) {
const currentQuestion = questions[currentQuestionIndex];
// Create question element
const questionEl = document.createElement('div');
questionEl.className = 'question';
questionEl.textContent = "Question " + (currentQuestionIndex + 1) + ": " +
currentQuestion.question;
quizDiv.appendChild(questionEl);
// Create options (radio buttons)
const optionsDiv = document.createElement('div');
optionsDiv.className = 'options';
currentQuestion.options.forEach((option, index) => {
const label = document.createElement('label');
const radio = document.createElement('input');
radio.type = "radio";
radio.name = "option";
radio.value = index;
label.appendChild(radio);
label.appendChild(document.createTextNode(" " + option));
optionsDiv.appendChild(label);
});
quizDiv.appendChild(optionsDiv);
// Create Next/Submit button
const button = document.createElement('button');
button.textContent = (currentQuestionIndex === questions.length - 1) ? "Submit" :
"Next";
button.addEventListener('click', () => {
// Ensure an option is selected
const selectedOption = document.querySelector('input[name="option"]:checked');
if (!selectedOption) {
alert("Please select an answer!");
return;
}
// Save user's answer (as an integer)
userAnswers.push(parseInt(selectedOption.value));
// Move to the next question or show results
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
showQuestion();
} else {
showResult();
}
});
quizDiv.appendChild(button);
}
}
// Display results, including score, pass/fail status, and feedback for each question
function showResult() {
const quizDiv = document.getElementById('quiz');
quizDiv.innerHTML = "";
// Calculate score by comparing userAnswers with the correct answers
questions.forEach((q, index) => {
if (userAnswers[index] === q.answer) {
score++;
}
});
const percentage = (score / questions.length) * 100;
// Create result message (80% or higher is pass)
const resultMessage = document.createElement('div');
resultMessage.className = 'result';
if (percentage >= 80) {
resultMessage.innerHTML = "Congratulations! You passed! Your score: " + score + "
/ " + questions.length;
} else {
resultMessage.innerHTML = "Try again, bad luck! You failed. Your score: " + score +
" / " + questions.length;
}
quizDiv.appendChild(resultMessage);
// Provide feedback with answers highlighted
const feedbackDiv = document.createElement('div');
feedbackDiv.className = 'feedback';
questions.forEach((q, index) => {
const questionFeedback = document.createElement('div');
let userAnswerText = userAnswers[index] !== undefined ?
q.options[userAnswers[index]] : "No answer";
let correctAnswerText = q.options[q.answer];
if (userAnswers[index] === q.answer) {
questionFeedback.innerHTML = "<strong>Question " + (index + 1) + ":</strong> " +
q.question + "<br>" +
"Your answer: <span class='correct'>" + userAnswerText + "</span><br>" +
"Correct answer: <span class='correct'>" + correctAnswerText + "</span>";
} else {
questionFeedback.innerHTML = "<strong>Question " + (index + 1) + ":</strong> " +
q.question + "<br>" +
"Your answer: <span class='wrong'>" + userAnswerText + "</span><br>" +
"Correct answer: <span class='correct'>" + correctAnswerText + "</span>";
}
feedbackDiv.appendChild(questionFeedback);
});
quizDiv.appendChild(feedbackDiv);
}
// Start the quiz by showing the first question
showQuestion();
</script>
</body>
</html>
