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: 20px; background: #f8fafc; }
        .code-box { background: #0f172a; color: #38bdf8; padding: 18px; border-radius: 8px; font-family: monospace; font-size: 15px; }
        input { font-family: monospace; padding: 4px 8px; border-radius: 4px; border: 1px solid #38bdf8; background: #1e293b; color: #4ade80; font-weight: bold; width: 80px; }
        button { margin-top: 15px; background: #00758f; color: white; border: none; padding: 10px 18px; border-radius: 6px; cursor: pointer; font-weight: bold; }
    </style>
</head>
<body>
    <h3>Latihan: Event Klik Elemen</h3>
    <p>Lengkapi kode berikut agar tombol dengan ID <code>#tombolAksi</code> bereaksi saat diklik:</p>
    
    <div class="code-box">
        $('#tombolAksi').<input type="text" id="jawabanInput" placeholder="???">(function() {<br>
        &nbsp;&nbsp;alert('Halo Dunia!');<br>
        });
    </div>

    <button id="btnPeriksa">Periksa Jawaban</button>
    <div id="statusLatihan" style="margin-top:15px; font-weight:bold;"></div>

    <script>
        $(document).ready(function() {
            $('#btnPeriksa').click(function() {
                const jwb = $('#jawabanInput').val().trim().toLowerCase();
                if(jwb === 'click' || jwb === 'on') {
                    $('#statusLatihan').css('color', '#15803d').html('🎉 Jawaban Anda TEPAT! Method <code>click()</code> atau <code>on()</code> berhasil!');
                } else {
                    $('#statusLatihan').css('color', '#b91c1c').html('❌ Jawaban belum tepat. Petunjuk: nama event untuk ketukan mouse adalah "click".');
                }
            });
        });
    </script>
</body>
</html>
Hasil Tampilan (Browser Preview)