Panduan dan Kalkulasi Penilaian Siswa

Sebagai guru, menyusun sistem penilaian yang komprehensif sangat penting untuk mengukur pemahaman siswa secara menyeluruh (kognitif, afektif, dan psikomotorik). Berikut adalah rancangan bobot dan formula perhitungan nilai akhir siswa yang menggabungkan nilai harian, nilai bulanan, catatan/sikap, dan projek.

1. Menentukan Bobot Penilaian (Contoh Persentase)

Anda dapat menyesuaikan bobot ini sesuai dengan kebijakan sekolah atau Kurikulum yang Anda gunakan (misalnya Kurikulum Merdeka).

Komponen Penilaian	Bobot (%)	Keterangan
Nilai Harian	30%	Ulangan harian, kuis, tugas rumah, keaktifan kelas.
Nilai Bulanan	25%	Ujian tengah semester / asesmen sumatif bulanan.
Catatan (Sikap/Keaktifan)	10%	Jurnal guru, kedisiplinan, catatan perilaku, kehadiran.
Projek	35%	Tugas berbasis projek, portofolio, produk akhir.
Total	100%

2. Formula Penghitungan Nilai Akhir (NA)

\text{Nilai Akhir (NA)} = (NH \times 0.30) + (NB \times 0.25) + (NC \times 0.10) + (NP \times 0.35)

Di mana:

$NH$ = Rata-rata Nilai Harian
$NB$ = Nilai Bulanan (Sumatif)
$NC$ = Nilai Catatan / Sikap (dikonversi ke skala 0-100)
$NP$ = Nilai Projek

3. Contoh Simulasi Perhitungan untuk Satu Siswa (Nama: Budi)

Nilai Harian (NH): Rata-rata dari 4 tugas/kuis = $85$
Nilai Bulanan (NB): Ujian bulan lalu = $80$
Catatan/Sikap (NC): Berdasarkan catatan guru, sikap Budi sangat baik, disiplin, dan aktif (diberi skor konversi $90$ )
Projek (NP): Projek sains/materi semester ini mendapat nilai $88$

Proses Perhitungan:

$\text{Komponen Harian} = 85 \times 0.30 = 25.5$
$\text{Komponen Bulanan} = 80 \times 0.25 = 20.0$
$\text{Komponen Catatan} = 90 \times 0.10 = 9.0$
$\text{Komponen Projek} = 88 \times 0.35 = 30.8$

\text{Nilai Akhir} = 25.5 + 20.0 + 9.0 + 30.8 = \mathbf{85.3}

Maka, Nilai Akhir Budi pada rapor adalah 85.3.

4. Tips Mengelola Catatan & Penilaian Harian

Rubrik Projek: Pastikan komponen projek dinilai menggunakan rubrik yang jelas (misalnya: kreativitas, kerja sama tim, ketepatan waktu, dan hasil akhir).
Konversi Catatan: Catatan harian yang bersifat kualitatif (misalnya: "Sangat Aktif", "Cukup", "Kurang") dapat Anda ubah menjadi angka kuantitatif untuk memudahkan rumus Excel (contoh: Sangat Baik = 90, Baik = 80, Cukup = 70).

code

<!DOCTYPE html>

<head>

<title>Portal Nilai Informatika</title>

<style>

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

.fade-in { animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes fadeIn {

from { opacity: 0; transform: translateY(8px); }

to { opacity: 1; transform: translateY(0); }

}

.tech-gradient {

background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);

}

.card-glass {

background: rgba(255, 255, 255, 0.95);

backdrop-filter: blur(12px);

}

</style>

</head>

</div>

<div>

<h1 class="text-xl font-extrabold tracking-tight bg-gradient-to-r from-cyan-400 via-sky-300 to-indigo-300 bg-clip-text text-transparent">Portal Nilai Informatika</h1>

</div>

<p class="text-xs text-slate-400 font-medium">Sistem Evaluasi & Manajemen Nilai Kompetensi Keahlian</p>

</div>

<i class="fa-solid fa-terminal text-cyan-400"></i> Portal Guru

</button>

<i class="fa-solid fa-laptop-code text-sky-400"></i> Portal Siswa

</button>

</button>

</div>

<i class="fa-solid fa-shield-halved text-cyan-400"></i> Pilih Portal

</span>

</div>

</header>

</div>

<h3 id="modalTitle" class="text-xl font-bold text-white mb-2">Informasi Sistem</h3>

<p id="modalMessage" class="text-sm text-slate-400 mb-8 leading-relaxed">Pesan sistem...</p>

<button id="modalCancelBtn" onclick="closeModal(false)" class="hidden px-5 py-2.5 text-sm font-semibold text-slate-300 bg-slate-800 hover:bg-slate-700 rounded-xl transition-all border border-slate-700">Batal</button>

<button onclick="closeModal(true)" class="px-6 py-2.5 text-sm font-semibold text-slate-950 bg-gradient-to-r from-cyan-400 to-sky-400 hover:from-cyan-300 hover:to-sky-300 rounded-xl transition-all shadow-lg shadow-cyan-500/25">Mengerti</button>

</div>

<span class="px-3.5 py-1.5 bg-cyan-500/10 text-cyan-400 font-bold text-xs uppercase tracking-widest rounded-full border border-cyan-500/20">Akses Terautentikasi</span>

<h2 class="text-3xl sm:text-4xl font-extrabold text-white mt-4 mb-3 tracking-tight">Pilih Portal Masuk</h2>

<p class="text-slate-400 mb-10 max-w-md mx-auto text-sm leading-relaxed">Silakan pilih akses sesuai peran Anda di departemen Informatika untuk mengelola atau memantau progres nilai.</p>

<div>

</div>

<h3 class="text-lg font-bold text-white mb-1.5 group-hover:text-cyan-400 transition-colors">Portal Guru / Pengajar</h3>

<p class="text-xs text-slate-400 leading-relaxed">Kelola bobot penilaian kode, nilai harian, sumatif modul, portofolio, catatan lab, serta impor Excel REKAP_NILAI. (Memerlukan Sandi)</p>

</div>

Masuk Dashboard Guru <i class="fa-solid fa-arrow-right ml-2"></i>

</div>

</button>

<div>

</div>

<h3 class="text-lg font-bold text-white mb-1.5 group-hover:text-sky-400 transition-colors">Portal Siswa / Praktikan</h3>

<p class="text-xs text-slate-400 leading-relaxed">Pantau transkrip nilai akhir praktikum, rincian komponen tugas, dan catatan pembimbing. (Tanpa Kata Sandi)</p>

</div>

Masuk Dashboard Siswa <i class="fa-solid fa-arrow-right ml-2"></i>

</div>

</button>

</div>

<div>

<i class="fa-solid fa-arrow-left"></i> Kembali ke Pilih Portal

</button>

<h2 class="text-2xl font-extrabold text-white">Dashboard Manajemen Nilai Informatika</h2>

<p class="text-sm text-slate-400">Atur bobot rumus nilai, jenjang, kelas, jurusan IT, kontak siswa, & rekapitulasi nilai praktikum.</p>

</div>

<i class="fa-solid fa-file-excel"></i> Impor Rekap Excel

</label>

<i class="fa-solid fa-cloud-arrow-up"></i> Simpan Data ke Server

</button>

</div>

<i class="fa-solid fa-sliders text-cyan-400"></i> Konfigurasi Bobot Nilai (%)

</h3>

<p class="text-xs text-slate-400">Total akumulasi bobot komponen evaluasi harus bernilai tepat 100%.</p>

<div>

<label class="block text-xs font-semibold text-slate-300 mb-1">Nilai Harian / Tugas (NH)</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-300 mb-1">Nilai Bulanan / Sumatif (NB)</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-300 mb-1">Catatan / Sikap Lab (NC)</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-300 mb-1">Projek / Coding Portofolio (NP)</label>

</div>

<span class="text-slate-300">Total Akumulasi:</span>

</div>

<div>

<i class="fa-solid fa-database text-cyan-400"></i> Rekapitulasi Data Siswa & Nilai Praktikum

</h3>

<p class="text-xs text-slate-400">Kelola dan update data nilai siswa secara real-time.</p>

</div>

<i class="fa-solid fa-user-plus"></i> Tambah Siswa Baru

</button>

</div>

<thead>

<th class="py-3 px-3">Siswa & Kontak</th>

<th class="py-3 px-3">Jenjang, Kelas & Jurusan</th>

</tr>

</thead>

</tbody>

</table>

</div>

<div>

<i class="fa-solid fa-arrow-left"></i> Kembali ke Pilih Portal

</button>

<h2 class="text-2xl font-extrabold text-white">Transkrip Portal Nilai Siswa</h2>

<p class="text-sm text-slate-400">Pilih nama Anda untuk melihat rekap nilai akhir, rincian komponen, dan evaluasi lab.</p>

</div>

<label class="block text-xs font-semibold text-slate-300 mb-1">Pilih Identitas Siswa:</label>

</select>

</div>

<div>

<span class="px-3 py-1 bg-white/20 text-white font-bold text-xs rounded-full uppercase tracking-wider backdrop-blur-md">Hasil Akhir Rapor IT</span>

<h3 id="srStudentName" class="text-2xl font-extrabold mt-4 mb-1">Nama Siswa</h3>

<p id="srStudentLevelClassMajor" class="text-xs text-sky-100 mb-2 font-medium">Jenjang, Kelas, Jurusan & Telepon</p>

</div>

<span class="text-xs uppercase tracking-widest text-sky-200 font-semibold block mb-1">Nilai Akhir (NA)</span>

</div>

<span>Predikat: <strong id="srGradePredicate" class="text-white font-extrabold text-sm ml-1">A</strong></span>

<span id="srStatusPass" class="px-2.5 py-1 bg-emerald-500/80 rounded-lg text-[10px] font-bold text-white shadow">Tuntas</span>

</div>

<i class="fa-solid fa-chart-pie text-sky-400"></i> Rincian Formula & Komponen Nilai

</h3>

<p class="text-xs text-slate-400">Komposisi perhitungan nilai akhir berdasarkan standar laboratorium informatika.</p>

<div>

<span class="text-xs font-semibold text-slate-400 block mb-0.5">Nilai Harian (NH)</span>

<span class="text-[10px] text-slate-500 block">Bobot 30%</span>

</div>

<span class="text-xs text-slate-500 block">Kontribusi</span>

</div>

<div>

<span class="text-xs font-semibold text-slate-400 block mb-0.5">Nilai Bulanan (NB)</span>

<span class="text-[10px] text-slate-500 block">Bobot 25%</span>

</div>

<span class="text-xs text-slate-500 block">Kontribusi</span>

</div>

<div>

<span class="text-xs font-semibold text-slate-400 block mb-0.5">Catatan / Sikap Lab (NC)</span>

<span class="text-[10px] text-slate-500 block">Bobot 10%</span>

</div>

<span class="text-xs text-slate-500 block">Kontribusi</span>

</div>

<div>

<span class="text-xs font-semibold text-slate-400 block mb-0.5">Projek & Portofolio (NP)</span>

<span class="text-[10px] text-slate-500 block">Bobot 35%</span>

</div>

<span class="text-xs text-slate-500 block">Kontribusi</span>

</div>

<i class="fa-solid fa-terminal text-cyan-400"></i> Catatan Pembimbing & Evaluasi Kode

</h4>

<p id="srTeacherNote" class="text-sm text-slate-300 italic">"Menunjukkan pemahaman algoritma dan logika pemrograman yang sangat baik."</p>

</div>

</main>

<i class="fa-solid fa-user-pen text-cyan-400"></i> Tambah Siswa Baru

</h3>

<div>

<label class="block text-xs font-semibold text-slate-300 mb-1">Nama Lengkap Siswa</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-300 mb-1">Jenjang Pendidikan</label>

</select>

</div>

<div>

<label class="block text-xs font-semibold text-slate-300 mb-1">Kelas</label>

</select>

</div>

<div>

<label class="block text-xs font-semibold text-slate-300 mb-1">Jurusan / Konsentrasi Keahlian</label>

</select>

</div>

<div>

<label class="block text-xs font-semibold text-slate-300 mb-1">Nomor Telepon / WhatsApp</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-300 mb-1">Nilai Harian (0-100)</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-300 mb-1">Nilai Bulanan (0-100)</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-300 mb-1">Catatan/Sikap (0-100)</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-300 mb-1">Nilai Projek (0-100)</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-300 mb-1">Catatan Khusus Pembimbing Lab</label>

</div>

<button onclick="closeStudentModal()" class="px-5 py-2.5 text-sm font-semibold text-slate-300 bg-slate-800 hover:bg-slate-700 rounded-xl transition-all border border-slate-700">Batal</button>

<button onclick="saveStudentData()" class="px-6 py-2.5 text-sm font-semibold text-slate-950 bg-gradient-to-r from-cyan-400 to-sky-400 hover:from-cyan-300 hover:to-sky-300 rounded-xl transition-all shadow-lg shadow-cyan-500/20">Simpan Siswa</button>

</div>

</div>

<h3 class="text-xl font-bold text-white mb-2">Autentikasi Guru</h3>

<p class="text-xs text-slate-400 mb-6 leading-relaxed">Silakan masukkan kode sandi pengajar (<code class="text-cyan-400 font-bold">suryogarage</code>) untuk masuk ke Portal Guru.</p>

<div>

<label class="block text-xs font-semibold text-slate-300 mb-1">Kata Sandi Pengajar</label>

</div>

<div id="passwordErrorMsg" class="text-xs text-rose-400 hidden font-semibold">Kata sandi salah. Silakan coba lagi.</div>

</div>

<button onclick="closeTeacherPasswordModal()" class="px-4 py-2.5 text-xs font-semibold text-slate-300 bg-slate-800 hover:bg-slate-700 rounded-xl transition-all border border-slate-700">Batal</button>

<button onclick="verifyTeacherPassword()" class="px-5 py-2.5 text-xs font-semibold text-slate-950 bg-gradient-to-r from-cyan-400 to-sky-400 hover:from-cyan-300 hover:to-sky-300 rounded-xl transition-all shadow-lg shadow-cyan-500/20">Masuk</button>

</div>

</footer>

import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";

import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";

import { getFirestore, doc, setDoc, getDoc, collection, getDocs, onSnapshot } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";

// Environment variables setup

const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-grade-app';

const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : null;

let db = null;

let auth = null;

let userId = 'offline-user';

let isCloudActive = false;

// Default In-Memory / State Data populated from image list

window.appState = {

weights: { nh: 30, nb: 25, nc: 10, np: 35 },

students: [

{ id: 'img_1', name: 'ARIE SISW', level: 'SMK', gradeClass: 'Kelas 10', major: 'AK', phone: '081200000001', nh: 65.5, nb: 70, nc: 80, np: 75, note: 'Perlu bimbingan ekstra pada tugas praktik dasar.' },

{ id: 'img_2', name: 'AUDY TYA', level: 'SMK', gradeClass: 'Kelas 10', major: 'AK', phone: '081200000002', nh: 78, nb: 80, nc: 85, np: 80, note: 'Keaktifan dan pemahaman materi cukup baik.' },

{ id: 'img_3', name: 'Aura Nabi', level: 'SMK', gradeClass: 'Kelas 10', major: 'AK', phone: '081200000003', nh: 61, nb: 65, nc: 75, np: 70, note: 'Tingkatkan latihan mandiri di rumah.' },

{ id: 'img_4', name: 'AZHRIEL F', level: 'SMK', gradeClass: 'Kelas 10', major: 'AK', phone: '081200000004', nh: 74.5, nb: 75, nc: 80, np: 78, note: 'Progres stabil dalam pengerjaan tugas.' },

{ id: 'img_5', name: 'CHAIRIL G', level: 'SMK', gradeClass: 'Kelas 10', major: 'AK', phone: '081200000005', nh: 77.5, nb: 78, nc: 82, np: 80, note: 'Pemahaman logika dasar sudah baik.' },

{ id: 'img_6', name: 'JAHIRA PU', level: 'SMK', gradeClass: 'Kelas 10', major: 'AK', phone: '081200000006', nh: 0, nb: 50, nc: 60, np: 50, note: 'Perlu konfirmasi kehadiran dan pengumpulan tugas susulan.' },

{ id: 'img_7', name: 'MOHAMM', level: 'SMK', gradeClass: 'Kelas 10', major: 'AK', phone: '081200000007', nh: 83.5, nb: 85, nc: 88, np: 85, note: 'Sangat teliti dalam menyelesaikan asesmen.' },

{ id: 'img_8', name: 'MUHAMA', level: 'SMK', gradeClass: 'Kelas 10', major: 'AK', phone: '081200000008', nh: 80, nb: 80, nc: 85, np: 82, note: 'Konsisten menyelesaikan latihan harian.' },

{ id: 'img_9', name: 'MUHAMM', level: 'SMK', gradeClass: 'Kelas 10', major: 'AK', phone: '081200000009', nh: 56, nb: 60, nc: 70, np: 65, note: 'Perlu perhatian khusus pada materi praktikum.' },

{ id: 'img_10', name: 'MUHAMM', level: 'SMK', gradeClass: 'Kelas 10', major: 'AK', phone: '081200000010', nh: 81.5, nb: 82, nc: 85, np: 84, note: 'Menunjukkan keaktifan dalam diskusi kelompok.' },

{ id: 'img_11', name: 'MUHAMM', level: 'SMK', gradeClass: 'Kelas 10', major: 'AK', phone: '081200000011', nh: 54, nb: 60, nc: 65, np: 60, note: 'Perlu peningkatan kedisiplinan dan pengumpulan tugas.' },

{ id: 'img_12', name: 'Revi Rizky', level: 'SMK', gradeClass: 'Kelas 10', major: 'AK', phone: '081200000012', nh: 83.5, nb: 85, nc: 90, np: 86, note: 'Sikap dan hasil kerja lab memuaskan.' },

{ id: 'img_13', name: 'SAIF AMAI', level: 'SMK', gradeClass: 'Kelas 10', major: 'AK', phone: '081200000013', nh: 63.25, nb: 68, nc: 75, np: 70, note: 'Perlu bimbingan lanjutan pada latihan soal.' },

{ id: 'img_14', name: 'SASKIA FA', level: 'SMK', gradeClass: 'Kelas 10', major: 'AK', phone: '081200000014', nh: 82, nb: 83, nc: 88, np: 85, note: 'Ketelitian tugas praktik sangat baik.' },

{ id: 'img_15', name: 'ZAHRA RIN', level: 'SMK', gradeClass: 'Kelas 10', major: 'AK', phone: '081200000015', nh: 75.5, nb: 78, nc: 82, np: 80, note: 'Performa stabil sepanjang semester.' },

{ id: 'img_16', name: 'AQIL FATT', level: 'SMK', gradeClass: 'Kelas 10', major: 'AV', phone: '081200000016', nh: 79.5, nb: 80, nc: 85, np: 82, note: 'Pemahaman materi audio video baik.' },

{ id: 'img_17', name: 'DIMAS JOI', level: 'SMK', gradeClass: 'Kelas 10', major: 'AV', phone: '081200000017', nh: 83.5, nb: 85, nc: 88, np: 86, note: 'Keterampilan praktik lab sangat baik.' },

{ id: 'img_18', name: 'EGA ERNE', level: 'SMK', gradeClass: 'Kelas 10', major: 'AV', phone: '081200000018', nh: 83, nb: 84, nc: 86, np: 85, note: 'Konsisten menyelesaikan tugas tepat waktu.' },

{ id: 'img_19', name: 'FAKHRY TR', level: 'SMK', gradeClass: 'Kelas 10', major: 'AV', phone: '081200000019', nh: 85, nb: 86, nc: 90, np: 88, note: 'Sangat antusias dalam praktikum hardware/software.' },

{ id: 'img_20', name: 'HAMZAH A', level: 'SMK', gradeClass: 'Kelas 10', major: 'AV', phone: '081200000020', nh: 73.5, nb: 75, nc: 80, np: 78, note: 'Cukup baik, pertahankan motivasi belajar.' },

{ id: 'img_21', name: 'MUHAMA', level: 'SMK', gradeClass: 'Kelas 10', major: 'AV', phone: '081200000021', nh: 81.5, nb: 82, nc: 85, np: 84, note: 'Aktif bertanya saat materi praktik.' },

{ id: 'img_22', name: 'MUHAMAMA', level: 'SMK', gradeClass: 'Kelas 10', major: 'AV', phone: '081200000022', nh: 53.5, nb: 60, nc: 65, np: 60, note: 'Perlu pendampingan khusus remedial.' },

{ id: 'img_23', name: 'MUHAMA', level: 'SMK', gradeClass: 'Kelas 10', major: 'AV', phone: '081200000023', nh: 75.5, nb: 78, nc: 82, np: 80, note: 'Peningkatan nilai terlihat konsisten.' },

{ id: 'img_24', name: 'RADITYA A', level: 'SMK', gradeClass: 'Kelas 10', major: 'AV', phone: '081200000024', nh: 85, nb: 85, nc: 90, np: 88, note: 'Hasil kerja portofolio sangat rapi.' },

{ id: 'img_25', name: 'RAFFI ABIY', level: 'SMK', gradeClass: 'Kelas 10', major: 'AV', phone: '081200000025', nh: 62.5, nb: 65, nc: 75, np: 70, note: 'Perlu peningkatan fokus dalam sesi teori.' },

{ id: 'img_26', name: 'RIFQI SYAI', level: 'SMK', gradeClass: 'Kelas 10', major: 'AV', phone: '081200000026', nh: 76.5, nb: 78, nc: 82, np: 80, note: 'Disiplin dan kehadiran lab sangat baik.' },

{ id: 'img_27', name: 'RINALDI', level: 'SMK', gradeClass: 'Kelas 10', major: 'AV', phone: '081200000027', nh: 77, nb: 78, nc: 82, np: 80, note: 'Kerjasama tim dalam kelompok baik.' },

{ id: 'img_28', name: 'RIZKY MAU', level: 'SMK', gradeClass: 'Kelas 10', major: 'AV', phone: '081200000028', nh: 82, nb: 83, nc: 87, np: 85, note: 'Pemahaman teknis memuaskan.' },

{ id: 'img_29', name: 'VICKO AL-', level: 'SMK', gradeClass: 'Kelas 10', major: 'AV', phone: '081200000029', nh: 73, nb: 75, nc: 80, np: 78, note: 'Tingkatkan ketelitian saat uji kompetensi.' },

{ id: 'img_30', name: 'ZHIDANE H', level: 'SMK', gradeClass: 'Kelas 10', major: 'AV', phone: '081200000030', nh: 82, nb: 84, nc: 88, np: 85, note: 'Menunjukkan kemampuan analisis yang baik.' },

{ id: 'img_31', name: 'ADITYA PU', level: 'SMK', gradeClass: 'Kelas 10', major: 'MP', phone: '081200000031', nh: 68.5, nb: 70, nc: 78, np: 74, note: 'Cukup aktif dalam manajemen perkantoran digital.' },

{ id: 'img_32', name: 'AHMAD R', level: 'SMK', gradeClass: 'Kelas 10', major: 'MP', phone: '081200000032', nh: 68, nb: 70, nc: 78, np: 74, note: 'Perlu latihan lebih sering pada aplikasi perkantoran.' },

{ id: 'img_33', name: 'ANDIRA M', level: 'SMK', gradeClass: 'Kelas 10', major: 'MP', phone: '081200000033', nh: 83, nb: 85, nc: 90, np: 87, note: 'Kerapian administrasi dan tugas sangat baik.' },

{ id: 'img_34', name: 'ARRAHMA', level: 'SMK', gradeClass: 'Kelas 10', major: 'MP', phone: '081200000034', nh: 92.5, nb: 94, nc: 96, np: 94, note: 'Prestasi sangat menonjol di kelas.' },

{ id: 'img_35', name: 'CLARISA P', level: 'SMK', gradeClass: 'Kelas 10', major: 'MP', phone: '081200000035', nh: 82.5, nb: 85, nc: 88, np: 86, note: 'Ketepatan pengumpulan tugas sangat baik.' },

{ id: 'img_36', name: 'FADILLAH', level: 'SMK', gradeClass: 'Kelas 10', major: 'MP', phone: '081200000036', nh: 85, nb: 86, nc: 90, np: 88, note: 'Sangat responsif terhadap materi instruktur.' },

{ id: 'img_37', name: 'HILMI ARI', level: 'SMK', gradeClass: 'Kelas 10', major: 'MP', phone: '081200000037', nh: 79, nb: 80, nc: 85, np: 82, note: 'Keaktifan kelas memuaskan.' },

{ id: 'img_38', name: 'KESYA SEL', level: 'SMK', gradeClass: 'Kelas 10', major: 'MP', phone: '081200000038', nh: 81, nb: 82, nc: 86, np: 84, note: 'Konsisten menjaga kualitas tugas.' },

{ id: 'img_39', name: 'MUHAMA', level: 'SMK', gradeClass: 'Kelas 10', major: 'MP', phone: '081200000039', nh: 83, nb: 84, nc: 88, np: 86, note: 'Kerjasama kelompok sangat baik.' },

{ id: 'img_40', name: 'MUHAMAF', level: 'SMK', gradeClass: 'Kelas 10', major: 'MP', phone: '081200000040', nh: 64, nb: 68, nc: 75, np: 70, note: 'Perlu peningkatan fokus pengerjaan tugas.' },

{ id: 'img_41', name: 'Muhammad', level: 'SMK', gradeClass: 'Kelas 10', major: 'MP', phone: '081200000041', nh: 84, nb: 85, nc: 90, np: 87, note: 'Hasil kerja praktik sangat rapi.' },

{ id: 'img_42', name: 'MURNI CA', level: 'SMK', gradeClass: 'Kelas 10', major: 'MP', phone: '081200000042', nh: 83, nb: 84, nc: 88, np: 86, note: 'Ketelitian administrasi perkantoran baik.' },

{ id: 'img_43', name: 'NAZARYAN', level: 'SMK', gradeClass: 'Kelas 10', major: 'MP', phone: '081200000043', nh: 85, nb: 86, nc: 90, np: 88, note: 'Sangat aktif berdiskusi.' },

{ id: 'img_44', name: 'NURKHOLI', level: 'SMK', gradeClass: 'Kelas 10', major: 'MP', phone: '081200000044', nh: 85, nb: 86, nc: 90, np: 88, note: 'Disiplin dan dedikasi belajar tinggi.' },

{ id: 'img_45', name: 'QATRUNN', level: 'SMK', gradeClass: 'Kelas 10', major: 'MP', phone: '081200000045', nh: 80.5, nb: 82, nc: 85, np: 83, note: 'Pemahaman modul perkantoran memuaskan.' },

{ id: 'img_46', name: 'Ahmad Ok', level: 'SMK', gradeClass: 'Kelas 10', major: 'TKR', phone: '081200000046', nh: 83, nb: 84, nc: 88, np: 86, note: 'Praktik bengkel dan kelistrikan baik.' },

{ id: 'img_47', name: 'Angga Juli', level: 'SMK', gradeClass: 'Kelas 10', major: 'TKR', phone: '081200000047', nh: 85, nb: 86, nc: 90, np: 88, note: 'Sangat terampil dalam praktik otomotif dasar.' },

{ id: 'img_48', name: 'Bintang W', level: 'SMK', gradeClass: 'Kelas 10', major: 'TKR', phone: '081200000048', nh: 85, nb: 86, nc: 90, np: 88, note: 'Disiplin bengkel sangat tinggi.' },

{ id: 'img_49', name: 'DASWA N', level: 'SMK', gradeClass: 'Kelas 10', major: 'TKR', phone: '081200000049', nh: 83, nb: 84, nc: 88, np: 86, note: 'Kerjasama tim mekanik sangat baik.' },

{ id: 'img_50', name: 'DUSTIN GI', level: 'SMK', gradeClass: 'Kelas 10', major: 'TKR', phone: '081200000050', nh: 85, nb: 86, nc: 90, np: 88, note: 'Pemahaman komponen mesin sangat teliti.' },

{ id: 'img_51', name: 'FAUJAN SA', level: 'SMK', gradeClass: 'Kelas 10', major: 'TKR', phone: '081200000051', nh: 77, nb: 79, nc: 83, np: 80, note: 'Cukup aktif dalam latihan praktikum.' },

{ id: 'img_52', name: 'HILMI PUT', level: 'SMK', gradeClass: 'Kelas 10', major: 'TKR', phone: '081200000052', nh: 79, nb: 80, nc: 85, np: 82, note: 'Konsisten mengikuti instruksi keselamatan kerja.' },

{ id: 'img_53', name: 'HISAM A', level: 'SMK', gradeClass: 'Kelas 10', major: 'TKR', phone: '081200000053', nh: 78, nb: 80, nc: 84, np: 81, note: 'Ketepatan waktu kumpul laporan baik.' },

{ id: 'img_54', name: 'MOHAMN', level: 'SMK', gradeClass: 'Kelas 10', major: 'TKR', phone: '081200000054', nh: 85, nb: 86, nc: 90, np: 88, note: 'Keterampilan motorik dan analisis mesin bagus.' },

{ id: 'img_55', name: 'Muhamad', level: 'SMK', gradeClass: 'Kelas 10', major: 'TKR', phone: '081200000055', nh: 80, nb: 81, nc: 85, np: 83, note: 'Keaktifan dan antusiasme tinggi.' },

{ id: 'img_56', name: 'MUHAMM', level: 'SMK', gradeClass: 'Kelas 10', major: 'TKR', phone: '081200000056', nh: 79, nb: 80, nc: 85, np: 82, note: 'Pemahaman materi dasar mesin baik.' },

{ id: 'img_57', name: 'NAUVAL D', level: 'SMK', gradeClass: 'Kelas 10', major: 'TKR', phone: '081200000057', nh: 85, nb: 86, nc: 90, np: 88, note: 'Sangat cekatan dalam pembongkaran komponen.' },

{ id: 'img_58', name: 'RIZKI RAM', level: 'SMK', gradeClass: 'Kelas 10', major: 'TKR', phone: '081200000058', nh: 85, nb: 86, nc: 90, np: 88, note: 'Hasil kerja praktik mesin memuaskan.' },

{ id: 'img_59', name: 'SUSENO A', level: 'SMK', gradeClass: 'Kelas 10', major: 'TKR', phone: '081200000059', nh: 83, nb: 84, nc: 88, np: 86, note: 'Disiplin dan kepatuhan SOP sangat baik.' },

{ id: 'img_60', name: 'SYAHID M', level: 'SMK', gradeClass: 'Kelas 10', major: 'TKR', phone: '081200000060', nh: 85, nb: 86, nc: 90, np: 88, note: 'Prestasi dan kinerja praktik konsisten.' }

]

};

// Initialize Firebase if config exists

if (firebaseConfig) {

try {

const app = initializeApp(firebaseConfig);

db = getFirestore(app);

auth = getAuth(app);

const token = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;

if (token) {

signInWithCustomToken(auth, token).then(() => {

userId = auth.currentUser?.uid || crypto.randomUUID();

isCloudActive = true;

initCloudSync();

}).catch(() => {

signInAnonymously(auth).then(() => {

userId = auth.currentUser?.uid || crypto.randomUUID();

isCloudActive = true;

initCloudSync();

});

} else {

signInAnonymously(auth).then(() => {

userId = auth.currentUser?.uid || crypto.randomUUID();

isCloudActive = true;

initCloudSync();

});

}

} catch (e) {

console.log("Running in offline mode.");

}

function initCloudSync() {

if (!db || !userId) return;

const docRef = doc(db, 'artifacts', appId, 'public', 'data', 'informatika_grading_config');

onSnapshot(docRef, (docSnap) => {

if (docSnap.exists()) {

const data = docSnap.data();

if (data && data.weights && data.students) {

window.appState.weights = data.weights;

window.appState.students = data.students;

refreshUIViews();

}

}, (err) => { console.error(err); });

}

window.saveAllTeacherData = async function() {

const wNh = parseFloat(document.getElementById('weightNH').value) || 0;

const wNb = parseFloat(document.getElementById('weightNB').value) || 0;

const wNc = parseFloat(document.getElementById('weightNC').value) || 0;

const wNp = parseFloat(document.getElementById('weightNP').value) || 0;

if ((wNh + wNb + wNc + wNp) !== 100) {

showModal("Peringatan Bobot", "Total bobot seluruh komponen wajib persis 100% sebelum disimpan.", "warning");

return;

}

window.appState.weights = { nh: wNh, nb: wNb, nc: wNc, np: wNp };

if (isCloudActive && db) {

try {

const docRef = doc(db, 'artifacts', appId, 'public', 'data', 'informatika_grading_config');

await setDoc(docRef, window.appState);

showModal("Berhasil Disimpan", "Data bobot dan nilai siswa berhasil disinkronkan ke server cloud.", "success");

} catch (e) {

showModal("Penyimpanan Lokal", "Data berhasil diperbarui di memori lokal peramban.", "success");

}

} else {

showModal("Penyimpanan Lokal", "Data berhasil diperbarui secara lokal.", "success");

}

refreshUIViews();

};

// Excel File Importer Handler using SheetJS

window.handleExcelImport = function(event) {

const file = event.target.files[0];

if (!file) return;

const reader = new FileReader();

reader.onload = function(e) {

try {

const data = new Uint8Array(e.target.result);

const workbook = XLSX.read(data, { type: 'array' });

// Take the first worksheet

const firstSheetName = workbook.SheetNames[0];

const worksheet = workbook.Sheets[firstSheetName];

// Convert sheet to JSON rows

const rows = XLSX.utils.sheet_to_json(worksheet, { defval: '' });

if (!rows || rows.length === 0) {

showModal("Gagal Impor", "File Excel kosong atau format tabel tidak dikenali.", "warning");

return;

}

let importedCount = 0;

rows.forEach((row, idx) => {

// Flexible key matching for columns like Nama, Nilai Harian, NH, NB, etc.

const name = row['Nama'] || row['Nama Siswa'] || row['NAMA'] || row['nama'] || row['Student Name'] || '';

if (!name) return;

const level = row['Jenjang'] || row['Level'] || row['JENJANG'] || 'SMK';

const gradeClass = row['Kelas'] || row['Grade'] || row['KELAS'] || 'Kelas 10';

const major = row['Jurusan'] || row['Major'] || row['JURUSAN'] || 'PPLG';

const phone = row['Telepon'] || row['HP'] || row['No HP'] || row['WhatsApp'] || '081200000000';

const nh = parseFloat(row['NH'] || row['Nilai Harian'] || row['Harian'] || 80) || 80;

const nb = parseFloat(row['NB'] || row['Nilai Bulanan'] || row['Bulanan'] || row['Sumatif'] || 80) || 80;

const nc = parseFloat(row['NC'] || row['Catatan'] || row['Sikap'] || 85) || 85;

const np = parseFloat(row['NP'] || row['Nilai Projek'] || row['Projek'] || 85) || 85;

const note = row['Catatan Guru'] || row['Keterangan'] || 'Diimpor dari berkas REKAP_NILAI Excel.';

const newStudent = {

id: 'imp_' + Date.now() + '_' + idx,

name: String(name).trim(),

level: String(level).trim(),

gradeClass: String(gradeClass).trim(),

major: String(major).trim(),

phone: String(phone).trim(),

nh, nb, nc, np,

note: String(note).trim()

};

window.appState.students.push(newStudent);

importedCount++;

});

populateTeacherTable();

showModal("Berhasil Impor Excel", `Berhasil memuat ${importedCount} data siswa dari file ${file.name}.`, "success");

} catch (err) {

console.error(err);

showModal("Kesalahan Berkas", "Terjadi kesalahan saat memproses file Excel. Pastikan format tabel benar.", "warning");

}

// Reset file input

event.target.value = '';

};

reader.readAsArrayBuffer(file);

};

// Teacher Password Verification Handlers

window.promptTeacherPassword = function() {

document.getElementById('inputTeacherPassword').value = '';

document.getElementById('passwordErrorMsg').classList.add('hidden');

document.getElementById('teacherPasswordModal').classList.remove('hidden');

setTimeout(() => {

document.getElementById('inputTeacherPassword').focus();

}, 100);

};

window.closeTeacherPasswordModal = function() {

document.getElementById('teacherPasswordModal').classList.add('hidden');

};

window.verifyTeacherPassword = function() {

const pwd = document.getElementById('inputTeacherPassword').value;

if (pwd === 'suryogarage') {

closeTeacherPasswordModal();

switchPortal('teacher');

} else {

document.getElementById('passwordErrorMsg').classList.remove('hidden');

}

};

// UI View Switcher Functions

window.switchPortal = function(role) {

document.getElementById('viewRoleSelector').classList.add('hidden');

const roleText = document.getElementById('currentRoleText');

// Update Navigation Pill Active Styles

const btnT = document.getElementById('navBtnTeacher');

const btnS = document.getElementById('navBtnStudent');

const btnSel = document.getElementById('navBtnSelector');

btnT.className = "px-3.5 py-1.5 rounded-xl text-xs font-bold transition-all flex items-center gap-2 text-slate-400 hover:text-white";

btnS.className = "px-3.5 py-1.5 rounded-xl text-xs font-bold transition-all flex items-center gap-2 text-slate-400 hover:text-white";

btnSel.className = "px-3 py-1.5 rounded-xl text-xs font-bold transition-all flex items-center gap-1.5 text-slate-400 hover:text-white";

if (role === 'teacher') {

document.getElementById('viewTeacherPortal').classList.remove('hidden');

document.getElementById('viewStudentPortal').classList.add('hidden');

roleText.innerHTML = `<i class="fa-solid fa-terminal text-cyan-400"></i> Portal Guru (Mode Edit)`;

btnT.className = "px-3.5 py-1.5 rounded-xl text-xs font-bold transition-all flex items-center gap-2 bg-cyan-500 text-slate-950 shadow-lg shadow-cyan-500/20";

populateTeacherTable();

validateWeights();

} else if (role === 'student') {

document.getElementById('viewTeacherPortal').classList.add('hidden');

document.getElementById('viewStudentPortal').classList.remove('hidden');

roleText.innerHTML = `<i class="fa-solid fa-laptop-code text-sky-400"></i> Portal Siswa (Mode Lihat)`;

btnS.className = "px-3.5 py-1.5 rounded-xl text-xs font-bold transition-all flex items-center gap-2 bg-sky-400 text-slate-950 shadow-lg shadow-sky-400/20";

populateStudentDropdown();

renderStudentDashboard();

}

};

window.backToSelector = function() {

document.getElementById('viewRoleSelector').classList.remove('hidden');

document.getElementById('viewTeacherPortal').classList.add('hidden');

document.getElementById('viewStudentPortal').classList.add('hidden');

document.getElementById('currentRoleText').innerHTML = `<i class="fa-solid fa-shield-halved text-cyan-400"></i> Pilih Portal`;

const btnT = document.getElementById('navBtnTeacher');

const btnS = document.getElementById('navBtnStudent');

const btnSel = document.getElementById('navBtnSelector');

btnT.className = "px-3.5 py-1.5 rounded-xl text-xs font-bold transition-all flex items-center gap-2 text-slate-400 hover:text-white";

btnS.className = "px-3.5 py-1.5 rounded-xl text-xs font-bold transition-all flex items-center gap-2 text-slate-400 hover:text-white";

btnSel.className = "px-3 py-1.5 rounded-xl text-xs font-bold transition-all flex items-center gap-1.5 bg-slate-800 text-white shadow";

};

window.validateWeights = function() {

const w1 = parseFloat(document.getElementById('weightNH').value) || 0;

const w2 = parseFloat(document.getElementById('weightNB').value) || 0;

const w3 = parseFloat(document.getElementById('weightNC').value) || 0;

const w4 = parseFloat(document.getElementById('weightNP').value) || 0;

const total = w1 + w2 + w3 + w4;

const disp = document.getElementById('weightTotalDisplay');

disp.innerText = total + '%';

if (total === 100) {

disp.className = "text-cyan-400 font-bold";

} else {

disp.className = "text-rose-400 font-bold";

}

};

// Formula Calculation Helper

window.calculateFinalScore = function(s, w) {

const nh = parseFloat(s.nh) || 0;

const nb = parseFloat(s.nb) || 0;

const nc = parseFloat(s.nc) || 0;

const np = parseFloat(s.np) || 0;

const totalWeight = w.nh + w.nb + w.nc + w.np;

if (totalWeight === 0) return 0;

const final = (nh * (w.nh / 100)) + (nb * (w.nb / 100)) + (nc * (w.nc / 100)) + (np * (w.np / 100));

return Math.round(final * 100) / 100;

};

window.populateTeacherTable = function() {

const tbody = document.getElementById('teacherTableBody');

tbody.innerHTML = '';

const w = window.appState.weights;

document.getElementById('weightNH').value = w.nh;

document.getElementById('weightNB').value = w.nb;

document.getElementById('weightNC').value = w.nc;

document.getElementById('weightNP').value = w.np;

validateWeights();

window.appState.students.forEach((s, index) => {

const final = calculateFinalScore(s, w);

const isRemedial = final < 75;

const finalScoreClass = isRemedial ? 'text-rose-400 font-extrabold bg-rose-950/40 px-2 py-0.5 rounded-lg border border-rose-500/30 inline-block' : 'text-cyan-400 font-extrabold';

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

tr.className = "hover:bg-slate-800/50 transition-colors";

tr.innerHTML = `

<i class="fa-solid fa-phone text-[10px] text-cyan-400"></i> ${s.phone || '-'}

</div>

</td>

<span class="px-2 py-0.5 bg-slate-900 text-slate-300 border border-slate-700 text-[10px] font-bold rounded">${s.level || 'SMK'}</span>

<span class="text-xs font-semibold text-slate-300">${s.gradeClass || 'Kelas 10'}</span>

</div>

${s.major || 'PPLG'}

</span>

</td>

<td class="py-3 px-2 text-center"><span class="${finalScoreClass}">${final}</span></td>

</button>

</button>

</td>

tbody.appendChild(tr);

});

};

window.populateStudentDropdown = function() {

const dropdown = document.getElementById('studentSelectorDropdown');

dropdown.innerHTML = '';

window.appState.students.forEach(s => {

const opt = document.createElement('option');

opt.value = s.id;

opt.innerText = `${s.name} (${s.level || 'SMK'} - ${s.gradeClass || ''} - ${s.major || 'IT'})`;

dropdown.appendChild(opt);

});

};

window.renderStudentDashboard = function() {

const dropdown = document.getElementById('studentSelectorDropdown');

if (!dropdown || dropdown.options.length === 0) return;

const selectedId = dropdown.value;

const s = window.appState.students.find(item => item.id === selectedId) || window.appState.students[0];

if (!s) return;

const w = window.appState.weights;

const final = calculateFinalScore(s, w);

document.getElementById('srStudentName').innerText = s.name;

document.getElementById('srStudentLevelClassMajor').innerHTML = `<i class="fa-solid fa-school"></i> ${s.level || 'SMK'} • ${s.gradeClass || 'Kelas 10'} • <i class="fa-solid fa-code"></i> ${s.major || '-'} • <i class="fa-solid fa-phone"></i> ${s.phone || '-'}`;

document.getElementById('srFinalScore').innerText = final.toFixed(1);

document.getElementById('srValNH').innerText = s.nh;

document.getElementById('srContribNH').innerText = ((s.nh * (w.nh / 100))).toFixed(1);

document.getElementById('srValNB').innerText = s.nb;

document.getElementById('srContribNB').innerText = ((s.nb * (w.nb / 100))).toFixed(1);

document.getElementById('srValNC').innerText = s.nc;

document.getElementById('srContribNC').innerText = ((s.nc * (w.nc / 100))).toFixed(1);

document.getElementById('srValNP').innerText = s.np;

document.getElementById('srContribNP').innerText = ((s.np * (w.np / 100))).toFixed(1);

document.getElementById('srTeacherNote').innerText = `"${s.note || 'Belum ada catatan khusus dari pembimbing lab.'}"`;

// Predicate & Status

let predicate = 'A';

if (final < 70) predicate = 'C';

else if (final < 80) predicate = 'B';

else if (final < 90) predicate = 'A-';

else predicate = 'A+';

document.getElementById('srGradePredicate').innerText = predicate;

const passBadge = document.getElementById('srStatusPass');

if (final >= 75) {

passBadge.innerText = 'Tuntas / Kompeten';

passBadge.className = 'px-2.5 py-1 bg-emerald-500 rounded-lg text-[10px] font-bold text-white shadow';

} else {

passBadge.innerText = 'Remidi / Perbaikan';

passBadge.className = 'px-3 py-1 bg-rose-600 animate-pulse rounded-lg text-[11px] font-extrabold text-white shadow-lg border border-rose-400';

}

};

window.refreshUIViews = function() {

if (!document.getElementById('viewTeacherPortal').classList.contains('hidden')) {

populateTeacherTable();

}

if (!document.getElementById('viewStudentPortal').classList.contains('hidden')) {

populateStudentDropdown();

renderStudentDashboard();

}

};

window.updateModalMajorOptions = function(selectedMajor = 'PPLG', selectedGradeClass = 'Kelas 10') {

const level = document.getElementById('inputStudentLevel').value;

const majorSelect = document.getElementById('inputStudentMajor');

const gradeClassSelect = document.getElementById('inputStudentGradeClass');

// Grade classes based on level

gradeClassSelect.innerHTML = '';

if (level === 'SMP') {

['Kelas 7', 'Kelas 8', 'Kelas 9'].forEach(cls => {

const opt = document.createElement('option');

opt.value = cls;

opt.innerText = cls;

if (cls === selectedGradeClass) opt.selected = true;

gradeClassSelect.appendChild(opt);

});

} else {

['Kelas 10', 'Kelas 11', 'Kelas 12'].forEach(cls => {

const opt = document.createElement('option');

opt.value = cls;

opt.innerText = cls;

if (cls === selectedGradeClass) opt.selected = true;

gradeClassSelect.appendChild(opt);

});

}

// Majors based on level

majorSelect.innerHTML = '';

if (level === 'SMP') {

const opt = document.createElement('option');

opt.value = 'Informatika Dasar';

opt.innerText = 'Informatika Dasar (SMP)';

majorSelect.appendChild(opt);

} else {

const majors = [

{ code: 'PPLG', name: 'PPLG (Pengembangan Perangkat Lunak & GIM)' },

{ code: 'TJKT', name: 'TJKT (Teknik Jaringan Komputer & Telekomunikasi)' },

{ code: 'MPLB', name: 'MPLB (Manajemen Perkantoran & Layanan Bisnis)' },

{ code: 'AKL', name: 'AKL (Akuntansi & Keuangan Lembaga)' },

{ code: 'TKR', name: 'TKR (Teknik Kendaraan Ringan)' },

{ code: 'TAV', name: 'TAV (Teknik Audio Video)' },

{ code: 'DKV', name: 'DKV (Desain Komunikasi Visual)' },

{ code: 'ANIMASI', name: 'Animasi & Multimedia' }

];

majors.forEach(m => {

const opt = document.createElement('option');

opt.value = m.code;

opt.innerText = m.name;

if (m.code === selectedMajor) opt.selected = true;

majorSelect.appendChild(opt);

});

}

};

// Modal Form Handlers for Teacher adding/editing students

window.openAddStudentModal = function() {

document.getElementById('studentModalTitle').innerHTML = '<i class="fa-solid fa-user-plus text-cyan-400"></i> Tambah Siswa Baru';

document.getElementById('editStudentId').value = '';

document.getElementById('inputStudentName').value = '';

document.getElementById('inputStudentLevel').value = 'SMK';

updateModalMajorOptions('PPLG', 'Kelas 10');

document.getElementById('inputStudentPhone').value = '';

document.getElementById('inputNH').value = '80';

document.getElementById('inputNB').value = '80';

document.getElementById('inputNC').value = '85';

document.getElementById('inputNP').value = '85';

document.getElementById('inputNote').value = 'Menunjukkan perkembangan logika pemrograman yang positif.';

document.getElementById('studentModal').classList.remove('hidden');

};

window.editStudent = function(id) {

const s = window.appState.students.find(item => item.id === id);

if (!s) return;

document.getElementById('studentModalTitle').innerHTML = '<i class="fa-solid fa-user-pen text-cyan-400"></i> Edit Nilai Siswa';

document.getElementById('editStudentId').value = s.id;

document.getElementById('inputStudentName').value = s.name;

document.getElementById('inputStudentLevel').value = s.level || 'SMK';

updateModalMajorOptions(s.major || 'PPLG', s.gradeClass || 'Kelas 10');

document.getElementById('inputStudentPhone').value = s.phone || '';

document.getElementById('inputNH').value = s.nh;

document.getElementById('inputNB').value = s.nb;

document.getElementById('inputNC').value = s.nc;

document.getElementById('inputNP').value = s.np;

document.getElementById('inputNote').value = s.note || '';

document.getElementById('studentModal').classList.remove('hidden');

};

window.closeStudentModal = function() {

document.getElementById('studentModal').classList.add('hidden');

};

window.saveStudentData = function() {

const id = document.getElementById('editStudentId').value;

const name = document.getElementById('inputStudentName').value.trim();

const level = document.getElementById('inputStudentLevel').value;

const gradeClass = document.getElementById('inputStudentGradeClass').value;

const major = document.getElementById('inputStudentMajor').value;

const phone = document.getElementById('inputStudentPhone').value.trim();

const nh = parseFloat(document.getElementById('inputNH').value) || 0;

const nb = parseFloat(document.getElementById('inputNB').value) || 0;

const nc = parseFloat(document.getElementById('inputNC').value) || 0;

const np = parseFloat(document.getElementById('inputNP').value) || 0;

const note = document.getElementById('inputNote').value.trim();

if (!name) {

showModal("Validasi Gagal", "Nama siswa wajib diisi.", "warning");

return;

}

if (id) {

const s = window.appState.students.find(item => item.id === id);

if (s) {

s.name = name;

s.level = level;

s.gradeClass = gradeClass;

s.major = major;

s.phone = phone;

s.nh = nh; s.nb = nb; s.nc = nc; s.np = np; s.note = note;

}

} else {

const newStudent = {

id: 's_' + Date.now(),

name, level, gradeClass, major, phone, nh, nb, nc, np, note

};

window.appState.students.push(newStudent);

}

closeStudentModal();

populateTeacherTable();

showModal("Berhasil", "Data siswa berhasil diperbarui.", "success");

};

window.deleteStudent = function(id) {

window.appState.students = window.appState.students.filter(item => item.id !== id);

populateTeacherTable();

showModal("Berhasil", "Siswa telah dihapus dari daftar.", "success");

};

// Custom Modal helper

window.showModal = function(title, message, type = 'info') {

document.getElementById('modalTitle').innerText = title;

document.getElementById('modalMessage').innerText = message;

const iconDiv = document.getElementById('modalIcon');

if (type === 'success') {

iconDiv.className = 'w-14 h-14 rounded-2xl bg-emerald-500/10 text-emerald-400 flex items-center justify-center text-2xl mb-5 border border-emerald-500/20 shadow-lg shadow-emerald-500/10';

iconDiv.innerHTML = '<i class="fa-solid fa-circle-check"></i>';

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

iconDiv.className = 'w-14 h-14 rounded-2xl bg-amber-500/10 text-amber-400 flex items-center justify-center text-2xl mb-5 border border-amber-500/20 shadow-lg shadow-amber-500/10';

iconDiv.innerHTML = '<i class="fa-solid fa-triangle-exclamation"></i>';

} else {

iconDiv.className = 'w-14 h-14 rounded-2xl bg-cyan-500/10 text-cyan-400 flex items-center justify-center text-2xl mb-5 border border-cyan-500/20 shadow-lg shadow-cyan-500/10';

iconDiv.innerHTML = '<i class="fa-solid fa-circle-info"></i>';

}

document.getElementById('customModal').classList.remove('hidden');

};

window.closeModal = function(val) {

document.getElementById('customModal').classList.add('hidden');

};

</script>

</body>

</html>

suryogarage

Penilaian Siswa

Panduan dan Kalkulasi Penilaian Siswa

1. Menentukan Bobot Penilaian (Contoh Persentase)

2. Formula Penghitungan Nilai Akhir (NA)

3. Contoh Simulasi Perhitungan untuk Satu Siswa (Nama: Budi)

Proses Perhitungan:

4. Tips Mengelola Catatan & Penilaian Harian

Post a Comment

0 Comments

Popular Posts

BELAJAR ROBOTIK DARI NOL

MATERI KELISTRIKAN SMKN1 JAKARTA

“BELAJAR ROBOTIK DARI NOL: Transformasi Pembelajaran SMK Berbasis Teknologi, Kreativitas, dan Produk Siswa”

Facebook

Recent Posts

Recent in Recipes

Menu Footer Widget

Penilaian Siswa

Panduan dan Kalkulasi Penilaian Siswa

1. Menentukan Bobot Penilaian (Contoh Persentase)

2. Formula Penghitungan Nilai Akhir (NA)

3. Contoh Simulasi Perhitungan untuk Satu Siswa (Nama: Budi)

Proses Perhitungan:

4. Tips Mengelola Catatan & Penilaian Harian

Post a Comment

0 Comments

Social Plugin

Popular Posts

BELAJAR ROBOTIK DARI NOL

MATERI KELISTRIKAN SMKN1 JAKARTA

“BELAJAR ROBOTIK DARI NOL: Transformasi Pembelajaran SMK Berbasis Teknologi, Kreativitas, dan Produk Siswa”

Facebook

Recent Posts

Recent in Recipes

Menu Footer Widget