[go: up one dir, main page]
Scribd
Upload
12 views4 pages

!DOCTYPE HTML

Uploaded by

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

!DOCTYPE HTML

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz Website</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f7f7f7;
}

h1 {
color: #4CAF50;
text-align: center;
}

.question {
margin-bottom: 15px;
padding: 10px;
background: #fff;
border: 1px solid #ddd;
border-radius: 5px;
}

.question p {
font-weight: bold;
}

.result {
margin-top: 20px;
padding: 15px;
border: 2px solid #4CAF50;
background-color: #e8f5e9;
border-radius: 5px;
}

.question-result {
margin-top: 10px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
background: #fff;
}

.correct {
color: green;
}

.wrong {
color: red;
}

.unattempted {
color: gray;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}
</style>
</head>

<body>
<h1>Quiz Website</h1>
<form id="quiz-form">
<div id="questions-container"></div>
<button type="button" onclick="submitQuiz()">Submit Exam</button>
</form>

<div id="result-section" class="result" style="display: none;">


<h2>Results</h2>
<p id="correct-answers" class="correct"></p>
<p id="wrong-answers" class="wrong"></p>
<p id="unattempted-questions" class="unattempted"></p>
<p id="final-score"></p>
<h3>Detailed Results</h3>
<div id="detailed-results"></div>
</div>

<script>
const questions = [
{ question: "A very expensive and elaborately built tomb", options:
["Mausoleum", "Cemetery", "Mosque", "Masterpiece"], answer: "Mausoleum" },
{ question: "Holding on to something or keeping an opinion with
determination", options: ["Tenacious", "Obnoxious", "Gracious", "Loquacious"],
answer: "Tenacious" },
{ question: "Evoking a keen sense of sadness or regret", options:
["Unaffecting", "Impactful", "Poignant", "Pungent"], answer: "Poignant" },
// Add all questions in a similar format
];

function renderQuestions() {
const container = document.getElementById('questions-container');
questions.forEach((q, index) => {
const questionDiv = document.createElement('div');
questionDiv.classList.add('question');

const questionText = document.createElement('p');


questionText.textContent = `${index + 1}. ${q.question}`;
questionDiv.appendChild(questionText);

q.options.forEach(option => {
const label = document.createElement('label');
const input = document.createElement('input');
input.type = 'radio';
input.name = `q${index}`;
input.value = option;
label.appendChild(input);
label.appendChild(document.createTextNode(option));
questionDiv.appendChild(label);
questionDiv.appendChild(document.createElement('br'));
});

container.appendChild(questionDiv);
});
}

function submitQuiz() {
const answers = {};
const correctAnswers = {};
let correctCount = 0, wrongCount = 0, unattemptedCount = 0;
const detailedResults = document.getElementById('detailed-results');
detailedResults.innerHTML = '';

questions.forEach((q, index) => {


const selected = document.querySelector(`input[name="q$
{index}"]:checked`);
const resultDiv = document.createElement('div');
resultDiv.classList.add('question-result');

const questionText = document.createElement('p');


questionText.textContent = `${index + 1}. ${q.question}`;
resultDiv.appendChild(questionText);

correctAnswers[`q${index}`] = q.answer;

if (selected) {
answers[`q${index}`] = selected.value;
const userAnswerText = document.createElement('p');
userAnswerText.innerHTML = `Your Answer: <strong>$
{selected.value}</strong>`;
resultDiv.appendChild(userAnswerText);

if (selected.value === q.answer) {


correctCount++;
resultDiv.classList.add('correct');
resultDiv.appendChild(document.createTextNode('Correct!'));
} else {
wrongCount++;
resultDiv.classList.add('wrong');
resultDiv.appendChild(document.createTextNode('Wrong!'));
const correctAnswerText = document.createElement('p');
correctAnswerText.innerHTML = `Correct Answer: <strong>$
{q.answer}</strong>`;
resultDiv.appendChild(correctAnswerText);
}
} else {
unattemptedCount++;
resultDiv.classList.add('unattempted');
resultDiv.appendChild(document.createTextNode('Unattempted!'));
const correctAnswerText = document.createElement('p');
correctAnswerText.innerHTML = `Correct Answer: <strong>$
{q.answer}</strong>`;
resultDiv.appendChild(correctAnswerText);
}

detailedResults.appendChild(resultDiv);
});

const finalScore = (correctCount * 2) - (wrongCount * 0.5);

document.getElementById('correct-answers').textContent = `Correct
answers: ${correctCount}`;
document.getElementById('wrong-answers').textContent = `Wrong answers:
${wrongCount}`;
document.getElementById('unattempted-questions').textContent =
`Unattempted questions: ${unattemptedCount}`;
document.getElementById('final-score').textContent = `Final Score: $
{finalScore} points`;

document.getElementById('quiz-form').style.display = 'none';
document.getElementById('result-section').style.display = 'block';
}

// Render questions on page load


renderQuestions();
</script>
</body>

</html>

You might also like