Scribd
Upload
17 views

Quiz code

The document is an HTML code for a dynamic quiz application that presents general knowledge and Asia-related questions. It includes a user interface with styled elements for questions, options, and results, as well as JavaScript functionality for question navigation and scoring. The quiz randomly selects 10 questions from a predefined pool and provides feedback based on user answers.

Uploaded by

bestcool06
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views

Quiz code

The document is an HTML code for a dynamic quiz application that presents general knowledge and Asia-related questions. It includes a user interface with styled elements for questions, options, and results, as well as JavaScript functionality for question navigation and scoring. The quiz randomly selects 10 questions from a predefined pool and provides feedback based on user answers.

Uploaded by

bestcool06
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

<!

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>

You might also like