1463 lines
63 KiB
HTML
1463 lines
63 KiB
HTML
<!DOCTYPE html>
|
|
<!-- saved from url=(0063)file:///Users/home/Downloads/deepseek_html_20260217_403552.html -->
|
|
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Computers and Technology Basics Quiz</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
color: #1a1a1a;
|
|
line-height: 1.5;
|
|
background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.quiz-container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.quiz-header {
|
|
background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
|
|
color: white;
|
|
padding: 40px 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.quiz-title {
|
|
font-size: 2.2rem;
|
|
font-weight: 700;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.quiz-subtitle {
|
|
font-size: 1.1rem;
|
|
opacity: 0.9;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.quiz-progress {
|
|
background: #f8f9fa;
|
|
padding: 15px 30px;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.progress-bar {
|
|
flex: 1;
|
|
height: 6px;
|
|
background: #e2e8f0;
|
|
border-radius: 3px;
|
|
margin: 0 20px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #2c3e50 0%, #3498db 100%);
|
|
width: 0%;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.question-container {
|
|
padding: 40px 30px;
|
|
display: none;
|
|
}
|
|
|
|
.question-container.active {
|
|
display: block;
|
|
animation: fadeIn 0.5s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.question-number {
|
|
font-size: 0.9rem;
|
|
color: #3498db;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.question-topic {
|
|
display: inline-block;
|
|
background: #e6f0ff;
|
|
color: #2c3e50;
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.question-text {
|
|
font-size: 1.4rem;
|
|
font-weight: 600;
|
|
margin-bottom: 30px;
|
|
color: #2c3e50;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.options-container {
|
|
display: grid;
|
|
gap: 15px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.option {
|
|
background: #f8fafc;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
padding: 18px 20px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.option:hover {
|
|
background: #f0f7ff;
|
|
border-color: #3498db;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.option.selected {
|
|
background: #e6f0ff;
|
|
border-color: #3498db;
|
|
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
|
|
}
|
|
|
|
.option.correct {
|
|
background: #d4edda;
|
|
border-color: #28a745;
|
|
}
|
|
|
|
.option.incorrect {
|
|
background: #f8d7da;
|
|
border-color: #dc3545;
|
|
}
|
|
|
|
.option-label {
|
|
background: #3498db;
|
|
color: white;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 15px;
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.option-text {
|
|
flex: 1;
|
|
font-size: 1rem;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.explanation {
|
|
background: #f8f9fa;
|
|
border-left: 4px solid #3498db;
|
|
padding: 20px;
|
|
border-radius: 0 8px 8px 0;
|
|
margin-top: 20px;
|
|
display: none;
|
|
}
|
|
|
|
.explanation.show {
|
|
display: block;
|
|
animation: slideIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from { opacity: 0; transform: translateX(-10px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
.explanation-title {
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
margin-bottom: 10px;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.quiz-footer {
|
|
padding: 20px 30px;
|
|
border-top: 1px solid #e2e8f0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-btn {
|
|
padding: 12px 24px;
|
|
background: #2c3e50;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.nav-btn:hover:not(:disabled) {
|
|
background: #1a252f;
|
|
}
|
|
|
|
.nav-btn:disabled {
|
|
background: #cbd5e0;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.results-container {
|
|
padding: 40px 30px;
|
|
text-align: center;
|
|
display: none;
|
|
}
|
|
|
|
.results-container.show {
|
|
display: block;
|
|
animation: fadeIn 0.5s ease;
|
|
}
|
|
|
|
.score-circle {
|
|
width: 150px;
|
|
height: 150px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
|
|
margin: 0 auto 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
|
|
}
|
|
|
|
.results-title {
|
|
font-size: 2rem;
|
|
color: #2c3e50;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.results-message {
|
|
color: #4a5568;
|
|
margin-bottom: 30px;
|
|
font-size: 1.1rem;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.results-details {
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-top: 30px;
|
|
text-align: left;
|
|
}
|
|
|
|
.detail-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.detail-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.restart-btn {
|
|
padding: 15px 40px;
|
|
background: #3498db;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin-top: 30px;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.restart-btn:hover {
|
|
background: #2980b9;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
body {
|
|
padding: 10px;
|
|
}
|
|
|
|
.quiz-header {
|
|
padding: 30px 20px;
|
|
}
|
|
|
|
.quiz-title {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.question-container {
|
|
padding: 30px 20px;
|
|
}
|
|
|
|
.question-text {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.quiz-footer {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="quiz-container">
|
|
<div class="quiz-header">
|
|
<h1 class="quiz-title">Computers and Technology Basics</h1>
|
|
<p class="quiz-subtitle">Test your knowledge of computer fundamentals</p>
|
|
</div>
|
|
|
|
<div class="quiz-progress">
|
|
<span id="current-question">Question 1</span>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progress-fill" style="width: 0%;"></div>
|
|
</div>
|
|
<span id="total-questions">of 25</span>
|
|
</div>
|
|
|
|
<!-- Question 1 - Introduction to Computers -->
|
|
<div class="question-container active" id="question1">
|
|
<div class="question-topic">Introduction to Computers</div>
|
|
<h2 class="question-text">What is hardware?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a" style="pointer-events: none;">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Programs and applications that run on a computer</div>
|
|
</div>
|
|
<div class="option selected correct" data-value="b" style="pointer-events: none;">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">The physical components of a computer that can be touched</div>
|
|
</div>
|
|
<div class="option" data-value="c" style="pointer-events: none;">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Data stored on a computer's hard drive</div>
|
|
</div>
|
|
<div class="option" data-value="d" style="pointer-events: none;">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">The operating system that manages computer resources</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation show" id="explanation1">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Hardware refers to the physical components of a computer that you can physically touch and interact with, such as the mouse, keyboard, and monitor.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(1)">Next Question</button>
|
|
<span style="color: #666; font-size: 0.9rem;">Select an option to continue</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 2 - Hardware: Input and Output -->
|
|
<div class="question-container" id="question2">
|
|
<div class="question-topic">Hardware: Input and Output</div>
|
|
<h2 class="question-text">Which of the following is an input device?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Printer</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Monitor</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Keyboard</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Speaker</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation2">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Input devices allow users to give information to a device. Examples include keyboard, mouse, and scanner.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(2)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 3 - Hardware: Input and Output -->
|
|
<div class="question-container" id="question3">
|
|
<div class="question-topic">Hardware: Input and Output</div>
|
|
<h2 class="question-text">Which of the following is an output device?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Mouse</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Monitor</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Scanner</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Keyboard</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation3">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Output devices allow users to receive information from a device. Examples include monitor, printer, and speakers.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(3)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 4 - Hardware: Main Internal Components -->
|
|
<div class="question-container" id="question4">
|
|
<div class="question-topic">Hardware: Main Internal Components</div>
|
|
<h2 class="question-text">What does CPU stand for?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Central Processing Unit</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Computer Power Utility</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Central Programming Unit</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Core Processing Unit</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation4">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>CPU stands for Central Processing Unit. It's often referred to as the "brain" of the computer because it performs calculations and processes data.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(4)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 5 - Hardware: Main Internal Components -->
|
|
<div class="question-container" id="question5">
|
|
<div class="question-topic">Hardware: Main Internal Components</div>
|
|
<h2 class="question-text">What is the difference between RAM and ROM?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">RAM is faster, ROM is slower</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">RAM is temporary and loses data when power is off; ROM is permanent and retains data</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">RAM stores files, ROM stores programs</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">RAM is for graphics, ROM is for processing</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation5">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>RAM (Random Access Memory) is temporary memory that loses its data when the computer is turned off. ROM (Read-Only Memory) is permanent memory that retains data even without power.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(5)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 6 - Hardware: Main Internal Components -->
|
|
<div class="question-container" id="question6">
|
|
<div class="question-topic">Hardware: Main Internal Components</div>
|
|
<h2 class="question-text">How does an SSD differ from an HDD?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">SSD uses flash memory with no moving parts; HDD has spinning disks</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">SSD is older technology, HDD is newer</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">SSD stores less data than HDD</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">SSD is only used in servers, HDD in personal computers</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation6">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>SSD (Solid State Drive) uses flash memory and has no moving parts, making it faster and more reliable than HDD (Hard Disk Drive), which uses spinning disks to read/write data.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(6)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 7 - Hardware: Main Internal Components -->
|
|
<div class="question-container" id="question7">
|
|
<div class="question-topic">Hardware: Main Internal Components</div>
|
|
<h2 class="question-text">What is the function of a motherboard?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">It supplies power to all parts of the computer</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">It has slots for all the main components of a computer</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">It processes graphics and images</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">It stores all the computer's data permanently</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation7">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The motherboard is the main printed circuit board that contains the computer's essential components and has connectors for other circuit boards to be slotted into.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(7)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 8 - Networking -->
|
|
<div class="question-container" id="question8">
|
|
<div class="question-topic">Networking</div>
|
|
<h2 class="question-text">What is networking?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Connecting computers and devices to share information and resources</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Programming computers to perform specific tasks</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Installing software on multiple computers</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Repairing damaged computer components</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation8">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Networking means connecting computers and devices so they can share information, resources, and communicate with each other.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(8)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 9 - Networking -->
|
|
<div class="question-container" id="question9">
|
|
<div class="question-topic">Networking</div>
|
|
<h2 class="question-text">What does a router do?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Stores data permanently</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Connects different networks and lets devices access the internet</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Prints documents from multiple computers</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Displays network status information</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation9">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>A router is a device that routes data between different networks, often connecting a local network (LAN) to the internet.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(9)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 10 - Networks and Topology -->
|
|
<div class="question-container" id="question10">
|
|
<div class="question-topic">Networks and Topology</div>
|
|
<h2 class="question-text">What is the difference between LAN and WAN?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">LAN is for businesses, WAN is for homes</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">LAN connects devices in a limited area; WAN covers broader geographical areas</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">LAN uses cables, WAN uses wireless only</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">LAN is faster, WAN is more secure</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation10">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>LAN (Local Area Network) connects devices in a limited geographical area like a home or office. WAN (Wide Area Network) connects devices over a broader area like cities or countries.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(10)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 11 - Networks and Topology -->
|
|
<div class="question-container" id="question11">
|
|
<div class="question-topic">Networks and Topology</div>
|
|
<h2 class="question-text">In which network topology are all devices connected to a central hub?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Bus topology</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Mesh topology</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Ring topology</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Star topology</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation11">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>In star topology, all devices are connected to a central hub or switch, making it easy to manage and troubleshoot.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(11)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 12 - Operating Systems and Utility Software -->
|
|
<div class="question-container" id="question12">
|
|
<div class="question-topic">Operating Systems and Utility Software</div>
|
|
<h2 class="question-text">What is software?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">The physical components of a computer</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Programs and applications that instruct hardware how to perform tasks</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">The cables connecting computer components</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">The computer case and cooling fans</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation12">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Software is a collection of programs and applications that provide instructions to hardware on how to perform tasks. Unlike hardware, software cannot be touched.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(12)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 13 - Operating Systems and Utility Software -->
|
|
<div class="question-container" id="question13">
|
|
<div class="question-topic">Operating Systems and Utility Software</div>
|
|
<h2 class="question-text">Which of the following is an example of an operating system?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Microsoft Word</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Google Chrome</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Windows</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Photoshop</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation13">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Windows is an operating system developed by Microsoft. Other examples include macOS and Linux.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(13)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 14 - Application, Browsers and Development Software -->
|
|
<div class="question-container" id="question14">
|
|
<div class="question-topic">Application, Browsers and Development Software</div>
|
|
<h2 class="question-text">What is the purpose of word processing software?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">To organize and analyze data in tables</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">To create, edit, and format text documents</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">To access and browse the internet</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">To protect computers from malware</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation14">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Word processing software like Microsoft Word allows users to create, edit, and format text documents.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(14)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 15 - Application, Browsers and Development Software -->
|
|
<div class="question-container" id="question15">
|
|
<div class="question-topic">Application, Browsers and Development Software</div>
|
|
<h2 class="question-text">What does IDE stand for in programming?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Integrated Development Environment</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Internet Data Exchange</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Interactive Design Editor</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Input Device Emulator</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation15">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>IDE stands for Integrated Development Environment - software that provides comprehensive tools for programming, like Visual Studio or Eclipse.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(15)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 16 - Basic Programming Concepts -->
|
|
<div class="question-container" id="question16">
|
|
<div class="question-topic">Basic Programming Concepts</div>
|
|
<h2 class="question-text">What is an algorithm?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">A type of computer virus</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">A step-by-step procedure for completing a task</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">A programming language</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">A hardware component</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation16">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>An algorithm is a set of clear, step-by-step instructions for solving a specific problem or completing a task.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(16)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 17 - Basic Programming Concepts -->
|
|
<div class="question-container" id="question17">
|
|
<div class="question-topic">Basic Programming Concepts</div>
|
|
<h2 class="question-text">What does debugging mean?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Removing insects from computer hardware</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Finding and correcting errors in a computer program</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Installing new software</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Updating the operating system</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation17">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Debugging involves finding and fixing errors or flaws in a computer program to make it work correctly.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(17)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 18 - Internet Safety -->
|
|
<div class="question-container" id="question18">
|
|
<div class="question-topic">Internet Safety</div>
|
|
<h2 class="question-text">What is cyberbullying?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Using technology to harass, threaten, or embarrass someone</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">A virus that attacks computer systems</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Creating strong passwords</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Online shopping fraud</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation18">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Cyberbullying involves using technology, such as social media or messaging apps, to harass, threaten, or embarrass someone.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(18)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 19 - Files and File Types -->
|
|
<div class="question-container" id="question19">
|
|
<div class="question-topic">Files and File Types</div>
|
|
<h2 class="question-text">What is the difference between a .docx file and a .txt file?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">.docx is for images, .txt is for audio</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">.docx can contain text, images, and styles; .txt contains only unformatted text</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">.docx is smaller, .txt is larger</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">.docx is for spreadsheets, .txt is for presentations</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation19">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>.docx files (Word documents) can contain formatted text, images, and styles. .txt files are plain text files containing only unformatted text.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(19)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 20 - Files and File Types -->
|
|
<div class="question-container" id="question20">
|
|
<div class="question-topic">Files and File Types</div>
|
|
<h2 class="question-text">What type of file would you use to save a photograph?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">.mp3</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">.docx</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">.jpg or .png</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">.zip</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation20">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Photographs are typically saved as .jpg (JPEG) or .png (Portable Network Graphics) files, which are image formats.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(20)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 21 - Files and File Types -->
|
|
<div class="question-container" id="question21">
|
|
<div class="question-topic">Files and File Types</div>
|
|
<h2 class="question-text">How can you tell what type of file it is when you see a file on your computer?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">By the file size</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">By the file extension at the end of the filename</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">By the date it was created</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">By the folder it's stored in</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation21">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>You can identify a file type by looking at the file extension at the end of the filename, such as .jpg for images or .docx for Word documents.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(21)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 22 - Creating and Editing Images -->
|
|
<div class="question-container" id="question22">
|
|
<div class="question-topic">Creating and Editing Images</div>
|
|
<h2 class="question-text">What is graphic design?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Writing code for computer programs</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">The art of combining text, images, and colors to communicate visually</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Installing graphics cards in computers</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Connecting monitors to computers</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation22">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Graphic design is the practice of using visual elements like text, images, and colors to communicate ideas or messages.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(22)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 23 - Web Development Basics -->
|
|
<div class="question-container" id="question23">
|
|
<div class="question-topic">Web Development Basics</div>
|
|
<h2 class="question-text">What is HTML used for?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Styling the visual presentation of websites</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Structuring the content of web pages</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Adding interactivity to web pages</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Storing website data in databases</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation23">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>HTML (HyperText Markup Language) is used to structure the content of web pages, including headings, paragraphs, links, and other elements.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(23)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 24 - Web Development Basics -->
|
|
<div class="question-container" id="question24">
|
|
<div class="question-topic">Web Development Basics</div>
|
|
<h2 class="question-text">What does CSS do?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Creates the structure of web pages</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Styles the visual presentation of websites</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Adds database functionality</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Manages server-side operations</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation24">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>CSS (Cascading Style Sheets) is used to style and layout web pages, controlling aspects like colors, fonts, and positioning of elements.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(24)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 25 - Introduction to Robotics -->
|
|
<div class="question-container" id="question25">
|
|
<div class="question-topic">Introduction to Robotics</div>
|
|
<h2 class="question-text">What is a robot?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">A computer program that learns from data</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">A mechanical device programmed to carry out tasks automatically</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">A type of operating system</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">A network security tool</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation25">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>A robot is a mechanical device that can perform programmed tasks automatically, often using sensors and motors to interact with its environment.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(25)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Results Screen -->
|
|
<div class="results-container" id="results">
|
|
<div class="score-circle" id="score-circle">0%</div>
|
|
<h2 class="results-title" id="results-title">Quiz Complete!</h2>
|
|
<p class="results-message" id="results-message">You have completed the Computers and Technology Basics Quiz.</p>
|
|
|
|
<div class="results-details">
|
|
<div class="detail-item">
|
|
<span>Total Questions:</span>
|
|
<span id="total-questions-result">25</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span>Correct Answers:</span>
|
|
<span id="correct-answers">0</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span>Incorrect Answers:</span>
|
|
<span id="incorrect-answers">0</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span>Accuracy:</span>
|
|
<span id="accuracy">0%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="restart-btn" onclick="restartQuiz()">Restart Quiz</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Quiz configuration with randomized correct answers
|
|
const totalQuestions = 25;
|
|
let currentQuestion = 1;
|
|
let score = 0;
|
|
let userAnswers = new Array(totalQuestions).fill(null);
|
|
|
|
// Randomized correct answers (not all 'a')
|
|
const correctAnswers = {
|
|
1: "b", 2: "c", 3: "b", 4: "a", 5: "b",
|
|
6: "a", 7: "b", 8: "a", 9: "b", 10: "b",
|
|
11: "d", 12: "b", 13: "c", 14: "b", 15: "a",
|
|
16: "b", 17: "b", 18: "a", 19: "b", 20: "c",
|
|
21: "b", 22: "b", 23: "b", 24: "b", 25: "b"
|
|
};
|
|
|
|
// Initialize quiz
|
|
function initializeQuiz() {
|
|
updateProgress();
|
|
document.getElementById('total-questions').textContent = `of ${totalQuestions}`;
|
|
}
|
|
|
|
// Update progress bar and question counter
|
|
function updateProgress() {
|
|
const progress = ((currentQuestion - 1) / totalQuestions) * 100;
|
|
document.getElementById('progress-fill').style.width = `${progress}%`;
|
|
document.getElementById('current-question').textContent = `Question ${currentQuestion}`;
|
|
}
|
|
|
|
// Handle option selection
|
|
document.querySelectorAll('.option').forEach(option => {
|
|
option.addEventListener('click', function() {
|
|
const questionId = this.closest('.question-container').id;
|
|
document.querySelectorAll(`#${questionId} .option`).forEach(opt => {
|
|
opt.classList.remove('selected');
|
|
});
|
|
|
|
this.classList.add('selected');
|
|
|
|
const checkBtn = document.querySelector(`#${questionId} .nav-btn`);
|
|
if (checkBtn && checkBtn.textContent.includes('Check')) {
|
|
checkBtn.disabled = false;
|
|
}
|
|
});
|
|
});
|
|
|
|
// Check answer function
|
|
function checkAnswer(questionNum) {
|
|
const questionContainer = document.getElementById(`question${questionNum}`);
|
|
const selectedOption = questionContainer.querySelector('.option.selected');
|
|
|
|
if (!selectedOption) {
|
|
alert('Please select an answer before checking.');
|
|
return;
|
|
}
|
|
|
|
const selectedValue = selectedOption.getAttribute('data-value');
|
|
const isCorrect = selectedValue === correctAnswers[questionNum];
|
|
|
|
userAnswers[questionNum - 1] = selectedValue;
|
|
|
|
questionContainer.querySelectorAll('.option').forEach(option => {
|
|
const value = option.getAttribute('data-value');
|
|
if (value === correctAnswers[questionNum]) {
|
|
option.classList.add('correct');
|
|
} else if (value === selectedValue && !isCorrect) {
|
|
option.classList.add('incorrect');
|
|
}
|
|
option.style.pointerEvents = 'none';
|
|
});
|
|
|
|
if (isCorrect) {
|
|
score++;
|
|
}
|
|
|
|
const explanation = document.getElementById(`explanation${questionNum}`);
|
|
explanation.classList.add('show');
|
|
|
|
const checkBtn = questionContainer.querySelector('.nav-btn');
|
|
checkBtn.textContent = currentQuestion === totalQuestions ? 'View Results' : 'Next Question';
|
|
checkBtn.onclick = () => nextQuestion();
|
|
|
|
const prevBtn = questionContainer.querySelectorAll('.nav-btn')[1];
|
|
if (prevBtn && prevBtn.textContent.includes('Previous')) {
|
|
prevBtn.disabled = true;
|
|
}
|
|
}
|
|
|
|
// Next question function
|
|
function nextQuestion() {
|
|
document.getElementById(`question${currentQuestion}`).classList.remove('active');
|
|
|
|
if (currentQuestion < totalQuestions) {
|
|
currentQuestion++;
|
|
document.getElementById(`question${currentQuestion}`).classList.add('active');
|
|
updateProgress();
|
|
} else {
|
|
showResults();
|
|
}
|
|
}
|
|
|
|
// Previous question function
|
|
function previousQuestion() {
|
|
if (currentQuestion > 1) {
|
|
document.getElementById(`question${currentQuestion}`).classList.remove('active');
|
|
currentQuestion--;
|
|
document.getElementById(`question${currentQuestion}`).classList.add('active');
|
|
updateProgress();
|
|
}
|
|
}
|
|
|
|
// Show results function
|
|
function showResults() {
|
|
document.querySelector('.quiz-progress').style.display = 'none';
|
|
document.getElementById(`question${totalQuestions}`).classList.remove('active');
|
|
|
|
const resultsContainer = document.getElementById('results');
|
|
resultsContainer.classList.add('show');
|
|
|
|
const accuracy = Math.round((score / totalQuestions) * 100);
|
|
|
|
document.getElementById('score-circle').textContent = `${accuracy}%`;
|
|
document.getElementById('correct-answers').textContent = score;
|
|
document.getElementById('incorrect-answers').textContent = totalQuestions - score;
|
|
document.getElementById('accuracy').textContent = `${accuracy}%`;
|
|
document.getElementById('total-questions-result').textContent = totalQuestions;
|
|
|
|
const resultsTitle = document.getElementById('results-title');
|
|
const resultsMessage = document.getElementById('results-message');
|
|
|
|
if (accuracy >= 90) {
|
|
resultsTitle.textContent = 'Excellent!';
|
|
resultsMessage.textContent = 'You have mastered computer basics! Your understanding of hardware, software, and technology fundamentals is outstanding.';
|
|
} else if (accuracy >= 70) {
|
|
resultsTitle.textContent = 'Great Job!';
|
|
resultsMessage.textContent = 'You have a solid grasp of computer fundamentals. Review any missed topics to strengthen your knowledge.';
|
|
} else if (accuracy >= 50) {
|
|
resultsTitle.textContent = 'Good Effort!';
|
|
resultsMessage.textContent = 'You understand the basics. Consider reviewing the material to build a stronger foundation.';
|
|
} else {
|
|
resultsTitle.textContent = 'Keep Learning!';
|
|
resultsMessage.textContent = 'Review the computer basics material and try again. Understanding these fundamentals is important for technology literacy.';
|
|
}
|
|
}
|
|
|
|
// Restart quiz function
|
|
function restartQuiz() {
|
|
currentQuestion = 1;
|
|
score = 0;
|
|
userAnswers.fill(null);
|
|
|
|
document.querySelector('.quiz-progress').style.display = 'flex';
|
|
document.getElementById('results').classList.remove('show');
|
|
|
|
for (let i = 1; i <= totalQuestions; i++) {
|
|
const question = document.getElementById(`question${i}`);
|
|
question.classList.remove('active');
|
|
|
|
question.querySelectorAll('.option').forEach(option => {
|
|
option.classList.remove('selected', 'correct', 'incorrect');
|
|
option.style.pointerEvents = 'auto';
|
|
});
|
|
|
|
const explanation = document.getElementById(`explanation${i}`);
|
|
explanation.classList.remove('show');
|
|
|
|
const checkBtn = question.querySelector('.nav-btn');
|
|
checkBtn.textContent = 'Check Answer';
|
|
checkBtn.onclick = () => checkAnswer(i);
|
|
checkBtn.disabled = false;
|
|
|
|
const prevBtn = question.querySelectorAll('.nav-btn')[1];
|
|
if (prevBtn) {
|
|
prevBtn.disabled = false;
|
|
}
|
|
}
|
|
|
|
document.getElementById('question1').classList.add('active');
|
|
updateProgress();
|
|
}
|
|
|
|
window.addEventListener('DOMContentLoaded', initializeQuiz);
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'ArrowRight') {
|
|
const activeQuestion = document.querySelector('.question-container.active');
|
|
const checkBtn = activeQuestion.querySelector('.nav-btn');
|
|
if (checkBtn && !checkBtn.disabled) {
|
|
checkBtn.click();
|
|
}
|
|
} else if (e.key === 'ArrowLeft') {
|
|
const activeQuestion = document.querySelector('.question-container.active');
|
|
const prevBtn = activeQuestion.querySelectorAll('.nav-btn')[1];
|
|
if (prevBtn && !prevBtn.disabled) {
|
|
prevBtn.click();
|
|
}
|
|
} else if (e.key >= '1' && e.key <= '4') {
|
|
const optionIndex = parseInt(e.key) - 1;
|
|
const activeQuestion = document.querySelector('.question-container.active');
|
|
const options = activeQuestion.querySelectorAll('.option');
|
|
if (options[optionIndex]) {
|
|
options[optionIndex].click();
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body></html> |