Tryit Editor v1.0 - Skillance Academy

Editor Kode Sumber Tekan Ctrl + Enter untuk Menjalankan
<!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>&lt;p&gt;</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>
Hasil Tampilan (Browser Preview)