Scribd
Upload
28 views3 pages

Quiz of Trains - HTML

Uploaded by

paariarjun7
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
28 views3 pages

Quiz of Trains - HTML

Uploaded by

paariarjun7
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/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>History of Trains Quiz</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
color: #333;
}
h1, h2 {
text-align: center;
}
.question {
margin: 20px 0;
}
.options label {
display: block;
padding: 8px;
background: #e7e7e7;
margin-bottom: 5px;
cursor: pointer;
border-radius: 4px;
}
.options input[type="radio"] {
display: none;
}
button {
display: block;
width: 100%;
padding: 10px;
margin-top: 20px;
font-size: 16px;
background-color: #333;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #555;
}
.result {
margin-top: 20px;
padding: 15px;
text-align: center;
font-weight: bold;
}
.correct {
background-color: #d4edda;
color: #155724;
}
.incorrect {
background-color: #f8d7da;
color: #721c24;
}
</style>
</head>
<body>

<h1>History of Trains Quiz</h1>

<div id="quiz">
<div class="question">
<h2>1. When was the world’s first full-scale working railway steam
locomotive built?</h2>
<div class="options">
<label><input type="radio" name="q1" value="A"> A) 1784</label>
<label><input type="radio" name="q1" value="B"> B) 1804</label>
<label><input type="radio" name="q1" value="C"> C) 1814</label>
<label><input type="radio" name="q1" value="D"> D) 1829</label>
</div>
</div>

<div class="question">
<h2>2. Who built the first successful steam locomotive?</h2>
<div class="options">
<label><input type="radio" name="q2" value="A"> A) George
Stephenson</label>
<label><input type="radio" name="q2" value="B"> B) Richard
Trevithick</label>
<label><input type="radio" name="q2" value="C"> C) James
Watt</label>
<label><input type="radio" name="q2" value="D"> D) Robert
Stephenson</label>
</div>
</div>

<div class="question">
<h2>3. What was the name of the first railway to carry both passengers
and freight with steam locomotives in 1825?</h2>
<div class="options">
<label><input type="radio" name="q3" value="A"> A) Liverpool and
Manchester Railway</label>
<label><input type="radio" name="q3" value="B"> B) Stockton and
Darlington Railway</label>
<label><input type="radio" name="q3" value="C"> C) Great Western
Railway</label>
<label><input type="radio" name="q3" value="D"> D) London and North
Western Railway</label>
</div>
</div>

<!-- Additional questions go here, using the same structure as above -->

<button onclick="checkAnswers()">Submit Answers</button>

<div id="result" class="result"></div>


</div>

<script>
function checkAnswers() {
const answers = {
q1: 'B',
q2: 'B',
q3: 'B'
// Add additional questions here
};

let score = 0;
let totalQuestions = Object.keys(answers).length;

for (let [key, value] of Object.entries(answers)) {


const selectedOption = document.querySelector(`input[name="$
{key}"]:checked`);
if (selectedOption && selectedOption.value === value) {
score++;
}
}

const resultDiv = document.getElementById("result");


if (score === totalQuestions) {
resultDiv.innerHTML = `Congratulations! You scored ${score} out of
${totalQuestions}. Excellent work!`;
resultDiv.className = "result correct";
} else {
resultDiv.innerHTML = `You scored ${score} out of $
{totalQuestions}. Keep learning!`;
resultDiv.className = "result incorrect";
}
}
</script>

</body>
</html>

You might also like