feat: Training Module im Standards-Tab (Lektionen, Quiz, Lernpfade)
- 3. Subtab "Trainings" im Standards-Bereich mit Fortschrittsbalken - 13 Lektionen: Form Factors, Glasfaser, IEEE 802.3, WDM, PAM4/NRZ, Link Budget (Live-Rechner), Coherent Optics, MSA/DOM, Vendor Locking, Temperature Classes, Selection Guide, 400G/800G, Troubleshooting - 40 Quiz-Fragen mit Erklaerungen, Shuffle, Feedback pro Antwort, Falsch-Antworten-Review und Note (A-F) - 4 Lernpfade: Einsteiger (5), Netzwerk-Engineer (9), Einkaeufer (6), Expert (alle 13) - Lernfortschritt in localStorage (tip_training_progress) - Live Link-Budget-Rechner eingebettet in Lektion linkbudget
This commit is contained in:
Rene Fichtmueller
parent
e71b985c52
commit
ae94fc8f47
@ -1260,6 +1260,10 @@
|
|||||||
style="padding:8px 20px;font-size:0.85rem;font-weight:600;border:none;background:none;color:var(--text-dim);border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer">
|
style="padding:8px 20px;font-size:0.85rem;font-weight:600;border:none;background:none;color:var(--text-dim);border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer">
|
||||||
Formfaktoren
|
Formfaktoren
|
||||||
</button>
|
</button>
|
||||||
|
<button id="std-sub-btn-training" onclick="switchStdSubtab('training')"
|
||||||
|
style="padding:8px 20px;font-size:0.85rem;font-weight:600;border:none;background:none;color:var(--text-dim);border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer">
|
||||||
|
🎓 Training
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Sub-tab: Standards -->
|
<!-- Sub-tab: Standards -->
|
||||||
@ -1325,6 +1329,81 @@
|
|||||||
<span class="loading pulse">Lade Bauformen…</span>
|
<span class="loading pulse">Lade Bauformen…</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Sub-tab: Training -->
|
||||||
|
<div id="std-subtab-training" class="hidden">
|
||||||
|
|
||||||
|
<!-- Progress bar -->
|
||||||
|
<div id="tr-progress-bar" style="background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:0.75rem 1rem;margin-bottom:1rem;display:flex;align-items:center;gap:1rem">
|
||||||
|
<div style="font-size:0.78rem;color:var(--text-dim);white-space:nowrap">Fortschritt</div>
|
||||||
|
<div style="flex:1;background:var(--surface3);border-radius:4px;height:8px;overflow:hidden">
|
||||||
|
<div id="tr-progress-fill" style="height:100%;width:0%;background:linear-gradient(90deg,#6366f1,#22c55e);border-radius:4px;transition:width 0.6s ease"></div>
|
||||||
|
</div>
|
||||||
|
<div id="tr-progress-label" style="font-size:0.78rem;color:var(--text-dim);white-space:nowrap">0 / 12 abgeschlossen</div>
|
||||||
|
<button onclick="resetTrainingProgress()" title="Fortschritt zurücksetzen" style="background:none;border:none;cursor:pointer;color:var(--text-dim);font-size:0.72rem;padding:0">↺</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Learning path selector + lesson list (default view) -->
|
||||||
|
<div id="tr-home">
|
||||||
|
<!-- Paths -->
|
||||||
|
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0.75rem;margin-bottom:1.5rem">
|
||||||
|
<div onclick="selectPath('beginner')" id="tr-path-beginner" style="cursor:pointer;background:var(--surface2);border:2px solid #22c55e;border-radius:12px;padding:1rem;transition:box-shadow 0.15s"
|
||||||
|
onmouseover="this.style.boxShadow='0 0 0 3px #22c55e40'" onmouseout="this.style.boxShadow=''">
|
||||||
|
<div style="font-size:1.4rem;margin-bottom:0.35rem">🟢</div>
|
||||||
|
<div style="font-weight:700;color:var(--text-bright);margin-bottom:0.2rem">Einsteiger</div>
|
||||||
|
<div style="font-size:0.72rem;color:var(--text-dim)">4 Lektionen · ~20 Min · Grundlagen Transceiver</div>
|
||||||
|
</div>
|
||||||
|
<div onclick="selectPath('engineer')" id="tr-path-engineer" style="cursor:pointer;background:var(--surface2);border:2px solid #3b82f6;border-radius:12px;padding:1rem;transition:box-shadow 0.15s"
|
||||||
|
onmouseover="this.style.boxShadow='0 0 0 3px #3b82f640'" onmouseout="this.style.boxShadow=''">
|
||||||
|
<div style="font-size:1.4rem;margin-bottom:0.35rem">🔵</div>
|
||||||
|
<div style="font-weight:700;color:var(--text-bright);margin-bottom:0.2rem">Netzwerk-Engineer</div>
|
||||||
|
<div style="font-size:0.72rem;color:var(--text-dim)">8 Lektionen · ~50 Min · Link Budget, WDM, PAM4</div>
|
||||||
|
</div>
|
||||||
|
<div onclick="selectPath('buyer')" id="tr-path-buyer" style="cursor:pointer;background:var(--surface2);border:2px solid #f59e0b;border-radius:12px;padding:1rem;transition:box-shadow 0.15s"
|
||||||
|
onmouseover="this.style.boxShadow='0 0 0 3px #f59e0b40'" onmouseout="this.style.boxShadow=''">
|
||||||
|
<div style="font-size:1.4rem;margin-bottom:0.35rem">🟡</div>
|
||||||
|
<div style="font-weight:700;color:var(--text-bright);margin-bottom:0.2rem">Einkäufer</div>
|
||||||
|
<div style="font-size:0.72rem;color:var(--text-dim)">5 Lektionen · ~25 Min · Kompatibilität, Preisfaktoren</div>
|
||||||
|
</div>
|
||||||
|
<div onclick="selectPath('expert')" id="tr-path-expert" style="cursor:pointer;background:var(--surface2);border:2px solid #ef4444;border-radius:12px;padding:1rem;transition:box-shadow 0.15s"
|
||||||
|
onmouseover="this.style.boxShadow='0 0 0 3px #ef444440'" onmouseout="this.style.boxShadow=''">
|
||||||
|
<div style="font-size:1.4rem;margin-bottom:0.35rem">🔴</div>
|
||||||
|
<div style="font-weight:700;color:var(--text-bright);margin-bottom:0.2rem">Expert</div>
|
||||||
|
<div style="font-size:0.72rem;color:var(--text-dim)">Alle 12 Lektionen · ~75 Min · Coherent, 800G+</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Lesson list -->
|
||||||
|
<div id="tr-lesson-list" style="display:grid;gap:0.6rem"></div>
|
||||||
|
|
||||||
|
<!-- Quiz start button -->
|
||||||
|
<div style="margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border);display:flex;align-items:center;gap:1rem">
|
||||||
|
<div>
|
||||||
|
<div style="font-weight:600;color:var(--text-bright)">📝 Wissens-Quiz</div>
|
||||||
|
<div style="font-size:0.75rem;color:var(--text-dim)">40 Fragen · alle Themen gemischt · Ergebnis mit Erklärungen</div>
|
||||||
|
</div>
|
||||||
|
<button onclick="startQuiz()" style="background:var(--accent);color:#fff;border:none;padding:8px 20px;border-radius:8px;cursor:pointer;font-size:0.85rem;font-weight:600;white-space:nowrap">Quiz starten →</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Lesson viewer -->
|
||||||
|
<div id="tr-lesson-view" style="display:none">
|
||||||
|
<button onclick="closeLessonView()" style="background:none;border:1px solid var(--border);padding:5px 12px;border-radius:6px;cursor:pointer;font-size:0.78rem;color:var(--text-dim);margin-bottom:1rem">← Zurück</button>
|
||||||
|
<div id="tr-lesson-content"></div>
|
||||||
|
<div style="display:flex;justify-content:space-between;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border)">
|
||||||
|
<button id="tr-prev-btn" onclick="navLesson(-1)" style="background:var(--surface2);border:1px solid var(--border);padding:7px 16px;border-radius:8px;cursor:pointer;font-size:0.82rem;color:var(--text-dim)">← Vorherige</button>
|
||||||
|
<button id="tr-complete-btn" onclick="markLessonComplete()" style="background:#22c55e;color:#fff;border:none;padding:7px 20px;border-radius:8px;cursor:pointer;font-size:0.82rem;font-weight:600">✓ Abgeschlossen</button>
|
||||||
|
<button id="tr-next-btn" onclick="navLesson(1)" style="background:var(--accent);color:#fff;border:none;padding:7px 16px;border-radius:8px;cursor:pointer;font-size:0.82rem">Nächste →</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Quiz view -->
|
||||||
|
<div id="tr-quiz-view" style="display:none">
|
||||||
|
<button onclick="closeQuizView()" style="background:none;border:1px solid var(--border);padding:5px 12px;border-radius:6px;cursor:pointer;font-size:0.78rem;color:var(--text-dim);margin-bottom:1rem">← Zurück</button>
|
||||||
|
<div id="tr-quiz-content"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -5533,7 +5612,7 @@ async function loadStandardsList() {
|
|||||||
|
|
||||||
// ── SUB-TAB SWITCHING ───────────────────────────────────────────────────────
|
// ── SUB-TAB SWITCHING ───────────────────────────────────────────────────────
|
||||||
function switchStdSubtab(tab) {
|
function switchStdSubtab(tab) {
|
||||||
['standards','formfaktoren'].forEach(function(t) {
|
['standards','formfaktoren','training'].forEach(function(t) {
|
||||||
var content = el('std-subtab-' + t);
|
var content = el('std-subtab-' + t);
|
||||||
var btn = el('std-sub-btn-' + t);
|
var btn = el('std-sub-btn-' + t);
|
||||||
if (!content || !btn) return;
|
if (!content || !btn) return;
|
||||||
@ -5545,6 +5624,7 @@ function switchStdSubtab(tab) {
|
|||||||
if (tab === 'formfaktoren') {
|
if (tab === 'formfaktoren') {
|
||||||
if (_allFormFactors.length === 0) loadFormFactors(); else renderFormFactors();
|
if (_allFormFactors.length === 0) loadFormFactors(); else renderFormFactors();
|
||||||
}
|
}
|
||||||
|
if (tab === 'training' && !window._trainingLoaded) initTraining();
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadFormFactors() {
|
async function loadFormFactors() {
|
||||||
@ -10689,6 +10769,749 @@ function renderRadar(techs, container) {
|
|||||||
buildDOM(container, svg + legend);
|
buildDOM(container, svg + legend);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// ═══════════════════════════════════════════════════════════════════════════
|
||||||
|
// 🎓 TRAINING MODULE
|
||||||
|
// ═══════════════════════════════════════════════════════════════════════════
|
||||||
|
|
||||||
|
window._trainingLoaded = false;
|
||||||
|
window._currentLessonIdx = 0;
|
||||||
|
window._currentPath = 'all';
|
||||||
|
window._quizState = null;
|
||||||
|
|
||||||
|
// ── LESSON DATA ─────────────────────────────────────────────────────────────
|
||||||
|
var LESSONS = [
|
||||||
|
|
||||||
|
{id:'ff-101', icon:'🔌', title:'Form Factors — Überblick', level:'beginner', duration:'6 min',
|
||||||
|
category:'Formfaktoren', tags:['SFP','QSFP','OSFP','Formfaktor'],
|
||||||
|
paths:['beginner','engineer','buyer','expert'],
|
||||||
|
content: [
|
||||||
|
{h:'Was ist ein Formfaktor?',
|
||||||
|
p:'Ein Transceiver-Formfaktor definiert die physikalische Abmessung, die Steckverbindung zum Switch-Port und das elektrische Interface. Er bestimmt NICHT die optische Reichweite oder den Standard — das ist Aufgabe des optischen Moduls darin.'},
|
||||||
|
{h:'Die SFP-Familie (Small Form-factor Pluggable)',
|
||||||
|
table:{head:['Typ','Max. Speed','Lanes elektrisch','Breite','Eingeführt'],
|
||||||
|
rows:[['SFP','1 Gbps','1','13.4 mm','2000 (SFF-8472)'],['SFP+','10 Gbps','1','13.4 mm','2003 (SFF-8431)'],
|
||||||
|
['SFP28','25 Gbps','1','13.4 mm','2015 (SFF-8402)'],['SFP56','50 Gbps (PAM4)','1','13.4 mm','2018'],
|
||||||
|
['SFP-DD','100 Gbps','2','13.4 mm','2018 (SFP-DD MSA)'],['SFP112','100 Gbps/Lane','1','13.4 mm','2022']]}},
|
||||||
|
{h:'Die QSFP-Familie (Quad SFP)',
|
||||||
|
table:{head:['Typ','Max. Speed','Lanes elektrisch','Typischer Einsatz'],
|
||||||
|
rows:[['QSFP+','40 Gbps','4×10G','40G Aggregation, DAC'],['QSFP28','100 Gbps','4×25G','100G Standard heute'],
|
||||||
|
['QSFP56','200 Gbps','4×50G PAM4','200G Switches'],['QSFP-DD','400 Gbps','8×50G PAM4','400G Rechenzentrum'],
|
||||||
|
['QSFP112','400 Gbps','4×100G','400G nächste Gen'],['QSFP-DD800','800 Gbps','8×100G','800G emerging']]}},
|
||||||
|
{h:'OSFP, CFP und Legacy',
|
||||||
|
p:'<b>OSFP (Octal SFP)</b>: 8×100G = 800 Gbps, größer als QSFP-DD, bessere Wärmeableitung — bevorzugt bei 400G und 800G AI-Switches (z.B. NVIDIA Spectrum-4). Breite: 22.6 mm.<br><br><b>CFP/CFP2/CFP4/CFP8</b>: Früher bei 100G Coherent-Modulen. CFP2 = 41.5 mm breit, sehr groß. Heute durch kleiner QSFP-DD für 400G Coherent abgelöst.<br><br><b>XFP (10G)</b>: Vorgänger des SFP+, heute Legacy. Größer, mehr Protokollflexibilität.<br><b>X2 / XENPAK / GBIC</b>: Historisch — in modernen Deployments nicht mehr verwendet.'},
|
||||||
|
{h:'Entscheidungshilfe',
|
||||||
|
p:'▸ <b>Neues Rechenzentrum 2024+</b>: QSFP28 (100G), QSFP-DD (400G), OSFP (400G/800G Spine)<br>▸ <b>Enterprise Access</b>: SFP28 (25G Uplink), SFP+ (10G)<br>▸ <b>Altbestand (10G)</b>: SFP+ — weitgehend backward-kompatibel mit SFP-Ports<br>▸ <b>AI-Fabric</b>: OSFP oder QSFP-DD je nach Switch-Hersteller'},
|
||||||
|
]},
|
||||||
|
|
||||||
|
{id:'fiber-101', icon:'💡', title:'Glasfaser-Typen', level:'beginner', duration:'7 min',
|
||||||
|
category:'Glasfaser', tags:['SMF','MMF','OS2','OM4','OM5','Kabel'],
|
||||||
|
paths:['beginner','engineer','buyer','expert'],
|
||||||
|
content: [
|
||||||
|
{h:'Multimode (MMF) vs. Singlemode (SMF)',
|
||||||
|
p:'<b>Multimode (MMF)</b>: Kerndurchmesser 50 µm oder 62,5 µm. Mehrere Lichtpfade gleichzeitig → Modendispersion begrenzt Reichweite. Günstigere Laser (VCSEL statt DFB). Typisch: Kurzstrecke 100m–400m im Rechenzentrum.<br><br><b>Singlemode (SMF)</b>: Kerndurchmesser 9 µm. Nur ein Lichtpfad → keine Modendispersion → extrem große Reichweiten (bis Tausende km mit Verstärkern). Teurer (DFB/EML-Laser).'},
|
||||||
|
{h:'Multimode-Kategorien (OM1–OM5)',
|
||||||
|
table:{head:['Typ','Kern','Bandbreite (850nm)','Max Reichweite 10G','Farbe (Mantel)','Status'],
|
||||||
|
rows:[['OM1','62,5 µm','160 MHz·km','33 m','Orange','Obsolet'],
|
||||||
|
['OM2','50 µm','500 MHz·km','82 m','Orange','Legacy'],
|
||||||
|
['OM3','50 µm','2.000 MHz·km','300 m','Aqua (türkis)','Weit verbreitet'],
|
||||||
|
['OM4','50 µm','4.700 MHz·km','400 m','Violett / Aqua','Standard DC'],
|
||||||
|
['OM5','50 µm','28.000 MHz·km (WBMMF)','400 m (4×25G SWDM)','Limettengrün','Emerging (WDM-MMF)']]}},
|
||||||
|
{h:'Singlemode-Kategorien (OS1/OS2)',
|
||||||
|
table:{head:['Typ','Dämpfung','Einsatz','ITU-T'],
|
||||||
|
rows:[['OS1','≤1.0 dB/km','Indoor, Gebäude','G.652'],
|
||||||
|
['OS2','≤0.4 dB/km','Außen, Weitverkehr, Low-Water-Peak','G.652D, G.657'],
|
||||||
|
['Ultra-Low-Loss','+ULL ≤0.17 dB/km','Submarine, Coherent long-haul','G.654.E']]}},
|
||||||
|
{h:'Steckverbinder (Connector-Typen)',
|
||||||
|
p:'<b>LC (Lucent Connector)</b>: Standard für SFP/QSFP — kleine 1.25mm Ferrule, Duplex (TX+RX). Weit verbreitet.<br><b>SC (Subscriber Connector)</b>: 2.5mm Ferrule, älterer Standard. Noch bei Legacy-Infrastruktur.<br><b>MPO-12 / MPO-16</b>: Multi-Fiber-Stecker für 40G/100G/400G parallel optics (8 oder 16 aktive Fasern). <br><b>FC (Fiber Channel)</b>: Schraubanschluss, primär für Messtechnik und SAN.<br><b>Wichtig</b>: Verschmutzung ist Hauptfehlerquelle! Stets Reinigungsstift vor Einstecken verwenden.'},
|
||||||
|
{h:'Regel: Fiber und Transceiver müssen zusammenpassen',
|
||||||
|
p:'✓ SMF-Transceiver → OS1/OS2 Kabel (gelber Mantel)<br>✓ MMF-Transceiver (SR) → OM3/OM4/OM5 (aqua/violett)<br>✗ SMF-Transceiver auf MMF → zu viel optische Rückreflexion, kein stabiler Link<br>✗ MMF-Transceiver auf SMF → zu wenig Licht empfangen, Link kommt nicht hoch'},
|
||||||
|
]},
|
||||||
|
|
||||||
|
{id:'standards-ieee', icon:'📋', title:'IEEE 802.3 Standards', level:'beginner', duration:'8 min',
|
||||||
|
category:'Standards', tags:['IEEE','802.3','Ethernet','Bezeichnung'],
|
||||||
|
paths:['beginner','engineer','expert'],
|
||||||
|
content: [
|
||||||
|
{h:'Wie liest man einen Ethernet-Transceiver-Namen?',
|
||||||
|
p:'Format: <b>[Speed]BASE-[Kürzel]</b><br>Beispiel: <b>100GBASE-LR4</b><br>▸ 100G = 100 Gbps<br>▸ BASE = Basisband (kein Träger-Modulation im klassischen Sinn)<br>▸ L = Long reach (L=10km, E=40km, Z/ZR=80km+, S=300m, T=Kupfer)<br>▸ R = Leitungscodierung (64b/66b)<br>▸ 4 = 4 Wellenlängen (WDM)'},
|
||||||
|
{h:'Die wichtigsten IEEE 802.3 Amendments',
|
||||||
|
table:{head:['Amendment','Jahr','Standards','Formfaktoren'],
|
||||||
|
rows:[['802.3z','1998','1000BASE-SX/LX/ZX','GBIC, SFP'],
|
||||||
|
['802.3ae','2002','10GBASE-SR/LR/ER/ZR','XFP, X2, SFP+'],
|
||||||
|
['802.3ba','2010','40GBASE-SR4/LR4, 100GBASE-SR10/LR4/ER4','QSFP+, CFP'],
|
||||||
|
['802.3bm','2015','40GBASE-SR4, 100GBASE-SR4/CWDM4','QSFP28'],
|
||||||
|
['802.3bs','2017','200GBASE-DR4/FR4/LR4, 400GBASE-FR8/LR8','QSFP56, QSFP-DD'],
|
||||||
|
['802.3cd','2018','50GBASE-SR/FR/LR, 100GBASE-DR, 200GBASE-DR4','SFP56, QSFP28'],
|
||||||
|
['802.3ck','2022','100GBASE-CR1/KR1, 400GBASE-CR4/KR4','QSFP112, OSFP'],
|
||||||
|
['802.3df','2024','800G, 1.6T','QSFP-DD800, OSFP']]}},
|
||||||
|
{h:'MSA-Standards (Multi-Source Agreement)',
|
||||||
|
p:'MSA = Herstellerübergreifende Vereinbarung die IEEE-Lücken füllt. Die wichtigsten:<br><br><b>100G-SR4</b> (100m OM4 mit MPO): Häufigste im DC-Bereich<br><b>100G-CWDM4</b>: 4×25G auf CWDM, 2km SMF, kostengünstig<br><b>100G-PSM4</b>: 4×25G parallel SMF, MPO, 500m, DC-Interconnect<br><b>400G-FR4</b>: 4×100G LWDM auf SMF, 2km, LC-Duplex — Standard für 400G im DC<br><b>400G-DR4</b>: 4×100G parallel SMF, MPO-12, 500m<br><b>OpenZR+</b>: Coherent 400G bis 1000km, interoperabel'},
|
||||||
|
{h:'Reichweite-Kürzel — Schnellreferenz',
|
||||||
|
table:{head:['Kürzel','Bedeutung','Typische Reichweite'],
|
||||||
|
rows:[['SR','Short Reach (MMF)','100m–300m'],
|
||||||
|
['DR','Direct Reach (SMF parallel)','500m'],
|
||||||
|
['FR','Fabric Reach','2 km'],
|
||||||
|
['LR','Long Reach','10 km'],
|
||||||
|
['ER','Extended Reach','40 km'],
|
||||||
|
['ZR','Ultra-Long Reach','80 km'],
|
||||||
|
['ZR+','Coherent Extended','120–1000+ km'],
|
||||||
|
['T','Twisted Pair (Kupfer)','bis 100m'],
|
||||||
|
['CR','Copper (DAC)','bis 3m aktiv']]}},
|
||||||
|
]},
|
||||||
|
|
||||||
|
{id:'wdm-101', icon:'🌈', title:'WDM-Technologien', level:'intermediate', duration:'7 min',
|
||||||
|
category:'Technologie', tags:['CWDM','DWDM','LWDM','Wellenlänge','WDM'],
|
||||||
|
paths:['engineer','expert'],
|
||||||
|
content: [
|
||||||
|
{h:'Was ist WDM?',
|
||||||
|
p:'WDM (Wavelength Division Multiplexing) = Mehrere Lichtsignale auf unterschiedlichen Wellenlängen gleichzeitig über <i>eine</i> Faser. Jede Wellenlänge = ein unabhängiger Kanal. Dies vervielfacht die Kapazität ohne neue Glasfaser zu legen.'},
|
||||||
|
{h:'CWDM (Coarse WDM)',
|
||||||
|
p:'▸ <b>18 Kanäle</b>, 20 nm Kanalabstand: 1270–1610 nm<br>▸ Günstigere, unkomplizierte Laser (kein Temperaturstabilisierung nötig)<br>▸ Reichweite: typisch bis 80 km auf OS2 ohne Verstärker<br>▸ Einsatz: Metro-Netze, Campus WDM, Legacy 10G CWDM SFP+<br>▸ Limitation: Kanal-Abstand zu groß für Verstärkung mit EDFA (Erbium-Dotierter Faserverstärker)'},
|
||||||
|
{h:'DWDM (Dense WDM)',
|
||||||
|
p:'▸ <b>48–96 Kanäle</b>, 100 GHz (0.8 nm) oder 50 GHz Kanalabstand im C-Band (1530–1565 nm)<br>▸ Präzise temperaturgeregelte Laser (ITU-T G.694.1 Grid)<br>▸ Reichweite: bis >10.000 km mit EDFA-Verstärkern und Raman-Pumpern<br>▸ Einsatz: Fernverkehr, Submarine-Kabel, Carrier-Backbone<br>▸ Tunable DWDM SFP+/QSFP28: ein Modul deckt alle 96 Kanäle ab'},
|
||||||
|
{h:'LWDM / LAN-WDM',
|
||||||
|
p:'▸ 4 Wellenlängen, 800 GHz Abstand: 1295/1300/1304/1309 nm<br>▸ Verwendet in: <b>100GBASE-LR4</b>, <b>400GBASE-FR4/LR4</b><br>▸ 4×25G (100G) oder 4×100G (400G) auf LC-Duplex SMF<br>▸ Kostengünstiger als DWDM, kein Temperatur-Tuning nötig<br>▸ Standard im modernen Rechenzentrum für 2km–10km Verbindungen'},
|
||||||
|
{h:'SWDM (Short Wavelength WDM — OM5)',
|
||||||
|
p:'▸ 4 Wellenlängen auf Multimode-Faser: 850/880/910/940 nm<br>▸ Kombiniert mit OM5-Faser (Lime Green) für 4×25G = 100G über OM5 bis 150m<br>▸ Vorteil: Brownfield-Upgrade bestehender MMF-Infrastruktur auf 100G<br>▸ Noch wenig verbreitet; OM4 mit SR4 ist häufiger'},
|
||||||
|
{h:'Vergleich auf einen Blick',
|
||||||
|
table:{head:['Technologie','Kanal-Abstand','Kanäle','Verstärkbar','Typische Reichweite','Einsatz 2024'],
|
||||||
|
rows:[['CWDM','20 nm','18','Nein','<80 km','Legacy Metro'],
|
||||||
|
['DWDM','100 GHz / 50 GHz','48–96','Ja (EDFA)','Unbegrenzt+Amp.','Backbone, Submarine'],
|
||||||
|
['LWDM','800 GHz','4','Nein','10 km','DC 100G/400G'],
|
||||||
|
['SWDM','30 nm','4','Nein','150 m','OM5 DC Upgrade']]}},
|
||||||
|
]},
|
||||||
|
|
||||||
|
{id:'modulation-101', icon:'📡', title:'NRZ vs PAM4 — Signalmodulation', level:'intermediate', duration:'6 min',
|
||||||
|
category:'Technologie', tags:['PAM4','NRZ','Modulation','400G','Bitfehler','FEC'],
|
||||||
|
paths:['engineer','expert'],
|
||||||
|
content: [
|
||||||
|
{h:'Warum brauchen wir neue Modulation?',
|
||||||
|
p:'Elektrische Schnittstellen haben physikalische Bandbreitengrenzen. Bei 25G pro Lane ist NRZ noch praktikabel. Für 50G oder 100G pro Lane braucht man effizientere Kodierung — PAM4.'},
|
||||||
|
{h:'NRZ — Non-Return-to-Zero',
|
||||||
|
p:'▸ 2 Signalpegel: 0V und 1V<br>▸ <b>1 Bit pro Symbol</b><br>▸ 25G Lane → 25 GBd (25 Giga-Baud) Symbolrate<br>▸ Einfach, robust, gut bekannt<br>▸ Verwendet in: alle Transceiver bis 25G/Lane (SFP+, SFP28, QSFP28 mit 4×25G NRZ)'},
|
||||||
|
{h:'PAM4 — 4-level Pulse Amplitude Modulation',
|
||||||
|
p:'▸ 4 Signalpegel: 0, 1/3, 2/3, 1 (relativ)<br>▸ <b>2 Bits pro Symbol</b> → Verdopplung der Effizienz<br>▸ 50G Lane → 26.5625 GBd Symbolrate (bei 64b/66b Encoding)<br>▸ 100G Lane → 53.125 GBd<br>▸ Verwendet in: QSFP-DD 400G, OSFP 400G/800G, SFP56 50G, alle 400G+ Transceiver'},
|
||||||
|
{h:'Das Problem mit PAM4: Höhere Fehlerrate',
|
||||||
|
p:'PAM4 Signalpegel liegen dichter beieinander → schlechteres SNR → mehr Bitfehler (höhere BER vor FEC). Daher ist <b>FEC (Forward Error Correction) bei PAM4 Pflicht</b>.',
|
||||||
|
table:{head:['Parameter','NRZ (25G Lane)','PAM4 (50G Lane)'],
|
||||||
|
rows:[['Symbolrate','25 GBd','26.56 GBd'],['Bits/Symbol','1','2'],
|
||||||
|
['Elektrische BW','~16 GHz','~18 GHz'],['BER vor FEC','<10⁻¹²','~10⁻⁴'],
|
||||||
|
['FEC erforderlich','Optional','Pflicht'],['Implementierungskomplexität','Niedrig','Hoch']]}},
|
||||||
|
{h:'FEC-Typen (Forward Error Correction)',
|
||||||
|
p:'<b>RS(544,514) = KP4-FEC</b>: Standard für 400G PAM4. Korrigiert BER bis 2.4×10⁻⁴ → liefert 10⁻¹⁵ nach Korrektur.<br><b>Firecode FEC (FC-FEC)</b>: Leichter FEC für 25G/50G.<br><b>KR4-FEC</b>: Backplane Ethernet.<br><br>⚠️ FEC-Mismatch zwischen Switch und Transceiver ist häufige Fehlerquelle bei 400G-Inbetriebnahme. Beide Seiten müssen identischen FEC-Modus aushandeln (Auto-FEC oder manuell konfiguriert).'},
|
||||||
|
]},
|
||||||
|
|
||||||
|
{id:'linkbudget', icon:'🔢', title:'Link-Budget Rechner', level:'intermediate', duration:'8 min',
|
||||||
|
category:'Praxis', tags:['Link Budget','dBm','Dämpfung','Reichweite','Berechnung'],
|
||||||
|
paths:['engineer','expert'],
|
||||||
|
content: [
|
||||||
|
{h:'Was ist das Link-Budget?',
|
||||||
|
p:'Das Link-Budget beschreibt die verfügbare optische Leistungsreserve zwischen Sender und Empfänger. Formel:<br><br><code style="background:var(--surface3);padding:2px 8px;border-radius:4px;font-size:0.85rem">Link Budget [dB] = TX Power [dBm] − RX Sensitivity [dBm]</code><br><br>Dieses Budget muss größer sein als alle Verluste auf der Strecke plus einem Systemmargin (typisch 3 dB).'},
|
||||||
|
{h:'Typische TX und RX Werte',
|
||||||
|
table:{head:['Transceiver-Typ','TX Power','RX Sensitivity','Optisches Budget'],
|
||||||
|
rows:[['10GBASE-SR (MMF)','−7 bis +3 dBm','−11 dBm','min. 4 dB'],
|
||||||
|
['10GBASE-LR (SMF)','−8 bis +3 dBm','−14 dBm','min. 6 dB'],
|
||||||
|
['100GBASE-SR4 (MMF)','−8 bis +4 dBm','−10 dBm','2–12 dB'],
|
||||||
|
['100GBASE-LR4 (SMF)','−6 bis +1 dBm','−14 dBm','7 dB'],
|
||||||
|
['400GBASE-DR4 (SMF)','−6 bis 0 dBm','−12 dBm','6 dB'],
|
||||||
|
['400GBASE-FR4 (SMF)','−4 bis +2 dBm','−14 dBm','10 dB']]}},
|
||||||
|
{h:'Strecken-Verluste berechnen',
|
||||||
|
table:{head:['Verlustquelle','Typischer Wert'],
|
||||||
|
rows:[['Glasfaser SMF (OS2)','0.35–0.4 dB/km'],
|
||||||
|
['Glasfaser MMF (OM4)','2.5–3.0 dB/km bei 850 nm'],
|
||||||
|
['LC-Stecker (je Stecker)','0.5 dB (max 0.75 dB)'],
|
||||||
|
['Spleißpunkt','0.1 dB (mechanisch 0.3 dB)'],
|
||||||
|
['Patch-Panel Durchführung','0.1–0.3 dB'],
|
||||||
|
['WDM-Multiplexer/Demux','3–6 dB Insertion Loss'],
|
||||||
|
['Systemmargin (Reserve)','3 dB mindestens']]}},
|
||||||
|
{h:'Beispiel-Rechnung: 10km Strecke mit 100GBASE-LR4',
|
||||||
|
p:'<b>Gegeben</b>: TX = 0 dBm, RX-Sens = −14 dBm, OS2-Kabel 10 km, 4 LC-Stecker, 1 Spleißpunkt<br><br><b>Budget</b> = 0 − (−14) = <b>14 dB</b><br><b>Verluste</b>: 10 km × 0.4 = 4.0 dB (Faser) + 4 × 0.5 = 2.0 dB (Stecker) + 0.1 (Splice) + 3.0 (Margin) = <b>9.1 dB</b><br><br><b>Ergebnis</b>: 14 dB − 9.1 dB = <b>4.9 dB Reserve ✓</b> (Strecke machbar, ausreichend Margin)'},
|
||||||
|
{h:'Live Link-Budget Rechner',
|
||||||
|
p:'<div id="lb-calculator" style="background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:1rem;margin-top:0.5rem">'
|
||||||
|
+ '<div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-bottom:0.75rem">'
|
||||||
|
+ '<label style="font-size:0.78rem"><span style="color:var(--text-dim)">TX Power (dBm)</span><input id="lb-tx" type="number" value="0" step="0.5" style="width:100%;box-sizing:border-box;margin-top:3px;padding:5px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface1);color:var(--text-bright);font-size:0.85rem" oninput="calcLinkBudget()"></label>'
|
||||||
|
+ '<label style="font-size:0.78rem"><span style="color:var(--text-dim)">RX Sensitivity (dBm)</span><input id="lb-rx" type="number" value="-14" step="0.5" style="width:100%;box-sizing:border-box;margin-top:3px;padding:5px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface1);color:var(--text-bright);font-size:0.85rem" oninput="calcLinkBudget()"></label>'
|
||||||
|
+ '<label style="font-size:0.78rem"><span style="color:var(--text-dim)">Streckenlänge (km)</span><input id="lb-km" type="number" value="10" step="0.5" min="0" style="width:100%;box-sizing:border-box;margin-top:3px;padding:5px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface1);color:var(--text-bright);font-size:0.85rem" oninput="calcLinkBudget()"></label>'
|
||||||
|
+ '<label style="font-size:0.78rem"><span style="color:var(--text-dim)">Fasertyp</span><select id="lb-fiber" onchange="calcLinkBudget()" style="width:100%;box-sizing:border-box;margin-top:3px;padding:5px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface1);color:var(--text-bright);font-size:0.85rem"><option value="0.35">OS2 SMF (0.35 dB/km)</option><option value="0.4">OS1 SMF (0.4 dB/km)</option><option value="2.5">OM4 MMF (2.5 dB/km)</option><option value="3.0">OM3 MMF (3.0 dB/km)</option></select></label>'
|
||||||
|
+ '<label style="font-size:0.78rem"><span style="color:var(--text-dim)">Anzahl Stecker (LC)</span><input id="lb-connectors" type="number" value="4" min="0" step="1" style="width:100%;box-sizing:border-box;margin-top:3px;padding:5px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface1);color:var(--text-bright);font-size:0.85rem" oninput="calcLinkBudget()"></label>'
|
||||||
|
+ '<label style="font-size:0.78rem"><span style="color:var(--text-dim)">Splices</span><input id="lb-splices" type="number" value="1" min="0" step="1" style="width:100%;box-sizing:border-box;margin-top:3px;padding:5px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface1);color:var(--text-bright);font-size:0.85rem" oninput="calcLinkBudget()"></label>'
|
||||||
|
+ '</div><div id="lb-result" style="font-size:0.88rem;padding:0.75rem;border-radius:8px;background:var(--surface3)">Werte eingeben…</div></div>'},
|
||||||
|
]},
|
||||||
|
|
||||||
|
{id:'coherent-101', icon:'🌊', title:'Coherente Optik', level:'advanced', duration:'7 min',
|
||||||
|
category:'Technologie', tags:['Coherent','ZR+','Weitverkehr','DSP','QPSK'],
|
||||||
|
paths:['expert'],
|
||||||
|
content: [
|
||||||
|
{h:'Was ist Coherente Übertragung?',
|
||||||
|
p:'Bei direkter Detektion (Direct Detect) wertet der Empfänger nur die Intensität des Lichts aus. Bei <b>coherenter Detektion</b> wertet er zusätzlich Phase und Polarisation aus — dadurch können komplexe Modulationsformate genutzt werden:<br><br>▸ <b>QPSK</b>: 4 Phasenlagen, 2 Bits/Symbol<br>▸ <b>DP-QPSK</b>: Dual-Polarisation, 4 Bits/Symbol<br>▸ <b>16QAM</b>: 16 Punkte im Konstellationsdiagramm, 8 Bits/Symbol<br>▸ <b>64QAM</b>: Noch dichter, >10 Bits/Symbol — nur bei sehr gutem OSNR'},
|
||||||
|
{h:'DSP — Das Herzstück coherenter Systeme',
|
||||||
|
p:'Ein hochleistungs-DSP (Digital Signal Processor) im Transceiver entzerrt alle linearen und nichtlinearen Effekte der Faser:<br>▸ Chromatische Dispersion (CD) — kein externer Dispersions-Kompensator nötig<br>▸ Polarisationsmode-Dispersion (PMD)<br>▸ Nichtlineare Effekte (SPM, XPM, FWM)<br>▸ Frequenz-Offset der Laser (Phasennoise)<br>Dieser DSP-Chip macht coherente Module teuer und leistungshungrig — kostet heute 5–10W vs. 1.5W für direkten Detect.'},
|
||||||
|
{h:'Coherente Standards im Überblick',
|
||||||
|
table:{head:['Standard','Speed','Reichweite','Formfaktor','Einsatz'],
|
||||||
|
rows:[['100G Coherent (CFP)','100G','1000+ km','CFP','Legacy Carrier'],
|
||||||
|
['200G/400G QSFP28-DCO','200G/400G','500–1000 km','QSFP28','DC-Interconnect'],
|
||||||
|
['OpenROADM 400G','400G','Flex','CFP2-DCO','Carrier Transport'],
|
||||||
|
['OpenZR+ 400G','400G','1000 km','QSFP-DD','Data Center (Meta, Google)'],
|
||||||
|
['800G ZR/ZR+','800G','in Entwicklung','QSFP-DD800/OSFP','Hyperscaler 2025+']]}},
|
||||||
|
{h:'Direct Detect vs. Coherent — Wann was?',
|
||||||
|
p:'<b>Direct Detect</b> (FR4, LR4, DR4):<br>✓ Kurze Distanzen (bis 10 km), günstiger, niedriger Stromverbrauch<br>✓ Keine DSP-Komplexität, sofort verfügbar<br><br><b>Coherent</b> (ZR, ZR+, DWDM):<br>✓ Mittlere bis extreme Distanzen (40 km bis Tausende km)<br>✓ Höhere Kapazität pro Wellenlänge<br>✓ Kann DWDM-Kanal belegen → Mux ohne externe ROADM-Hardware<br>✗ Teurer (5–10×), mehr Strom, langsamer bei Power-On'},
|
||||||
|
]},
|
||||||
|
|
||||||
|
{id:'msa-dom', icon:'🔍', title:'MSA Standards & DOM', level:'intermediate', duration:'6 min',
|
||||||
|
category:'Standards', tags:['MSA','DOM','DDMI','SFF','Monitoring','CMIS'],
|
||||||
|
paths:['engineer','buyer','expert'],
|
||||||
|
content: [
|
||||||
|
{h:'Was ist eine MSA?',
|
||||||
|
p:'MSA (Multi-Source Agreement) = freiwillige Industrieabkommen zwischen mehreren Herstellern, die mechanische und elektrische Interfaces standardisieren — unabhängig von IEEE. Jeder Hersteller der dem MSA folgt produziert interoperable Module.'},
|
||||||
|
{h:'Wichtige MSA-Standards',
|
||||||
|
table:{head:['MSA / Spezifikation','Scope','Wichtige Inhalte'],
|
||||||
|
rows:[['SFF-8472','1G/10G SFP DOM','Register-Map für Temperatur, Spannung, Bias, TX/RX Leistung'],
|
||||||
|
['SFF-8636','QSFP+ Management','I2C Register-Map, 4 Lane-Monitoring, Interrupt-Signaling'],
|
||||||
|
['CMIS 5.0 (SFF-8120)','400G+ (OSFP, QSFP-DD)','Komplette Re-Architektur: Module State Machine, per-Lane CDR-Control, FEC-Status, ESI'],
|
||||||
|
['100G CWDM4 MSA','100G 2km SMF','4×25G auf 4 CWDM-Wellenlängen, LC-Duplex'],
|
||||||
|
['400G-FR4 MSA','400G 2km SMF','4×100G auf 4 LWDM-Wellenlängen, LC-Duplex'],
|
||||||
|
['OpenZR+ MSA','400G Coherent','Interoperabilität zwischen Herstellern für DWDM-400G']]},
|
||||||
|
p:''},
|
||||||
|
{h:'DOM / DDMI — Digital Optical Monitoring',
|
||||||
|
p:'DOM (Digital Optical Monitoring) = Echtzeit-Überwachung des Transceiver-Betriebsstatus via I2C. Standardisiert in SFF-8472 (SFP) und SFF-8636 (QSFP).<br><br><b>Gemessene Parameter:</b><br>▸ <b>Temperatur</b> (°C): Warnschwelle typisch 70°C, Alarmschwelle 75°C<br>▸ <b>Versorgungsspannung</b> (V): 3.3V±10%<br>▸ <b>TX Bias Current</b> (mA): Laser-Betriebsstrom, Degradations-Indikator<br>▸ <b>TX Output Power</b> (dBm): Gesendete optische Leistung<br>▸ <b>RX Input Power</b> (dBm): Empfangene optische Leistung'},
|
||||||
|
{h:'DOM lesen — Diagnose-Beispiel',
|
||||||
|
p:'<code style="background:var(--surface3);padding:8px 12px;border-radius:6px;font-family:var(--mono);font-size:0.78rem;display:block;white-space:pre">show interfaces Gi0/0/1 transceiver\nSFP transceiver information:\n Identifier : SFP+\n Connector : LC\n Temperature : 42.5 C ← Normal (Alarm >75C)\n Voltage : 3.29 V ← Normal (3.0–3.6V)\n TX Bias : 8.35 mA ← Normal (30mA = degradiert)\n TX Power : -2.1 dBm ← Check: Soll-Bereich!\n RX Power : -4.8 dBm ← Empfangsleistung OK\n RX Power High Alarm : 0.0 dBm\n RX Power Low Alarm : -13.9 dBm ← Wir haben Abstand!</code>'},
|
||||||
|
]},
|
||||||
|
|
||||||
|
{id:'compatibility', icon:'🔗', title:'Kompatibilität & Vendor-Locking', level:'intermediate', duration:'6 min',
|
||||||
|
category:'Praxis', tags:['Kompatibilität','Cisco','Juniper','Third-Party','OEM','Compatible'],
|
||||||
|
paths:['engineer','buyer','expert'],
|
||||||
|
content: [
|
||||||
|
{h:'Das Kompatibilitätsproblem',
|
||||||
|
p:'Netzwerk-Hersteller implementieren oft <b>Vendor-Locking</b>: Der Switch prüft die EEPROM-Daten des Transceivers und verweigert den Betrieb wenn das Modul nicht "approved" ist. Dies schützt Herstellermargen, nicht die Netzwerksicherheit.'},
|
||||||
|
{h:'Wie Hersteller prüfen (typisch)',
|
||||||
|
p:'▸ <b>EEPROM Byte 0:</b> SFP/QSFP Identifier (standardisiert, kein Problem)<br>▸ <b>Vendor Name / Part Number:</b> Switch prüft gegen interne Whitelist<br>▸ <b>OUI (Organizationally Unique Identifier):</b> Erste 3 Bytes der Vendor MAC → identifiziert Hersteller<br>▸ <b>Cisco Encrypted Checksum:</b> Cisco IOS prüft kryptografischen Fingerprint in Byte 96–127 (nach SFF-8472 freiem Bereich)'},
|
||||||
|
{h:'Switch-Verhalten bei "inkompatiblem" Modul',
|
||||||
|
table:{head:['Hersteller','Verhalten','Workaround'],
|
||||||
|
rows:[['Cisco IOS','%GBIC_SECURITY: non-Cisco SFP, link may not function','service unsupported-transceiver (CLI-Befehl)'],
|
||||||
|
['Cisco NX-OS','Port bleibt im error-disabled Zustand','no shut + unsupported-transceiver erlauben'],
|
||||||
|
['Juniper','Warnung, aber Port funktioniert normalerweise','Keine Aktion nötig in den meisten Fällen'],
|
||||||
|
['Arista EOS','Port funktioniert mit Warnung','transceiver unsupported-diagnostic-monitoring erlauben'],
|
||||||
|
['Huawei','Warnung, aber Port funktioniert','transceiver-diagnostic-info ignore'],
|
||||||
|
['HPE/H3C','Port-Down möglich','display transceiver + manuell freischalten']]}},
|
||||||
|
{h:'Third-Party vs. OEM — Entscheidungskriterien',
|
||||||
|
p:'<b>OEM-Modul</b>: Original vom Switch-Hersteller (Cisco, Juniper, Arista branded)<br>✓ Garantierte Kompatibilität, kein Ärger beim TAC-Support<br>✗ 5–15× teurer als Third-Party<br><br><b>Third-Party / Compatible</b>: Gleiche Hardware, codiert auf den Hersteller<br>✓ Erhebliche Kostenersparnis (oft 80-90% günstiger)<br>✓ Gleiche Specs, DOM-Funktionen identisch<br>✗ Herstellersupport kann Fragen stellen<br>✗ Cisco Smart Net: Technisch kein Ausschlussgrund, aber vermeidbar in kritischen Env.<br><br><b>Empfehlung</b>: Third-Party für neue Deployments wo Kosten relevant, OEM nur wenn zwingend erforderlich durch Supportverträge.'},
|
||||||
|
]},
|
||||||
|
|
||||||
|
{id:'temperature-classes', icon:'🌡️', title:'Temperaturklassen', level:'beginner', duration:'5 min',
|
||||||
|
category:'Praxis', tags:['Temperatur','COM','EXT','IND','Industrie','Outdoor'],
|
||||||
|
paths:['beginner','buyer','expert'],
|
||||||
|
content: [
|
||||||
|
{h:'Warum Temperaturklassen wichtig sind',
|
||||||
|
p:'Ein Transceiver der nicht für seinen Einsatzbereich spezifiziert ist, fällt aus — oft unvorhersehbar. Rechenzentren sind kontrolliert (+18 bis +27°C), Outdoor-Schränke oder Industrieumgebungen können −40°C bis +85°C erreichen.'},
|
||||||
|
{h:'Die drei Standardklassen',
|
||||||
|
table:{head:['Klasse','Bezeichnung','Betriebstemperatur','Typischer Einsatz'],
|
||||||
|
rows:[['C','Commercial (COM)','0°C bis +70°C','Klimatisierte Serverräume, RZ-Core'],
|
||||||
|
['E','Extended / Industrial','−20°C bis +85°C','Office-Verteilerräume, unklimatisierte Standorte'],
|
||||||
|
['I','Industrial (IND)','−40°C bis +85°C','Outdoor-Schränke, Fabrikhallen, Tunnelinfrastruktur, Öl & Gas']]},
|
||||||
|
p:'<b>Vorsicht</b>: Manche Hersteller nennen "Extended" auch "Enterprise" oder "Industrial-Temp" — immer Datenblatt prüfen!'},
|
||||||
|
{h:'Technische Unterschiede',
|
||||||
|
p:'Industrie-Transceiver sind teurer weil:<br>▸ Laser mit weiterem Temperatur-Tuning-Bereich<br>▸ TEC (Thermo-Electric Cooler) oder thermisch kompensierte Designs<br>▸ Erweiterte Betriebstests (Burn-In, Temperaturzyklus, Vibration)<br>▸ Robustere mechanische Komponenten<br><br>Ein COM-Modul bei −5°C = Laser driftet weg, keine stabile Wellenlänge → Linkausfall.'},
|
||||||
|
{h:'Einsatz-Checkliste',
|
||||||
|
p:'1. Außenbereich oder unklimatisiert? → Mindestens EXT, besser IND<br>2. Tunnels, Industrieumgebung, Moving Parts? → IND obligatorisch<br>3. Serverraum mit funktionierender Klimaanlage und Redundanz? → COM reicht<br>4. Edge-Standort ohne sichere Klimatisierung? → EXT mindestens<br>5. Prüfe immer: <b>max. Innentemperatur im Schrank</b>, nicht Umgebungstemperatur'},
|
||||||
|
]},
|
||||||
|
|
||||||
|
{id:'selection-guide', icon:'🗺️', title:'Transceiver-Auswahl-Guide', level:'beginner', duration:'9 min',
|
||||||
|
category:'Praxis', tags:['Auswahl','Entscheidung','Guide','Einkauf'],
|
||||||
|
paths:['beginner','buyer','expert'],
|
||||||
|
content: [
|
||||||
|
{h:'Schritt-für-Schritt Transceiver auswählen',
|
||||||
|
p:'Die richtige Reihenfolge der Fragen vermeidet 90% der Fehlkäufe:'},
|
||||||
|
{h:'Schritt 1: Welcher Switch-Port?',
|
||||||
|
p:'▸ Prüfe die Port-Spezifikation im Datenblatt des Switches<br>▸ Nicht nur Formfaktor, auch elektrisches Interface: z.B. QSFP28 ≠ QSFP+ (Pinbelegung kompatibel, aber Speed-Support verschieden)<br>▸ SFP+-Port akzeptiert SFP (1G) und SFP+ (10G) — aber kein SFP28 (25G)'},
|
||||||
|
{h:'Schritt 2: Welche Speed?',
|
||||||
|
p:'▸ Beide Seiten müssen gleiche Speed unterstützen<br>▸ Manche Switches unterstützen Auto-Speed (10G/25G gemeinsam)<br>▸ DAC (Direct Attach Copper) nur wenn Distanz <5m — am günstigsten'},
|
||||||
|
{h:'Schritt 3: Welche Distanz?',
|
||||||
|
table:{head:['Distanz','Empfehlung'],
|
||||||
|
rows:[['0–3 m','DAC / AOC (Direktverbindung)'],
|
||||||
|
['3–10 m','AOC (Active Optical Cable) oder kurze DAC'],
|
||||||
|
['10 m–100 m','SR (MMF, günstiger VCSEL-Laser)'],
|
||||||
|
['100 m–300 m','SR4 (OM3), SR (OM4)'],
|
||||||
|
['300 m–2 km','CWDM4, FR, FR4 (SMF, LC-Duplex)'],
|
||||||
|
['2–10 km','LR, LR4 (SMF)'],
|
||||||
|
['10–40 km','ER, CWDM-DWDM'],
|
||||||
|
['40 km+','DWDM, Coherent ZR/ZR+']]},
|
||||||
|
p:''},
|
||||||
|
{h:'Schritt 4: Welche Glasfaser liegt vor?',
|
||||||
|
p:'▸ Kein Kabel: SMF (OS2) empfehlen — zukunftssicher<br>▸ OM3/OM4 vorhanden: SR-Transceiver nutzen (günstiger)<br>▸ OS1/OS2 vorhanden: LR/ER/ZR-Varianten möglich<br>▸ Unbekannte Faser: Messung mit OTDR vor Inbetriebnahme empfohlen'},
|
||||||
|
{h:'Schritt 5: Temperaturklasse',
|
||||||
|
p:'Serverraum COM; Edge/Outdoor EXT oder IND. Nicht unterschätzen!'},
|
||||||
|
{h:'Schritt 6: OEM oder Third-Party?',
|
||||||
|
p:'Wenn Supportvertrag nicht ausschlaggebend: Third-Party spart 80-90%. Bei kritischer Infrastruktur mit Cisco/Juniper TAC-Support: OEM evaluieren.'},
|
||||||
|
{h:'Schritt 7: Preis prüfen',
|
||||||
|
p:'Transceiver-Preise variieren enorm. Immer 3+ Anbieter vergleichen. Besonders 10G und 25G SFPs sind stark commoditisiert — kein Grund hohe Preise zu zahlen. 400G ZR-Coherent dagegen: Preisunterschiede gering, Qualität und DOM-Support wichtig.'},
|
||||||
|
]},
|
||||||
|
|
||||||
|
{id:'400g-800g', icon:'⚡', title:'400G, 800G und die Zukunft', level:'advanced', duration:'7 min',
|
||||||
|
category:'Technologie', tags:['400G','800G','1.6T','AI','Netzwerk','Zukunft'],
|
||||||
|
paths:['engineer','expert'],
|
||||||
|
content: [
|
||||||
|
{h:'Warum 400G? Der AI-Treiber',
|
||||||
|
p:'AI-Training-Cluster (GPU-Racks für GPT-4, Llama, Stable Diffusion) benötigen Fabric-Bandbreite in einem Umfang den 100G-Technologie nicht mehr effizient bedienen kann. Ein H100-Server hat 8 GPUs mit je 400G NVLink + 8×400G OSFP-Ports nach außen — ein Rack erzeugt 25,6 Tbps Fabric-Traffic.'},
|
||||||
|
{h:'400G Transceiver-Ökosystem 2024',
|
||||||
|
table:{head:['Standard','Reichweite','Formfaktor','Status','Einsatz'],
|
||||||
|
rows:[['400GBASE-SR8','100m OM4','QSFP-DD, OSFP','Stabil','Ultra-kurz DC'],
|
||||||
|
['400GBASE-DR4','500m SMF-parallel','QSFP-DD, OSFP','Stabil','DC-Interconnect'],
|
||||||
|
['400GBASE-FR4','2km SMF','QSFP-DD, OSFP','Stabil','Standard RZ'],
|
||||||
|
['400GBASE-LR4','10km SMF','QSFP-DD, OSFP','Stabil','Campus/Metro'],
|
||||||
|
['400G ZR','80km DWDM','QSFP-DD','Stabil','DCI Coherent'],
|
||||||
|
['400G ZR+','120–1000km','QSFP-DD','Stabil','Carrier/Metro']]},
|
||||||
|
p:''},
|
||||||
|
{h:'800G — der aktuelle Frontier',
|
||||||
|
p:'▸ OSFP 800G (8×100G PAM4) und QSFP-DD800 (8×100G PAM4)<br>▸ IEEE 802.3df: 800GBASE-SR8 (100m OM4), 800GBASE-DR8 (500m)<br>▸ Bereits in Produktion: NVIDIA Spectrum-4 und InfiniBand NDR (200Gb/s/Port = 800G OSFP)<br>▸ Cisco 8000 Series und Arista 7800: 800G OSFP-Ports verfügbar<br>▸ Preise 2024: 400G QSFP-DD FR4 ca. $500–800, 800G OSFP ca. $1.500–2.500'},
|
||||||
|
{h:'1.6T — was kommt?',
|
||||||
|
p:'▸ IEEE 802.3df: 1.6TBASE (16×100G oder 8×200G)<br>▸ OSFP: 1.6T via 8×200G PAM4<br>▸ Symbolrate: >106 GBd — erfordert neue DSP-Technologie<br>▸ Optical I/O (OIO): Chip-nahe Optik direkt auf Package → reduziert SerDes-Verluste dramatisch<br>▸ Co-Packaged Optics (CPO): Optik direkt in den Switch-ASIC integriert — kein Steckmodul mehr<br>▸ Timeline: CPO-Produkte 2025–2026 (Broadcom, Marvell, Intel)'},
|
||||||
|
]},
|
||||||
|
|
||||||
|
{id:'troubleshooting', icon:'🔧', title:'Troubleshooting — Häufige Probleme', level:'intermediate', duration:'7 min',
|
||||||
|
category:'Praxis', tags:['Troubleshooting','Fehler','BER','Loopback','DOM'],
|
||||||
|
paths:['engineer','expert'],
|
||||||
|
content: [
|
||||||
|
{h:'Symptom: Port kommt nicht hoch (Link Down)',
|
||||||
|
p:'Checkliste:<br>1. <b>DOM prüfen</b>: TX Power und RX Power im Datenblatt-Bereich?<br>2. <b>Faser-Poleritaät</b>: TX↔RX vertauscht? (Bei Duplex: eine Faser TX, eine RX)<br>3. <b>Glasfaser-Typ</b>: MMF-Transceiver auf SMF oder umgekehrt?<br>4. <b>Stecker-Sauberkeit</b>: Mit Inspektionsmikroskop/Video-Endoscope prüfen<br>5. <b>Kompatibilitäts-Warnung</b>: Logdatei des Switches auf Vendor-Blocking prüfen<br>6. <b>FEC-Mismatch</b>: Bei 400G PAM4 — FEC-Mode auf beiden Seiten prüfen'},
|
||||||
|
{h:'Symptom: Hohe BER / Fehlerrate',
|
||||||
|
p:'1. <b>RX Power zu niedrig</b>: Streckendämpfung größer als Budget → OTDR messen<br>2. <b>Faserverschmutzung</b>: #1 Fehlerquelle — LC-Stecker reinigen<br>3. <b>Faserschäden</b>: Knickradien unter 30mm (SMF) oder Zugbeanspruchung<br>4. <b>Reflektionen</b>: Beschädigter Ferrule-Kontakt → APC-Stecker für SMF-LR<br>5. <b>PAM4-Signal-Qualität</b>: Eye-Diagram mit Oszilloskop messen<br>6. <b>Laser-Degradation</b>: TX Bias Current erhöht → Modultausch'},
|
||||||
|
{h:'Symptom: Transceiver überhitzt',
|
||||||
|
p:'1. Temperatur via DOM prüfen: <code>show interfaces X transceiver</code><br>2. Luft-Zirkulation im Switch-Chassis prüfen (blockierte Lüfter?)<br>3. Nachbarlports belegt? Thermische Kopplung möglich<br>4. Modul-Typ: IND statt COM wenn Umgebungstemperatur >30°C Raumtemperatur<br>5. Hot-Plug-Protokoll: Modul heiß abziehen kann zu ESD-Schaden führen'},
|
||||||
|
{h:'Diagnose-Befehle — Referenz',
|
||||||
|
table:{head:['Plattform','Befehl'],
|
||||||
|
rows:[['Cisco IOS','show interfaces Gi0/1 transceiver detail'],
|
||||||
|
['Cisco NX-OS','show interface Ethernet1/1 transceiver'],
|
||||||
|
['Juniper JunOS','show interfaces xe-0/0/0 diagnostics optics'],
|
||||||
|
['Arista EOS','show interfaces Et1/1 transceiver'],
|
||||||
|
['Linux (ethtool)','ethtool -m eth0'],
|
||||||
|
['Linux (OSFP/CMIS)','ethtool --json -m eth0 | python3 -m json.tool']]},
|
||||||
|
p:''},
|
||||||
|
{h:'Loopback-Test',
|
||||||
|
p:'Ein optischer Loopback-Stecker (Faser vom TX zurück zum RX) ermöglicht den Test des Transceivers ohne Gegenport:<br>▸ Konfig: <code>loopback local</code> oder <code>channel-group loopback</code><br>▸ Verkehrstest mit traffic-generator<br>▸ Wenn Loopback OK: Transceiver ist gut → Problem liegt in der Faser oder beim Gegenport'},
|
||||||
|
]},
|
||||||
|
|
||||||
|
];
|
||||||
|
|
||||||
|
// ── QUIZ DATA ───────────────────────────────────────────────────────────────
|
||||||
|
var QUIZ_QUESTIONS = [
|
||||||
|
{q:'Wieviele elektrische Lanes hat ein QSFP28?',o:['1','2','4','8'],a:2,lesson:'ff-101',
|
||||||
|
e:'QSFP = Quad SFP = 4 Lanes. Bei QSFP28 transportiert jede Lane 25 Gbps → 4×25G = 100 Gbps gesamt.'},
|
||||||
|
{q:'Welcher Formfaktor verwendet 8 elektrische Lanes (8×50G PAM4) für 400G?',o:['QSFP28','SFP56','QSFP-DD','CFP2'],a:2,lesson:'ff-101',
|
||||||
|
e:'QSFP-DD = QSFP Double Density = 8 Lanes. Bei 50G PAM4 pro Lane = 400G. OSFP auch 8 Lanes.'},
|
||||||
|
{q:'Was ist der Kerndurchmesser einer typischen Singlemode-Faser?',o:['9 µm','50 µm','62,5 µm','125 µm'],a:0,lesson:'fiber-101',
|
||||||
|
e:'SMF hat einen 9 µm Kern. MMF-OM3/OM4 hat 50 µm. 62,5 µm war OM1/OM2 (veraltet). 125 µm ist der Außendurchmesser des Glasmantels bei allen Typen.'},
|
||||||
|
{q:'Welche Farbe hat typischerweise ein OM4-Fasermantel?',o:['Gelb','Orange','Aqua / Türkis','Violett / Lime'],a:3,lesson:'fiber-101',
|
||||||
|
e:'OM3 = Aqua/Türkis. OM4 = Violett (oder manchmal auch Aqua, je nach Hersteller). OM5 = Limettengrün. SMF = Gelb.'},
|
||||||
|
{q:'Was bedeutet "LR" bei einem Ethernet-Transceiver (z.B. 100GBASE-LR4)?',o:['Low Range','Long Reach (~10km SMF)','Laser-Ready','Lane-Redundant'],a:1,lesson:'standards-ieee',
|
||||||
|
e:'LR = Long Reach, standardisiert auf ~10 km Reichweite über SMF. ER = Extended Reach (40km), ZR = Ultra Long Range (80km+), SR = Short Reach (MMF, bis 300m).'},
|
||||||
|
{q:'Welches IEEE Amendment hat 400G Ethernet eingeführt?',o:['802.3bs (2017)','802.3ba (2010)','802.3ck (2022)','802.3ae (2002)'],a:0,lesson:'standards-ieee',
|
||||||
|
e:'IEEE 802.3bs (2017) definierte 200G und 400G Ethernet. 802.3ba = 40G/100G, 802.3ck = 100G/200G/400G mit höheren Lane-Rates.'},
|
||||||
|
{q:'Wieviele Kanäle hat ein typisches DWDM-System im C-Band?',o:['4','18','48–96','256'],a:2,lesson:'wdm-101',
|
||||||
|
e:'DWDM im C-Band: bis zu 96 Kanäle bei 100 GHz Abstand, bis 192 Kanäle bei 50 GHz. CWDM hat 18 Kanäle bei 20nm Abstand. LAN-WDM (LWDM) hat 4 Kanäle.'},
|
||||||
|
{q:'Welchen Wellenlängenbereich nutzt CWDM?',o:['850–950 nm (850nm-Fenster)','1270–1610 nm','1530–1565 nm (C-Band)','1310 nm nur'],a:1,lesson:'wdm-101',
|
||||||
|
e:'CWDM nutzt 1270–1610 nm mit 20 nm Kanalabstand. Das C-Band (1530–1565 nm) ist DWDM-Terrain. 850 nm ist das MMF-Fenster (SR-Transceiver).'},
|
||||||
|
{q:'Wieviele Bits kodiert PAM4 pro Symbol?',o:['1','2','4','8'],a:1,lesson:'modulation-101',
|
||||||
|
e:'PAM4 = 4 Pegelstufen → log₂(4) = 2 Bits pro Symbol. NRZ = 1 Bit/Symbol (2 Pegel). Das erlaubt bei gleicher Symbolrate doppelten Datendurchsatz.'},
|
||||||
|
{q:'Was ist der Hauptnachteil von PAM4 gegenüber NRZ?',o:['Geringere Reichweite','Höhere BER vor FEC','Mehr Steckerpins nötig','Nur für MMF geeignet'],a:1,lesson:'modulation-101',
|
||||||
|
e:'PAM4 hat dichter beeinanderliegende Signalpegel → schlechteres SNR → höhere BER vor FEC (~10⁻⁴ statt 10⁻¹²). Deshalb ist FEC bei PAM4 Pflicht.'},
|
||||||
|
{q:'Wie berechnet sich das optische Link-Budget?',o:['TX Power × Reichweite','TX Power [dBm] − RX Sensitivity [dBm]','Max. Faserverlust × Streckenlänge','(TX + RX) / 2'],a:1,lesson:'linkbudget',
|
||||||
|
e:'Link Budget = TX Power − RX Sensitivity. Beispiel: TX = 0 dBm, RX Sens = −14 dBm → Budget = 14 dB. Alle Streckenverluste + Systemmargin (3 dB) müssen kleiner als dieses Budget sein.'},
|
||||||
|
{q:'Wieviel Dämpfung verursacht OS2 SMF-Glasfaser typischerweise?',o:['0.1 dB/km','0.35–0.4 dB/km','1.0 dB/km','3.0 dB/km'],a:1,lesson:'linkbudget',
|
||||||
|
e:'OS2 SMF: 0.35–0.4 dB/km. OS1: ~0.4–1.0 dB/km. OM4 MMF bei 850nm: 2.5–3.0 dB/km. Ultra-Low-Loss (G.654): 0.17 dB/km.'},
|
||||||
|
{q:'Was prüft Coherente Optik zusätzlich zur Intensität?',o:['Temperatur','Phase und Polarisation des Lichts','Wellenlänge und Frequenz','Anzahl der Fasern'],a:1,lesson:'coherent-101',
|
||||||
|
e:'Coherente Detektion wertet Amplitude (Intensität), Phase UND Polarisation aus. Das erlaubt komplexe Modulationsformate wie QPSK und QAM mit deutlich mehr Bits pro Lichtsymbol.'},
|
||||||
|
{q:'Was ist OpenZR+?',o:['Ein Steckverbinder-Standard','Ein MSA für 400G interoperables Coherent-DWDM','Ein IEEE-Standard für 800G','Ein Formfaktor-Standard'],a:1,lesson:'coherent-101',
|
||||||
|
e:'OpenZR+ ist ein MSA (Multi-Source Agreement) das 400G coherente DWDM-Module zwischen verschiedenen Herstellern interoperabel macht — wichtig für Multi-Vendor Data-Center-Interconnect.'},
|
||||||
|
{q:'Welcher MSA-Standard definiert das Management-Interface für 400G Module (OSFP, QSFP-DD)?',o:['SFF-8472','SFF-8636','CMIS (SFF-8120)','SFF-8024'],a:2,lesson:'msa-dom',
|
||||||
|
e:'CMIS (Common Management Interface Specification, SFF-8120) ist der MSA-Standard für Module ab 400G. QSFP-DD und OSFP nutzen CMIS. Ältere Module nutzen SFF-8472 (SFP) oder SFF-8636 (QSFP+).'},
|
||||||
|
{q:'Was misst DOM im Bereich "TX Bias Current"?',o:['Die Versorgungsspannung des Moduls','Den Betriebsstrom des Lasers','Die empfangene optische Leistung','Die Umgebungstemperatur'],a:1,lesson:'msa-dom',
|
||||||
|
e:'TX Bias Current = Betriebsstrom des Laser-Diodes. Steigt der Bias-Strom über die Zeit an (bei gleichbleibender TX Power), deutet das auf Laser-Degradation hin — wichtiger Wartungsindikator.'},
|
||||||
|
{q:'Was ermöglicht Cisco IOS den Betrieb mit nicht-Cisco-Modulen?',o:['no ip ospf verify','service unsupported-transceiver','logging console disable','interface override allow-3rdparty'],a:1,lesson:'compatibility',
|
||||||
|
e:'Der Cisco IOS Befehl "service unsupported-transceiver" schaltet den Cisco-spezifischen Kompatibilitätscheck aus und erlaubt Third-Party-Module zu betreiben — gegen eine Support-Warnung.'},
|
||||||
|
{q:'Welche Temperaturklasse gilt für −40°C bis +85°C?',o:['COM (Commercial)','EXT (Extended)','IND (Industrial)','HI (High-Industrial)'],a:2,lesson:'temperature-classes',
|
||||||
|
e:'IND (Industrial) = −40°C bis +85°C. EXT (Extended) = −20°C bis +85°C. COM (Commercial) = 0°C bis +70°C. Für Outdoor-Anlagen ist mindestens IND erforderlich.'},
|
||||||
|
{q:'Welcher Formfaktor wird bevorzugt für 800G AI-Fabric-Switches eingesetzt (z.B. NVIDIA Spectrum-4)?',o:['SFP-DD','QSFP28','QSFP-DD','OSFP'],a:3,lesson:'400g-800g',
|
||||||
|
e:'OSFP (Octal SFP) bietet mehr Platz für bessere Wärmeableitung bei 800G/3.5W+ pro Port. QSFP-DD ist ebenfalls 400G/800G fähig, aber thermisch limitierter. NVIDIA InfiniBand NDR nutzt OSFP.'},
|
||||||
|
{q:'Was ist der erste Schritt beim Troubleshooting eines "Link Down" Problems?',o:['Transceiver tauschen','DOM-Werte prüfen (TX/RX Power)','Kabel-Routing überprüfen','FEC-Konfiguration ändern'],a:1,lesson:'troubleshooting',
|
||||||
|
e:'DOM (Digital Optical Monitoring) zeigt sofort ob TX Power und RX Power im Soll-Bereich sind. Das eliminiert schnell die häufigsten Ursachen (Faserschäden, falsche Stecker, Dämpfung) ohne Hardware-Tausch.'},
|
||||||
|
// 20 more
|
||||||
|
{q:'Was sind Co-Packaged Optics (CPO)?',o:['Optik auf einem separaten Board neben dem Switch','Optik direkt in den Switch-ASIC integriert','Eine neue Form des LC-Steckers','Ein Coherent-MSA-Standard'],a:1,lesson:'400g-800g',
|
||||||
|
e:'Co-Packaged Optics (CPO) integriert optische Sender/Empfänger direkt neben dem Switch-ASIC auf demselben Gehäuse. Eliminiert verlustbehaftete SerDes + PCB-Leitungen. Bedeutet: keine steckbaren Module mehr bei CPO-Switches (ab ~2026).'},
|
||||||
|
{q:'Was ist der Kanalabstand bei 100 GHz DWDM?',o:['20 nm','0.8 nm (~100 GHz)','0.4 nm','1310 nm'],a:1,lesson:'wdm-101',
|
||||||
|
e:'100 GHz entspricht ~0.8 nm im C-Band. Das ITU-T G.694.1 Grid definiert 100 GHz und 50 GHz Kanalraster für DWDM. CWDM hat 20 nm Kanalabstand.'},
|
||||||
|
{q:'Welches Modul-Format ist typisch für 10G Legacy-Anwendungen und gilt heute als veraltet?',o:['SFP','SFP+','XFP','GBIC'],a:2,lesson:'ff-101',
|
||||||
|
e:'XFP war ein früher 10G-Standard (2002), größer als SFP+. SFP+ (2003) löste XFP ab und ist heute der Standard-Formfaktor für 10G. GBIC war 1G-Legacy.'},
|
||||||
|
{q:'Welchen Vorteil hat SMF gegenüber MMF?',o:['Günstigere Laser','Einfachere Handhabung','Keine Modendispersion → extreme Reichweite','Breiterer Kern erleichtert Verbindung'],a:2,lesson:'fiber-101',
|
||||||
|
e:'SMF hat nur einen Ausbreitungsweg → keine Modendispersion. Damit sind Reichweiten bis tausende km (mit Verstärkern) möglich. MMF-Modendispersion begrenzt auf max. ~400m bei 100G.'},
|
||||||
|
{q:'Was ist FEC und warum ist es bei PAM4 Pflicht?',o:['Frequency Extension Coding — für DWDM','Forward Error Correction — korrigiert PAM4s höhere Rohfehlerrate','Fast Ethernet Control — Speed-Aushandlung','Fiber Error Check — DOM-Alarm-Funktion'],a:1,lesson:'modulation-101',
|
||||||
|
e:'FEC (Forward Error Correction) fügt Redundanz-Bits hinzu die der Empfänger nutzt um Übertragungsfehler zu korrigieren. PAM4 hat nativ BER ~10⁻⁴ (zu hoch). FEC KP4/RS(544,514) drückt das auf 10⁻¹⁵.'},
|
||||||
|
{q:'Welcher Steckverbinder ist Standard für QSFP-Module?',o:['SC Duplex','MPO-8','LC Duplex','FC'],a:1,lesson:'fiber-101',
|
||||||
|
e:'QSFP+ (40G) nutzt MPO-8 für SR4 (4×10G parallel). QSFP28 (100G-SR4) nutzt MPO-12. Für Single-Mode (LR4, FR4) nutzen QSFP-Module LC Duplex über WDM.'},
|
||||||
|
{q:'Welche Distanz ist typisch für 400GBASE-DR4?',o:['100m','500m','2km','10km'],a:1,lesson:'standards-ieee',
|
||||||
|
e:'400GBASE-DR4 = 4×100G parallel über 4 SMF-Fasern (MPO-12), Reichweite 500m. Häufig für Intra-DC-Verbindungen. FR4 = 2km (LWDM, LC Duplex). LR4 = 10km.'},
|
||||||
|
{q:'Was misst OTDR in einem Netzwerk?',o:['Optische Sendeleistung des Transceivers','Reflexionen und Dämpfungspunkte entlang einer Glasfaserstrecke','DOM-Alarm-Schwellwerte','Elektrische BER eines Ports'],a:1,lesson:'troubleshooting',
|
||||||
|
e:'OTDR (Optical Time-Domain Reflectometer) sendet Lichtpulse in die Faser und misst Rückreflexionen. Damit können Faserschäden, Spleiß-Verluste, Stecker-Qualität und die genaue Position von Problemen bestimmt werden.'},
|
||||||
|
{q:'Was bedeutet ein sehr niedriger TX Bias Current bei steigender TX Power?',o:['Guter Zustand — effiziente Laserdiode','Mögliche Kalibrierungs-Problem oder Laserdegradation','Normaler Betrieb im oberen Temperaturbereich','Hinweis auf Faserbruch'],a:1,lesson:'msa-dom',
|
||||||
|
e:'Wenn TX Bias Current niedrig ist aber TX Power normal: Das kann ein Indikator für einen veralteten Kalibrierungs-Datensatz oder frühe Laserdegradation sein. Historischer Trend via DOM überwachen.'},
|
||||||
|
{q:'Welches Betriebstemperatur-Maximum teilen EXT und IND?',o:['+70°C','+75°C','+85°C','+95°C'],a:2,lesson:'temperature-classes',
|
||||||
|
e:'Sowohl EXT (Extended) als auch IND (Industrial) haben +85°C als Maximum. Der Unterschied ist das Minimum: EXT beginnt bei −20°C, IND bei −40°C.'},
|
||||||
|
{q:'Warum ist ein Systemmargin von 3 dB beim Link-Budget wichtig?',o:['Gesetzliche Vorschrift','Reserve für Alterung, Spleißreparaturen und Temperatureffekte','Kompensation für PAM4 SNR-Verlust','Für DWDM-Verstärker-Effizienz'],a:1,lesson:'linkbudget',
|
||||||
|
e:'Der Systemmargin (Typ. 3 dB) schützt vor: Laser-Alterung (TX Power sinkt über Jahre), zukünftige Spleißstellen bei Reparaturen, Temperatureffekte auf Laser-Wellenlänge/Leistung, und Stecker-Verschmutzung.'},
|
||||||
|
{q:'Was ist der Unterschied zwischen 100GBASE-CWDM4 und 100GBASE-LR4?',o:['Speed ist verschieden (40G vs 100G)','CWDM4 nutzt 4 CWDM-Wellenlängen (2km), LR4 nutzt LWDM (10km)','LR4 ist für MMF, CWDM4 für SMF','Formfaktor ist verschieden'],a:1,lesson:'wdm-101',
|
||||||
|
e:'Beide sind 100G auf SMF mit 4 Wellenlängen. CWDM4: 4 CWDM-Wellenlängen (1271/1291/1311/1331nm), Reichweite 2km. LR4: 4 LWDM-Wellenlängen (1295/1300/1304/1309nm), Reichweite 10km. LC Duplex bei beiden.'},
|
||||||
|
{q:'Was ist DP-QPSK in Coherenter Optik?',o:['Dual Port - Quad Phase Shift Keying (2 Stecker)','Dual Polarization - QPSK (4 Bits/Symbol, 2 Polarisations-Ebenen)','Direct Propagation Signal Quality Protocol','Dense Phase - Quadrature Polarization Standard'],a:1,lesson:'coherent-101',
|
||||||
|
e:'DP-QPSK = Dual Polarization QPSK. Nutzt 2 orthogonale Polarisationsebenen (X+Y) je mit QPSK (2 Bits/Symbol) → 4 Bits/Symbol gesamt. Standard für 100G Coherent Transport.'},
|
||||||
|
{q:'Was ist ein typischer Wert für einen LC-Stecker-Verlust?',o:['0.01 dB','0.1 dB','0.5 dB','2.0 dB'],a:2,lesson:'linkbudget',
|
||||||
|
e:'LC-Stecker: typisch 0.3–0.5 dB, Maximum 0.75 dB. Bei verschmutzten oder schlecht ausgerichteten Steckern können es 1–3 dB werden. Faserverbinder sind nach Glasfaser-Streckendämpfung die größte Verlustquelle.'},
|
||||||
|
{q:'Welches Encoding nutzt NRZ?',o:['2 Pegel, 2 Bits/Symbol','2 Pegel, 1 Bit/Symbol','4 Pegel, 2 Bits/Symbol','8 Pegel, 3 Bits/Symbol'],a:1,lesson:'modulation-101',
|
||||||
|
e:'NRZ = Non-Return-to-Zero: 2 Spannungspegel (0 und 1) → 1 Bit pro Symbol. Simple, robust, kein FEC zwingend nötig. Bei ≤25G pro Lane ausreichend.'},
|
||||||
|
{q:'Was bedeutet "MSA" im Transceiver-Kontext?',o:['Multi-Speed Adapter','Manufacturing Standard Agreement','Multi-Source Agreement (Herstellerübergreifende Standardisierung)','Module Signal Analyzer'],a:2,lesson:'msa-dom',
|
||||||
|
e:'MSA = Multi-Source Agreement: freiwillige Vereinbarung zwischen mehreren Herstellern die mechanische, elektrische und optische Parameter standardisiert — ohne IEEE-Prozess. Ermöglicht Interoperabilität und verhindert Monopole.'},
|
||||||
|
{q:'Welche Faser-Kategorie empfiehlt sich für ein neues Rechenzentrum?',o:['OM1 (62.5µm) — bewährt','OM3 Aqua — Standard','OM4 oder OM5 für MMF, OS2 für SMF','OS1 — günstiger als OS2'],a:2,lesson:'fiber-101',
|
||||||
|
e:'Für neue RZ-Deployments: OM4 oder OM5 für Kurzstrecken-MMF (bis 400m 100G), OS2 für alles mit >500m oder hoher Zukunftssicherheit. OM1/OM2 sind obsolet, OS1 hat höhere Dämpfung als OS2.'},
|
||||||
|
{q:'Was macht ein VCSEL-Laser besonders geeignet für MMF (SR) Transceiver?',o:['Sehr schmale Linienbreite, für DWDM geeignet','Günstig, direkt modulierbar, breite Abstrahlcharakteristik passt zum MMF-Kern','Unterstützt Coherente Modulation','Kann 100km ohne Verstärker überbrücken'],a:1,lesson:'fiber-101',
|
||||||
|
e:'VCSEL (Vertical-Cavity Surface-Emitting Laser): günstig in der Herstellung, direkt mit Datenstrom modulierbar (kein externes Modulator nötig), breites Strahlprofil passt gut zum 50µm MMF-Kern. Für SMF zu viel Modendispersion.'},
|
||||||
|
{q:'Was bedeutet RS(544,514) FEC?',o:['Reed-Solomon Code: 544 Gesamtbits, 514 Datenbits (30 Paritätsbits)','FEC für 544G-Transceiver','Root-Sequence FEC für PAM4 Kalibrierung','Reed-Solomon für 514 Kanäle'],a:0,lesson:'modulation-101',
|
||||||
|
e:'RS(544,514) = Reed-Solomon Code mit 544 Symbolen gesamt, davon 514 Datensymbole und 30 Paritätssymbole. Auch als KP4-FEC bekannt. Korrigiert Rohfehlerraten bis 2.4×10⁻⁴ und liefert <10⁻¹⁵ nach Korrektur.'},
|
||||||
|
{q:'Welche Linux-Kommandozeile liest DOM-Daten eines Transceivers aus?',o:['ifconfig eth0 transceiver','ethtool -m eth0','netstat -i eth0 dom','ip link show eth0 optics'],a:1,lesson:'troubleshooting',
|
||||||
|
e:'ethtool -m eth0 (--module-info) liest die EEPROM-DOM-Daten des Transceivers in eth0 aus. Für CMIS-Module (400G): ethtool --json -m eth0. Auf Cisco: show interfaces transceiver detail.'},
|
||||||
|
];
|
||||||
|
|
||||||
|
// ── LEARNING PATHS ──────────────────────────────────────────────────────────
|
||||||
|
var PATHS = {
|
||||||
|
beginner: ['ff-101','fiber-101','standards-ieee','temperature-classes','selection-guide'],
|
||||||
|
engineer: ['ff-101','fiber-101','standards-ieee','wdm-101','modulation-101','linkbudget','msa-dom','compatibility','troubleshooting'],
|
||||||
|
buyer: ['ff-101','fiber-101','standards-ieee','compatibility','temperature-classes','selection-guide'],
|
||||||
|
expert: ['ff-101','fiber-101','standards-ieee','wdm-101','modulation-101','linkbudget','coherent-101','msa-dom','compatibility','temperature-classes','selection-guide','400g-800g','troubleshooting'],
|
||||||
|
all: LESSONS.map(function(l){return l.id;})
|
||||||
|
};
|
||||||
|
|
||||||
|
// ── PROGRESS TRACKING ───────────────────────────────────────────────────────
|
||||||
|
function getProgress() {
|
||||||
|
try { return JSON.parse(localStorage.getItem('tip_training_progress') || '{}'); } catch(e) { return {}; }
|
||||||
|
}
|
||||||
|
function saveProgress(p) { try { localStorage.setItem('tip_training_progress',JSON.stringify(p)); } catch(e) {} }
|
||||||
|
|
||||||
|
function resetTrainingProgress() {
|
||||||
|
if (!confirm('Gesamten Trainingsfortschritt zurücksetzen?')) return;
|
||||||
|
try { localStorage.removeItem('tip_training_progress'); } catch(e) {}
|
||||||
|
renderLessonList();
|
||||||
|
updateProgressBar();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateProgressBar() {
|
||||||
|
var p = getProgress();
|
||||||
|
var completed = Object.keys(p).filter(function(k){ return p[k] && p[k].done; }).length;
|
||||||
|
var total = LESSONS.length;
|
||||||
|
var pct = Math.round(completed / total * 100);
|
||||||
|
var fill = el('tr-progress-fill');
|
||||||
|
var label = el('tr-progress-label');
|
||||||
|
if (fill) fill.style.width = pct + '%';
|
||||||
|
if (label) label.textContent = completed + ' / ' + total + ' abgeschlossen';
|
||||||
|
}
|
||||||
|
|
||||||
|
function markLessonComplete() {
|
||||||
|
var lesson = LESSONS[window._currentLessonIdx];
|
||||||
|
if (!lesson) return;
|
||||||
|
var p = getProgress();
|
||||||
|
p[lesson.id] = { done: true, date: new Date().toISOString().slice(0,10) };
|
||||||
|
saveProgress(p);
|
||||||
|
var btn = el('tr-complete-btn');
|
||||||
|
if (btn) { btn.textContent = '✓ Abgeschlossen'; btn.style.background = '#16a34a'; }
|
||||||
|
updateProgressBar();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── LESSON RENDERING ────────────────────────────────────────────────────────
|
||||||
|
function initTraining() {
|
||||||
|
window._trainingLoaded = true;
|
||||||
|
window._currentPath = 'all';
|
||||||
|
renderLessonList();
|
||||||
|
updateProgressBar();
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectPath(pathId) {
|
||||||
|
window._currentPath = pathId;
|
||||||
|
['beginner','engineer','buyer','expert'].forEach(function(p) {
|
||||||
|
var card = el('tr-path-' + p);
|
||||||
|
if (!card) return;
|
||||||
|
var active = p === pathId;
|
||||||
|
card.style.opacity = active ? '1' : '0.5';
|
||||||
|
card.style.transform = active ? 'scale(1.02)' : 'scale(1)';
|
||||||
|
});
|
||||||
|
renderLessonList();
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderLessonList() {
|
||||||
|
var container = el('tr-lesson-list');
|
||||||
|
if (!container) return;
|
||||||
|
var p = getProgress();
|
||||||
|
var pathIds = PATHS[window._currentPath] || LESSONS.map(function(l){return l.id;});
|
||||||
|
var filtered = LESSONS.filter(function(l){ return pathIds.indexOf(l.id) !== -1; });
|
||||||
|
|
||||||
|
var levelColors = { beginner:'#22c55e', intermediate:'#f59e0b', advanced:'#ef4444' };
|
||||||
|
var levelLabels = { beginner:'Einsteiger', intermediate:'Fortgeschritten', advanced:'Expert' };
|
||||||
|
|
||||||
|
var html = filtered.map(function(lesson, idx) {
|
||||||
|
var done = p[lesson.id] && p[lesson.id].done;
|
||||||
|
var color = levelColors[lesson.level] || '#6366f1';
|
||||||
|
var globalIdx = LESSONS.indexOf(lesson);
|
||||||
|
return '<div onclick="openLesson(' + globalIdx + ')" style="cursor:pointer;background:var(--surface2);border:1px solid var(--border);border-left:3px solid ' + (done?'#22c55e':color) + ';border-radius:10px;padding:0.9rem 1.1rem;display:flex;align-items:center;gap:1rem;transition:box-shadow 0.15s" '
|
||||||
|
+ 'onmouseover="this.style.boxShadow=\'0 0 0 2px ' + color + '40\'" onmouseout="this.style.boxShadow=\'\'">'
|
||||||
|
+ '<div style="font-size:1.6rem;flex-shrink:0">' + (done ? '✅' : lesson.icon) + '</div>'
|
||||||
|
+ '<div style="flex:1">'
|
||||||
|
+ '<div style="display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap">'
|
||||||
|
+ '<span style="font-weight:700;color:var(--text-bright)">' + esc(lesson.title) + '</span>'
|
||||||
|
+ '<span style="font-size:0.65rem;padding:1px 7px;border-radius:10px;background:' + color + '22;color:' + color + ';border:1px solid ' + color + '44">' + (levelLabels[lesson.level]||lesson.level) + '</span>'
|
||||||
|
+ '</div>'
|
||||||
|
+ '<div style="font-size:0.72rem;color:var(--text-dim);margin-top:2px">'
|
||||||
|
+ esc(lesson.category) + ' · ' + esc(lesson.duration)
|
||||||
|
+ (lesson.tags ? ' · ' + lesson.tags.slice(0,3).map(function(t){ return '<span style="opacity:0.7">' + esc(t) + '</span>'; }).join(', ') : '')
|
||||||
|
+ '</div>'
|
||||||
|
+ '</div>'
|
||||||
|
+ (done ? '<span style="font-size:0.68rem;color:#22c55e;white-space:nowrap">✓ Fertig</span>' : '<span style="font-size:0.72rem;color:var(--text-dim);white-space:nowrap">→ Start</span>')
|
||||||
|
+ '</div>';
|
||||||
|
}).join('');
|
||||||
|
buildDOM(container, html || '<div style="color:var(--text-dim);padding:1rem">Keine Lektionen für diesen Pfad.</div>');
|
||||||
|
}
|
||||||
|
|
||||||
|
function openLesson(idx) {
|
||||||
|
window._currentLessonIdx = idx;
|
||||||
|
var lesson = LESSONS[idx];
|
||||||
|
if (!lesson) return;
|
||||||
|
var home = el('tr-home');
|
||||||
|
var view = el('tr-lesson-view');
|
||||||
|
var content = el('tr-lesson-content');
|
||||||
|
if (home) home.style.display = 'none';
|
||||||
|
if (view) view.style.display = '';
|
||||||
|
|
||||||
|
var p = getProgress();
|
||||||
|
var done = p[lesson.id] && p[lesson.id].done;
|
||||||
|
var btn = el('tr-complete-btn');
|
||||||
|
if (btn) { btn.textContent = done ? '✓ Bereits abgeschlossen' : '✓ Als abgeschlossen markieren'; btn.style.background = done ? '#16a34a' : '#22c55e'; }
|
||||||
|
|
||||||
|
var prevBtn = el('tr-prev-btn');
|
||||||
|
var nextBtn = el('tr-next-btn');
|
||||||
|
if (prevBtn) prevBtn.style.visibility = idx > 0 ? '' : 'hidden';
|
||||||
|
if (nextBtn) nextBtn.style.visibility = idx < LESSONS.length - 1 ? '' : 'hidden';
|
||||||
|
|
||||||
|
var levelColors = { beginner:'#22c55e', intermediate:'#f59e0b', advanced:'#ef4444' };
|
||||||
|
var levelLabels = { beginner:'Einsteiger', intermediate:'Fortgeschritten', advanced:'Expert' };
|
||||||
|
var color = levelColors[lesson.level] || '#6366f1';
|
||||||
|
|
||||||
|
var html = '<div style="margin-bottom:1.5rem">'
|
||||||
|
+ '<div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:0.5rem">'
|
||||||
|
+ '<span style="font-size:2rem">' + lesson.icon + '</span>'
|
||||||
|
+ '<div>'
|
||||||
|
+ '<div style="font-size:1.2rem;font-weight:700;color:var(--text-bright)">' + esc(lesson.title) + '</div>'
|
||||||
|
+ '<div style="display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:4px">'
|
||||||
|
+ '<span style="font-size:0.7rem;padding:2px 8px;border-radius:8px;background:' + color + '22;color:' + color + ';border:1px solid ' + color + '44">' + (levelLabels[lesson.level]||lesson.level) + '</span>'
|
||||||
|
+ '<span style="font-size:0.7rem;color:var(--text-dim)">' + esc(lesson.category) + ' · ' + esc(lesson.duration) + '</span>'
|
||||||
|
+ '</div></div></div></div>';
|
||||||
|
|
||||||
|
(lesson.content || []).forEach(function(section) {
|
||||||
|
html += '<div style="margin-bottom:1.5rem">';
|
||||||
|
html += '<h3 style="font-size:1rem;font-weight:700;color:var(--text-bright);margin-bottom:0.6rem;padding-bottom:0.4rem;border-bottom:1px solid var(--border)">' + esc(section.h) + '</h3>';
|
||||||
|
if (section.p) {
|
||||||
|
html += '<div style="font-size:0.85rem;color:var(--text-muted);line-height:1.7;margin-bottom:0.6rem">' + section.p + '</div>';
|
||||||
|
}
|
||||||
|
if (section.table) {
|
||||||
|
html += '<div style="overflow-x:auto"><table style="border-collapse:collapse;width:100%;font-size:0.8rem;margin-bottom:0.5rem">'
|
||||||
|
+ '<thead><tr>' + section.table.head.map(function(h){ return '<th style="text-align:left;padding:6px 10px;background:var(--surface3);border:1px solid var(--border);color:var(--text-dim);font-weight:600;white-space:nowrap">' + esc(h) + '</th>'; }).join('') + '</tr></thead>'
|
||||||
|
+ '<tbody>' + section.table.rows.map(function(row,ri){ return '<tr style="background:' + (ri%2?'var(--surface2)':'var(--surface1)') + '">' + row.map(function(cell){ return '<td style="padding:5px 10px;border:1px solid var(--border);color:var(--text-bright)">' + cell + '</td>'; }).join('') + '</tr>'; }).join('') + '</tbody>'
|
||||||
|
+ '</table></div>';
|
||||||
|
}
|
||||||
|
html += '</div>';
|
||||||
|
});
|
||||||
|
|
||||||
|
if (content) buildDOM(content, html);
|
||||||
|
|
||||||
|
// Wire link-budget calculator if it's on this lesson
|
||||||
|
if (lesson.id === 'linkbudget') {
|
||||||
|
setTimeout(function() { calcLinkBudget(); }, 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function calcLinkBudget() {
|
||||||
|
var tx = parseFloat(el('lb-tx') ? el('lb-tx').value : 0);
|
||||||
|
var rx = parseFloat(el('lb-rx') ? el('lb-rx').value : -14);
|
||||||
|
var km = parseFloat(el('lb-km') ? el('lb-km').value : 10);
|
||||||
|
var att = parseFloat(el('lb-fiber') ? el('lb-fiber').value : 0.35);
|
||||||
|
var con = parseInt (el('lb-connectors') ? el('lb-connectors').value : 4);
|
||||||
|
var spl = parseInt (el('lb-splices') ? el('lb-splices').value : 1);
|
||||||
|
var res = el('lb-result');
|
||||||
|
if (!res) return;
|
||||||
|
var budget = tx - rx;
|
||||||
|
var fiberLoss = km * att;
|
||||||
|
var connLoss = con * 0.5;
|
||||||
|
var splLoss = spl * 0.1;
|
||||||
|
var margin = 3.0;
|
||||||
|
var totalLoss = fiberLoss + connLoss + splLoss + margin;
|
||||||
|
var reserve = budget - totalLoss;
|
||||||
|
var ok = reserve >= 0;
|
||||||
|
res.style.background = ok ? 'rgba(34,197,94,0.1)' : 'rgba(239,68,68,0.1)';
|
||||||
|
res.style.border = '1px solid ' + (ok ? '#22c55e44' : '#ef444444');
|
||||||
|
res.innerHTML = (ok ? '<b style="color:#22c55e">✓ Strecke realisierbar</b>' : '<b style="color:#ef4444">✗ Budget zu knapp</b>')
|
||||||
|
+ '<table style="width:100%;border-collapse:collapse;margin-top:0.5rem;font-size:0.78rem">'
|
||||||
|
+ '<tr><td style="padding:2px 0;color:var(--text-dim)">Link-Budget</td><td style="text-align:right;font-family:var(--mono);color:var(--text-bright)">' + budget.toFixed(1) + ' dB</td></tr>'
|
||||||
|
+ '<tr><td style="padding:2px 0;color:var(--text-dim)">Faser ' + km + 'km × ' + att + ' dB/km</td><td style="text-align:right;font-family:var(--mono)">−' + fiberLoss.toFixed(2) + ' dB</td></tr>'
|
||||||
|
+ '<tr><td style="padding:2px 0;color:var(--text-dim)">' + con + ' Stecker × 0.5 dB</td><td style="text-align:right;font-family:var(--mono)">−' + connLoss.toFixed(2) + ' dB</td></tr>'
|
||||||
|
+ '<tr><td style="padding:2px 0;color:var(--text-dim)">' + spl + ' Splices × 0.1 dB</td><td style="text-align:right;font-family:var(--mono)">−' + splLoss.toFixed(2) + ' dB</td></tr>'
|
||||||
|
+ '<tr><td style="padding:2px 0;color:var(--text-dim)">Systemmargin</td><td style="text-align:right;font-family:var(--mono)">−' + margin.toFixed(1) + ' dB</td></tr>'
|
||||||
|
+ '<tr style="border-top:1px solid var(--border)"><td style="padding:3px 0;font-weight:700;color:var(--text-bright)">Reserve</td><td style="text-align:right;font-family:var(--mono);font-weight:700;color:' + (ok?'#22c55e':'#ef4444') + '">' + (reserve >= 0 ? '+' : '') + reserve.toFixed(2) + ' dB</td></tr>'
|
||||||
|
+ '</table>';
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeLessonView() {
|
||||||
|
var home = el('tr-home');
|
||||||
|
var view = el('tr-lesson-view');
|
||||||
|
if (home) home.style.display = '';
|
||||||
|
if (view) view.style.display = 'none';
|
||||||
|
renderLessonList();
|
||||||
|
}
|
||||||
|
|
||||||
|
function navLesson(dir) {
|
||||||
|
var newIdx = window._currentLessonIdx + dir;
|
||||||
|
if (newIdx >= 0 && newIdx < LESSONS.length) openLesson(newIdx);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── QUIZ ENGINE ─────────────────────────────────────────────────────────────
|
||||||
|
function startQuiz() {
|
||||||
|
var home = el('tr-home');
|
||||||
|
var quiz = el('tr-quiz-view');
|
||||||
|
if (home) home.style.display = 'none';
|
||||||
|
if (quiz) quiz.style.display = '';
|
||||||
|
var shuffled = QUIZ_QUESTIONS.slice().sort(function(){ return Math.random() - 0.5; });
|
||||||
|
window._quizState = { questions: shuffled, current: 0, answers: [], score: 0 };
|
||||||
|
renderQuizQuestion();
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeQuizView() {
|
||||||
|
var home = el('tr-home');
|
||||||
|
var quiz = el('tr-quiz-view');
|
||||||
|
if (home) home.style.display = '';
|
||||||
|
if (quiz) quiz.style.display = 'none';
|
||||||
|
window._quizState = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderQuizQuestion() {
|
||||||
|
var qs = window._quizState;
|
||||||
|
var content = el('tr-quiz-content');
|
||||||
|
if (!qs || !content) return;
|
||||||
|
|
||||||
|
if (qs.current >= qs.questions.length) {
|
||||||
|
renderQuizResult();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var q = qs.questions[qs.current];
|
||||||
|
var total = qs.questions.length;
|
||||||
|
var pct = Math.round(qs.current / total * 100);
|
||||||
|
|
||||||
|
var html = '<div style="margin-bottom:1rem">'
|
||||||
|
+ '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem">'
|
||||||
|
+ '<span style="font-size:0.78rem;color:var(--text-dim)">Frage ' + (qs.current+1) + ' von ' + total + '</span>'
|
||||||
|
+ '<span style="font-size:0.78rem;color:var(--accent)">' + qs.score + ' richtig</span>'
|
||||||
|
+ '</div>'
|
||||||
|
+ '<div style="background:var(--surface3);border-radius:4px;height:5px;overflow:hidden;margin-bottom:1rem">'
|
||||||
|
+ '<div style="width:' + pct + '%;height:100%;background:var(--accent);border-radius:4px;transition:width 0.3s"></div>'
|
||||||
|
+ '</div></div>'
|
||||||
|
+ '<div class="card" style="padding:1.25rem">'
|
||||||
|
+ '<div style="font-size:0.92rem;font-weight:600;color:var(--text-bright);margin-bottom:1.25rem;line-height:1.5">' + esc(q.q) + '</div>'
|
||||||
|
+ '<div style="display:grid;gap:0.5rem">'
|
||||||
|
+ q.o.map(function(opt, i) {
|
||||||
|
return '<button onclick="answerQuiz(' + i + ')" style="text-align:left;padding:10px 14px;border:1.5px solid var(--border);border-radius:8px;background:var(--surface2);color:var(--text-bright);cursor:pointer;font-size:0.85rem;transition:border-color 0.15s,background 0.15s" onmouseover="this.style.borderColor=\'var(--accent)\';this.style.background=\'rgba(99,102,241,0.08)\'" onmouseout="this.style.borderColor=\'var(--border)\';this.style.background=\'var(--surface2)\'">'
|
||||||
|
+ '<span style="color:var(--text-dim);margin-right:0.5rem">' + String.fromCharCode(65+i) + ')</span> ' + esc(opt)
|
||||||
|
+ '</button>';
|
||||||
|
}).join('')
|
||||||
|
+ '</div></div>';
|
||||||
|
buildDOM(content, html);
|
||||||
|
}
|
||||||
|
|
||||||
|
function answerQuiz(chosen) {
|
||||||
|
var qs = window._quizState;
|
||||||
|
var content = el('tr-quiz-content');
|
||||||
|
if (!qs || !content) return;
|
||||||
|
|
||||||
|
var q = qs.questions[qs.current];
|
||||||
|
var correct = chosen === q.a;
|
||||||
|
if (correct) qs.score++;
|
||||||
|
qs.answers.push({ q: q, chosen: chosen, correct: correct });
|
||||||
|
|
||||||
|
// Show feedback
|
||||||
|
var buttons = content.querySelectorAll('button');
|
||||||
|
buttons.forEach(function(btn, i) {
|
||||||
|
btn.onclick = null;
|
||||||
|
btn.style.cursor = 'default';
|
||||||
|
btn.onmouseover = null; btn.onmouseout = null;
|
||||||
|
if (i === q.a) { btn.style.background = 'rgba(34,197,94,0.15)'; btn.style.borderColor = '#22c55e'; btn.style.color = '#22c55e'; }
|
||||||
|
else if (i === chosen && !correct) { btn.style.background = 'rgba(239,68,68,0.12)'; btn.style.borderColor = '#ef4444'; btn.style.color = '#ef4444'; }
|
||||||
|
});
|
||||||
|
|
||||||
|
// Explanation
|
||||||
|
var expDiv = document.createElement('div');
|
||||||
|
expDiv.style.cssText = 'margin-top:1rem;padding:0.75rem 1rem;border-radius:8px;font-size:0.82rem;line-height:1.6;background:' + (correct?'rgba(34,197,94,0.1)':'rgba(239,68,68,0.08)') + ';border:1px solid ' + (correct?'#22c55e44':'#ef444444') + ';color:var(--text-muted)';
|
||||||
|
expDiv.innerHTML = '<b style="color:' + (correct?'#22c55e':'#ef4444') + '">' + (correct?'✓ Richtig!':'✗ Falsch.') + '</b> ' + esc(q.e)
|
||||||
|
+ (q.lesson ? ' <span onclick="openLesson(' + LESSONS.findIndex(function(l){return l.id===q.lesson;}) + ');closeQuizView()" style="color:var(--accent);cursor:pointer;text-decoration:underline;font-size:0.78rem">→ Lektion ansehen</span>' : '');
|
||||||
|
var card = content.querySelector('.card');
|
||||||
|
if (card) card.appendChild(expDiv);
|
||||||
|
|
||||||
|
var nextBtn = document.createElement('button');
|
||||||
|
nextBtn.textContent = qs.current + 1 >= qs.questions.length ? 'Ergebnis anzeigen →' : 'Nächste Frage →';
|
||||||
|
nextBtn.style.cssText = 'margin-top:0.75rem;background:var(--accent);color:#fff;border:none;padding:8px 20px;border-radius:8px;cursor:pointer;font-size:0.85rem;font-weight:600;width:100%';
|
||||||
|
nextBtn.onclick = function() {
|
||||||
|
qs.current++;
|
||||||
|
renderQuizQuestion();
|
||||||
|
};
|
||||||
|
if (card) card.appendChild(nextBtn);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderQuizResult() {
|
||||||
|
var qs = window._quizState;
|
||||||
|
var content = el('tr-quiz-content');
|
||||||
|
if (!qs || !content) return;
|
||||||
|
|
||||||
|
var total = qs.questions.length;
|
||||||
|
var score = qs.score;
|
||||||
|
var pct = Math.round(score / total * 100);
|
||||||
|
var grade = pct >= 90 ? { label: '🏆 Exzellent', color: '#22c55e' }
|
||||||
|
: pct >= 70 ? { label: '✅ Gut', color: '#3b82f6' }
|
||||||
|
: pct >= 50 ? { label: '📚 Ausreichend', color: '#f59e0b' }
|
||||||
|
: { label: '📖 Wiederholen', color: '#ef4444' };
|
||||||
|
|
||||||
|
var wrongOnes = qs.answers.filter(function(a){ return !a.correct; });
|
||||||
|
|
||||||
|
var html = '<div class="card" style="padding:1.5rem;text-align:center">'
|
||||||
|
+ '<div style="font-size:2rem;margin-bottom:0.5rem">' + grade.label + '</div>'
|
||||||
|
+ '<div style="font-size:2.5rem;font-weight:700;color:' + grade.color + ';font-family:var(--mono)">' + score + ' / ' + total + '</div>'
|
||||||
|
+ '<div style="font-size:1rem;color:var(--text-dim);margin:0.25rem 0">' + pct + '%</div>'
|
||||||
|
+ '<div style="background:var(--surface3);border-radius:8px;height:10px;overflow:hidden;margin:1rem 0">'
|
||||||
|
+ '<div style="width:' + pct + '%;height:100%;background:' + grade.color + ';border-radius:8px;transition:width 1s ease"></div>'
|
||||||
|
+ '</div>'
|
||||||
|
+ '<button onclick="startQuiz()" style="background:var(--accent);color:#fff;border:none;padding:8px 20px;border-radius:8px;cursor:pointer;font-size:0.85rem;font-weight:600;margin-right:0.5rem">Quiz wiederholen</button>'
|
||||||
|
+ '<button onclick="closeQuizView()" style="background:var(--surface2);border:1px solid var(--border);padding:8px 20px;border-radius:8px;cursor:pointer;font-size:0.85rem;color:var(--text-dim)">Zurück</button>'
|
||||||
|
+ '</div>';
|
||||||
|
|
||||||
|
if (wrongOnes.length) {
|
||||||
|
html += '<div style="margin-top:1rem"><div style="font-size:0.82rem;font-weight:600;color:var(--text-dim);margin-bottom:0.5rem">Falsch beantwortet (' + wrongOnes.length + '):</div>'
|
||||||
|
+ wrongOnes.map(function(a) {
|
||||||
|
return '<div class="card" style="padding:0.75rem 1rem;margin-bottom:0.5rem;border-left:3px solid #ef4444">'
|
||||||
|
+ '<div style="font-size:0.82rem;font-weight:600;color:var(--text-bright);margin-bottom:0.35rem">' + esc(a.q.q) + '</div>'
|
||||||
|
+ '<div style="font-size:0.78rem;color:var(--text-dim)">Deine Antwort: <span style="color:#ef4444">' + esc(a.q.o[a.chosen]) + '</span> · Richtig: <span style="color:#22c55e">' + esc(a.q.o[a.q.a]) + '</span></div>'
|
||||||
|
+ '<div style="font-size:0.76rem;color:var(--text-dim);margin-top:0.25rem;line-height:1.5">' + esc(a.q.e) + '</div>'
|
||||||
|
+ '</div>';
|
||||||
|
}).join('')
|
||||||
|
+ '</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
buildDOM(content, html);
|
||||||
|
|
||||||
|
// Save score to progress
|
||||||
|
var p = getProgress();
|
||||||
|
p['__quiz__'] = { score: score, total: total, pct: pct, date: new Date().toISOString().slice(0,10) };
|
||||||
|
saveProgress(p);
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<script src="/dashboard/hot-topics.js"></script>
|
<script src="/dashboard/hot-topics.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user