Firewall Notes & MCQ | Network Security * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', 'Roboto', system-ui, -apple-system, sans-serif; } body { background: #f0f4f8; padding: 24px 20px; } .container { max-width: 1400px; margin: 0 auto; } /* header */ h1 { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; color: #1a2c3e; margin-bottom: 10px; font-size: 1.9rem; } .badge { background: #dc2626; color: white; font-size: 0.9rem; padding: 4px 14px; border-radius: 40px; font-weight: 500; } .sub { text-align: center; color: #2d3e50; margin-bottom: 30px; border-bottom: 2px solid #cbd5e1; display: inline-block; width: auto; margin-left: auto; margin-right: auto; padding-bottom: 8px; font-weight: 500; } /* search */ .search-box { margin-bottom: 32px; } .search-box input { width: 100%; padding: 14px 22px; border: 2px solid #2563eb; border-radius: 60px; font-size: 16px; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: 0.2s; } .search-box input:focus { outline: none; border-color: #e67e22; box-shadow: 0 0 0 3px rgba(230,126,34,0.2); } /* tab bar */ .tab-bar { display: flex; gap: 14px; justify-content: center; margin-bottom: 32px; flex-wrap: wrap; } .tab-btn { background: white; border: none; padding: 12px 28px; font-size: 1rem; font-weight: 600; border-radius: 40px; cursor: pointer; color: #1e3a8a; box-shadow: 0 2px 6px rgba(0,0,0,0.05); transition: 0.2s; border: 1px solid #cbd5e1; } .tab-btn.active { background: #1e3a8a; color: white; border-color: #1e3a8a; box-shadow: 0 8px 18px rgba(30,58,138,0.2); } .tab-btn:hover:not(.active) { background: #eef2ff; transform: translateY(-2px); } /* notes grid (cards) */ .notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 28px; } .note-card { background: white; border-radius: 28px; overflow: hidden; box-shadow: 0 12px 24px rgba(0,0,0,0.08); transition: 0.25s; border: 1px solid #e2e8f0; display: flex; flex-direction: column; height: 100%; } .note-card:hover { transform: translateY(-5px); box-shadow: 0 20px 30px rgba(0,0,0,0.12); } .card-header { background: #1e3a8a; color: white; padding: 18px 20px; font-size: 1.4rem; font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; } .card-header span { font-size: 0.85rem; background: #facc15; color: #1e1b4b; padding: 4px 12px; border-radius: 40px; font-weight: 600; } .card-body { padding: 20px; flex: 1; } .desc-text { color: #334155; line-height: 1.55; margin-bottom: 16px; font-size: 0.95rem; } .layer-badge { background: #e6f0ff; color: #075985; padding: 6px 12px; border-radius: 40px; font-weight: 600; font-size: 0.8rem; display: inline-block; margin-bottom: 14px; } .feature-list { list-style: none; margin-top: 12px; } .feature-list li { padding: 6px 0; padding-left: 24px; position: relative; font-size: 0.9rem; color: #2c3e50; } .feature-list li::before { content: "🔹"; position: absolute; left: 0; color: #f59e0b; } .note-footer { background: #f8fafc; padding: 12px 20px; border-top: 1px solid #e2e8f0; font-size: 0.75rem; color: #475569; } .icon-em { font-size: 1rem; } /* MCQ section */ .mcq-section { background: #fff9ef; border-radius: 32px; padding: 20px; } .mcq-stats { background: #e9f0f9; padding: 15px 20px; border-radius: 50px; text-align: center; font-weight: 600; margin-bottom: 25px; font-size: 1rem; } .reset-btn { background: #0d47a1; border: none; color: white; padding: 8px 24px; border-radius: 40px; font-weight: bold; cursor: pointer; margin-left: 18px; transition: 0.2s; } .reset-btn:hover { background: #e65100; } .mcq-card { background: white; border-radius: 28px; padding: 1.5rem; margin-bottom: 1.8rem; box-shadow: 0 4px 12px rgba(0,0,0,0.05); border: 1px solid #ffe0b5; } .mcq-question { font-size: 1.2rem; font-weight: 700; color: #1a2c3e; margin-bottom: 1rem; padding-left: 12px; border-left: 5px solid #f59e0b; } .mcq-options { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 16px; padding-left: 15px; } .option { display: flex; align-items: center; gap: 12px; cursor: pointer; background: #fef9f0; padding: 10px 16px; border-radius: 60px; border: 1px solid #ffe0b5; transition: 0.1s; } .option:hover { background: #fff1e0; } .option input { width: 18px; height: 18px; accent-color: #e67e22; } .feedback { margin-top: 12px; padding: 10px 16px; border-radius: 40px; font-size: 0.9rem; font-weight: 500; } .correct-feedback { background: #dff9e6; color: #2e7d32; border-left: 4px solid #2e7d32; } .wrong-feedback { background: #ffe8e6; color: #c62828; border-left: 4px solid #c62828; } .hide-tab { display: none; } .show-tab { display: block; } footer { text-align: center; margin-top: 45px; color: #5a6874; border-top: 1px solid #cbd5e1; padding-top: 24px; } @media (max-width: 700px) { .notes-grid { grid-template-columns: 1fr; } .tab-btn { padding: 8px 18px; } } 🔥 Firewall Security Network Defense Complete notes + MCQ practice | ACL, IDS/IPS, NGFW & more 📘 Firewall Notes ✅ MCQ Quiz (15 Questions) 📊 Attempted: 0 / 15 ⟳ Reset Quiz 🛡️ Based on Standard Firewall Models | ACL: Access Control List | IDS/IPS | VPN | Deep Packet Inspection // ----- FIREWALL DATA (as per given image) ----- const firewalls = [ { id:1, name:"Packet Filtering Firewall", desc:"Filters packets based on IP addresses, port numbers and protocols using access control lists (ACLs).", layer:"Network Layer (Layer 3)", features:["✔️ Fast & simple","✔️ Low cost","⚠️ Less secure (no context of connection)"] }, { id:2, name:"Stateful Inspection Firewall", desc:"Monitors the state of active connections and makes decisions based on traffic context.", layer:"Transport Layer (Layer 4)", features:["✔️ Tracks connection state","✔️ More secure than packet filtering","✔️ Allows valid responses"] }, { id:3, name:"Circuit-Level Gateway Firewall", desc:"Verifies and validates TCP connections (handshake) before allowing data to pass.", layer:"Session Layer (Layer 5)", features:["✔️ Works like a proxy for TCP connections","✔️ Hides internal network","✔️ Increases security"] }, { id:4, name:"Application-Level Gateway Firewall (Proxy Firewall)", desc:"Acts as an intermediary between client and server. Inspects application data and filters based on app protocols.", layer:"Application Layer (Layer 7)", features:["✔️ Very secure","✔️ Can filter application data","⚠️ Slower (processing overhead)","✔️ Advanced threat protection"] }, { id:5, name:"Next-Generation Firewall (NGFW)", desc:"Combines traditional firewall features with advanced security like IDS/IPS, application control, deep packet inspection.", layer:"Multiple Layers (3,4,5,7)", features:["✔️ Advanced threat protection","✔️ Application awareness","✔️ Includes IDS/IPS, VPN, Anti-malware"] }, { id:6, name:"Host-Based Firewall", desc:"Software firewall installed on individual hosts to control traffic for that system.", layer:"Application Layer (Host Level)", features:["✔️ Protects individual systems","✔️ User specific rules","✔️ Good for laptops & personal devices"] } ]; // render notes with search function renderNotes(filter = "") { const container = document.getElementById("notesContainer"); const lowerFilter = filter.toLowerCase(); const filtered = firewalls.filter(fw => fw.name.toLowerCase().includes(lowerFilter) || fw.desc.toLowerCase().includes(lowerFilter) || fw.layer.toLowerCase().includes(lowerFilter) ); if(filtered.length === 0) { container.innerHTML = `🔍 No firewall matches "${filter}"`; return; } container.innerHTML = filtered.map(fw => ` ${fw.name} #${fw.id} 📡 Works at: ${fw.layer} ${fw.desc} ${fw.features.map(f => `${f}`).join('')} 🔐 Security control point | ACL, IDS/IPS integrations `).join(""); } // ---------- MCQ DATA (comprehensive based on firewall types) ---------- const mcqData = [ { id:1, question:"Which firewall filters traffic based on IP addresses, port numbers, and protocols using ACLs, but does NOT track connection state?", options:["Stateful Inspection","Packet Filtering","Circuit-Level Gateway","Application Gateway"], correct:1 }, { id:2, question:"Which type of firewall monitors the state of active connections and allows only valid responses?", options:["Packet Filtering","Host-based Firewall","Stateful Inspection Firewall","Circuit-Level Gateway"], correct:2 }, { id:3, question:"Circuit-Level Gateway firewall primarily works at which OSI layer?", options:["Network Layer","Transport Layer","Session Layer (Layer 5)","Application Layer"], correct:2 }, { id:4, question:"Which firewall acts as an intermediary between client and server and inspects actual application data (HTTP, FTP, etc.)?", options:["Packet Filtering","Application-Level Gateway (Proxy)","Stateful Inspection","Host-based Firewall"], correct:1 }, { id:5, question:"Next-Generation Firewall (NGFW) includes advanced capabilities like:", options:["Only packet filtering","Deep packet inspection + IDS/IPS","Only TCP handshake validation","Only host-level protection"], correct:1 }, { id:6, question:"Which firewall type is installed directly on an endpoint (laptop/server) to control traffic for that specific device?", options:["Circuit Gateway","Host-Based Firewall","Proxy Firewall","Stateful Firewall"], correct:1 }, { id:7, question:"Which of the following is a disadvantage of Packet Filtering Firewall?", options:["Very slow","No context of connection / less secure","Cannot filter by IP","Expensive"], correct:1 }, { id:8, question:"Application-Level Gateway is also known as:", options:["Proxy Firewall","Packet Filter","Stateful Firewall","NGFW"], correct:0 }, { id:9, question:"Stateful Inspection Firewall works at which layer and tracks connections?", options:["Network Layer","Transport Layer (Layer 4)","Session Layer","Application Layer"], correct:1 }, { id:10, question:"What does ACL stand for in firewall security?", options:["Access Control List","Application Control Layer","Advanced Connection Link","Adaptive Cyber Level"], correct:0 }, { id:11, question:"Which firewall provides the highest level of application data inspection but may be slower due to processing overhead?", options:["Packet Filtering","Circuit Gateway","Application-Level Gateway (Proxy)","Host-based firewall"], correct:2 }, { id:12, question:"Which type of firewall validates the TCP handshake before allowing data to pass, hiding internal network structure?", options:["Stateful Inspection","Circuit-Level Gateway","NGFW","Packet Filter"], correct:1 }, { id:13, question:"NGFW typically combines traditional firewall features with:", options:["IDS/IPS, application control, anti-malware","Only IP filtering","Only port blocking","Only VPN"], correct:0 }, { id:14, question:"Which firewall works at multiple layers (3,4,5,7) and provides deep packet inspection?", options:["Packet Filtering","Next-Generation Firewall (NGFW)","Circuit Gateway","Host Firewall"], correct:1 }, { id:15, question:"A major advantage of Host-Based Firewall is:", options:["Protects entire network","User-specific rules & individual system protection","Works at network layer only","No performance impact"], correct:1 } ]; // MCQ state management let userAnswers = new Array(mcqData.length).fill(null); function updateMcqStats() { const answered = userAnswers.filter(a => a !== null).length; document.getElementById("attemptCount").innerText = answered; document.getElementById("totalMcqCount").innerText = mcqData.length; } function saveMcqState() { localStorage.setItem("firewall_mcq_answers", JSON.stringify(userAnswers)); } function loadMcqState() { const saved = localStorage.getItem("firewall_mcq_answers"); if(saved) { try{ const parsed = JSON.parse(saved); if(parsed.length === mcqData.length) userAnswers = parsed; } catch(e){} } updateMcqStats(); } function resetMcq() { userAnswers = new Array(mcqData.length).fill(null); updateMcqStats(); saveMcqState(); renderMcqList(); } function handleOptionSelect(mcqId, optIndex) { const idx = mcqId - 1; if(userAnswers[idx] === optIndex) return; userAnswers[idx] = optIndex; updateMcqStats(); saveMcqState(); renderMcqList(); } function renderMcqList(filterKeyword = "") { const container = document.getElementById("mcqListContainer"); const lowerFilter = filterKeyword.toLowerCase(); let filtered = mcqData; if(filterKeyword !== "") { filtered = mcqData.filter(mcq => mcq.question.toLowerCase().includes(lowerFilter) || mcq.options.some(opt => opt.toLowerCase().includes(lowerFilter)) ); } if(filtered.length === 0) { container.innerHTML = `🔍 No MCQ matches "${filterKeyword}"`; return; } const html = filtered.map(mcq => { const userAns = userAnswers[mcq.id-1]; const isAnswered = userAns !== null; let feedbackHtml = ""; if(isAnswered) { const isCorrect = (userAns === mcq.correct); feedbackHtml = ` ${isCorrect ? '✅ Correct!' : `❌ Wrong. Correct answer: ${mcq.options[mcq.correct]}`} `; } const optionsHtml = mcq.options.map((opt, optIdx) => { const checkedAttr = (userAns === optIdx) ? 'checked' : ''; return ` ${String.fromCharCode(65+optIdx)}. ${opt} `; }).join(''); return ` ❓ ${mcq.question} ${optionsHtml} ${feedbackHtml} `; }).join(""); container.innerHTML = html; } // ---------- SEARCH & TAB MANAGEMENT ---------- let activeTab = "notes"; let currentSearch = ""; function onGlobalSearch() { currentSearch = document.getElementById("searchInput").value; if(activeTab === "notes") { renderNotes(currentSearch); } else if(activeTab === "mcq") { renderMcqList(currentSearch); } } const notesDiv = document.getElementById("notesTab"); const mcqDiv = document.getElementById("mcqTab"); const tabBtns = document.querySelectorAll(".tab-btn"); function setActiveTab(tabId) { activeTab = tabId; if(tabId === "notes") { notesDiv.classList.remove("hide-tab"); notesDiv.classList.add("show-tab"); mcqDiv.classList.remove("show-tab"); mcqDiv.classList.add("hide-tab"); renderNotes(currentSearch); } else { notesDiv.classList.add("hide-tab"); notesDiv.classList.remove("show-tab"); mcqDiv.classList.remove("hide-tab"); mcqDiv.classList.add("show-tab"); renderMcqList(currentSearch); } tabBtns.forEach(btn => { if(btn.getAttribute("data-tab") === tabId) btn.classList.add("active"); else btn.classList.remove("active"); }); } document.getElementById("searchInput").addEventListener("keyup", onGlobalSearch); document.getElementById("resetMcqBtn").addEventListener("click", resetMcq); tabBtns.forEach(btn => { btn.addEventListener("click", (e) => { setActiveTab(btn.getAttribute("data-tab")); }); }); // Initial load loadMcqState(); renderNotes(""); renderMcqList(""); setActiveTab("notes"); window.handleOptionSelect = handleOptionSelect; window.resetMcq = resetMcq;