kode

<!DOCTYPE html>

<head>

<title>Simulator FTTH Pro - SMK TJKT</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

body {

font-family: 'Plus Jakarta Sans', sans-serif;

}

/* Efek Denyut Aliran Cahaya Laser */

@keyframes laser-flow {

to {

stroke-dashoffset: -40;

}

.laser-active {

stroke-dasharray: 8, 4;

animation: laser-flow 1s linear infinite;

}

/* Shimmer Effect untuk tombol aktif */

.btn-shimmer {

background-size: 200% auto;

animation: shimmer 2s linear infinite;

}

@keyframes shimmer {

0% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%; }

}

</style>

</head>

</div>

<div>

SimFTTH <span class="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full font-bold">PRO v2.0</span>

</h1>

<p class="text-xs text-slate-500 font-semibold">TJKT SMK Kelas XI — Teknologi Serat Optik</p>

</div>

Belajar Alat

</button>

Simulator Rakit

</button>

Evaluasi Kuis

</button>

</nav>

</div>

</header>

</div>

<span class="px-3 py-1 bg-white/20 backdrop-blur-md rounded-full text-xs font-bold tracking-wider uppercase">Dasar Kompetensi Keahlian</span>

<h2 class="text-2xl md:text-4xl font-extrabold tracking-tight">Sistem Distribusi Serat Optik (FTTH)</h2>

Sebelum melakukan penyambungan fisik di lapangan, pahami alur distribusi cahaya laser dari Sentral Telkom (*Central Office*) hingga dikonversi menjadi jaringan internet di rumah pelanggan.

</p>

</div>

Eksplorasi Komponen Aktif & Pasif

</h3>

<span class="text-xs text-slate-500 font-semibold">Klik kartu untuk detail fungsi teknik & gambar alat</span>

</div>

<span class="text-xs font-bold px-2.5 py-1 bg-red-50 text-red-600 rounded-lg">Level 1 - Central Office</span>

</div>

</svg>

</div>

<div>

<h4 class="font-bold text-slate-900 text-base group-hover:text-blue-600 transition-colors">Optical Line Terminal (OLT)</h4>

<p class="text-slate-500 text-xs mt-1.5 leading-relaxed line-clamp-2">Mengubah data internet elektrik dari server menjadi gelombang cahaya laser infra merah berkecepatan tinggi.</p>

</div>

<span>Buka Spesifikasi Gambar & Detail</span>

</div>

<span class="text-xs font-bold px-2.5 py-1 bg-orange-50 text-orange-600 rounded-lg">Level 2 - Ruang Transmisi</span>

</div>

</svg>

</div>

<div>

<h4 class="font-bold text-slate-900 text-base group-hover:text-blue-600 transition-colors">Optical Distribution Frame</h4>

<p class="text-slate-500 text-xs mt-1.5 leading-relaxed line-clamp-2">Rak tempat terminasi kabel optik outdoor berukuran besar. Berfungsi untuk cross-connect dan patch panel.</p>

</div>

<span>Buka Spesifikasi Gambar & Detail</span>

</div>

<span class="text-xs font-bold px-2.5 py-1 bg-yellow-50 text-yellow-700 rounded-lg">Level 3 - Feeder Node</span>

</div>

</svg>

</div>

<div>

<h4 class="font-bold text-slate-900 text-base group-hover:text-blue-600 transition-colors">Optical Distribution Cabinet</h4>

<p class="text-slate-500 text-xs mt-1.5 leading-relaxed line-clamp-2">Rumah kabel outdoor (kabinet pinggir jalan) tempat disimpannya Splitter Tahap Pertama (biasanya rasio 1:4 atau 1:8).</p>

</div>

<span>Buka Spesifikasi Gambar & Detail</span>

</div>

<span class="text-xs font-bold px-2.5 py-1 bg-green-50 text-green-600 rounded-lg">Level 4 - Tiang Distribusi</span>

</div>

</svg>

</div>

<div>

<h4 class="font-bold text-slate-900 text-base group-hover:text-blue-600 transition-colors">Optical Distribution Point</h4>

<p class="text-slate-500 text-xs mt-1.5 leading-relaxed line-clamp-2">Kotak hitam kecil yang terpasang di atas tiang listrik. Berisi splitter tahap dua untuk menghubungkan kabel drop ke pelanggan.</p>

</div>

<span>Buka Spesifikasi Gambar & Detail</span>

</div>

<span class="text-xs font-bold px-2.5 py-1 bg-teal-50 text-teal-600 rounded-lg">Level 5 - Dinding Pelanggan</span>

<span class="text-xs text-slate-400 font-bold">Roset</span>

</div>

</svg>

</div>

<div>

<h4 class="font-bold text-slate-900 text-base group-hover:text-blue-600 transition-colors">Roset Optik (OTP)</h4>

<p class="text-slate-500 text-xs mt-1.5 leading-relaxed line-clamp-2">Kotak terminasi akhir di dalam ruangan pelanggan tempat penyambungan fiber drop core dengan patch cord lentur.</p>

</div>

<span>Buka Spesifikasi Gambar & Detail</span>

</div>

<span class="text-xs font-bold px-2.5 py-1 bg-indigo-50 text-indigo-600 rounded-lg">Level 6 - Rumah Pelanggan</span>

</div>

<text x="75" y="48" fill="#cbd5e1" font-size="4" font-weight="bold">FIBER_ONT</text>

</svg>

</div>

<div>

<h4 class="font-bold text-slate-900 text-base group-hover:text-blue-600 transition-colors">Optical Network Terminal</h4>

<p class="text-slate-500 text-xs mt-1.5 leading-relaxed line-clamp-2">Modem akhir di rumah pelanggan yang mengubah cahaya kembali menjadi sinyal elektrik (Ethernet/Wifi) siap pakai.</p>

</div>

<span>Buka Spesifikasi Gambar & Detail</span>

</div>

</button>

</div>

</div>

<div>

</div>

<h5 class="text-xs font-bold text-slate-400 uppercase tracking-wider">Peran & Fungsi Teknik:</h5>

</div>

<h5 class="text-xs font-bold text-slate-400 uppercase tracking-wider">Parameter Standar Redaman:</h5>

</div>

</section>

<div>

Splicing & Connection Workspace

</h2>

<p class="text-xs text-slate-500 mt-1">Selesaikan instalasi core fiber secara runtut untuk menyalakan internet pelanggan.</p>

</div>

</button>

<i data-lucide="rotate-ccw" class="w-4 h-4"></i> Reset Progress

</button>

PROGRES: <span id="sim-score">0</span> / 5

</div>

</div>

Langkah <span id="current-step-num">1</span> dari 5:

<span id="current-step-title" class="text-blue-700 underline font-extrabold ml-1">Pemasangan Kabel Feeder</span>

</h4>

Hubungkan OLT (Sentral) ke ODC (Kabinet Distribusi) menggunakan Kabel Feeder! Klik tombol hubungkan di bawah gambar.

</p>

</div>

</svg>

</svg>

</div>

<h4 class="font-extrabold text-xs mt-3 text-slate-900">OLT (Sentral)</h4>

<p class="text-[10px] text-slate-400 font-bold mt-0.5">Laser TX: +3 dBm</p>

</div>

</svg>

</div>

<h4 class="font-extrabold text-xs mt-3 text-slate-900">ODC (Kabinet)</h4>

<p class="text-[10px] text-slate-400 font-bold mt-0.5">Splitter 1:4</p>

</div>

</svg>

</div>

<h4 class="font-extrabold text-xs mt-3 text-slate-900">ODP (Tiang)</h4>

<p class="text-[10px] text-slate-400 font-bold mt-0.5">Splitter 1:8</p>

</div>

</svg>

</div>

<h4 class="font-extrabold text-xs mt-3 text-slate-900">Roset Dinding</h4>

<p class="text-[10px] text-slate-400 font-bold mt-0.5">Terminasi OTP</p>

</div>

</svg>

</div>

<h4 class="font-extrabold text-xs mt-3 text-slate-900">ONT (Modem)</h4>

<p id="txt-rx-power" class="text-[10px] text-slate-400 font-bold mt-0.5">RX Power: -- dBm</p>

</div>

</div>

<div>

<span class="block text-[10px] text-slate-400 font-bold uppercase">Hasil Splicing Loss</span>

<span id="txt-splicing-loss" class="text-sm font-extrabold text-slate-900">-- dB (Belum di-Splice)</span>

</div>

</div>

<div>

<span class="block text-[10px] text-slate-400 font-bold uppercase">Total Redaman Link</span>

</div>

</div>

<div>

<span class="block text-[10px] text-slate-400 font-bold uppercase">Status Sinyal Laser</span>

<span id="txt-laser-status" class="text-sm font-extrabold text-emerald-700">Offline / Gelap</span>

</div>

<i data-lucide="cpu" class="w-3.5 h-3.5 animate-spin"></i> Splicing Mode Active

</span>

<h3 class="font-extrabold text-slate-950 text-base">FIBER CORE ALIGNMENT</h3>

</div>

Geser tombol slider di bawah untuk menyelaraskan core serat optik kiri dan kanan hingga sejajar sempurna! Core yang tidak selaras akan menyebabkan redaman tinggi (*loss* besar).

</p>

<span class="w-1.5 h-1.5 bg-emerald-500 rounded-full"></span> CAM X & Y (100x)

</div>

</div>

</div>

</div>

<span>SPLICING LOSS: <span id="val-splice-loss" class="font-extrabold text-white text-xs">0.45</span> dB</span>

<span>OFFSET: <span id="val-offset" class="font-extrabold text-white text-xs">3.2</span> µm</span>

</div>

<span>Mikro Alignment Motor (Penyelarasan Core):</span>

<span class="text-blue-600 font-extrabold">Geser ke Tengah</span>

</label>

</div>

Splicing & Arc Discharge

</button>

</div>

Kotak Pilihan Kabel & Daya Optik

</h3>

</div>

<div>

<span class="block text-[10px] text-slate-400 font-bold uppercase tracking-wider">KABEL A</span>

<span class="block font-bold text-slate-900 text-sm">Kabel Feeder (G.652)</span>

<span class="block text-xs text-slate-500">Core besar dari Sentral OLT</span>

</div>

</button>

</div>

<div>

<span class="block text-[10px] text-slate-400 font-bold uppercase tracking-wider">KABEL B</span>

<span class="block font-bold text-slate-900 text-sm">Kabel Distribusi</span>

<span class="block text-xs text-slate-500">Koneksi ODC ke Tiang ODP</span>

</div>

</button>

</div>

<div>

<span class="block text-[10px] text-slate-400 font-bold uppercase tracking-wider">KABEL C</span>

<span class="block text-xs text-slate-500">Kabel tahan lekukan ke rumah</span>

</div>

</button>

</div>

<div>

<span class="block text-[10px] text-slate-400 font-bold uppercase tracking-wider">KABEL D</span>

<span class="block font-bold text-slate-900 text-sm">Patch Cord SC/UPC</span>

<span class="block text-xs text-slate-500">Kabel lentur biru/kuning</span>

</div>

</button>

</div>

<div>

<span class="block font-bold text-slate-900 text-sm">Power & Light Activation</span>

<span class="block text-xs text-slate-500">Nyalakan laser untuk tes rugi-rugi</span>

</div>

</button>

<div>

<span class="block font-bold text-red-600 text-sm">Hapus Semua Sambungan</span>

<span class="block text-xs text-slate-400">Kembalikan ke status awal</span>

</div>

</button>

</div>

<span class="flex items-center gap-2"><span class="w-2.5 h-2.5 bg-green-500 rounded-full animate-ping"></span> LOG MONITOR FIBER OPTIK</span>

<span class="text-[10px] text-slate-500">SMK TJKT WORKSTATION</span>

</div>

<p class="text-slate-500">[System]: Konsol diaktifkan. Harap pasang Kabel Feeder sebagai langkah awal.</p>

</div>

</section>

<div>

Evaluasi Kompetensi Teoretis FTTH

</h2>

<p class="text-xs text-slate-500 mt-1">Selesaikan kuis untuk mengukur pemahaman teori redaman dan fungsi link.</p>

</div>

Skor Ujian: <span id="quiz-score" class="text-lg text-yellow-950 font-black">0</span>%

</div>

</div>

</div>

<div>

<h3 class="text-xl font-extrabold text-slate-950">Luar Biasa, Anda Berhasil Lulus!</h3>

<p class="text-slate-600 text-xs md:text-sm mt-1">Anda terbukti menguasai dasar perancangan link jaringan serat optik FTTH.</p>

</div>

<span class="text-xs font-bold text-indigo-600 tracking-widest uppercase block">Sertifikat Kelulusan Belajar Mandiri</span>

<h4 class="text-2xl font-black text-slate-900 uppercase">Jaringan Komputer dan Telekomunikasi</h4>

<p class="text-xs text-slate-400">Sertifikat ini secara sah diberikan kepada siswa berprestasi:</p>

</div>

</div>

Dinyatakan **LULUS** pada modul simulasi instalasi & analisis redaman jaringan FTTH (*Fiber To The Home*) dengan nilai ujian teori sebesar <span id="cert-score" class="font-bold text-indigo-600 text-base">100%</span>.

</p>

</div>

<div>

<p class="text-slate-400">Pembimbing TJKT,</p>

<p class="font-bold text-slate-800">Sistem Guru Virtual</p>

</div>

<p class="text-slate-400">Tanggal Selesai,</p>

</div>

<p class="text-[10px] text-slate-400">Silakan cetak halaman ini (Ctrl + P) untuk mendapatkan salinan sertifikat Anda.</p>

</div>

Coba Evaluasi Ulang

</button>

</div>

</section>

</main>

<p class="text-xs md:text-sm text-slate-500 font-bold">Bahan Ajar TJKT SMK Kelas XI - FTTH Simulator v2.0</p>

<p class="text-[10px] text-slate-400">Dirancang khusus untuk pembelajaran interaktif berbasis web mobile-first dengan simulasi splicer.</p>

</div>

</footer>

// Inisialisasi ikon Lucide

lucide.createIcons();

// --- SISTEM EFEK SUARA SINTETIS (Web Audio API) ---

let audioEnabled = true;

let audioCtx = null;

function initAudio() {

if (!audioCtx) {

audioCtx = new (window.AudioContext || window.webkitAudioContext)();

}

function playSound(type) {

if (!audioEnabled) return;

initAudio();

if (!audioCtx) return;

const osc = audioCtx.createOscillator();

const gain = audioCtx.createGain();

osc.connect(gain);

gain.connect(audioCtx.destination);

if (type === 'click') {

osc.type = 'sine';

osc.frequency.setValueAtTime(800, audioCtx.currentTime);

gain.gain.setValueAtTime(0.1, audioCtx.currentTime);

gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.1);

osc.start();

osc.stop(audioCtx.currentTime + 0.1);

} else if (type === 'success') {

// Chord C Mayor C5-E5-G5

osc.type = 'triangle';

osc.frequency.setValueAtTime(523.25, audioCtx.currentTime); // C5

osc.frequency.setValueAtTime(659.25, audioCtx.currentTime + 0.1); // E5

osc.frequency.setValueAtTime(783.99, audioCtx.currentTime + 0.2); // G5

gain.gain.setValueAtTime(0.15, audioCtx.currentTime);

gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.4);

osc.start();

osc.stop(audioCtx.currentTime + 0.4);

} else if (type === 'error') {

// Low Buzz

osc.type = 'sawtooth';

osc.frequency.setValueAtTime(120, audioCtx.currentTime);

gain.gain.setValueAtTime(0.15, audioCtx.currentTime);

gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.3);

osc.start();

osc.stop(audioCtx.currentTime + 0.3);

} else if (type === 'splicing') {

// Suara mesin laser / busur

osc.type = 'sawtooth';

osc.frequency.setValueAtTime(200, audioCtx.currentTime);

osc.frequency.linearRampToValueAtTime(1200, audioCtx.currentTime + 0.5);

gain.gain.setValueAtTime(0.05, audioCtx.currentTime);

gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.6);

osc.start();

osc.stop(audioCtx.currentTime + 0.6);

} else if (type === 'activation') {

// Hum laser aktif

osc.type = 'sine';

osc.frequency.setValueAtTime(440, audioCtx.currentTime);

gain.gain.setValueAtTime(0.1, audioCtx.currentTime);

gain.gain.linearRampToValueAtTime(0.02, audioCtx.currentTime + 1.0);

osc.start();

osc.stop(audioCtx.currentTime + 1.2);

}

function toggleAudio() {

audioEnabled = !audioEnabled;

const btn = document.getElementById('btn-audio');

if (audioEnabled) {

btn.innerHTML = `<i data-lucide="volume-2" class="w-5 h-5"></i>`;

btn.className = "p-2 border border-slate-200 hover:bg-slate-50 rounded-xl text-slate-600 flex items-center justify-center";

} else {

btn.innerHTML = `<i data-lucide="volume-x" class="w-5 h-5"></i>`;

btn.className = "p-2 border border-red-200 bg-red-50 rounded-xl text-red-600 flex items-center justify-center";

}

lucide.createIcons();

}

// --- STATE SIMULATOR ---

let currentStep = 1;

const maxStep = 5;

let scoreSim = 0;

let activeAlignVal = -15; // Nilai alignment awal mini-game

let finalSpliceLoss = 0.45; // Nilai loss awal sebelum displicing

// Parameter Standar Redaman FTTH Pro

const standardLoss = {

feeder: 0.5, // Loss kabel feeder (dB)

splitterOdc: 6.5, // Splitter 1:4 (dB)

splitterOdp: 10.5, // Splitter 1:8 (dB)

dropcore: 0.4, // Kabel drop core (dB)

connectors: 1.2, // 4 buah connector @0.3dB

patchcord: 0.2 // Patch cord (dB)

};

const steps = {

1: {

title: "Pemasangan Kabel Feeder",

desc: "Hubungkan OLT (Sentral) ke ODC (Kabinet Distribusi) menggunakan Kabel Feeder! Kabel feeder berfungsi mengalirkan gelombang cahaya utama dari server CO.",

correctCable: "feeder",

connectNode: "odc",

pathId: "path-olt-odc",

logMsg: "Koneksi kabel feeder selesai dari OLT ke ODC. Sinyal optik siap diteruskan."

2: {

title: "Splicing Kabel Distribusi di ODC",

desc: "Gunakan kabel distribusi untuk menyambung ODC ke ODP. Tahap ini memerlukan penyelarasan core serat optik (*core alignment*) menggunakan Fusion Splicer agar loss sambungan minimal!",

correctCable: "distribusi",

connectNode: "odp",

pathId: "path-odc-odp",

logMsg: "Splicing di ODC selesai. Kabel Distribusi sukses mentransmisikan sinyal ke tiang ODP."

3: {

title: "Menarik Kabel Drop Core Pelanggan",

desc: "Pasang kabel Drop Core dari tiang ODP ke Roset dinding rumah pelanggan. Kabel drop core memiliki bahan kawat baja pelindung ekstra kuat.",

correctCable: "dropcore",

connectNode: "roset",

pathId: "path-odp-roset",

logMsg: "Kabel drop core berhasil ditarik dan dipasang secara rapi ke Roset dinding."

4: {

title: "Menyambung Patch Cord ke ONT",

desc: "Sambungkan Roset ke perangkat ONT (Modem) menggunakan Patch Cord SC/UPC berwarna kuning lentur. Pastikan konektor terpasang dengan erat.",

correctCable: "patchcord",

connectNode: "ont",

pathId: "path-roset-ont",

logMsg: "Patch cord terkoneksi secara solid ke port PON pada ONT pelanggan."

5: {

title: "Aktivasi Laser & Pengujian Redaman",

desc: "Nyalakan daya optik dari Sentral OLT untuk menguji stabilitas daya terima (RX Power) di ONT pelanggan menggunakan Optical Power Meter!",

correctCable: "tester",

connectNode: "test",

pathId: "path-roset-ont",

logMsg: "Daya optik diaktifkan. Melakukan penghitungan redaman komparatif..."

}

};

// Switch Tab Page

function switchTab(tabId) {

playSound('click');

document.querySelectorAll('.tab-content').forEach(section => {

section.classList.add('hidden');

section.classList.remove('block');

});

const targetSection = document.getElementById(`section-${tabId}`);

targetSection.classList.remove('hidden');

targetSection.classList.add('block');

document.querySelectorAll('.tab-btn').forEach(btn => {

btn.classList.remove('bg-white', 'text-blue-600', 'shadow-sm');

btn.classList.add('text-slate-600', 'hover:text-slate-900');

});

const activeBtn = document.getElementById(`tab-${tabId}`);

activeBtn.classList.remove('text-slate-600', 'hover:text-slate-900');

activeBtn.classList.add('bg-white', 'text-blue-600', 'shadow-sm');

}

// Jalankan Log Simulator

function addLog(text, type = "normal") {

const container = document.getElementById('log-container');

const p = document.createElement('p');

if (type === "success") {

p.className = "text-emerald-400";

} else if (type === "error") {

p.className = "text-rose-400";

} else {

p.className = "text-slate-300";

}

p.innerHTML = `[${new Date().toLocaleTimeString()}]: ${text}`;

container.appendChild(p);

container.scrollTop = container.scrollHeight;

}

// --- ALIGNMENT MINI-GAME LOGIC ---

function onAlignCore(val) {

activeAlignVal = parseInt(val);

const movable = document.getElementById('movable-core');

movable.style.transform = `translateY(${activeAlignVal}px)`;

// Hitung rugi sambungan (Loss) berdasarkan deviasi sumbu core (0 adalah sempurna)

const deviation = Math.abs(activeAlignVal);

finalSpliceLoss = 0.01 + (deviation * 0.03); // Min 0.01 dB, meningkat 0.03 dB tiap deviasi

document.getElementById('val-splice-loss').innerText = finalSpliceLoss.toFixed(2);

document.getElementById('val-offset').innerText = (deviation * 0.25).toFixed(1);

}

function executeSplicing() {

playSound('splicing');

addLog(`Arc discharge dilepaskan. Serat kaca disatukan dengan rugi sambungan: ${finalSpliceLoss.toFixed(2)} dB.`, "success");

// Tutup modal splicer dan selesaikan step simulator

document.getElementById('modal-splicer').classList.add('hidden');

completeStepSuccess();

}

// Jalankan Pilihan Kabel

function pilihKabel(tipeKabel) {

if (currentStep > maxStep) {

playSound('error');

addLog("Semua langkah perakitan selesai! Silakan reset untuk mencoba lagi.", "error");

return;

}

const stepInfo = steps[currentStep];

if (tipeKabel === stepInfo.correctCable) {

// Spesifik untuk tahap 2 yang butuh splicer

if (currentStep === 2) {

playSound('click');

// Tampilkan Mini Game Splicer

document.getElementById('modal-splicer').classList.remove('hidden');

onAlignCore(-15); // reset slider

document.getElementById('slider-alignment').value = -15;

return;

}

playSound('success');

completeStepSuccess();

} else {

playSound('error');

addLog(`Salah memilih kabel! Langkah ini membutuhkan kabel tipe: ${stepInfo.correctCable.toUpperCase()}.`, "error");

}

// Lakukan Penyelesaian Langkah Sukses

function completeStepSuccess() {

const stepInfo = steps[currentStep];

scoreSim++;

document.getElementById('sim-score').innerText = scoreSim;

// Warnai Node Visualizer

const nodeElement = document.getElementById(`node-${stepInfo.connectNode}`);

nodeElement.classList.remove('opacity-40');

nodeElement.classList.add('border-blue-500', 'bg-blue-50/20');

// Aktifkan Aliran Cahaya SVG Path

const pathSvg = document.getElementById(stepInfo.pathId);

if (pathSvg) {

// Atur warna laser menyala

if (stepInfo.correctCable === 'feeder') pathSvg.setAttribute('stroke', '#ef4444');

if (stepInfo.correctCable === 'distribusi') pathSvg.setAttribute('stroke', '#f97316');

if (stepInfo.correctCable === 'dropcore') pathSvg.setAttribute('stroke', '#eab308');

if (stepInfo.correctCable === 'patchcord') pathSvg.setAttribute('stroke', '#10b981');

pathSvg.classList.add('laser-active');

}

addLog(stepInfo.logMsg, "success");

// Update parameters redaman secara bertahap

updateRedamanParameters();

currentStep++;

if (currentStep <= maxStep) {

updateSimulatorStep();

} else {

// Semua langkah sukses

playSound('activation');

// Nyalakan ONT & OPM Tester

document.getElementById('instruction-banner').className = "bg-gradient-to-r from-emerald-50 to-green-50 border border-emerald-100 text-emerald-950 rounded-2xl p-5 flex items-start gap-4 shadow-sm";

document.getElementById('instruction-banner').innerHTML = `

</div>

<div>

<h4 class="font-extrabold text-sm text-emerald-900">Perakitan Selesai! Link Jaringan FTTH Aktif</h4>

Sinyal optik OLT telah didistribusikan sempurna hingga ke modem ONT pelanggan. Selamat, pekerjaan Anda dinilai sangat profesional!

</p>

</div>

// Update Status OPM Terakhir

document.getElementById('txt-laser-status').innerText = "Online (Daya Optik Stabil)";

document.getElementById('txt-laser-status').className = "text-sm font-extrabold text-emerald-600";

lucide.createIcons();

}

// Kalkulasi Redaman Optik Real-time

function updateRedamanParameters() {

if (scoreSim >= 1) {

document.getElementById('txt-total-loss').innerText = `${standardLoss.feeder} dB`;

}

if (scoreSim >= 2) {

const total = standardLoss.feeder + standardLoss.splitterOdc + finalSpliceLoss;

document.getElementById('txt-splicing-loss').innerText = `${finalSpliceLoss.toFixed(2)} dB`;

document.getElementById('txt-total-loss').innerText = `${total.toFixed(2)} dB`;

}

if (scoreSim >= 3) {

const total = standardLoss.feeder + standardLoss.splitterOdc + finalSpliceLoss + standardLoss.splitterOdp + standardLoss.dropcore;

document.getElementById('txt-total-loss').innerText = `${total.toFixed(2)} dB`;

}

if (scoreSim >= 4) {

const total = standardLoss.feeder + standardLoss.splitterOdc + finalSpliceLoss + standardLoss.splitterOdp + standardLoss.dropcore + standardLoss.patchcord + standardLoss.connectors;

document.getElementById('txt-total-loss').innerText = `${total.toFixed(2)} dB`;

}

if (scoreSim >= 5) {

const totalLoss = standardLoss.feeder + standardLoss.splitterOdc + finalSpliceLoss + standardLoss.splitterOdp + standardLoss.dropcore + standardLoss.patchcord + standardLoss.connectors;

// OLT Power output standard is +3.0 dBm

const rxPower = 3.0 - totalLoss;

document.getElementById('txt-rx-power').innerText = `RX Power: ${rxPower.toFixed(2)} dBm`;

// Beri warna sesuai rentang ideal (-15 dBm s.d -25 dBm)

if (rxPower >= -25 && rxPower <= -15) {

document.getElementById('txt-rx-power').className = "text-[10px] text-emerald-500 font-extrabold mt-0.5";

} else {

document.getElementById('txt-rx-power').className = "text-[10px] text-red-500 font-extrabold mt-0.5";

}

// Perbarui Instruksi UI

function updateSimulatorStep() {

const stepInfo = steps[currentStep];

document.getElementById('current-step-num').innerText = currentStep;

document.getElementById('current-step-title').innerText = stepInfo.title;

document.getElementById('current-step-desc').innerText = stepInfo.desc;

}

// Reset Simulator

function resetSimulator() {

playSound('click');

currentStep = 1;

scoreSim = 0;

finalSpliceLoss = 0.45;

document.getElementById('sim-score').innerText = scoreSim;

// Reset OPM meter

document.getElementById('txt-splicing-loss').innerText = "-- dB (Belum di-Splice)";

document.getElementById('txt-total-loss').innerText = "-- dB";

document.getElementById('txt-laser-status').innerText = "Offline / Gelap";

document.getElementById('txt-laser-status').className = "text-sm font-extrabold text-slate-500";

document.getElementById('txt-rx-power').innerText = "RX Power: -- dBm";

document.getElementById('txt-rx-power').className = "text-[10px] text-slate-400 font-bold mt-0.5";

// Atur kembali kelas CSS node

document.querySelectorAll('.sim-node').forEach((node, index) => {

if (index > 0) {

node.classList.add('opacity-40');

node.classList.remove('border-blue-500', 'bg-blue-50/20');

}

});

// Matikan SVG Path laser

const paths = ['path-olt-odc', 'path-odc-odp', 'path-odp-roset', 'path-roset-ont'];

paths.forEach(p => {

const el = document.getElementById(p);

if (el) {

el.setAttribute('stroke', '#cbd5e1');

el.classList.remove('laser-active');

}

});

// Reset Banner

document.getElementById('instruction-banner').className = "bg-gradient-to-r from-amber-50 to-orange-50 border border-amber-100 text-amber-950 rounded-2xl p-5 flex items-start gap-4 shadow-sm";

document.getElementById('instruction-banner').innerHTML = `

</div>

Langkah <span id="current-step-num">1</span> dari 5:

<span id="current-step-title" class="text-blue-700 underline font-extrabold ml-1">Pemasangan Kabel Feeder</span>

</h4>

Hubungkan OLT (Sentral) ke ODC (Kabinet Distribusi) menggunakan Kabel Feeder! Kabel feeder berfungsi mengalirkan gelombang cahaya utama dari server CO.

</p>

</div>

// Reset Log

document.getElementById('log-container').innerHTML = `<p class="text-slate-500">[System]: Konsol diaktifkan. Harap pasang Kabel Feeder sebagai langkah awal.</p>`;

updateSimulatorStep();

lucide.createIcons();

addLog("Papan simulator dibersihkan.", "normal");

}

// --- SPEK ALAT & GRAFIS MODAL DATA ---

// Penulisan kode ilustrasi visual (gambar teknik) berbasis raw SVG untuk dimuat ke dalam pop-up

const detailAlat = {

olt: {

tag: "Level 1 - Central Office (CO)",

icon: "server",

color: "bg-red-500",

title: "Optical Line Terminal",

sub: "Transmitter Utama Provider",

desc: "Perangkat ini dipasang pada ruang Sentral Telepon milik operator telekomunikasi. Memiliki peran vital sebagai pembangkit laser optik tunggal berkapasitas ultra besar, mengonversi data elektrik (IP Packet) ke bentuk pulsa cahaya, serta mengontrol waktu transmisi hilir dan hulu pelanggan.",

specs: [

["Tipe Laser", "DFB-LD 1490nm / 1310nm"],

["Standard Daya Keluar", "+3.0 dBm s.d +7.0 dBm"],

["Maksimal Splitter", "1:128 Pelanggan"],

["Teknologi Utama", "GPON / EPON / XG-PON"]

// Gambar SVG besar untuk detail alat

svg: `

</svg>

odf: {

tag: "Level 2 - Ruang Transmisi (CO)",

icon: "grid",

color: "bg-orange-500",

title: "Optical Distribution Frame",

sub: "Jumper & Patch Panel Distribusi",

desc: "ODF merupakan panel tempat terminasi awal kabel fiber optik outdoor yang keluar dari OLT. ODF memudahkan operator melakukan uji coba link, jumper antar-core, serta melindungi ujung serat kaca sensitif dari kerusakan mekanis.",

specs: [

["Kapasitas Slot", "12, 24, hingga 96 Port"],

["Jenis Konektor", "SC / FC / LC UPC-APC"],

["Lokasi Pemasangan", "Indoor Rackmount CO"],

["Jenis Cable Organiser", "Cassette Tray Splicing"]

svg: `

</svg>

odc: {

tag: "Level 3 - Feeder Node",

icon: "archive",

color: "bg-yellow-500",

title: "Optical Distribution Cabinet",

sub: "Kabinet Pembagi Feeder Utama",

desc: "Kabinet outdoor berpelindung cuaca yang biasanya ditempatkan di pinggir jalan umum. Di dalam ODC, kabel optik feeder primer berkapasitas besar akan didistribusikan ke splitter optik pasif tahap pertama guna digandakan ke beberapa kabel distribusi sekunder.",

specs: [

["Rasio Splitter Pasif", "Passive Splitter 1:4 / 1:8"],

["Redaman Maks Splitter", "6.5 dB (1:4) s.d 10.5 dB (1:8)"],

["Material Kabinet", "Double-wall Anti-Karat IP65"],

["Kapasitas Distribusi", "Biasanya hingga 288 Core"]

svg: `

</svg>

odp: {

tag: "Level 4 - Tiang Distribusi",

icon: "building",

color: "bg-green-500",

title: "Optical Distribution Point",

sub: "Titik Akses Drop Core Pelanggan",

desc: "Kotak terminasi yang menempel di tiang listrik atau dinding luar perumahan. ODP menyimpan splitter pasif tahap kedua untuk mendistribusikan berkas cahaya langsung ke rumah-rumah pelanggan melalui konektor drop optik yang kuat menghadapi cuaca panas hujan.",

specs: [

["Rasio Splitter Pasif", "Passive Splitter 1:8 / 1:16"],

["Redaman Maks Splitter", "10.5 dB (1:8) s.d 13.8 dB (1:16)"],

["Jenis Port Drop", "SC Fast Connector"],

["Metode Gantung", "Aerial / Tiang / Pedestal"]

svg: `

</svg>

roset: {

tag: "Level 5 - Dinding Pelanggan",

icon: "home",

color: "bg-teal-500",

title: "Roset Optik (OTP)",

sub: "Titik Terminasi Akhir Rumah",

desc: "Kotak plastik kecil yang diletakkan di dinding dalam rumah pelanggan. Fungsinya adalah sebagai titik temu aman dan tempat penyambungan (splicing) antara kabel drop core outdoor dengan kabel patch cord indoor yang jauh lebih lentur guna meminimalisasi bending loss.",

specs: [

["Kapasitas Sambung", "1 s.d 2 Core"],

["Jenis Konektor", "SC Adapter"],

["Splicing Tray", "Built-in Protection Sleeves Slot"],

["Pemasangan", "Dinding Dalam Ruangan (Indoor)"]

svg: `

</svg>

ont: {

tag: "Level 6 - Rumah Pelanggan",

icon: "wifi",

color: "bg-indigo-500",

title: "Optical Network Terminal",

sub: "Modem Konversi Cahaya ke IP",

desc: "Perangkat elektronik aktif di sisi pelanggan yang mengubah kembali sinyal modulasI optikal (cahaya) menjadi sinyal elektrik siap pakai. ONT menyediakan interface LAN, Wi-Fi, dan Port Telepon RJ-11 untuk diakses oleh HP, Laptop, dan komputer pelanggan.",

specs: [

["Sensitivitas Daya RX", "-8.0 dBm s.d -27.0 dBm"],

["Standar Wireless", "802.11 b/g/n/ac Dual Band"],

["Port Fisik", "GE (Gigabit) / FE (Fast Ethernet)"],

["Protokol PON", "GPON ITU-T G.984 Compliant"]

svg: `

</svg>

}

};

// Modifikasi showDetailAlat untuk merender SVG secara dinamis ke dalam box modal pop-up

function showDetailAlat(id) {

playSound('click');

const data = detailAlat[id];

// Set tag dan ikon

document.getElementById('modal-alat-tag').innerHTML = `<span class="text-[10px] font-black px-2.5 py-1 ${data.color} text-white rounded-lg">${data.tag}</span>`;

document.getElementById('modal-alat-icon').className = `w-12 h-12 rounded-2xl flex items-center justify-center text-white ${data.color}`;

document.getElementById('modal-alat-icon').innerHTML = `<i data-lucide="${data.icon}" class="w-6 h-6"></i>`;

// Masukkan SVG gambar teknik yang bersesuaian

document.getElementById('modal-alat-graphic').innerHTML = data.svg;

document.getElementById('modal-alat-title').innerText = data.title;

document.getElementById('modal-alat-sub').innerText = data.sub;

document.getElementById('modal-alat-desc').innerText = data.desc;

// Masukkan parameter teknik standar

const specsBox = document.getElementById('modal-alat-specs');

specsBox.innerHTML = '';

data.specs.forEach(spec => {

const div = document.createElement('div');

div.className = "bg-slate-50 p-2 rounded-xl border border-slate-100";

div.innerHTML = `

specsBox.appendChild(div);

});

document.getElementById('modal-alat').classList.remove('hidden');

lucide.createIcons();

}

function closeModalAlat() {

playSound('click');

document.getElementById('modal-alat').classList.add('hidden');

}

// ================= KUIS SYSTEM =================

const quizData = [

{

id: 1,

question: "Alat pengukur kekuatan sinyal cahaya (daya optik) yang mengalir pada kabel serat optik di lapangan dinamakan...",

options: [

"OTDR (Optical Time Domain Reflectometer)",

"OPM (Optical Power Meter)",

"Optical Fiber Cleaver",

"Visual Fault Locator"

correct: 1,

explanation: "OPM digunakan khusus untuk mengukur rugi-rugi (redaman) sinyal cahaya optik secara kuantitatif (dalam dBm)."

{

id: 2,

question: "Berapakah nilai redaman (loss) sinyal optik yang dianggap ideal dan aman untuk mencegah status LOS (Loss of Signal) pada modem pelanggan?",

options: [

"-5 dBm s.d -10 dBm",

"-32 dBm s.d -40 dBm",

"-15 dBm s.d -24 dBm",

"+5 dBm s.d +10 dBm"

correct: 2,

explanation: "Standar daya terima (RX Power) yang direkomendasikan ITU-T di sisi pelanggan berkisar antara -15 dBm s.d -24 dBm."

{

id: 3,

question: "Mengapa teknologi splitter pasif (Passive Splitter) sangat efisien digunakan dalam perancangan jaringan kabel FTTH?",

options: [

"Karena splitter tidak memerlukan pasokan daya listrik aktif untuk membagi berkas cahaya",

"Sebab splitter dapat memperkuat sinyal optik yang mulai lemah di tengah jalan",

"Karena splitter dapat menyatukan kabel optik dengan kabel tembaga",

"Mampu membelokkan cahaya fiber hingga 180 derajat tanpa redaman"

correct: 0,

explanation: "Passive Splitter murni menggunakan elemen kaca pembias cahaya tanpa komponen elektronik aktif, menghemat pengeluaran daya listrik luar ruangan."

{

id: 4,

question: "Tipe serat optik manakah yang dirancang khusus tahan lekukan tajam (bending insensitive) sehingga sangat ideal diaplasikan di dalam rumah?",

options: [

"Kabel Feeder G.652",

"Patch Cord Single Mode G.655",

"Kabel Drop Core G.657.A",

"Kabel Multimode OM4"

correct: 2,

explanation: "Kabel G.657.A memiliki resistansi tinggi terhadap bending loss (kebocoran cahaya akibat kabel tertekuk/terlipat di sudut tembok)."

{

id: 5,

question: "Penyambungan core serat kaca secara permanen dengan menggunakan metode peleburan busur api elektrode kelistrikan tinggi dinamakan...",

options: [

"Splicing Mechanical Joint",

"Wrapping Core Cable",

"Fusion Splicing",

"Direct Connector Termination"

correct: 2,

explanation: "Fusion Splicing meleburkan serat kaca menggunakan panas tinggi (arc discharge) pada Fusion Splicer agar loss sambungan sangat kecil (< 0.03 dB)."

}

];

let answers = Array(quizData.length).fill(null);

function renderQuiz() {

const container = document.getElementById('quiz-box');

container.innerHTML = '';

quizData.forEach((q, qIdx) => {

const card = document.createElement('div');

card.className = "bg-slate-50 border border-slate-200/80 rounded-2xl p-5 space-y-4 shadow-sm";

const qTitle = document.createElement('h3');

qTitle.className = "font-extrabold text-slate-900 text-sm md:text-base leading-relaxed";

qTitle.innerHTML = `<span class="inline-block px-2.5 py-1 bg-blue-100 text-blue-700 rounded-lg text-xs mr-2 font-bold">SOAL ${qIdx + 1}</span> ${q.question}`;

card.appendChild(qTitle);

const optionsList = document.createElement('div');

optionsList.className = "grid grid-cols-1 gap-2.5";

q.options.forEach((opt, optIdx) => {

const btn = document.createElement('button');

btn.type = "button";

btn.className = `option-btn w-full p-4 text-left text-xs md:text-sm rounded-xl border transition-all duration-300 flex items-center gap-3 font-semibold`;

if (answers[qIdx] === null) {

btn.className += " border-slate-200 hover:border-slate-300 bg-white text-slate-700 hover:bg-slate-50";

} else {

if (optIdx === q.correct) {

btn.className += " border-emerald-500 bg-emerald-50 text-emerald-800 font-extrabold";

} else if (answers[qIdx] === optIdx) {

btn.className += " border-rose-300 bg-rose-50 text-rose-700";

} else {

btn.className += " border-slate-100 bg-slate-50/50 text-slate-400 cursor-not-allowed";

}

btn.onclick = () => {

if (answers[qIdx] !== null) return;

selectOption(qIdx, optIdx);

};

const labelLetter = String.fromCharCode(65 + optIdx);

btn.innerHTML = `<span class="w-6 h-6 rounded-full flex items-center justify-center font-bold shrink-0 text-xs ${answers[qIdx] !== null && optIdx === q.correct ? 'bg-emerald-500 text-white' : 'bg-slate-100 text-slate-600'}">${labelLetter}</span> ${opt}`;

optionsList.appendChild(btn);

});

card.appendChild(optionsList);

if (answers[qIdx] !== null) {

const explainBox = document.createElement('div');

const isCorrect = answers[qIdx] === q.correct;

explainBox.className = `p-4 rounded-xl text-xs md:text-sm ${isCorrect ? 'bg-emerald-100/40 text-emerald-900 border border-emerald-200' : 'bg-amber-100/40 text-amber-900 border border-amber-200'}`;

explainBox.innerHTML = `

${isCorrect ? 'Jawaban Anda Benar!' : 'Jawaban Kurang Tepat!'}

</div>

<p class="mt-1 leading-relaxed">${q.explanation}</p>

card.appendChild(explainBox);

}

container.appendChild(card);

});

updateQuizMetrics();

lucide.createIcons();

}

function selectOption(qIdx, optIdx) {

answers[qIdx] = optIdx;

if (optIdx === quizData[qIdx].correct) {

playSound('success');

} else {

playSound('error');

}

renderQuiz();

}

function updateQuizMetrics() {

const answeredCount = answers.filter(a => a !== null).length;

const percentage = (answeredCount / quizData.length) * 100;

document.getElementById('quiz-progress').style.width = `${percentage}%`;

let correctCount = 0;

answers.forEach((ans, idx) => {

if (ans === quizData[idx].correct) correctCount++;

});

const currentScore = Math.round((correctCount / quizData.length) * 100);

document.getElementById('quiz-score').innerText = currentScore;

if (answeredCount === quizData.length) {

document.getElementById('quiz-result').classList.remove('hidden');

// Update Sertifikat

document.getElementById('cert-score').innerText = `${currentScore}%`;

document.getElementById('cert-date').innerText = new Date().toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' });

} else {

document.getElementById('quiz-result').classList.add('hidden');

}

function restartQuiz() {

playSound('click');

answers = Array(quizData.length).fill(null);

document.getElementById('quiz-result').classList.add('hidden');

renderQuiz();

}

window.onload = function() {

renderQuiz();

}

</script>

</body>

</html>

Cari Blog Ini

ARTIKELAHMADSUBHANBAGUS

kode

Komentar

Posting Komentar

Postingan populer dari blog ini

Materi: Berpikir Komputasional (Computational Thinking)

LKPD

MATERI K3LH DALAM BIDANG TJKT