Program Sertifikasi Kompetensi Front-End Skillance Academy memvalidasi keahlian praktis Anda dalam penanganan event antarmuka, manipulasi struktur DOM, animasi efek interaktif, dan integrasi data asinkron.
Ujian terdiri dari pertanyaan pilihan ganda dan studi kasus kode interaktif dengan batas kelulusan minimal 80%. Setiap peserta yang lulus berhak memperoleh sertifikat digital resmi ber-QR Code verifikasi.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 25px; background: #f8fafc; }
.quiz-card { background: white; border-radius: 12px; padding: 25px; box-shadow: 0 4px 10px rgba(0,0,0,0.06); max-width: 500px; margin: auto; }
.soal-box { margin-bottom: 20px; }
.opsi { display: block; margin: 8px 0; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; }
.opsi:hover { background: #f1f5f9; }
button { background: #0d2e5c; color: white; border: none; padding: 12px 20px; border-radius: 8px; font-weight: bold; width: 100%; cursor: pointer; }
.hasil-box { display: none; margin-top: 20px; padding: 15px; border-radius: 8px; text-align: center; }
</style>
</head>
<body>
<div class="quiz-card">
<h3 style="color:#0d2e5c; text-align:center; margin-top:0;">🎓 Simulasi Sertifikasi jQuery</h3>
<p style="text-align:center; color:#64748b; font-size:14px;">Skillance Academy Indonesia</p>
<div class="soal-box">
<p><strong>Soal:</strong> Sintaks jQuery yang benar untuk menyembunyikan semua elemen <code><p></code> adalah:</p>
<label class="opsi"><input type="radio" name="jawaban" value="A"> <code>$("p").hide()</code></label>
<label class="opsi"><input type="radio" name="jawaban" value="B"> <code>p.hide()</code></label>
<label class="opsi"><input type="radio" name="jawaban" value="C"> <code>$("p").removeStyle()</code></label>
</div>
<button id="btnEvaluasi">Kirim Jawaban & Evaluasi</button>
<div id="hasilEvaluasi" class="hasil-box"></div>
</div>
<script>
$(document).ready(function() {
$('#btnEvaluasi').click(function() {
const terpilih = $('input[name="jawaban"]:checked').val();
if(!terpilih) {
alert('Silakan pilih salah satu jawaban!');
return;
}
if(terpilih === 'A') {
$('#hasilEvaluasi').css({'background':'#dcfce7', 'color':'#15803d'})
.html('<strong>🎉 Jawaban Anda Benar (Nilai 100)!</strong><br><code>$("p").hide()</code> adalah method bawaan resmi jQuery.').fadeIn();
} else {
$('#hasilEvaluasi').css({'background':'#fee2e2', 'color':'#b91c1c'})
.html('<strong>❌ Kurang Tepat!</strong><br>Jawaban yang benar adalah <code>$("p").hide()</code>.').fadeIn();
}
});
});
</script>
</body>
</html>Pilih jawaban yang benar dan tekan tombol evaluasi untuk menguji simulasi ujian.