<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: skyblue ;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
#quiz-container {
background-color: lightgray;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
max-width: 600px;
margin: 20px auto;
padding: 20px;
text-align: left;
h1 {
text-align: center;
color: #333;
#question-container {
margin-bottom: 20px;
label {
display: block;
margin-bottom: 10px;
input[type="radio"] {
margin-right: 5px;
#submit-button {
display: block;
margin: 0 auto;
background-color: #007BFF;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
#submit-button:hover {
background-color: #0056b3;
#result-container {
text-align: center;
font-weight: bold;
font-size: 18px;
margin-top: 20px;
#timer {
text-align: center;
font-size: 20px;
color: red;
</style>
<title>Data Processing Questions</title>
</head>
<body>
<h1>Senior Secondary school 1</h1>
<div id="quiz-container">
<div id="question-container">
<!-- Questions and options will be displayed here -->
</div>
<button id="submit-button">Submit</button>
<div id="result-container"></div>
<div id="timer">Time: 20:00</div>
</div>
<script>
const questions = [
{
question: "……….is a basic fact that needs to undergo processing.",
options: ["A. information", "B. data", "C. output", "D. input"],
answer: "B"
},
question: "The methodology of converting data into information is",
options: ["A. data and information", "B. data processing", "C. decision making", "D. none of the
above"],
answer: "B"
},
question: "The major reason for data processing is",
options: ["A. decision making", "B. conflict promotion", "C. information generation", "D. data
manipulation"],
answer: "C"
},
question: "In data processing, input activity involves",
options: ["A. collection", "B. verification", "C. retrieving", "D. all of the above"],
answer: "D"
},
question: "One of these is not a data property",
options: ["A. presentation", "B. collection", "C. misuse", "D. accuracy"],
answer: "A"
},
question: "Napier’s Bones had ……",
options: ["A. 9 rods","B. 11 rods"," C. 10 rods","D. 12 rods"],
answer: "D"
},
question: "Jacquard’s loom was used in the ……",
options: ["A. mechanical industry","B.weaving industry"," C.food industry","D.all of the above"],
answer: "B"
},
question: " ",
options: ["A. ","B."," C.","D."],
answer: ""
},
question: " ",
options: ["A. ","B."," C.","D."],
answer: ""
},
question: " ",
options: ["A. ","B."," C.","D."],
answer: ""
},
question: " ",
options: ["A. ","B."," C.","D."],
answer: ""
},
question: " ",
options: ["A. ","B."," C.","D."],
answer: ""
},
question: " ",
options: ["A. ","B."," C.","D."],
answer: ""
},
question: " ",
options: ["A. ","B."," C.","D."],
answer: ""
},
];
let currentQuestionIndex = 0;
let score = 0;
let timer;
const timeLimit = 20 * 60; // 20 minutes in seconds
function shuffleArray(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]];
function displayQuestion() {
const questionContainer = document.getElementById("question-container");
const currentQuestion = questions[currentQuestionIndex];
questionContainer.innerHTML = `
<p>${currentQuestion.question}</p>
<form id="options-form">
${currentQuestion.options.map(option => `
<label>
<input type="radio" name="answer" value="${option.charAt(0)}">
${option}
</label>
`).join("")}
</form>
`;
function startTimer() {
let timeRemaining = timeLimit;
timer = setInterval(function () {
const timerDisplay = document.getElementById("timer");
const minutes = Math.floor(timeRemaining / 60);
const seconds = timeRemaining % 60;
timerDisplay.textContent = `Time: ${minutes}:${seconds.toString().padStart(2, '0')}`;
timeRemaining--;
if (timeRemaining < 0) {
clearInterval(timer);
submitQuiz();
}
}, 1000);
function submitQuiz() {
const optionsForm = document.getElementById("options-form");
const userAnswer = optionsForm.querySelector("input[name='answer']:checked");
if (userAnswer) {
if (userAnswer.value === questions[currentQuestionIndex].answer) {
score++;
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
displayQuestion();
} else {
clearInterval(timer);
showResult();
function showResult() {
const resultContainer = document.getElementById("result-container");
resultContainer.innerHTML = `
<p>Your Score: ${score} out of ${questions.length}</p>
`;
}
shuffleArray(questions);
displayQuestion();
startTimer();
const submitButton = document.getElementById("submit-button");
submitButton.addEventListener("click", submitQuiz);
</script>
</body>
</html>
