Scribd
Upload
5 views35 pages

HTML Codeeee

The document is an HTML template for a CSS NC II reviewer, featuring a splash screen with a 3D rotating logo and animated 3D computer parts. It includes CSS styles for various animations, layout, and visual elements like background video and buttons. The design emphasizes a modern aesthetic with a dark color scheme and interactive components.

Uploaded by

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

HTML Codeeee

The document is an HTML template for a CSS NC II reviewer, featuring a splash screen with a 3D rotating logo and animated 3D computer parts. It includes CSS styles for various animations, layout, and visual elements like background video and buttons. The design emphasizes a modern aesthetic with a dark color scheme and interactive components.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS NC II REVIEWER</title>
<style>
/* 3D Floating Animation */
@keyframes float {
0%, 100% { transform: translateY(0px) rotateX(15deg) rotateY(30deg); }
50% { transform: translateY(-20px) rotateX(15deg) rotateY(30deg); }
}

/* USB Animation */
#usb-cord { animation: load 3s ease-in-out forwards; }
@keyframes load {
0% { width: 0%; }
100% { width: 100%; }
}

/* Fade out splash after loading */


#[Link]-out {
animation: fadeOut 1s ease-in-out forwards;
}
@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; visibility: hidden; }
}
:root {
--primary-cyan: #00d4ff;
--bg-blue: #0b1c2d;
--card-blue: rgba(22, 42, 61, 0.9); /* Transparent for video */
--text-white: #ffffff;
--btn-gray: #34495e;
}

/* --- BACKGROUND VIDEO STYLING --- */


#bg-video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
filter: brightness(50%); /* Dims video for better readability */
}

body {
margin: 0;
color: var(--text-white);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-blue);
display: flex;
flex-direction: column;
min-height: 100vh;
}

header {
background: rgba(13, 37, 63, 0.9);
text-align: center;
padding: 15px 0;
border-bottom: 2px solid var(--primary-cyan);
position: sticky;
top: 0;
z-index: 10;
}

h1 { color: var(--primary-cyan); font-size: 16px; margin: 0; text-transform: uppercase;


letter-spacing: 1px; }

.container {
flex: 1;
padding: 15px;
padding-bottom: 90px;
z-index: 1;
}

.menu-grid { display: flex; flex-direction: column; gap: 12px; }

.coc-card {
background: var(--card-blue);
padding: 20px;
border-radius: 10px;
border-left: 4px solid var(--primary-cyan);
cursor: pointer;
backdrop-filter: blur(8px);
}
.coc-card h2 { color: var(--primary-cyan); margin: 0; font-size: 18px; }

.controls { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 5px; margin-bottom:
15px; }

.btn-toggle {
padding: 10px 5px; background: var(--btn-gray);
color: white; border: none; border-radius: 5px; font-weight: bold; cursor: pointer;
text-transform: uppercase; font-size: 10px;
}

.[Link] { background: var(--primary-cyan); color: var(--bg-blue); }

.card {
background: var(--card-blue);
padding: 20px;
border-radius: 12px;
margin-bottom: 15px;
backdrop-filter: blur(8px);
}

.slide-box {
background: #000; border-radius: 8px; border: 2px solid var(--primary-cyan);
position: relative; min-height: 250px; display: flex; align-items: center;
justify-content: center; overflow: hidden; margin-top: 10px;
}

.step-tag {
position: absolute; top: 10px; right: 15px; background: rgba(0,0,0,0.7);
padding: 5px 10px; border-radius: 20px; font-size: 12px; color: var(--primary-cyan);
}

.nav-bar { position: fixed; bottom: 0; width: 100%; display: flex; height: 60px; border-top:
1px solid #2d4c6b; background: var(--bg-blue); z-index: 10; }
.nav-btn { flex: 1; border: none; color: white; font-weight: bold; background: var(--btn-gray);
cursor: pointer; }

.hidden { display: none; }


.lesson-img { width: 100%; border-radius: 8px; margin: 10px 0; }
hr { border: 0; border-top: 1px solid #34495e; margin: 25px 0; }
/* Styling for locked buttons */
.locked {
background: #2c3e50 !important;
color: #7f8c8d !important;
border: 1px dashed #5d6d7e !important;
cursor: not-allowed;
opacity: 0.6;
pointer-events: none; /* Prevents clicking */
}
/* Find your .hidden class and change it to this: */
.hidden {
display: none !important;
}
/* 3D Floating Animation */
@keyframes float {
0%, 100% { transform: translateY(0px) rotateX(15deg) rotateY(30deg); }
50% { transform: translateY(-20px) rotateX(15deg) rotateY(30deg); }
}

/* 3D Logo Rotation Animation */


@keyframes rotateY {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}

/* USB Animation */
#usb-cord { animation: load 3s ease-in-out forwards; }
@keyframes load {
0% { width: 0%; }
100% { width: 100%; }
}

/* Fade out splash after loading */


#[Link]-out {
animation: fadeOut 1s ease-in-out forwards;
}
@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; visibility: hidden; }
}
/* Hide main content until sign-in */
header, .container, #footer-nav {
display: none;
}

/* --- REPLACE YOUR SIGNED-IN RULES WITH THIS --- */


/* 1. Reset display for layout elements when signed in */
.signed-in header,
.signed-in .container,
.signed-in #footer-nav {
display: block;
}

/* 2. FORCE hidden elements to stay hidden (removes the overlap) */


.hidden {
display: none !important;
}

/* 3. Ensure the home page uses flex for the grid layout */
.signed-in #home-page:not(.hidden) {
display: flex;
}

</style>
</head>
<body>
<video autoplay muted loop playsinline id="bg-video">
<source src="1000236745.mp4" type="video/mp4">
</video>
<!-- Splash Screen -->
<div id="splash-screen" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(135deg, #0b1c2d 0%, #162a3d 100%); z-index: 1000; display: flex;
flex-direction: column; align-items: center; justify-content: center; overflow: hidden;">
<!-- 3D Rotating Logo at Center Top -->
<div id="3d-logo" style="position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
width: 150px; height: 150px; perspective: 1000px;">
<div class="logo-face" style="position: absolute; width: 100%; height: 100%; background:
url('[Link]') center/cover no-repeat; border-radius: 10px; box-shadow: 0 0 30px
rgba(0, 212, 255, 0.8); transform-style: preserve-3d; animation: rotateY 4s linear infinite;"></div>
</div>
<!-- 3D Computer Parts Container -->
<div id="3d-scene" style="position: relative; width: 100%; height: 70%; perspective: 1000px;
z-index: 1;">
<!-- Floating 3D Elements -->
<div class="3d-element keyboard" style="position: absolute; top: 20%; left: 10%; transform:
rotateX(15deg) rotateY(30deg); animation: float 4s ease-in-out infinite; opacity: 1;">
<div style="width: 100px; height: 50px; background: linear-gradient(45deg, #34495e,
#5d6d7e); border-radius: 5px; box-shadow: 0 0 20px rgba(0, 212, 255, 0.5); border: 2px solid
var(--primary-cyan); position: relative;">
<!-- Keys representation -->
<div style="position: absolute; top: 5px; left: 5px; width: 90px; height: 40px; background:
#000; border-radius: 3px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 1px;
padding: 2px;">
<div style="background: #fff; border-radius: 1px;"></div>
<div style="background: #fff; border-radius: 1px;"></div>
<div style="background: #fff; border-radius: 1px;"></div>
<!-- Add more for detail -->
</div>
<span style="position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
color: var(--primary-cyan); font-size: 10px; font-weight: bold;">Keyboard</span>
</div>
</div>
<div class="3d-element mouse" style="position: absolute; top: 30%; right: 15%; transform:
rotateX(-10deg) rotateY(-20deg); animation: float 5s ease-in-out infinite reverse; opacity: 1;">
<div style="width: 60px; height: 40px; background: linear-gradient(45deg, #2c3e50,
#34495e); border-radius: 50%; box-shadow: 0 0 15px rgba(0, 212, 255, 0.4); border: 2px solid
var(--primary-cyan); position: relative;">
<!-- Mouse button -->
<div style="position: absolute; top: 10px; left: 20px; width: 20px; height: 20px;
background: #000; border-radius: 50%;"></div>
<span style="position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
color: var(--primary-cyan); font-size: 10px; font-weight: bold;">Mouse</span>
</div>
</div>
<div class="3d-element monitor" style="position: absolute; bottom: 20%; left: 20%; transform:
rotateX(5deg) rotateY(10deg); animation: float 6s ease-in-out infinite; opacity: 1;">
<div style="width: 120px; height: 80px; background: linear-gradient(45deg, #1a2a3a,
#2c3e50); border-radius: 10px; box-shadow: 0 0 25px rgba(0, 212, 255, 0.6); border: 2px solid
var(--primary-cyan); position: relative;">
<!-- Screen -->
<div style="position: absolute; top: 10px; left: 10px; width: 100px; height: 60px;
background: #000; border-radius: 5px; display: flex; align-items: center; justify-content: center;">
<span style="color: #00d4ff; font-size: 8px;">Monitor</span>
</div>
<!-- Stand -->
<div style="position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
width: 20px; height: 10px; background: #34495e; border-radius: 2px;"></div>
<span style="position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);
color: var(--primary-cyan); font-size: 10px; font-weight: bold;">Monitor</span>
</div>
</div>
<div class="3d-element cpu" style="position: absolute; top: 50%; right: 10%; transform:
rotateX(20deg) rotateY(-15deg); animation: float 4.5s ease-in-out infinite reverse; opacity: 1;">
<div style="width: 80px; height: 80px; background: linear-gradient(45deg, #34495e,
#5d6d7e); border-radius: 10px; box-shadow: 0 0 20px rgba(0, 212, 255, 0.5); border: 2px solid
var(--primary-cyan); position: relative;">
<!-- CPU pins/chips -->
<div style="position: absolute; top: 20px; left: 20px; width: 40px; height: 40px;
background: #000; border-radius: 5px; display: grid; grid-template-columns: repeat(4, 1fr); gap:
2px; padding: 2px;">
<div style="background: #00d4ff; border-radius: 1px;"></div>
<div style="background: #00d4ff; border-radius: 1px;"></div>
<!-- Add more -->
</div>
<span style="position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
color: var(--primary-cyan); font-size: 10px; font-weight: bold;">CPU</span>
</div>
</div>
<div class="3d-element ram" style="position: absolute; bottom: 30%; right: 20%; transform:
rotateX(-5deg) rotateY(25deg); animation: float 5.5s ease-in-out infinite; opacity: 1;">
<div style="width: 50px; height: 100px; background: linear-gradient(45deg, #2c3e50,
#34495e); border-radius: 5px; box-shadow: 0 0 15px rgba(0, 212, 255, 0.4); border: 2px solid
var(--primary-cyan); position: relative;">
<!-- RAM slots -->
<div style="position: absolute; top: 10px; left: 10px; width: 30px; height: 80px;
background: #000; border-radius: 3px; display: flex; flex-direction: column; gap: 5px; padding:
2px;">
<div style="height: 10px; background: #00d4ff; border-radius: 1px;"></div>
<div style="height: 10px; background: #00d4ff; border-radius: 1px;"></div>
</div>
<span style="position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
color: var(--primary-cyan); font-size: 10px; font-weight: bold;">RAM</span>
</div>
</div>
<!-- Add more elements as needed for complexity -->
</div>

<!-- USB Loading Animation -->


<div id="usb-animation" style="position: absolute; bottom: 100px; left: 50%; transform:
translateX(-50%); width: 200px; height: 50px;">
<div style="position: relative; width: 100%; height: 20px; background: #34495e;
border-radius: 10px; overflow: hidden;">
<div id="usb-cord" style="position: absolute; top: 0; left: 0; width: 0%; height: 100%;
background: linear-gradient(90deg, #00d4ff, #81ecec); transition: width 3s ease-in-out;"></div>
</div>
<div style="display: flex; justify-content: space-between; margin-top: 10px;">
<div style="width: 20px; height: 20px; background: #5d6d7e; border-radius: 2px;"></div>
<div id="usb-port" style="width: 30px; height: 20px; background: #2c3e50; border-radius:
2px; position: relative;">
<div id="usb-plug" style="position: absolute; right: -10px; top: 5px; width: 10px; height:
10px; background: #00d4ff; border-radius: 2px; opacity: 0; transition: opacity 0.5s
ease-in-out;"></div>
</div>
</div>
<p style="color: var(--primary-cyan); font-size: 14px; text-align: center; margin-top:
10px;">Loading CSS NC II REVIEWER...</p>
</div>

<!-- Particle Effects (for complexity) -->


<div id="particles" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none; overflow: hidden;">
<!-- Particles generated via JS -->
</div>
</div>
</div>
</style>

<script>
[Link]('DOMContentLoaded', function() {
// Start USB animation
setTimeout(() => {
const usbCord = [Link]('usb-cord');
if(usbCord) [Link] = '100%';

setTimeout(() => {
const usbPlug = [Link]('usb-plug');
if(usbPlug) [Link] = '1';
}, 2500);
}, 500);

// Generate particles
const particlesContainer = [Link]('particles');
if (particlesContainer) {
for (let i = 0; i < 50; i++) {
const particle = [Link]('div');
[Link] = 'absolute';
[Link] = [Link]() * 5 + 'px';
[Link] = [Link];
[Link] = 'rgba(0, 212, 255, 0.5)';
[Link] = '50%';
[Link] = [Link]() * 100 + '%';
[Link] = [Link]() * 100 + '%';
[Link] = 'float ' + ([Link]() * 5 + 3) + 's ease-in-out infinite';
[Link](particle);
}
}

// Fade out splash and show sign-in


setTimeout(() => {
const splash = [Link]('splash-screen');
if (splash) {
[Link]('fade-out');
setTimeout(() => {
[Link]('signin-page').[Link] = 'flex';
}, 1000);
}
}, 5000);
});

// This function must accept 'event' as an argument


function handleSignIn(event) {
// 1. STOP the page from refreshing
if (event) [Link]();

const firstName = [Link]('first-name').[Link]();


const surname = [Link]('surname').[Link]();
const email = [Link]('email').[Link]();
const termsChecked = [Link]('terms-checkbox').checked;
const errorMsg = [Link]('signin-error');

// 2. Validate inputs
if (!firstName || !surname || !email || !termsChecked) {
if (errorMsg) [Link] = 'block';
return;
}

// 3. Save data
[Link]('userFirstName', firstName);
[Link]('userSurname', surname);

// 4. Hide Sign-in and SHOW Homepage


[Link]('signin-page').[Link] = 'none';
[Link]('signed-in');

[Link]("Sign-in successful! Content should now be visible.");


}
function openCOC(num) {
if (num === 4) {
// You can add logic here to check if they passed previous quizzes
[Link]("Opening COC 4 Maintenance and Repair");
}
[Link]('home-page').[Link]('hidden');
[Link]('coc-content').[Link]('hidden');
}

function goBack() {
// Hide the Content, Show the Menu
[Link]('home-page').[Link]('hidden');
[Link]('coc-content').[Link]('hidden');
}

function showSection(sectionName) {
// 1. Create a list of all possible sections and tabs
const sections = ['lesson-section', 'dis-section', 'asm-section', 'quiz-section'];
const tabs = ['tab-lesson', 'tab-dis', 'tab-asm', 'tab-quiz'];

// 2. Loop through and hide every section


[Link](id => {
const element = [Link](id);
if (element) [Link]('hidden');
});

// 3. Remove the 'active' (blue) color from all tab buttons


[Link](id => {
const btn = [Link](id);
if (btn) [Link]('active');
});

// 4. Show only the one the user clicked


const targetSection = [Link](sectionName + '-section');
const targetTab = [Link]('tab-' + sectionName);

if (targetSection) [Link]('hidden');
if (targetTab) [Link]('active');
}

</script>
<!-- Sign-In Page Overlay -->
<div id="signin-page" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(11, 28, 45, 0.95); z-index: 999; display: none; flex-direction: column;
align-items: center; justify-content: center; color: #ffffff; font-family: 'Segoe UI', Tahoma, Geneva,
Verdana, sans-serif;">
<div style="background: rgba(22, 42, 61, 0.9); padding: 30px; border-radius: 15px; border:
2px solid var(--primary-cyan); box-shadow: 0 0 30px rgba(0, 212, 255, 0.5); max-width: 400px;
width: 90%; text-align: center;">
<h2 style="color: var(--primary-cyan); margin-bottom: 20px;">Sign In to CSS NC II
REVIEWER</h2>

<!-- Terms and Conditions Agreement -->


<div id="terms-section" style="margin-bottom: 20px; text-align: left;">
<label style="display: flex; align-items: flex-start; font-size: 14px; line-height: 1.5;">
<input type="checkbox" id="terms-checkbox" style="margin-right: 10px; margin-top:
2px;">
<span>I agree to the <a href="#" style="color: var(--primary-cyan); text-decoration:
none;" onclick="alert('Terms and Conditions: By using this app, you agree to our privacy policy
and usage terms. No data is shared externally.');">Terms and Conditions</a>. Please read and
accept before proceeding.</span>
</label>
</div>

<!-- Sign-In Form -->


<form id="signin-form" onsubmit="handleSignIn(event)">
<div style="margin-bottom: 15px;">
<label for="first-name" style="display: block; margin-bottom: 5px; color:
var(--primary-cyan); font-weight: bold;">FIRST NAME:</label>
<input type="text" id="first-name" name="first-name" required style="width: 100%;
padding: 10px; border: 1px solid #34495e; border-radius: 5px; background: #2c3e50; color:
#ffffff; font-size: 14px;">
</div>
<div style="margin-bottom: 15px;">
<label for="surname" style="display: block; margin-bottom: 5px; color:
var(--primary-cyan); font-weight: bold;">FIRST NAME:</label>
<input type="text" id="first-name" name="first-name" required style="width: 100%;
padding: 10px; border: 1px solid #34495e; border-radius: 5px; background: #2c3e50; color:
#ffffff; font-size: 14px;">
</div>
<div style="margin-bottom: 15px;">
<label for="surname" style="display: block; margin-bottom: 5px; color:
var(--primary-cyan); font-weight: bold;">SURNAME:</label>
<input type="text" id="surname" name="surname" required style="width: 100%;
padding: 10px; border: 1px solid #34495e; border-radius: 5px; background: #2c3e50; color:
#ffffff; font-size: 14px;">
</div>
<div style="margin-bottom: 20px;">
<label for="email" style="display: block; margin-bottom: 5px; color:
var(--primary-cyan); font-weight: bold;">EMAIL:</label>
<input type="email" id="email" name="email" required style="width: 100%; padding:
10px; border: 1px solid #34495e; border-radius: 5px; background: #2c3e50; color: #ffffff;
font-size: 14px;">
</div>

<button type="submit" style="width: 100%; padding: 12px; background:


var(--primary-cyan); color: #0b1c2d; border: none; border-radius: 5px; font-weight: bold; cursor:
pointer; font-size: 16px;">Sign In</button>
</form>

<p id="signin-error" ...>Please fill all fields...</p>


</div> </div> <header id="header-title">
<h1>CSS NC II REVIEWER</h1>
</header>
<div id="home-page" class="menu-grid">
<div id="btn-coc1" class="coc-card" onclick="openCOC(1)">
<h2>COC 1</h2><p>Installing & Configuring Computer Systems</p>
</div>
<div id="btn-coc2" class="coc-card locked" onclick="openCOC(2)">
<h2>COC 2 (Locked)</h2><p>Pass COC 1 with 7/10 to unlock</p>
</div>
<div id="btn-coc3" class="coc-card locked" onclick="openCOC(3)">
<h2>COC 3 (Locked)</h2><p>Pass COC 2 with 7/10 to unlock</p>
</div>
<div id="btn-coc4" class="coc-card locked" onclick="openCOC(4)">
<h2>COC 4 (Locked)</h2><p>Pass COC 3 with 7/10 to unlock</p>
</div>
</div>

<div id="coc1-content" class="hidden">


<div class="controls">
<button id="tab-lesson1" class="btn-toggle active"
onclick="showTab1('lesson')">LESSON</button>
<button id="tab-dis1" class="btn-toggle"
onclick="showTab1('dis')">DISASSEMBLY</button>
<button id="tab-asm1" class="btn-toggle"
onclick="showTab1('asm')">ASSEMBLY</button>
<button id="tab-quiz1" class="btn-toggle" onclick="showTab1('quiz')">QUIZ</button>
</div>

<div id="coc1-lesson" class="card">


<h3>COC 1: Lesson Content</h3>
<p>Hardware assembly and OS installation.</p>
<img src="motherboard_diagram.jpg" alt="Motherboard" class="lesson-img">
</div>

<div id="coc1-dis" class="hidden card" style="text-align: center;">


<h3 style="color: var(--primary-cyan);">DISASSEMBLY GUIDE</h3>
<div class="slide-box">
<img id="dis-img" src="" style="max-width: 100%; height: auto;">
<div id="dis-step-num" class="step-tag"></div>
</div>
<p id="dis-title" style="color: #81ecec; font-weight: bold;"></p>
<p id="dis-desc" style="font-size: 13px;"></p>
<div style="display: flex; gap: 10px;">
<button class="btn-toggle" style="flex:1"
onclick="moveDis(-1)">PREVIOUS</button>
<button class="btn-toggle" style="flex:1; background: var(--primary-cyan); color:
#000;" onclick="moveDis(1)">NEXT</button>
</div>
</div>

<div id="coc1-asm" class="hidden card" style="text-align: center;">


<h3 style="color: var(--primary-cyan);">ASSEMBLY GUIDE</h3>
<div class="slide-box">
<img id="asm-img" src="" style="max-width: 100%; height: auto;">
<div id="asm-step-num" class="step-tag"></div>
</div>
<p id="asm-title" style="color: #81ecec; font-weight: bold;"></p>
<p id="asm-desc" style="font-size: 13px;"></p>
<div style="display: flex; gap: 10px;">
<button class="btn-toggle" style="flex:1"
onclick="moveAsm(-1)">PREVIOUS</button>
<button class="btn-toggle" style="flex:1; background: var(--primary-cyan); color:
#000;" onclick="moveAsm(1)">NEXT</button>
</div>
</div>

<div id="coc1-quiz" class="hidden card">


<h3 style="color: var(--primary-cyan);">COC 1 QUIZ</h3>
<p id="question-text1" style="font-weight: bold; margin-bottom: 15px;"></p>
<div id="options-container1"></div>
<p id="quiz-feedback1" style="margin-top: 10px; font-weight: bold;"></p>
<button id="next-btn1" class="btn-toggle hidden" style="width: 100%; margin-top:
10px;" onclick="nextQuestion1()">NEXT QUESTION</button>
</div>
<div style="padding: 20px 0;">
<button class="btn-toggle" style="width: 100%; background: #e74c3c; color: white;"

🏠
onclick="goBack()">
RETURN TO MAIN MENU
</button>
</div>
</div>
<div id="coc2-content" class="hidden">
<div class="controls">
<button id="tab-lesson2" class="btn-toggle active"
onclick="showTab2('lesson')">LESSON</button>
<button id="tab-quiz2" class="btn-toggle" onclick="showTab2('quiz')">QUIZ</button>
</div>

<div id="coc2-lesson" class="card lesson-body" style="overflow-y: auto; max-height: 70vh;">


<h2 style="color: var(--primary-cyan); border-bottom: 1px solid #34495e; padding-bottom:
5px;">COC 2: SETUP COMPUTER NETWORKS</h2>
<p>This unit covers the outcomes required in setting-up computers networks for LANs and
small-office home-office (SOHO) systems. It consists of competencies to install network cables,
set network configuration, set router/Wi-Fi/wireless access point/repeater configuration as well
as to inspect and test the configured computer networks.</p>

<div style="text-align: center; margin: 20px 0;">


<img src="[Link]" alt="SOHO Network Setup" class="lesson-img" style="border: 2px
solid var(--primary-cyan); max-width: 90%;">
<p style="font-size: 11px; color: #888;">Figure 1: Typical LAN/SOHO Network
Architecture</p>
</div>

<h3 style="color: var(--primary-cyan);">2.1 Install Network Cables</h3>

<div style="background: rgba(0, 212, 255, 0.1); padding: 15px; border-radius: 8px;
margin-bottom: 15px;">
<p><strong>Color Coding:</strong></p>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<div style="background: #1a2a3a; padding: 10px; border-radius: 5px; font-size: 13px;">
<strong style="color: #2ecc71;">Patch T-568A</strong>
<ol>
<li>White green</li>
<li>Green</li>
<li>White orange</li>
<li>Blue</li>
<li>White blue</li>
<li>Orange</li>
<li>White brown</li>
<li>Brown</li>
</ol>
</div>
<div style="background: #1a2a3a; padding: 10px; border-radius: 5px; font-size: 13px;">
<strong style="color: #e67e22;">Patch T-568B</strong>
<ol>
<li>White orange</li>
<li>Orange</li>
<li>White green</li>
<li>Blue</li>
<li>White blue</li>
<li>Green</li>
<li>White brown</li>
<li>Brown</li>
</ol>
</div>
</div>
</div>

<div style="text-align: center; margin: 20px 0;">


<img src="[Link]" alt="T568A vs T568B" class="lesson-img" style="max-width:
80%;">
<p style="font-size: 11px; color: #888;">Figure 2: Ethernet Wiring Standards (T-568A vs
T-568B)</p>
</div>

<div style="background: rgba(0, 212, 255, 0.1); padding: 15px; border-radius: 8px;
margin-bottom: 15px;">
<p><strong>Things to Prepare:</strong></p>
<ul>
<li>Crimping tool</li>
<li>Wire stripper (optional)</li>
<li>UTP cable</li>
<li>RJ45 connector</li>
<li>LAN tester</li>
</ul>
</div>
<p><strong>Creating Network Cable:</strong></p>
<ul style="font-size: 14px; line-height: 1.6;">
<li>Using the stripper wire or crimping tool cut and remove the insulator of the UTP
cable.</li>
<li>Untwist and separate the copper wires and make the copper wire straight as
possible.</li>
<li>Arrange the color coding of the copper wire from left to right base on what patch you
are preparing, either patch T-568A or T-568B.</li>
<li>Cut the copper wire before inserting it inside the RJ45 connector. Make sure the
position of RJ45 connector is correct (8pin of RJ45 is on the top position and the clip is on the
bottom position).</li>
<li>Crimp the RJ45 and make sure to press and lock the copper wire together with the
insulator.</li>
<li>Use LAN tester to test your network cable.</li>
</ul>

<p><strong>Straight-through Network Cable:</strong> Use for connecting different


devices.</p>
<p><strong>Cross-over Network Cable:</strong> Use for connecting similar devices.</p>

<hr>

<h3 style="color: var(--primary-cyan);">2.2 Set Network Configuration</h3>


<ul style="font-size: 14px; line-height: 1.6;">
<li><strong>Connecting Router to Switch Hub:</strong> Use straight-through network
cable to connect router and switch hub. Connect the other end of the network cable to the LAN
port of the router and other end of the network cable to any port of the switch hub.</li>
<li><strong>Connecting Switch Hub to Patch Panel, Modular Box and Keystone:</strong>
<ul>
<li>Use a UTP cable that the other end is connected with RJ45 connector.</li>
<li>Determine the length of the cable base on the position and location.</li>
<li>Using the stripper wire or crimping tool. Strip and remove the insulator of the UTP
cable 3 to 4 inches.</li>
<li>Untwist and separate the copper wires and make it straight.</li>
<li>Check the color coding of the patch panel.</li>
<li>Sort the copper wires in its proper position.</li>
<li>Chose a port on the patch panel/Modular box/Keystone before attaching the
copper wires.</li>
<li>Use a Punch down tool to attach copper wires to the port of the patch panel.</li>
<li>Now connect the other end of the UTP cable with RJ45 connector to the Switch
hub port.</li>
<li>Use straight-through network cable and LAN tester to test the connection of Patch
panel/Modular box and Keystone.</li>
</ul>
</li>
<li><strong>Connect Patch Panel, Modular Box and Keystone to Computers:</strong>
Use straight-through network cable to connect computers to Modular box, Keystone and patch
panel.</li>
</ul>

<hr>

<h3 style="color: var(--primary-cyan);">2.3 Set Router/Wi-Fi/Wireless Access Point/Repeater


Configuration</h3>
<div style="background: #1a2a3a; padding: 15px; border-radius: 8px;">
<p><strong>Configuring Router (Server Computer) - TP-Link Example:</strong></p>
<ul style="font-size: 13px;">
<li>Open web browser and type the default GUI address of the router [Link]</li>
<li>Input the default user name: admin and the default password: admin</li>
<li>Click Wireless Tab</li>
<li>Select wireless setting SSID: (your first name)</li>
<li>Wireless Security: SECURITY</li>
<li>Click the DHCP tab and select disable to disable the Router´s DHCP and click
SAVE.</li>
<li>Click the Network tab and select LAN, change the Router´s IP address from
[Link] to [Link] and click SAVE. And wait for the router to complete the changes of
router´s configuration.</li>
</ul>

<p><strong>Adding Static IP Address of Server and Client Computer:</strong></p>


<ul style="font-size: 13px;">
<li>Click start and type [Link] and press Enter key</li>
<li>Right click Local Area Connection and click properties</li>
<li>Select Internet Protocol Version 4 (TCP/IPv4) then click properties</li>
<li>Click the option: use the following IP address: e.g</li>
</ul>

<table style="width: 100%; font-size: 12px; border-collapse: collapse; margin-top: 10px;">


<tr style="background: var(--btn-gray);">
<th style="padding: 5px; border: 1px solid #444;">Device</th>
<th style="padding: 5px; border: 1px solid #444;">IP Address</th>
<th style="padding: 5px; border: 1px solid #444;">Subnet Mask</th>
<th style="padding: 5px; border: 1px solid #444;">Default Gateway</th>
</tr>
<tr>
<td style="padding: 5px; border: 1px solid #444;">SERVER</td>
<td style="padding: 5px; border: 1px solid #444;">[Link]</td>
<td style="padding: 5px; border: 1px solid #444;">[Link]</td>
<td style="padding: 5px; border: 1px solid #444;">[Link] (router´s IP
address)</td>
</tr>
<tr>
<td style="padding: 5px; border: 1px solid #444;">CLIENT</td>
<td style="padding: 5px; border: 1px solid #444;">[Link]</td>
<td style="padding: 5px; border: 1px solid #444;">[Link]</td>
<td style="padding: 5px; border: 1px solid #444;">[Link] (router´s IP
address)</td>
</tr>
</table>
<p style="font-size: 13px; margin-top: 10px;">Click OK and close button. Turn Off
Firewall.</p>
</div>

<hr>

<h3 style="color: var(--primary-cyan);">2.4 Inspect and Test the Configured Computer


Networks</h3>
<p><strong>PING ROUTER, SERVER, and CLIENT:</strong></p>
<ul style="font-size: 14px; line-height: 1.6;">
<li>Use the PING command to test connectivity.</li>
<li>Example: <code style="background: #000; color: #0f0; padding: 5px 10px; display:
inline-block; border-radius: 5px;">ping [Link]</code> (for router), <code
style="background: #000; color: #0f0; padding: 5px 10px; display: inline-block; border-radius:
5px;">ping [Link]</code> (for server), <code style="background: #000; color: #0f0;
padding: 5px 10px; display: inline-block; border-radius: 5px;">ping [Link]</code> (for
client).</li>
</ul>
</div>
<div id="coc2-quiz" class="hidden card">
<h3 style="color: var(--primary-cyan);">COC 2 QUIZ</h3>
<p id="question-text2" style="font-weight: bold; margin-bottom: 15px;"></p>
<div id="options-container2"></div>
<p id="quiz-feedback2" style="margin-top: 10px; font-weight: bold;"></p>
<button id="next-btn2" class="btn-toggle hidden" style="width: 100%; margin-top: 10px;"
onclick="nextQuestion2()">NEXT QUESTION</button>
</div>
<div style="padding: 20px 0;">
<button class="btn-toggle" style="width: 100%; background: #e74c3c; color: white;"

🏠
onclick="goBack()">
RETURN TO MAIN MENU
</button>
</div>
</div>

<div id="coc3-content" class="hidden">


<div class="controls">
<button id="tab-lesson3" class="btn-toggle active"
onclick="showTab3('lesson')">LESSON</button>
<button id="tab-quiz3" class="btn-toggle" onclick="showTab3('quiz')">QUIZ</button>
</div>

<div id="coc3-lesson" class="card lesson-body">


<h2 style="color: var(--primary-cyan); border-bottom: 1px solid #34495e; padding-bottom:
5px;">COC 3 – SETUP COMPUTER SERVERS</h2>
<p>This unit covers the competencies required to set up computer servers, including user
access setup, network services configuration, and testing & documentation.</p>

<h3 style="color: var(--primary-cyan);">Covers:</h3>


<ul style="font-size: 14px; line-height: 1.6;">
<li>User access setup</li>
<li>Network services configuration</li>
<li>Testing & documentation</li>
</ul>

<h3 style="color: var(--primary-cyan);">Install Server Roles:</h3>


<ul style="font-size: 14px; line-height: 1.6;">
<li>Active Directory Domain Services</li>
<li>DNS</li>
<li>DHCP</li>
<li>Print Services</li>
</ul>

<h3 style="color: var(--primary-cyan);">Setup:</h3>


<ul style="font-size: 14px; line-height: 1.6;">
<li>Create domain ([Link]).</li>
<li>Install DHCP scope ([Link] – [Link]).</li>
<li>Create folder redirection.</li>
<li>Create OU (CSS OU).</li>
<li>Create Users (User1, User2).</li>
<li>Setup GPO for Desktop & Documents redirection.</li>
<li>Deploy printer (Epson LX-300+ II).</li>
<li>Setup Remote Desktop.</li>
<li>Join client to domain.</li>
<li>Login users and test.</li>
</ul>
<h3 style="color: var(--primary-cyan);">Additional:</h3>
<ul style="font-size: 14px; line-height: 1.6;">
<li>File Blocking (FSRM)</li>
<li>Drive Mapping</li>
<li>Roaming Profile</li>
<li>Remote App Setup</li>
</ul>
</div>

<div id="coc3-quiz" class="hidden card">


<h3 style="color: var(--primary-cyan);">COC 3 QUIZ</h3>
<p id="question-text3" style="font-weight: bold; margin-bottom: 15px;"></p>
<div id="options-container3"></div>
<p id="quiz-feedback3" style="margin-top: 10px; font-weight: bold;"></p>
<button id="next-btn3" class="btn-toggle hidden" style="width: 100%; margin-top: 10px;"
onclick="nextQuestion3()">NEXT QUESTION</button>
</div>
<div style="padding: 20px 0;">
<button class="btn-toggle" style="width: 100%; background: #e74c3c; color: white;"

🏠
onclick="goBack()">
RETURN TO MAIN MENU
</button>
</div>

</div>
<div id="coc4-content" class="hidden">
<div class="controls">
<button id="tab-lesson4" class="btn-toggle active"
onclick="showTab4('lesson')">LESSON</button>
<button id="tab-quiz4" class="btn-toggle" onclick="showTab4('quiz')">QUIZ</button>
</div>
<div id="coc4-lesson" class="card lesson-body">
<h2 style="color: var(--primary-cyan); border-bottom: 1px solid #34495e; padding-bottom:
5px;">COC 4 – Maintain and Repair Computer Systems and Networks</h2>
<p>This unit covers the knowledge, skills and attitudes needed to maintain and service
computer systems and networks.</p>

<ol style="font-size: 14px; line-height: 1.6;">


<li><strong>4.1. Plan and prepare for maintenance and repair</strong></li>
<li><strong>4.2. Maintain computer systems and networks</strong></li>
<li><strong>4.3. Diagnose faults of computer systems and networks</strong></li>
<li><strong>4.4. Rectify/correct defects in computer systems</strong></li>
<li><strong>4.5. Inspect and test the computer systems and networks</strong></li>
</ol>
<ul style="font-size: 14px; line-height: 1.6;">
<li>Use Anti-virus to check and scan computer System from harmful viruses</li>
</ul>

<h3 style="color: var(--primary-cyan);">Use Performance and Monitor to diagnose Computer


Systems</h3>
<ul style="font-size: 14px; line-height: 1.6;">
<li>Open Control Panel</li>
<li>Click START</li>
<li>Click Control Panel</li>
<li>Change view by: from Category to Large Icon</li>
<li>Select Performance Information and Tools</li>
<li>Click Advance Tools</li>
<li>Select Generate a system health report</li>
<li>Input username: Administrator Password: P@ssw0rd click YES</li>
</ul>

<h3 style="color: var(--primary-cyan);">Use Check Disk to check and Fix Disk Error</h3>
<ul style="font-size: 14px; line-height: 1.6;">
<li>Click START and type CHKDSK /F and run as Administrator</li>
<li>Input the username: Administrator and password: P@ssw0rd and click YES</li>
</ul>

<h3 style="color: var(--primary-cyan);">Use Disk Defragmenter to check and improve System


performance</h3>
<ul style="font-size: 14px; line-height: 1.6;">
<li>Click START and type [Link]</li>
<li>Select Disc that you want to defrag and Click Defragment Disk</li>
</ul>

<h3 style="color: var(--primary-cyan);">Create a System Image</h3>


<ul style="font-size: 14px; line-height: 1.6;">
<li>Click START</li>
<li>Click Control Panel</li>
<li>Change view by: from Category to Large Icon</li>
<li>Select Backup and Restore</li>
<li>Select Create a System Image</li>
<li>Input the server´s username: Administrator and password: P@ssw0rd click YES</li>
<li>Select On a Hard Disk and Click Next</li>
<li>Click Start Backup</li>
<li>Create a System Repair Disc - Prepare a blank DVD Disc</li>
</ul>
<h3 style="color: var(--primary-cyan);">Remove Server Roles</h3>

<h4 style="color: var(--primary-cyan);">Removing File services</h4>


<ul style="font-size: 14px; line-height: 1.6;">
<li>Click START</li>
<li>Click Administrative Tools</li>
<li>Select Share and Storage Management</li>
<li>Stop Sharing except ADMIN$, C$, D$ and IPC$</li>
</ul>

<h4 style="color: var(--primary-cyan);">Removing Active Directory Domain Services


(ADDS)</h4>
<ul style="font-size: 14px; line-height: 1.6;">
<li>Click START</li>
<li>Type [Link] and press Enter key</li>
<li>click Next, OK</li>
<li>select Delete the Domain…</li>
<li>click Next</li>
<li>Select Delete all application directory…</li>
<li>Click Next</li>
<li>Type and Confirm the password: P@ssw0rd</li>
<li>Click Next, Next</li>
<li>Check Reboot …</li>
<li>Click Finish and Restart Now</li>
</ul>

<h4 style="color: var(--primary-cyan);">Removing other Server Roles</h4>


<ul style="font-size: 14px; line-height: 1.6;">
<li>Open Server Manager</li>
<li>Click Roles</li>
<li>Click Remove Roles</li>
<li>Click Next</li>
<li>Uncheck all Server Roles and click Next</li>
<li>Select Delete all printers installed on the server and click Next</li>
<li>Click Remove</li>
<li>Click Close</li>
<li>Click Yes to Restart the Computer</li>
</ul>

<h3 style="color: var(--primary-cyan);">Remove Features</h3>

<h4 style="color: var(--primary-cyan);">Removing .NET Framework 3.5.1 and GPM</h4>


<ul style="font-size: 14px; line-height: 1.6;">
<li>Open Server Manager</li>
<li>Select Features</li>
<li>Click Remove Features</li>
<li>Expand .NET Framework 3.5.1. Features</li>
<li>Uncheck .NET Framework 3.5.1</li>
<li>Uncheck Group Policy Management</li>
<li>Click Next, Remove</li>
<li>Click Close</li>
<li>Click Yes to Restart</li>
</ul>

<h3 style="color: var(--primary-cyan);">Delete all files of DHCP and DNS folder</h3>


<p style="font-size: 14px; line-height: 1.6;">C:\Windows\System32</p>
<ul style="font-size: 14px; line-height: 1.6;">
<li>Go to System32 folder and locate DHCP Folder and delete all files and folder inside the
DHCP Folder.</li>
<li>Open DNS Folder and delete all files and folder inside the DNS Folder.</li>
<li>Restart the Computer</li>
</ul>
</div>
<div id="coc4-quiz" class="hidden card">
<h3>COC 4 QUIZ</h3>
<p id="question-text4" style="font-weight: bold; color: var(--primary-cyan);"></p>
<div id="options-container4" style="display:flex; flex-direction:column; gap:10px;"></div>
<p id="quiz-feedback4" style="margin-top:10px; font-weight:bold;"></p>
<button id="next-btn4" class="btn-toggle hidden" style="width:100%; margin-top:10px;"
onclick="nextQuestion4()">NEXT</button>
</div>
<div style="padding: 20px 0;">
<button class="btn-toggle" style="width: 100%; background: #e74c3c; color: white;"

🏠
onclick="goBack()">
RETURN TO MAIN MENU
</button>
</div>
</div>
<script>
// FULL 11 STEPS FOR DISASSEMBLY
const disSteps = [
{ title: "1. Power Down & Safety", desc: "Turn off the PC, unplug the power cord, and wear an
anti-static wrist strap.", img: "[Link]" },
{ title: "2. Remove Side Panels", desc: "Unscrew the thumbnail screws and slide the side
panels off the case.", img: "[Link]" },
{ title: "3. Disconnect Power Cables", desc: "Unplug the 24-pin ATX and 4/8-pin CPU power
cables from the motherboard.", img: "[Link]" },
{ title: "4. Unplug Data Cables", desc: "Disconnect all SATA cables from the storage drives
and motherboard.", img: "[Link]" },
{ title: "5. Remove Graphics Card (GPU)", desc: "Unscrew the PCIe bracket and gently pull
the GPU out of its slot.", img: "[Link]" },
{ title: "6. Remove RAM Modules", desc: "Push down the locking clips and pull the RAM sticks
straight up by the edges.", img: "[Link]" },
{ title: "7. Remove Storage Drives", desc: "Unscrew and slide out the Hard Drive (HDD) or
Solid State Drive (SSD).", img: "[Link]" },
{ title: "8. Remove Expansion Cards", desc: "Remove any extra cards like Sound or Network
cards from the PCIe slots.", img: "[Link]" },
{ title: "9. Remove Power Supply (PSU)", desc: "Unscrew the four screws at the back of the
case and slide the PSU out.", img: "[Link]" },
{ title: "10. Detach CPU Cooler", desc: "Unscrew the fan/heatsink and carefully lift it off the
processor.", img: "[Link]" },
{ title: "11. Remove the CPU", desc: "Lift the load lever, open the plate, and lift the CPU by its
edges.", img: "[Link]" },
];

// FULL 12 STEPS FOR ASSEMBLY


const asmSteps = [
{ title: "1. Prepare Case", desc: "Install the I/O shield into the back of the case and check
standoffs.", img: "[Link]" },
{ title: "2. Install CPU", desc: "Align the gold triangle on the CPU with the mark on the socket
and drop it in.", img: "[Link]" },
{ title: "3. Apply Thermal Paste", desc: "Place a pea-sized amount of thermal paste in the
center of the CPU.", img: "[Link]" },
{ title: "4. Mount CPU Cooler", desc: "Secure the heatsink/fan on top of the CPU and plug in
the fan header.", img: "[Link]" },
{ title: "5. Install RAM", desc: "Align the notch on the RAM with the slot and press until it
clicks.", img: "[Link]" },
{ title: "6. Mount Motherboard", desc: "Place the motherboard on standoffs and secure it with
screws.", img: "[Link]" },
{ title: "7. Install Power Supply", desc: "Place the PSU in the bay and screw it into the back of
the case.", img: "[Link]" },
{ title: "8. Connect Main Power", desc: "Plug in the 24-pin ATX and 8-pin CPU power cables to
the board.", img: "[Link]" },
{ title: "9. Install Storage", desc: "Mount the HDD/SSD into the bays and connect SATA
data/power cables.", img: "[Link]" },
{ title: "10. Install Graphics Card", desc: "Plug the GPU into the PCIe x16 slot and secure it to
the case.", img: "[Link]" },
{ title: "11. Connect Case Front Panel", desc: "Plug in the Power SW, Reset SW, and USB
headers to the motherboard.", img: "[Link]" },
{ title: "12. Cable Management", desc: "Tidy up cables with zip ties and close the side
panels.", img: "[Link]" }
];

// 1. TRACKERS
let score1 = 0, score2 = 0, score3 = 0, score4 = 0;
let currentQuestion1 = 0, currentQuestion2 = 0, currentQuestion3 = 0, currentQuestion4 = 0;
let dStep = 0, aStep = 0;

// 2. DATA ARRAYS
const quizQuestions1 = [
{ q: "Which component is the brain of the computer?", a: ["Motherboard", "CPU", "RAM"],
correct: "CPU" },
{ q: "What is the primary purpose of an anti-static wrist strap?", a: ["Improve grip", "Prevent
ESD damage", "Provide power"], correct: "Prevent ESD damage" },
{ q: "What is the first step after powering off during disassembly?", a: ["Remove RAM",
"Unscrew Motherboard", "Unplug all cables"], correct: "Unplug all cables" },
{ q: "Which tool creates a bootable USB from an ISO?", a: ["Rufus", "BIOS Configurator",
"Windows Explorer"], correct: "Rufus" },
{ q: "Which BIOS setting allows booting from a USB?", a: ["SATA Mode", "Boot Priority/Order",
"Admin Password"], correct: "Boot Priority/Order" },
{ q: "What is the recommended USB capacity for Windows Server 2008 R2?", a: ["2GB",
"4GB", "8GB"], correct: "8GB" },
{ q: "Which installation type is for a fresh, clean install?", a: ["Upgrade", "Custom (advanced)",
"Repair Your Computer"], correct: "Custom (advanced)" },
{ q: "What does BIOS stand for?", a: ["Binary Input Output System", "Basic Input Output
System", "Boot Integrated OS"], correct: "Basic Input Output System" },
{ q: "Which component should be handled only by its edges?", a: ["External Case", "RAM
Modules", "Power Cable"], correct: "RAM Modules" },
{ q: "How should the CPU be oriented during installation?", a: ["Any direction", "Following
specific marks", "Press with extra force"], correct: "Following specific marks" }
];

// Replace the existing quizQuestions2 with this updated array containing 10 questions
const quizQuestions2 = [
{ q: "Which wiring standard is the industry standard for creating straight-through cables?", a:
["T568A", "T568B", "T568C"], correct: "T568B" },
{ q: "Which tool is used to secure the wires into the slots of a Patch Panel?", a: ["Crimping
Tool", "Punch Down Tool", "Wire Stripper"], correct: "Punch Down Tool" },
{ q: "What is the manual process of entering an IP address, Subnet Mask, and Gateway
called?", a: ["Dynamic Configuration", "Static Configuration", "Automatic Configuration"], correct:
"Static Configuration" },
{ q: "What does SSID stand for in a router setup?", a: ["System Security ID", "Service Set
Identifier", "Signal Strength ID"], correct: "Service Set Identifier" },
{ q: "Which router feature allows you to choose exactly which devices can connect based on
their hardware address?", a: ["SSID Broadcast", "MAC Filtering", "Port Forwarding"], correct:
"MAC Filtering" },
{ q: "Where do you typically plug the internet cable from the ISP into the router?", a: ["LAN
Port", "WAN (Internet) Port", "Console Port"], correct: "WAN (Internet) Port" },
{ q: "When setting up a Wireless Access Point (WAP), what should you do with its DHCP
server?", a: ["Enable it", "Disable it", "Set it to Automatic"], correct: "Disable it" },
{ q: "What is the purpose of a Patch Panel in a network rack?", a: ["To increase the internet
speed", "To provide an organized termination point for building cables", "To act as a backup
battery"], correct: "To provide an organized termination point for building cables" },
{ q: "Which security protocol provides the best encryption for a Wi-Fi password today?", a:
["WEP", "WPA2-PSK (AES)", "Open"], correct: "WPA2-PSK (AES)" },
{ q: "What is the hardware fingerprint of a network card used in MAC Filtering?", a: ["IP
Address", "MAC Address", "Subnet Mask"], correct: "MAC Address" }
];

// 1. UPDATED COC 3 DATA (All 10 Questions)


const quizQuestions3 = [
{ q: "Which server role is responsible for automatically assigning IP addresses?", a: ["DNS",
"DHCP", "File Services"], correct: "DHCP" },
{ q: "What must be done in Active Directory before a DHCP server can start?", a:
["Restarted", "Formatted", "Authorized"], correct: "Authorized" },
{ q: "Which service translates '[Link]' to an IP address?", a: ["DNS", "Remote
Desktop", "Printer Sharing"], correct: "DNS" },
{ q: "Which DNS record type maps a hostname to an IPv4 address?", a: ["MX Record", "Host
(A) Record", "CNAME Record"], correct: "Host (A) Record" },
{ q: "What is the advantage of Folder Redirection?", a: ["Faster internet", "Centralized data
backup", "Auto-delete temp files"], correct: "Centralized data backup" },
{ q: "Which two permissions are used for secure File Sharing?", a: ["BIOS/CMOS",
"Sharing/NTFS", "DHCP/DNS"], correct: "Sharing/NTFS" },
{ q: "Which port does Remote Desktop (RDP) use?", a: ["80", "443", "3389"], correct: "3389" },
{ q: "Where do you add a user to allow remote server management?", a: ["Remote Desktop
Users list", "DHCP Scope", "Print Console"], correct: "Remote Desktop Users list" },
{ q: "How do clients typically install a shared printer?", a: ["Manual download", "UNC path
(\\Server\Printer)", "Restart CMOS"], correct: "UNC path (\\Server\Printer)" },
{ q: "In DHCP, what is the 'Scope'?", a: ["Server size", "Range of IP addresses", "Router
password"], correct: "Range of IP addresses" }
];

// Replace the existing quizQuestions4 with this updated array containing 10 questions for COC
4
const quizQuestions4 = [
{ q: "What tool is used to scan a computer for harmful viruses?", a: ["Disk Defragmenter",
"Anti-virus", "Check Disk"], correct: "Anti-virus" },
{ q: "Which option in Control Panel allows you to generate a system health report?", a:
["Backup and Restore", "Performance Information and Tools", "Administrative Tools"], correct:
"Performance Information and Tools" },
{ q: "What command is used to check and fix disk errors?", a: ["[Link]", "CHKDSK /F",
"[Link]"], correct: "CHKDSK /F" },
{ q: "Which tool improves system performance by reorganizing files on the disk?", a: ["Check
Disk", "Disk Defragmenter", "Share and Storage Management"], correct: "Disk Defragmenter" },
{ q: "Where do you go to create a system image?", a: ["Administrative Tools", "Backup and
Restore", "Server Manager"], correct: "Backup and Restore" },
{ q: "In removing file services, which shares should remain active?", a: ["User folders",
"ADMIN$, C$, D$, and IPC$", "Temporary files"], correct: "ADMIN$, C$, D$, and IPC$" },
{ q: "What command is used to remove Active Directory Domain Services (ADDS)?", a:
["CHKDSK /F", "[Link]", "[Link]"], correct: "[Link]" },
{ q: "Which server manager section is used to remove server roles?", a: ["Features", "Roles",
"Control Panel"], correct: "Roles" },
{ q: "To remove .NET Framework 3.5.1 and Group Policy Management, which section do you
access?", a: ["Roles", "Features", "Administrative Tools"], correct: "Features" },
{ q: "Where are DHCP and DNS folders located for deletion?", a: ["Program Files",
"C:\\Windows\\System32", "Control Panel"], correct: "C:\\Windows\\System32" }
];
// 3. CORE NAVIGATION
function openCOC(n) {
const btn = [Link]('btn-coc' + n);

// Check if the card is locked


if (n !== 1 && btn && [Link]('locked')) {
alert("Locked! Pass the previous COC with 7/10 first.");
return;
}

// STEP A: Hide the main menu grid


[Link]('home-page').[Link]('hidden');

// STEP B: Show the bottom "Main Menu" navigation bar


const footer = [Link]('.nav-bar');
if(footer) [Link]('hidden');

// STEP C: Hide every COC content area first


for(let i=1; i<=4; i++) {
let content = [Link]('coc' + i + '-content');
if(content) [Link]('hidden');
}

// STEP D: Show the specific COC the user clicked


const activeContent = [Link]('coc' + n + '-content');
if(activeContent) {
[Link]('hidden');
}

// STEP E: Trigger the "Lesson" tab for the specific COC


if(n === 1) showTab1('lesson');
if(n === 2) showTab2('lesson');
if(n === 3) showTab3('lesson');
if(n === 4) showTab4('lesson');
}

// 4. TAB CONTROLS
function showTab1(t) {
// Hide all
[Link]('coc1-lesson').[Link]('hidden');
[Link]('coc1-dis').[Link]('hidden');
[Link]('coc1-asm').[Link]('hidden');
[Link]('coc1-quiz').[Link]('hidden');

// Remove active class from all COC1 buttons


[Link]('tab-lesson1').[Link]('active');
[Link]('tab-dis1').[Link]('active');
[Link]('tab-asm1').[Link]('active');
[Link]('tab-quiz1').[Link]('active');

// Show the one you clicked


[Link]('coc1-' + t).[Link]('hidden');
// Set the clicked button to active
[Link]('tab-' + t + '1').[Link]('active');

// Trigger data loading


if(t === 'quiz') {
currentQuestion1 = 0;
score1 = 0;
loadQuiz1();
}
if(t === 'dis') moveDis(0);
if(t === 'asm') moveAsm(0);
}

function showTab2(t) {
[Link]('coc2-lesson').[Link]('hidden');
[Link]('coc2-quiz').[Link]('hidden');
[Link]('tab-lesson2').[Link]('active');
[Link]('tab-quiz2').[Link]('active');

[Link]('coc2-' + t).[Link]('hidden');
[Link]('tab-' + t + '2').[Link]('active');
if(t === 'quiz') loadQuiz2();
}

function showTab3(tab) {
// 1. Hide both the lesson and the quiz first
[Link]('coc3-lesson').[Link]('hidden');
[Link]('coc3-quiz').[Link]('hidden');

// 2. Remove the "active" highlight from all buttons in COC 3


[Link]('#coc3-content .btn-toggle').forEach(btn => {
[Link]('active');
});

// 3. Show the one you actually clicked (lesson or quiz)


const target = [Link]('coc3-' + tab);
if (target) {
[Link]('hidden');
}

// 4. Highlight the button you clicked


const activeBtn = [Link]('tab-' + tab + '3');
if (activeBtn) {
[Link]('active');
}

// 5. If it's the quiz, start it from question 0


if (tab === 'quiz') {
currentQuestion3 = 0;
score3 = 0;
loadQuiz3();
}
}

function showTab4(t) {
// 1. Hide both the lesson and the quiz for COC 4
[Link]('coc4-lesson').[Link]('hidden');
[Link]('coc4-quiz').[Link]('hidden');

// 2. Remove the "active" highlight from COC 4 buttons


[Link]('tab-lesson4').[Link]('active');
[Link]('tab-quiz4').[Link]('active');

// 3. Show the selected section


[Link]('coc4-' + t).[Link]('hidden');

// 4. Highlight the active button


[Link]('tab-' + t + '4').[Link]('active');

// 5. If it's the quiz, start it


if(t === 'quiz') {
currentQuestion4 = 0;
score4 = 0;
loadQuiz4();
}
}

// 5. QUIZ LOGIC

// --- COC 1 ---


function loadQuiz1() {
const q = quizQuestions1[currentQuestion1];
[Link]('question-text1').innerText = q.q;
const container = [Link]('options-container1');
[Link] = '';
[Link]('quiz-feedback1').innerText = '';
[Link]('next-btn1').[Link]('hidden');

[Link](opt => {
const btn = [Link]('button');
[Link] = 'btn-toggle'; [Link] = '100%'; [Link] = '10px';
[Link] = opt;
[Link] = () => checkAnswer1(opt, [Link]);
[Link](btn);
});
}

function checkAnswer1(sel, cor) {


const btns =
[Link]('options-container1').getElementsByTagName('button');
for(let b of btns) [Link] = true;
if(sel === cor) score1++;
[Link]('quiz-feedback1').innerText = (sel === cor) ? "Correct!" : "Wrong!";
[Link]('quiz-feedback1').[Link] = (sel === cor) ? "#00ffcc" : "#ff4d4d";
[Link]('next-btn1').[Link]('hidden');
}

function nextQuestion1() {
currentQuestion1++;
if(currentQuestion1 < [Link]) loadQuiz1();
else finishCOC(1, score1);
}

// --- COC 2 ---


function loadQuiz2() {
const q = quizQuestions2[currentQuestion2];
[Link]('question-text2').innerText = q.q;
const container = [Link]('options-container2');
[Link] = '';
[Link]('quiz-feedback2').innerText = '';
[Link]('next-btn2').[Link]('hidden');

[Link](opt => {
const btn = [Link]('button');
[Link] = 'btn-toggle'; [Link] = '100%'; [Link] = '10px';
[Link] = opt;
[Link] = () => checkAnswer2(opt, [Link]);
[Link](btn);
});
}

function checkAnswer2(sel, cor) {


const btns =
[Link]('options-container2').getElementsByTagName('button');
for(let b of btns) [Link] = true;
if(sel === cor) score2++;
[Link]('quiz-feedback2').innerText = (sel === cor) ? "Correct!" : "Wrong!";
[Link]('quiz-feedback2').[Link] = (sel === cor) ? "#00ffcc" : "#ff4d4d";
[Link]('next-btn2').[Link]('hidden');
}

function nextQuestion2() {
currentQuestion2++;
if(currentQuestion2 < [Link]) loadQuiz2();
else finishCOC(2, score2);
}

// --- COC 3 ---


function loadQuiz3() {
const q = quizQuestions3[currentQuestion3];
[Link]('question-text3').innerText = q.q;
const container = [Link]('options-container3');
[Link] = '';
[Link]('quiz-feedback3').innerText = '';
[Link]('next-btn3').[Link]('hidden');

[Link](opt => {
const btn = [Link]('button');
[Link] = 'btn-toggle'; [Link] = '100%'; [Link] = '10px';
[Link] = opt;
[Link] = () => checkAnswer3(opt, [Link]);
[Link](btn);
});
}

function checkAnswer3(sel, cor) {


const btns =
[Link]('options-container3').getElementsByTagName('button');
for(let b of btns) [Link] = true;
if(sel === cor) score3++;
[Link]('quiz-feedback3').innerText = (sel === cor) ? "Correct!" : "Wrong!";
[Link]('quiz-feedback3').[Link] = (sel === cor) ? "#00ffcc" : "#ff4d4d";
[Link]('next-btn3').[Link]('hidden');
}

function nextQuestion3() {
currentQuestion3++;
if(currentQuestion3 < [Link]) loadQuiz3();
else finishCOC(3, score3);
}
// 2. UPDATED MASTER FINISH FUNCTION
function finishCOC(n, score) {
let pass = (score >= 7);

if(pass && n < 4) {


let nextN = n + 1;
const nextBtn = [Link]('btn-coc' + nextN);

[Link]('locked');
[Link]('disabled');
[Link] = "1"; // Ensure it looks clickable
alert(`Passed COC ${n}! Score: ${score}/10. COC ${nextN} is now unlocked!`);
} else if(!pass) {
alert(`Score: ${score}/10. You need 7 correct to unlock the next level!`);
}

// Go back to Home
[Link]('coc' + n + '-content').[Link]('hidden');
[Link]('home-page').[Link]('hidden');
}
function showLesson(n) {
// 1. Hide the quiz part of this COC
[Link]('coc' + n + '-quiz').[Link]('hidden');
// 2. Show the lesson part of this COC
[Link]('coc' + n + '-lesson').[Link]('hidden');
}
function moveDis(n) {
dStep += n;
if (dStep < 0) dStep = 0;
if (dStep >= [Link]) dStep = [Link] - 1;

[Link]('dis-img').src = disSteps[dStep].img;
[Link]('dis-title').innerText = disSteps[dStep].title;
[Link]('dis-desc').innerText = disSteps[dStep].desc;
[Link]('dis-step-num').innerText = `Step ${dStep + 1} /
${[Link]}`;
}

function moveAsm(n) {
aStep += n;
if (aStep < 0) aStep = 0;
if (aStep >= [Link]) aStep = [Link] - 1;

[Link]('asm-img').src = asmSteps[aStep].img;
[Link]('asm-title').innerText = asmSteps[aStep].title;
[Link]('asm-desc').innerText = asmSteps[aStep].desc;
[Link]('asm-step-num').innerText = `Step ${aStep + 1} /
${[Link]}`;
}

function loadQuiz4() {
const q = quizQuestions4[currentQuestion4];
[Link]('question-text4').innerText = q.q;
const container = [Link]('options-container4');
[Link] = '';
[Link]('quiz-feedback4').innerText = '';
[Link]('next-btn4').[Link]('hidden');

[Link](opt => {
const btn = [Link]('button');
[Link] = opt;
[Link] = 'btn-toggle';
[Link] = '100%';
[Link] = () => checkAnswer4(opt);
[Link](btn);
});
}

function checkAnswer4(choice) {
const correct = quizQuestions4[currentQuestion4].correct;
const feedback = [Link]('quiz-feedback4');
if(choice === correct) {

✅
score4++;
[Link] = "Correct! ";
[Link] = "#00ff00";

❌
} else {
[Link] = "Wrong! The correct answer was: " + correct;
[Link] = "#ff4d4d";
}
[Link]('next-btn4').[Link]('hidden');
}

function nextQuestion4() {
currentQuestion4++;
if(currentQuestion4 < [Link]) {
loadQuiz4();
} else {
[Link]('options-container4').innerHTML = '';
[Link]('question-text4').innerText = `Quiz Finished! Your score:
${score4}/${[Link]}`;
[Link]('next-btn4').[Link]('hidden');

// Unlock next COC if score is 7 or higher


if(score4 >= 7) {
alert("Congratulations! You've mastered COC 4.");
}
}
}
function goBack() {
// 1. Hide ALL possible COC content containers
for(let i=1; i<=4; i++) {
let content = [Link]('coc' + i + '-content');
if(content) [Link]('hidden');
}

// 2. Hide the footer navigation if you have one active


const footer = [Link]('.nav-bar');
if(footer) [Link]('hidden');

// 3. Show the Home Page (Main Menu)


const home = [Link]('home-page');
if(home) {
[Link]('hidden');
// Ensure it uses flex display if your CSS requires it
[Link] = 'flex';
}

// Scroll to the top so the user doesn't start halfway down the menu
[Link](0, 0);
}
</script>
</body>
</html>

You might also like