Media Pembelajaran Persamaan Dasar Akuntansi<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap');\n \n body {\n font-family: 'Poppins', sans-serif;\n background-color: #f0f9ff;\n }\n \n .equation-box {\n transition: all 0.3s ease;\n }\n \n .equation-box:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n }\n \n .tab-content {\n display: none;\n }\n \n .tab-content.active {\n display: block;\n animation: fadeIn 0.5s ease-in-out;\n }\n \n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \n .balance-scale {\n position: relative;\n }\n \n .scale-beam {\n height: 10px;\n background-color: #334155;\n transform-origin: center;\n transition: transform 0.5s ease;\n }\n \n .scale-stand {\n width: 10px;\n background-color: #334155;\n }\n \n .scale-plate {\n border-radius: 50%;\n transition: transform 0.5s ease;\n }\n \n .transaction-card {\n transition: all 0.3s ease;\n }\n \n .transaction-card:hover {\n transform: translateY(-3px);\n }\n \n .quiz-option {\n transition: all 0.2s ease;\n }\n \n .quiz-option:hover:not(.selected) {\n background-color: #e0f2fe;\n }\n \n .quiz-option.selected {\n background-color: #0ea5e9;\n color: white;\n }\n \n .quiz-option.correct {\n background-color: #22c55e;\n color: white;\n }\n \n .quiz-option.incorrect {\n background-color: #ef4444;\n color: white;\n }\n \n .confetti {\n position: absolute;\n width: 10px;\n height: 10px;\n background-color: #f59e0b;\n opacity: 0;\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen\">\n <header class=\"bg-gradient-to-r from-blue-600 to-cyan-500 text-white py-6 px-4 shadow-lg\">\n <div class=\"container mx-auto\">\n <h1 class=\"text-3xl md:text-4xl font-bold text-center\">Persamaan Dasar Akuntansi<\/h1>\n <p class=\"text-center mt-2 text-blue-100\">Media Pembelajaran Interaktif<\/p>\n <\/div>\n <\/header>\n\n <main class=\"container mx-auto px-4 py-8\">\n \n <div class=\"flex flex-wrap justify-center mb-8 gap-2\">\n <button class=\"tab-btn bg-blue-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-600 transition active\" data-tab=\"konsep\">\n Konsep Dasar\n <\/button>\n <button class=\"tab-btn bg-blue-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-600 transition\" data-tab=\"visualisasi\">\n Visualisasi\n <\/button>\n <button class=\"tab-btn bg-blue-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-600 transition\" data-tab=\"contoh\">\n Contoh Transaksi\n <\/button>\n <button class=\"tab-btn bg-blue-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-600 transition\" data-tab=\"latihan\">\n Latihan Soal\n <\/button>\n <\/div>\n\n \n <div id=\"konsep\" class=\"tab-content active\">\n <div class=\"bg-white rounded-xl shadow-md p-6 mb-8\">\n <h2 class=\"text-2xl font-bold text-blue-700 mb-4\">Persamaan Dasar Akuntansi<\/h2>\n <p class=\"mb-4\">Persamaan dasar akuntansi adalah fondasi dari seluruh sistem akuntansi. Persamaan ini menunjukkan hubungan antara aset, liabilitas, dan ekuitas pemilik.<\/p>\n \n <div class=\"equation-box bg-gradient-to-r from-blue-50 to-cyan-50 p-6 rounded-xl border border-blue-200 my-6 text-center\">\n <h3 class=\"text-3xl font-bold text-blue-800 mb-2\">ASET = LIABILITAS + EKUITAS<\/h3>\n <p class=\"text-gray-600\">Persamaan ini selalu dalam keadaan seimbang<\/p>\n <\/div>\n \n <div class=\"grid md:grid-cols-3 gap-6 mt-8\">\n <div class=\"bg-blue-50 p-5 rounded-lg border-l-4 border-blue-500\">\n <h4 class=\"font-bold text-xl text-blue-700 mb-2\">Aset<\/h4>\n <p>Sumber daya yang dimiliki perusahaan yang memiliki nilai ekonomi.<\/p>\n <p class=\"mt-2 text-sm text-gray-600\">Contoh: Kas, Piutang, Persediaan, Peralatan<\/p>\n <\/div>\n \n <div class=\"bg-purple-50 p-5 rounded-lg border-l-4 border-purple-500\">\n <h4 class=\"font-bold text-xl text-purple-700 mb-2\">Liabilitas<\/h4>\n <p>Kewajiban atau hutang perusahaan kepada pihak lain.<\/p>\n <p class=\"mt-2 text-sm text-gray-600\">Contoh: Hutang Usaha, Hutang Bank, Hutang Pajak<\/p>\n <\/div>\n \n <div class=\"bg-green-50 p-5 rounded-lg border-l-4 border-green-500\">\n <h4 class=\"font-bold text-xl text-green-700 mb-2\">Ekuitas<\/h4>\n <p>Hak atau klaim pemilik atas aset perusahaan.<\/p>\n <p class=\"mt-2 text-sm text-gray-600\">Contoh: Modal Pemilik, Laba Ditahan<\/p>\n <\/div>\n <\/div>\n \n <div class=\"mt-8 bg-yellow-50 p-5 rounded-lg border-l-4 border-yellow-500\">\n <h4 class=\"font-bold text-xl text-yellow-700 mb-2\">Prinsip Penting<\/h4>\n <p>Setiap transaksi bisnis akan mempengaruhi persamaan akuntansi, namun persamaan akan tetap seimbang.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"visualisasi\" class=\"tab-content\">\n <div class=\"bg-white rounded-xl shadow-md p-6 mb-8\">\n <h2 class=\"text-2xl font-bold text-blue-700 mb-4\">Visualisasi Persamaan Akuntansi<\/h2>\n \n <div class=\"balance-scale my-12 flex flex-col items-center\">\n <div class=\"scale-beam w-3\/4 rounded-full relative\" id=\"scale-beam\">\n <div class=\"scale-plate bg-blue-100 border-2 border-blue-500 w-32 h-32 absolute -top-16 -left-16 flex items-center justify-center flex-col shadow-lg\" id=\"left-plate\">\n <span class=\"text-lg font-bold text-blue-700\">ASET<\/span>\n <span class=\"text-2xl font-bold\" id=\"asset-value\">10.000<\/span>\n <\/div>\n <div class=\"scale-plate bg-purple-100 border-2 border-purple-500 w-32 h-32 absolute -top-16 -right-16 flex items-center justify-center flex-col shadow-lg\" id=\"right-plate\">\n <div class=\"text-center\">\n <span class=\"text-lg font-bold text-purple-700\">LIABILITAS<\/span>\n <span class=\"text-2xl font-bold\" id=\"liability-value\">6.000<\/span>\n <\/div>\n <div class=\"border-t border-gray-300 w-full my-1\"><\/div>\n <div class=\"text-center\">\n <span class=\"text-lg font-bold text-green-700\">EKUITAS<\/span>\n <span class=\"text-2xl font-bold\" id=\"equity-value\">4.000<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"scale-stand h-32 mx-auto rounded-b-lg\"><\/div>\n <\/div>\n \n <div class=\"mt-8 flex flex-wrap justify-center gap-4\">\n <div class=\"control-panel bg-gray-50 p-4 rounded-lg shadow w-full md:w-auto\">\n <h3 class=\"font-bold text-gray-700 mb-3\">Ubah Nilai:<\/h3>\n <div class=\"grid grid-cols-3 gap-3\">\n <div>\n <label class=\"block text-sm text-gray-600 mb-1\">Aset<\/label>\n <input type=\"number\" id=\"asset-input\" value=\"10000\" min=\"0\" class=\"w-full p-2 border rounded\">\n <\/div>\n <div>\n <label class=\"block text-sm text-gray-600 mb-1\">Liabilitas<\/label>\n <input type=\"number\" id=\"liability-input\" value=\"6000\" min=\"0\" class=\"w-full p-2 border rounded\">\n <\/div>\n <div>\n <label class=\"block text-sm text-gray-600 mb-1\">Ekuitas<\/label>\n <input type=\"number\" id=\"equity-input\" value=\"4000\" min=\"0\" class=\"w-full p-2 border rounded\">\n <\/div>\n <\/div>\n <div class=\"mt-3 flex justify-between\">\n <button id=\"update-values\" class=\"bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition\">\n Perbarui\n <\/button>\n <button id=\"reset-values\" class=\"bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 transition\">\n Reset\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"mt-8 bg-blue-50 p-5 rounded-lg\">\n <h3 class=\"font-bold text-xl text-blue-700 mb-2\">Penjelasan<\/h3>\n <p>Visualisasi di atas menunjukkan bagaimana persamaan akuntansi selalu dalam keadaan seimbang. Ketika nilai aset, liabilitas, atau ekuitas berubah, persamaan tetap harus seimbang.<\/p>\n <p class=\"mt-2\">Cobalah mengubah nilai-nilai di atas dan perhatikan bagaimana timbangan akan miring jika persamaan tidak seimbang.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"contoh\" class=\"tab-content\">\n <div class=\"bg-white rounded-xl shadow-md p-6 mb-8\">\n <h2 class=\"text-2xl font-bold text-blue-700 mb-4\">Contoh Transaksi dan Pengaruhnya<\/h2>\n \n <div class=\"mb-6\">\n <p class=\"mb-4\">Berikut adalah beberapa contoh transaksi dan bagaimana transaksi tersebut mempengaruhi persamaan akuntansi:<\/p>\n \n <div class=\"overflow-x-auto\">\n <table class=\"min-w-full bg-white border border-gray-200 mb-6\">\n <thead>\n <tr class=\"bg-blue-100\">\n <th class=\"py-3 px-4 border-b text-left\">Transaksi<\/th>\n <th class=\"py-3 px-4 border-b text-center\">Aset<\/th>\n <th class=\"py-3 px-4 border-b text-center\">Liabilitas<\/th>\n <th class=\"py-3 px-4 border-b text-center\">Ekuitas<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td class=\"py-3 px-4 border-b\">Pemilik menyetor modal Rp 50.000.000<\/td>\n <td class=\"py-3 px-4 border-b text-center\">+Rp 50.000.000 (Kas)<\/td>\n <td class=\"py-3 px-4 border-b text-center\">Tidak berubah<\/td>\n <td class=\"py-3 px-4 border-b text-center\">+Rp 50.000.000 (Modal)<\/td>\n <\/tr>\n <tr>\n <td class=\"py-3 px-4 border-b\">Membeli peralatan Rp 15.000.000 secara tunai<\/td>\n <td class=\"py-3 px-4 border-b text-center\">+Rp 15.000.000 (Peralatan)<br>-Rp 15.000.000 (Kas)<\/td>\n <td class=\"py-3 px-4 border-b text-center\">Tidak berubah<\/td>\n <td class=\"py-3 px-4 border-b text-center\">Tidak berubah<\/td>\n <\/tr>\n <tr>\n <td class=\"py-3 px-4 border-b\">Membeli persediaan Rp 10.000.000 secara kredit<\/td>\n <td class=\"py-3 px-4 border-b text-center\">+Rp 10.000.000 (Persediaan)<\/td>\n <td class=\"py-3 px-4 border-b text-center\">+Rp 10.000.000 (Hutang Usaha)<\/td>\n <td class=\"py-3 px-4 border-b text-center\">Tidak berubah<\/td>\n <\/tr>\n <tr>\n <td class=\"py-3 px-4 border-b\">Membayar hutang Rp 5.000.000<\/td>\n <td class=\"py-3 px-4 border-b text-center\">-Rp 5.000.000 (Kas)<\/td>\n <td class=\"py-3 px-4 border-b text-center\">-Rp 5.000.000 (Hutang Usaha)<\/td>\n <td class=\"py-3 px-4 border-b text-center\">Tidak berubah<\/td>\n <\/tr>\n <tr>\n <td class=\"py-3 px-4 border-b\">Menerima pendapatan jasa Rp 8.000.000<\/td>\n <td class=\"py-3 px-4 border-b text-center\">+Rp 8.000.000 (Kas)<\/td>\n <td class=\"py-3 px-4 border-b text-center\">Tidak berubah<\/td>\n <td class=\"py-3 px-4 border-b text-center\">+Rp 8.000.000 (Pendapatan)<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n \n <div class=\"mt-8\">\n <h3 class=\"text-xl font-bold text-blue-700 mb-4\">Simulasi Transaksi<\/h3>\n \n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-6\">\n <div class=\"bg-blue-50 p-4 rounded-lg shadow\">\n <h4 class=\"font-bold text-blue-700\">Aset<\/h4>\n <div class=\"mt-2\">\n <p>Kas: <span id=\"sim-cash\" class=\"font-bold\">50,000<\/span><\/p>\n <p>Peralatan: <span id=\"sim-equipment\" class=\"font-bold\">0<\/span><\/p>\n <p>Persediaan: <span id=\"sim-inventory\" class=\"font-bold\">0<\/span><\/p>\n <\/div>\n <div class=\"mt-2 pt-2 border-t border-blue-200\">\n <p>Total Aset: <span id=\"sim-total-assets\" class=\"font-bold\">50,000<\/span><\/p>\n <\/div>\n <\/div>\n \n <div class=\"bg-purple-50 p-4 rounded-lg shadow\">\n <h4 class=\"font-bold text-purple-700\">Liabilitas<\/h4>\n <div class=\"mt-2\">\n <p>Hutang Usaha: <span id=\"sim-accounts-payable\" class=\"font-bold\">0<\/span><\/p>\n <\/div>\n <div class=\"mt-2 pt-2 border-t border-purple-200\">\n <p>Total Liabilitas: <span id=\"sim-total-liabilities\" class=\"font-bold\">0<\/span><\/p>\n <\/div>\n <\/div>\n \n <div class=\"bg-green-50 p-4 rounded-lg shadow\">\n <h4 class=\"font-bold text-green-700\">Ekuitas<\/h4>\n <div class=\"mt-2\">\n <p>Modal: <span id=\"sim-capital\" class=\"font-bold\">50,000<\/span><\/p>\n <p>Pendapatan: <span id=\"sim-revenue\" class=\"font-bold\">0<\/span><\/p>\n <\/div>\n <div class=\"mt-2 pt-2 border-t border-green-200\">\n <p>Total Ekuitas: <span id=\"sim-total-equity\" class=\"font-bold\">50,000<\/span><\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"flex justify-center mb-6\">\n <div class=\"equation-box bg-gradient-to-r from-blue-50 to-cyan-50 p-4 rounded-xl border border-blue-200 text-center w-full md:w-2\/3\">\n <h3 class=\"text-xl font-bold text-blue-800\">\n <span id=\"sim-total-assets-eq\">50,000<\/span> = \n <span id=\"sim-total-liabilities-eq\">0<\/span> + \n <span id=\"sim-total-equity-eq\">50,000<\/span>\n <\/h3>\n <\/div>\n <\/div>\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n <div class=\"transaction-card bg-white p-4 rounded-lg shadow border border-gray-200 hover:border-blue-300\">\n <h4 class=\"font-bold text-gray-800 mb-2\">Beli Peralatan Tunai<\/h4>\n <p class=\"text-sm text-gray-600 mb-3\">Membeli peralatan seharga Rp 10.000 secara tunai<\/p>\n <button class=\"sim-transaction bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600 transition w-full\" data-transaction=\"buy-equipment\">\n Lakukan Transaksi\n <\/button>\n <\/div>\n \n <div class=\"transaction-card bg-white p-4 rounded-lg shadow border border-gray-200 hover:border-blue-300\">\n <h4 class=\"font-bold text-gray-800 mb-2\">Beli Persediaan Kredit<\/h4>\n <p class=\"text-sm text-gray-600 mb-3\">Membeli persediaan seharga Rp 15.000 secara kredit<\/p>\n <button class=\"sim-transaction bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600 transition w-full\" data-transaction=\"buy-inventory-credit\">\n Lakukan Transaksi\n <\/button>\n <\/div>\n \n <div class=\"transaction-card bg-white p-4 rounded-lg shadow border border-gray-200 hover:border-blue-300\">\n <h4 class=\"font-bold text-gray-800 mb-2\">Bayar Hutang<\/h4>\n <p class=\"text-sm text-gray-600 mb-3\">Membayar hutang usaha sebesar Rp 5.000<\/p>\n <button class=\"sim-transaction bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600 transition w-full\" data-transaction=\"pay-debt\">\n Lakukan Transaksi\n <\/button>\n <\/div>\n \n <div class=\"transaction-card bg-white p-4 rounded-lg shadow border border-gray-200 hover:border-blue-300\">\n <h4 class=\"font-bold text-gray-800 mb-2\">Terima Pendapatan<\/h4>\n <p class=\"text-sm text-gray-600 mb-3\">Menerima pendapatan jasa sebesar Rp 8.000<\/p>\n <button class=\"sim-transaction bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600 transition w-full\" data-transaction=\"receive-revenue\">\n Lakukan Transaksi\n <\/button>\n <\/div>\n \n <div class=\"transaction-card bg-white p-4 rounded-lg shadow border border-gray-200 hover:border-blue-300\">\n <h4 class=\"font-bold text-gray-800 mb-2\">Tambah Modal<\/h4>\n <p class=\"text-sm text-gray-600 mb-3\">Pemilik menambah modal sebesar Rp 20.000<\/p>\n <button class=\"sim-transaction bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600 transition w-full\" data-transaction=\"add-capital\">\n Lakukan Transaksi\n <\/button>\n <\/div>\n \n <div class=\"transaction-card bg-white p-4 rounded-lg shadow border border-gray-200 hover:border-blue-300\">\n <h4 class=\"font-bold text-gray-800 mb-2\">Reset Simulasi<\/h4>\n <p class=\"text-sm text-gray-600 mb-3\">Mengembalikan simulasi ke kondisi awal<\/p>\n <button class=\"bg-gray-500 text-white px-3 py-1 rounded hover:bg-gray-600 transition w-full\" id=\"reset-simulation\">\n Reset\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"latihan\" class=\"tab-content\">\n <div class=\"bg-white rounded-xl shadow-md p-6 mb-8\">\n <h2 class=\"text-2xl font-bold text-blue-700 mb-4\">Latihan Soal Interaktif<\/h2>\n \n <div id=\"quiz-container\">\n <div class=\"mb-6\">\n <div class=\"flex justify-between items-center\">\n <h3 class=\"text-xl font-bold text-gray-800\">Soal <span id=\"current-question\">1<\/span> dari <span id=\"total-questions\">5<\/span><\/h3>\n <div class=\"bg-blue-100 text-blue-800 px-3 py-1 rounded-full\">\n Skor: <span id=\"score\">0<\/span>\n <\/div>\n <\/div>\n <div class=\"w-full bg-gray-200 rounded-full h-2.5 mt-2\">\n <div class=\"bg-blue-600 h-2.5 rounded-full\" id=\"progress-bar\" style=\"width: 20%\"><\/div>\n <\/div>\n <\/div>\n \n <div id=\"question-container\" class=\"mb-6\">\n <p id=\"question-text\" class=\"text-lg font-medium mb-4\">Jika perusahaan membeli peralatan seharga Rp 5.000.000 secara tunai, bagaimana pengaruhnya terhadap persamaan akuntansi?<\/p>\n \n <div class=\"grid gap-3\" id=\"options-container\">\n <div class=\"quiz-option p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-blue-50\" data-option=\"a\">\n <div class=\"flex items-start\">\n <span class=\"font-bold mr-2\">A.<\/span>\n <span>Aset bertambah Rp 5.000.000, Ekuitas bertambah Rp 5.000.000<\/span>\n <\/div>\n <\/div>\n <div class=\"quiz-option p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-blue-50\" data-option=\"b\">\n <div class=\"flex items-start\">\n <span class=\"font-bold mr-2\">B.<\/span>\n <span>Aset tidak berubah (Kas berkurang, Peralatan bertambah), Liabilitas dan Ekuitas tidak berubah<\/span>\n <\/div>\n <\/div>\n <div class=\"quiz-option p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-blue-50\" data-option=\"c\">\n <div class=\"flex items-start\">\n <span class=\"font-bold mr-2\">C.<\/span>\n <span>Aset bertambah Rp 5.000.000, Liabilitas bertambah Rp 5.000.000<\/span>\n <\/div>\n <\/div>\n <div class=\"quiz-option p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-blue-50\" data-option=\"d\">\n <div class=\"flex items-start\">\n <span class=\"font-bold mr-2\">D.<\/span>\n <span>Aset berkurang Rp 5.000.000, Ekuitas berkurang Rp 5.000.000<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div id=\"feedback-container\" class=\"mb-6 hidden\">\n <div id=\"correct-feedback\" class=\"bg-green-100 border-l-4 border-green-500 text-green-700 p-4 hidden\">\n <p class=\"font-bold\">Benar!<\/p>\n <p id=\"correct-explanation\"><\/p>\n <\/div>\n <div id=\"incorrect-feedback\" class=\"bg-red-100 border-l-4 border-red-500 text-red-700 p-4 hidden\">\n <p class=\"font-bold\">Kurang tepat<\/p>\n <p id=\"incorrect-explanation\"><\/p>\n <\/div>\n <\/div>\n \n <div class=\"flex justify-between\">\n <button id=\"prev-btn\" class=\"bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 transition disabled:opacity-50 disabled:cursor-not-allowed\" disabled>\n Sebelumnya\n <\/button>\n <button id=\"next-btn\" class=\"bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition disabled:opacity-50 disabled:cursor-not-allowed\" disabled>\n Selanjutnya\n <\/button>\n <\/div>\n <\/div>\n \n <div id=\"quiz-results\" class=\"hidden text-center py-8\">\n <div class=\"mb-6\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-24 w-24 mx-auto text-green-500\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-2xl font-bold text-gray-800 mb-2\">Latihan Selesai!<\/h3>\n <p class=\"text-lg mb-4\">Skor Anda: <span id=\"final-score\" class=\"font-bold text-blue-600\">0<\/span> dari <span id=\"max-score\">5<\/span><\/p>\n <div id=\"score-message\" class=\"text-lg mb-6\"><\/div>\n <button id=\"restart-quiz\" class=\"bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition\">\n Coba Lagi\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n <footer class=\"bg-gray-800 text-white py-6 px-4\">\n <div class=\"container mx-auto text-center\">\n <p>Media Pembelajaran Persamaan Dasar Akuntansi<\/p>\n <p class=\"text-sm text-gray-400 mt-2\">\u00a9 2023 Media Pembelajaran Interaktif<\/p>\n <\/div>\n <\/footer>\n\n <script>\n \/\/ Tab Navigation\n const tabBtns = document.querySelectorAll('.tab-btn');\n const tabContents = document.querySelectorAll('.tab-content');\n \n tabBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n const tabId = btn.getAttribute('data-tab');\n \n tabBtns.forEach(b => b.classList.remove('active', 'bg-blue-600'));\n tabContents.forEach(c => c.classList.remove('active'));\n \n btn.classList.add('active', 'bg-blue-600');\n document.getElementById(tabId).classList.add('active');\n });\n });\n \n \/\/ Visualisasi Persamaan\n const assetInput = document.getElementById('asset-input');\n const liabilityInput = document.getElementById('liability-input');\n const equityInput = document.getElementById('equity-input');\n const updateBtn = document.getElementById('update-values');\n const resetBtn = document.getElementById('reset-values');\n const scaleBeam = document.getElementById('scale-beam');\n const leftPlate = document.getElementById('left-plate');\n const rightPlate = document.getElementById('right-plate');\n const assetValue = document.getElementById('asset-value');\n const liabilityValue = document.getElementById('liability-value');\n const equityValue = document.getElementById('equity-value');\n \n function updateScale() {\n const asset = parseInt(assetInput.value) || 0;\n const liability = parseInt(liabilityInput.value) || 0;\n const equity = parseInt(equityInput.value) || 0;\n \n assetValue.textContent = asset.toLocaleString();\n liabilityValue.textContent = liability.toLocaleString();\n equityValue.textContent = equity.toLocaleString();\n \n const rightSide = liability + equity;\n \n if (asset === rightSide) {\n scaleBeam.style.transform = 'rotate(0deg)';\n leftPlate.style.transform = 'translateY(0)';\n rightPlate.style.transform = 'translateY(0)';\n } else if (asset > rightSide) {\n const angle = Math.min(10, (asset - rightSide) \/ 1000);\n scaleBeam.style.transform = `rotate(${angle}deg)`;\n leftPlate.style.transform = `translateY(${angle * 3}px)`;\n rightPlate.style.transform = `translateY(-${angle * 3}px)`;\n } else {\n const angle = Math.min(10, (rightSide - asset) \/ 1000);\n scaleBeam.style.transform = `rotate(-${angle}deg)`;\n leftPlate.style.transform = `translateY(-${angle * 3}px)`;\n rightPlate.style.transform = `translateY(${angle * 3}px)`;\n }\n }\n \n updateBtn.addEventListener('click', updateScale);\n \n resetBtn.addEventListener('click', () => {\n assetInput.value = 10000;\n liabilityInput.value = 6000;\n equityInput.value = 4000;\n updateScale();\n });\n \n \/\/ Initialize scale\n updateScale();\n \n \/\/ Simulasi Transaksi\n const simCash = document.getElementById('sim-cash');\n const simEquipment = document.getElementById('sim-equipment');\n const simInventory = document.getElementById('sim-inventory');\n const simAccountsPayable = document.getElementById('sim-accounts-payable');\n const simCapital = document.getElementById('sim-capital');\n const simRevenue = document.getElementById('sim-revenue');\n const simTotalAssets = document.getElementById('sim-total-assets');\n const simTotalLiabilities = document.getElementById('sim-total-liabilities');\n const simTotalEquity = document.getElementById('sim-total-equity');\n const simTotalAssetsEq = document.getElementById('sim-total-assets-eq');\n const simTotalLiabilitiesEq = document.getElementById('sim-total-liabilities-eq');\n const simTotalEquityEq = document.getElementById('sim-total-equity-eq');\n \n const transactionBtns = document.querySelectorAll('.sim-transaction');\n const resetSimBtn = document.getElementById('reset-simulation');\n \n let simulation = {\n cash: 50000,\n equipment: 0,\n inventory: 0,\n accountsPayable: 0,\n capital: 50000,\n revenue: 0\n };\n \n function updateSimulation() {\n simCash.textContent = simulation.cash.toLocaleString();\n simEquipment.textContent = simulation.equipment.toLocaleString();\n simInventory.textContent = simulation.inventory.toLocaleString();\n simAccountsPayable.textContent = simulation.accountsPayable.toLocaleString();\n simCapital.textContent = simulation.capital.toLocaleString();\n simRevenue.textContent = simulation.revenue.toLocaleString();\n \n const totalAssets = simulation.cash + simulation.equipment + simulation.inventory;\n const totalLiabilities = simulation.accountsPayable;\n const totalEquity = simulation.capital + simulation.revenue;\n \n simTotalAssets.textContent = totalAssets.toLocaleString();\n simTotalLiabilities.textContent = totalLiabilities.toLocaleString();\n simTotalEquity.textContent = totalEquity.toLocaleString();\n \n simTotalAssetsEq.textContent = totalAssets.toLocaleString();\n simTotalLiabilitiesEq.textContent = totalLiabilities.toLocaleString();\n simTotalEquityEq.textContent = totalEquity.toLocaleString();\n }\n \n transactionBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n const transaction = btn.getAttribute('data-transaction');\n \n switch (transaction) {\n case 'buy-equipment':\n simulation.cash -= 10000;\n simulation.equipment += 10000;\n break;\n case 'buy-inventory-credit':\n simulation.inventory += 15000;\n simulation.accountsPayable += 15000;\n break;\n case 'pay-debt':\n if (simulation.accountsPayable >= 5000) {\n simulation.cash -= 5000;\n simulation.accountsPayable -= 5000;\n }\n break;\n case 'receive-revenue':\n simulation.cash += 8000;\n simulation.revenue += 8000;\n break;\n case 'add-capital':\n simulation.cash += 20000;\n simulation.capital += 20000;\n break;\n }\n \n updateSimulation();\n });\n });\n \n resetSimBtn.addEventListener('click', () => {\n simulation = {\n cash: 50000,\n equipment: 0,\n inventory: 0,\n accountsPayable: 0,\n capital: 50000,\n revenue: 0\n };\n updateSimulation();\n });\n \n \/\/ Initialize simulation\n updateSimulation();\n \n \/\/ Quiz Logic\n const questions = [\n {\n question: \"Jika perusahaan membeli peralatan seharga Rp 5.000.000 secara tunai, bagaimana pengaruhnya terhadap persamaan akuntansi?\",\n options: [\n \"Aset bertambah Rp 5.000.000, Ekuitas bertambah Rp 5.000.000\",\n \"Aset tidak berubah (Kas berkurang, Peralatan bertambah), Liabilitas dan Ekuitas tidak berubah\",\n \"Aset bertambah Rp 5.000.000, Liabilitas bertambah Rp 5.000.000\",\n \"Aset berkurang Rp 5.000.000, Ekuitas berkurang Rp 5.000.000\"\n ],\n correctAnswer: 1,\n explanation: \"Ketika membeli peralatan secara tunai, kas berkurang dan peralatan bertambah dengan jumlah yang sama. Total aset tidak berubah, hanya terjadi perubahan komposisi aset.\"\n },\n {\n question: \"Perusahaan menerima pendapatan jasa sebesar Rp 3.000.000 secara tunai. Bagaimana pengaruhnya terhadap persamaan akuntansi?\",\n options: [\n \"Aset bertambah Rp 3.000.000, Ekuitas bertambah Rp 3.000.000\",\n \"Aset bertambah Rp 3.000.000, Liabilitas bertambah Rp 3.000.000\",\n \"Aset tidak berubah, Ekuitas bertambah Rp 3.000.000\",\n \"Aset bertambah Rp 3.000.000, Ekuitas berkurang Rp 3.000.000\"\n ],\n correctAnswer: 0,\n explanation: \"Ketika menerima pendapatan jasa secara tunai, kas (aset) bertambah dan pendapatan (bagian dari ekuitas) juga bertambah dengan jumlah yang sama.\"\n },\n {\n question: \"Perusahaan membeli persediaan barang dagang seharga Rp 8.000.000 secara kredit. Bagaimana pengaruhnya terhadap persamaan akuntansi?\",\n options: [\n \"Aset bertambah Rp 8.000.000, Ekuitas bertambah Rp 8.000.000\",\n \"Aset bertambah Rp 8.000.000, Liabilitas bertambah Rp 8.000.000\",\n \"Aset tidak berubah, Liabilitas bertambah Rp 8.000.000\",\n \"Aset berkurang Rp 8.000.000, Liabilitas berkurang Rp 8.000.000\"\n ],\n correctAnswer: 1,\n explanation: \"Ketika membeli persediaan secara kredit, persediaan (aset) bertambah dan hutang usaha (liabilitas) juga bertambah dengan jumlah yang sama.\"\n },\n {\n question: \"Pemilik perusahaan mengambil uang kas sebesar Rp 2.000.000 untuk keperluan pribadi (prive). Bagaimana pengaruhnya terhadap persamaan akuntansi?\",\n options: [\n \"Aset berkurang Rp 2.000.000, Ekuitas berkurang Rp 2.000.000\",\n \"Aset berkurang Rp 2.000.000, Liabilitas berkurang Rp 2.000.000\",\n \"Aset tidak berubah, Ekuitas berkurang Rp 2.000.000\",\n \"Aset bertambah Rp 2.000.000, Ekuitas bertambah Rp 2.000.000\"\n ],\n correctAnswer: 0,\n explanation: \"Ketika pemilik mengambil uang untuk keperluan pribadi (prive), kas (aset) berkurang dan ekuitas pemilik juga berkurang dengan jumlah yang sama.\"\n },\n {\n question: \"Perusahaan membayar hutang usaha sebesar Rp 4.000.000. Bagaimana pengaruhnya terhadap persamaan akuntansi?\",\n options: [\n \"Aset berkurang Rp 4.000.000, Ekuitas berkurang Rp 4.000.000\",\n \"Aset berkurang Rp 4.000.000, Liabilitas berkurang Rp 4.000.000\",\n \"Aset tidak berubah, Liabilitas berkurang Rp 4.000.000\",\n \"Aset bertambah Rp 4.000.000, Liabilitas bertambah Rp 4.000.000\"\n ],\n correctAnswer: 1,\n explanation: \"Ketika membayar hutang usaha, kas (aset) berkurang dan hutang usaha (liabilitas) juga berkurang dengan jumlah yang sama.\"\n }\n ];\n \n let currentQuestionIndex = 0;\n let score = 0;\n let answeredQuestions = new Array(questions.length).fill(false);\n \n const questionText = document.getElementById('question-text');\n const optionsContainer = document.getElementById('options-container');\n const currentQuestionEl = document.getElementById('current-question');\n const totalQuestionsEl = document.getElementById('total-questions');\n const scoreEl = document.getElementById('score');\n const progressBar = document.getElementById('progress-bar');\n const prevBtn = document.getElementById('prev-btn');\n const nextBtn = document.getElementById('next-btn');\n const feedbackContainer = document.getElementById('feedback-container');\n const correctFeedback = document.getElementById('correct-feedback');\n const incorrectFeedback = document.getElementById('incorrect-feedback');\n const correctExplanation = document.getElementById('correct-explanation');\n const incorrectExplanation = document.getElementById('incorrect-explanation');\n const quizContainer = document.getElementById('quiz-container');\n const quizResults = document.getElementById('quiz-results');\n const finalScoreEl = document.getElementById('final-score');\n const maxScoreEl = document.getElementById('max-score');\n const scoreMessageEl = document.getElementById('score-message');\n const restartQuizBtn = document.getElementById('restart-quiz');\n \n function loadQuestion() {\n const question = questions[currentQuestionIndex];\n \n questionText.textContent = question.question;\n \n optionsContainer.innerHTML = '';\n question.options.forEach((option, index) => {\n const optionDiv = document.createElement('div');\n optionDiv.className = 'quiz-option p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-blue-50';\n optionDiv.setAttribute('data-option', index);\n \n const content = document.createElement('div');\n content.className = 'flex items-start';\n \n const letter = document.createElement('span');\n letter.className = 'font-bold mr-2';\n letter.textContent = String.fromCharCode(65 + index) + '.';\n \n const text = document.createElement('span');\n text.textContent = option;\n \n content.appendChild(letter);\n content.appendChild(text);\n optionDiv.appendChild(content);\n \n optionsContainer.appendChild(optionDiv);\n \n optionDiv.addEventListener('click', () => selectOption(index));\n });\n \n currentQuestionEl.textContent = currentQuestionIndex + 1;\n totalQuestionsEl.textContent = questions.length;\n \n progressBar.style.width = `${((currentQuestionIndex + 1) \/ questions.length) * 100}%`;\n \n prevBtn.disabled = currentQuestionIndex === 0;\n nextBtn.disabled = !answeredQuestions[currentQuestionIndex];\n \n feedbackContainer.classList.add('hidden');\n correctFeedback.classList.add('hidden');\n incorrectFeedback.classList.add('hidden');\n \n \/\/ If question was already answered, show the selected option\n if (answeredQuestions[currentQuestionIndex]) {\n const options = document.querySelectorAll('.quiz-option');\n const correctOption = questions[currentQuestionIndex].correctAnswer;\n \n options.forEach((option, index) => {\n if (index === correctOption) {\n option.classList.add('correct');\n }\n });\n \n feedbackContainer.classList.remove('hidden');\n correctFeedback.classList.remove('hidden');\n correctExplanation.textContent = questions[currentQuestionIndex].explanation;\n }\n }\n \n function selectOption(optionIndex) {\n if (answeredQuestions[currentQuestionIndex]) return;\n \n const options = document.querySelectorAll('.quiz-option');\n const correctOption = questions[currentQuestionIndex].correctAnswer;\n \n options.forEach(option => option.classList.remove('selected', 'correct', 'incorrect'));\n \n options[optionIndex].classList.add('selected');\n \n feedbackContainer.classList.remove('hidden');\n \n if (optionIndex === correctOption) {\n options[optionIndex].classList.add('correct');\n correctFeedback.classList.remove('hidden');\n incorrectFeedback.classList.add('hidden');\n correctExplanation.textContent = questions[currentQuestionIndex].explanation;\n score++;\n scoreEl.textContent = score;\n } else {\n options[optionIndex].classList.add('incorrect');\n options[correctOption].classList.add('correct');\n correctFeedback.classList.add('hidden');\n incorrectFeedback.classList.remove('hidden');\n incorrectExplanation.textContent = questions[currentQuestionIndex].explanation;\n }\n \n answeredQuestions[currentQuestionIndex] = true;\n nextBtn.disabled = false;\n \n \/\/ Check if all questions are answered\n if (answeredQuestions.every(answered => answered)) {\n showResults();\n }\n }\n \n function showResults() {\n quizContainer.classList.add('hidden');\n quizResults.classList.remove('hidden');\n \n finalScoreEl.textContent = score;\n maxScoreEl.textContent = questions.length;\n \n let message = '';\n const percentage = (score \/ questions.length) * 100;\n \n if (percentage === 100) {\n message = 'Sempurna! Anda menguasai konsep persamaan dasar akuntansi dengan sangat baik.';\n } else if (percentage >= 80) {\n message = 'Sangat bagus! Anda memiliki pemahaman yang kuat tentang persamaan dasar akuntansi.';\n } else if (percentage >= 60) {\n message = 'Bagus! Anda memahami dasar-dasar persamaan akuntansi, namun masih perlu sedikit perbaikan.';\n } else if (percentage >= 40) {\n message = 'Cukup baik. Anda memiliki pemahaman dasar, tetapi perlu lebih banyak latihan.';\n } else {\n message = 'Teruslah berlatih. Konsep persamaan dasar akuntansi membutuhkan waktu untuk dipahami dengan baik.';\n }\n \n scoreMessageEl.textContent = message;\n \n \/\/ Create confetti effect for good scores\n if (percentage >= 60) {\n createConfetti();\n }\n }\n \n function createConfetti() {\n const confettiContainer = document.createElement('div');\n confettiContainer.style.position = 'absolute';\n confettiContainer.style.top = '0';\n confettiContainer.style.left = '0';\n confettiContainer.style.width = '100%';\n confettiContainer.style.height = '100%';\n confettiContainer.style.pointerEvents = 'none';\n confettiContainer.style.zIndex = '1000';\n document.body.appendChild(confettiContainer);\n \n const colors = ['#f59e0b', '#3b82f6', '#10b981', '#ef4444', '#8b5cf6'];\n \n for (let i = 0; i < 100; i++) {\n const confetti = document.createElement('div');\n confetti.className = 'confetti';\n confetti.style.left = Math.random() * 100 + '%';\n confetti.style.top = -10 + 'px';\n confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\n confetti.style.width = Math.random() * 10 + 5 + 'px';\n confetti.style.height = Math.random() * 10 + 5 + 'px';\n confetti.style.opacity = '1';\n confetti.style.position = 'absolute';\n confettiContainer.appendChild(confetti);\n \n const animationDuration = Math.random() * 3 + 2;\n const animationDelay = Math.random() * 2;\n \n confetti.style.animation = `fall ${animationDuration}s ease-in ${animationDelay}s forwards`;\n \n \/\/ Add keyframes for falling animation\n const style = document.createElement('style');\n style.innerHTML = `\n @keyframes fall {\n 0% { transform: translateY(0) rotate(0deg); opacity: 1; }\n 100% { transform: translateY(${window.innerHeight}px) rotate(${Math.random() * 360}deg); opacity: 0; }\n }\n `;\n document.head.appendChild(style);\n \n \/\/ Remove confetti after animation\n setTimeout(() => {\n confetti.remove();\n if (i === 99) {\n confettiContainer.remove();\n }\n }, (animationDuration + animationDelay) * 1000);\n }\n }\n \n prevBtn.addEventListener('click', () => {\n if (currentQuestionIndex > 0) {\n currentQuestionIndex--;\n loadQuestion();\n }\n });\n \n nextBtn.addEventListener('click', () => {\n if (currentQuestionIndex < questions.length - 1) {\n currentQuestionIndex++;\n loadQuestion();\n } else {\n showResults();\n }\n });\n \n restartQuizBtn.addEventListener('click', () => {\n currentQuestionIndex = 0;\n score = 0;\n answeredQuestions = new Array(questions.length).fill(false);\n scoreEl.textContent = score;\n \n quizResults.classList.add('hidden');\n quizContainer.classList.remove('hidden');\n \n loadQuestion();\n });\n \n \/\/ Initialize quiz\n loadQuestion();\n \n \/\/ Add event listeners to quiz options\n document.querySelectorAll('.quiz-option').forEach(option => {\n option.addEventListener('click', () => {\n const optionIndex = parseInt(option.getAttribute('data-option'));\n selectOption(optionIndex);\n });\n });\n <\/script>\n<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'961272e9f26d7d69',t:'MTc1Mjg0NjYzNC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Media Pembelajaran Persamaan Dasar Akuntansi Persamaan Dasar Akuntansi Media Pembelajaran Interaktif Konsep Dasar Visualisasi Contoh Transaksi Latihan Soal Persamaan Dasar […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1736","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/smkn1kerumutan.sch.id\/index.php\/wp-json\/wp\/v2\/pages\/1736"}],"collection":[{"href":"https:\/\/smkn1kerumutan.sch.id\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smkn1kerumutan.sch.id\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smkn1kerumutan.sch.id\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smkn1kerumutan.sch.id\/index.php\/wp-json\/wp\/v2\/comments?post=1736"}],"version-history":[{"count":2,"href":"https:\/\/smkn1kerumutan.sch.id\/index.php\/wp-json\/wp\/v2\/pages\/1736\/revisions"}],"predecessor-version":[{"id":1738,"href":"https:\/\/smkn1kerumutan.sch.id\/index.php\/wp-json\/wp\/v2\/pages\/1736\/revisions\/1738"}],"wp:attachment":[{"href":"https:\/\/smkn1kerumutan.sch.id\/index.php\/wp-json\/wp\/v2\/media?parent=1736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1736,"date":"2025-07-18T14:03:47","date_gmt":"2025-07-18T14:03:47","guid":{"rendered":"https:\/\/smkn1kerumutan.sch.id\/?page_id=1736"},"modified":"2025-07-18T14:54:51","modified_gmt":"2025-07-18T14:54:51","slug":"coba","status":"publish","type":"page","link":"https:\/\/smkn1kerumutan.sch.id\/index.php\/coba\/","title":{"rendered":"coba"},"content":{"rendered":"\n\n\n\n \n \n Media Pembelajaran Persamaan Dasar Akuntansi<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap');\n \n body {\n font-family: 'Poppins', sans-serif;\n background-color: #f0f9ff;\n }\n \n .equation-box {\n transition: all 0.3s ease;\n }\n \n .equation-box:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n }\n \n .tab-content {\n display: none;\n }\n \n .tab-content.active {\n display: block;\n animation: fadeIn 0.5s ease-in-out;\n }\n \n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \n .balance-scale {\n position: relative;\n }\n \n .scale-beam {\n height: 10px;\n background-color: #334155;\n transform-origin: center;\n transition: transform 0.5s ease;\n }\n \n .scale-stand {\n width: 10px;\n background-color: #334155;\n }\n \n .scale-plate {\n border-radius: 50%;\n transition: transform 0.5s ease;\n }\n \n .transaction-card {\n transition: all 0.3s ease;\n }\n \n .transaction-card:hover {\n transform: translateY(-3px);\n }\n \n .quiz-option {\n transition: all 0.2s ease;\n }\n \n .quiz-option:hover:not(.selected) {\n background-color: #e0f2fe;\n }\n \n .quiz-option.selected {\n background-color: #0ea5e9;\n color: white;\n }\n \n .quiz-option.correct {\n background-color: #22c55e;\n color: white;\n }\n \n .quiz-option.incorrect {\n background-color: #ef4444;\n color: white;\n }\n \n .confetti {\n position: absolute;\n width: 10px;\n height: 10px;\n background-color: #f59e0b;\n opacity: 0;\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen\">\n <header class=\"bg-gradient-to-r from-blue-600 to-cyan-500 text-white py-6 px-4 shadow-lg\">\n <div class=\"container mx-auto\">\n <h1 class=\"text-3xl md:text-4xl font-bold text-center\">Persamaan Dasar Akuntansi<\/h1>\n <p class=\"text-center mt-2 text-blue-100\">Media Pembelajaran Interaktif<\/p>\n <\/div>\n <\/header>\n\n <main class=\"container mx-auto px-4 py-8\">\n \n <div class=\"flex flex-wrap justify-center mb-8 gap-2\">\n <button class=\"tab-btn bg-blue-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-600 transition active\" data-tab=\"konsep\">\n Konsep Dasar\n <\/button>\n <button class=\"tab-btn bg-blue-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-600 transition\" data-tab=\"visualisasi\">\n Visualisasi\n <\/button>\n <button class=\"tab-btn bg-blue-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-600 transition\" data-tab=\"contoh\">\n Contoh Transaksi\n <\/button>\n <button class=\"tab-btn bg-blue-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-600 transition\" data-tab=\"latihan\">\n Latihan Soal\n <\/button>\n <\/div>\n\n \n <div id=\"konsep\" class=\"tab-content active\">\n <div class=\"bg-white rounded-xl shadow-md p-6 mb-8\">\n <h2 class=\"text-2xl font-bold text-blue-700 mb-4\">Persamaan Dasar Akuntansi<\/h2>\n <p class=\"mb-4\">Persamaan dasar akuntansi adalah fondasi dari seluruh sistem akuntansi. Persamaan ini menunjukkan hubungan antara aset, liabilitas, dan ekuitas pemilik.<\/p>\n \n <div class=\"equation-box bg-gradient-to-r from-blue-50 to-cyan-50 p-6 rounded-xl border border-blue-200 my-6 text-center\">\n <h3 class=\"text-3xl font-bold text-blue-800 mb-2\">ASET = LIABILITAS + EKUITAS<\/h3>\n <p class=\"text-gray-600\">Persamaan ini selalu dalam keadaan seimbang<\/p>\n <\/div>\n \n <div class=\"grid md:grid-cols-3 gap-6 mt-8\">\n <div class=\"bg-blue-50 p-5 rounded-lg border-l-4 border-blue-500\">\n <h4 class=\"font-bold text-xl text-blue-700 mb-2\">Aset<\/h4>\n <p>Sumber daya yang dimiliki perusahaan yang memiliki nilai ekonomi.<\/p>\n <p class=\"mt-2 text-sm text-gray-600\">Contoh: Kas, Piutang, Persediaan, Peralatan<\/p>\n <\/div>\n \n <div class=\"bg-purple-50 p-5 rounded-lg border-l-4 border-purple-500\">\n <h4 class=\"font-bold text-xl text-purple-700 mb-2\">Liabilitas<\/h4>\n <p>Kewajiban atau hutang perusahaan kepada pihak lain.<\/p>\n <p class=\"mt-2 text-sm text-gray-600\">Contoh: Hutang Usaha, Hutang Bank, Hutang Pajak<\/p>\n <\/div>\n \n <div class=\"bg-green-50 p-5 rounded-lg border-l-4 border-green-500\">\n <h4 class=\"font-bold text-xl text-green-700 mb-2\">Ekuitas<\/h4>\n <p>Hak atau klaim pemilik atas aset perusahaan.<\/p>\n <p class=\"mt-2 text-sm text-gray-600\">Contoh: Modal Pemilik, Laba Ditahan<\/p>\n <\/div>\n <\/div>\n \n <div class=\"mt-8 bg-yellow-50 p-5 rounded-lg border-l-4 border-yellow-500\">\n <h4 class=\"font-bold text-xl text-yellow-700 mb-2\">Prinsip Penting<\/h4>\n <p>Setiap transaksi bisnis akan mempengaruhi persamaan akuntansi, namun persamaan akan tetap seimbang.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"visualisasi\" class=\"tab-content\">\n <div class=\"bg-white rounded-xl shadow-md p-6 mb-8\">\n <h2 class=\"text-2xl font-bold text-blue-700 mb-4\">Visualisasi Persamaan Akuntansi<\/h2>\n \n <div class=\"balance-scale my-12 flex flex-col items-center\">\n <div class=\"scale-beam w-3\/4 rounded-full relative\" id=\"scale-beam\">\n <div class=\"scale-plate bg-blue-100 border-2 border-blue-500 w-32 h-32 absolute -top-16 -left-16 flex items-center justify-center flex-col shadow-lg\" id=\"left-plate\">\n <span class=\"text-lg font-bold text-blue-700\">ASET<\/span>\n <span class=\"text-2xl font-bold\" id=\"asset-value\">10.000<\/span>\n <\/div>\n <div class=\"scale-plate bg-purple-100 border-2 border-purple-500 w-32 h-32 absolute -top-16 -right-16 flex items-center justify-center flex-col shadow-lg\" id=\"right-plate\">\n <div class=\"text-center\">\n <span class=\"text-lg font-bold text-purple-700\">LIABILITAS<\/span>\n <span class=\"text-2xl font-bold\" id=\"liability-value\">6.000<\/span>\n <\/div>\n <div class=\"border-t border-gray-300 w-full my-1\"><\/div>\n <div class=\"text-center\">\n <span class=\"text-lg font-bold text-green-700\">EKUITAS<\/span>\n <span class=\"text-2xl font-bold\" id=\"equity-value\">4.000<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"scale-stand h-32 mx-auto rounded-b-lg\"><\/div>\n <\/div>\n \n <div class=\"mt-8 flex flex-wrap justify-center gap-4\">\n <div class=\"control-panel bg-gray-50 p-4 rounded-lg shadow w-full md:w-auto\">\n <h3 class=\"font-bold text-gray-700 mb-3\">Ubah Nilai:<\/h3>\n <div class=\"grid grid-cols-3 gap-3\">\n <div>\n <label class=\"block text-sm text-gray-600 mb-1\">Aset<\/label>\n <input type=\"number\" id=\"asset-input\" value=\"10000\" min=\"0\" class=\"w-full p-2 border rounded\">\n <\/div>\n <div>\n <label class=\"block text-sm text-gray-600 mb-1\">Liabilitas<\/label>\n <input type=\"number\" id=\"liability-input\" value=\"6000\" min=\"0\" class=\"w-full p-2 border rounded\">\n <\/div>\n <div>\n <label class=\"block text-sm text-gray-600 mb-1\">Ekuitas<\/label>\n <input type=\"number\" id=\"equity-input\" value=\"4000\" min=\"0\" class=\"w-full p-2 border rounded\">\n <\/div>\n <\/div>\n <div class=\"mt-3 flex justify-between\">\n <button id=\"update-values\" class=\"bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition\">\n Perbarui\n <\/button>\n <button id=\"reset-values\" class=\"bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 transition\">\n Reset\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"mt-8 bg-blue-50 p-5 rounded-lg\">\n <h3 class=\"font-bold text-xl text-blue-700 mb-2\">Penjelasan<\/h3>\n <p>Visualisasi di atas menunjukkan bagaimana persamaan akuntansi selalu dalam keadaan seimbang. Ketika nilai aset, liabilitas, atau ekuitas berubah, persamaan tetap harus seimbang.<\/p>\n <p class=\"mt-2\">Cobalah mengubah nilai-nilai di atas dan perhatikan bagaimana timbangan akan miring jika persamaan tidak seimbang.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"contoh\" class=\"tab-content\">\n <div class=\"bg-white rounded-xl shadow-md p-6 mb-8\">\n <h2 class=\"text-2xl font-bold text-blue-700 mb-4\">Contoh Transaksi dan Pengaruhnya<\/h2>\n \n <div class=\"mb-6\">\n <p class=\"mb-4\">Berikut adalah beberapa contoh transaksi dan bagaimana transaksi tersebut mempengaruhi persamaan akuntansi:<\/p>\n \n <div class=\"overflow-x-auto\">\n <table class=\"min-w-full bg-white border border-gray-200 mb-6\">\n <thead>\n <tr class=\"bg-blue-100\">\n <th class=\"py-3 px-4 border-b text-left\">Transaksi<\/th>\n <th class=\"py-3 px-4 border-b text-center\">Aset<\/th>\n <th class=\"py-3 px-4 border-b text-center\">Liabilitas<\/th>\n <th class=\"py-3 px-4 border-b text-center\">Ekuitas<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td class=\"py-3 px-4 border-b\">Pemilik menyetor modal Rp 50.000.000<\/td>\n <td class=\"py-3 px-4 border-b text-center\">+Rp 50.000.000 (Kas)<\/td>\n <td class=\"py-3 px-4 border-b text-center\">Tidak berubah<\/td>\n <td class=\"py-3 px-4 border-b text-center\">+Rp 50.000.000 (Modal)<\/td>\n <\/tr>\n <tr>\n <td class=\"py-3 px-4 border-b\">Membeli peralatan Rp 15.000.000 secara tunai<\/td>\n <td class=\"py-3 px-4 border-b text-center\">+Rp 15.000.000 (Peralatan)<br>-Rp 15.000.000 (Kas)<\/td>\n <td class=\"py-3 px-4 border-b text-center\">Tidak berubah<\/td>\n <td class=\"py-3 px-4 border-b text-center\">Tidak berubah<\/td>\n <\/tr>\n <tr>\n <td class=\"py-3 px-4 border-b\">Membeli persediaan Rp 10.000.000 secara kredit<\/td>\n <td class=\"py-3 px-4 border-b text-center\">+Rp 10.000.000 (Persediaan)<\/td>\n <td class=\"py-3 px-4 border-b text-center\">+Rp 10.000.000 (Hutang Usaha)<\/td>\n <td class=\"py-3 px-4 border-b text-center\">Tidak berubah<\/td>\n <\/tr>\n <tr>\n <td class=\"py-3 px-4 border-b\">Membayar hutang Rp 5.000.000<\/td>\n <td class=\"py-3 px-4 border-b text-center\">-Rp 5.000.000 (Kas)<\/td>\n <td class=\"py-3 px-4 border-b text-center\">-Rp 5.000.000 (Hutang Usaha)<\/td>\n <td class=\"py-3 px-4 border-b text-center\">Tidak berubah<\/td>\n <\/tr>\n <tr>\n <td class=\"py-3 px-4 border-b\">Menerima pendapatan jasa Rp 8.000.000<\/td>\n <td class=\"py-3 px-4 border-b text-center\">+Rp 8.000.000 (Kas)<\/td>\n <td class=\"py-3 px-4 border-b text-center\">Tidak berubah<\/td>\n <td class=\"py-3 px-4 border-b text-center\">+Rp 8.000.000 (Pendapatan)<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n \n <div class=\"mt-8\">\n <h3 class=\"text-xl font-bold text-blue-700 mb-4\">Simulasi Transaksi<\/h3>\n \n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-6\">\n <div class=\"bg-blue-50 p-4 rounded-lg shadow\">\n <h4 class=\"font-bold text-blue-700\">Aset<\/h4>\n <div class=\"mt-2\">\n <p>Kas: <span id=\"sim-cash\" class=\"font-bold\">50,000<\/span><\/p>\n <p>Peralatan: <span id=\"sim-equipment\" class=\"font-bold\">0<\/span><\/p>\n <p>Persediaan: <span id=\"sim-inventory\" class=\"font-bold\">0<\/span><\/p>\n <\/div>\n <div class=\"mt-2 pt-2 border-t border-blue-200\">\n <p>Total Aset: <span id=\"sim-total-assets\" class=\"font-bold\">50,000<\/span><\/p>\n <\/div>\n <\/div>\n \n <div class=\"bg-purple-50 p-4 rounded-lg shadow\">\n <h4 class=\"font-bold text-purple-700\">Liabilitas<\/h4>\n <div class=\"mt-2\">\n <p>Hutang Usaha: <span id=\"sim-accounts-payable\" class=\"font-bold\">0<\/span><\/p>\n <\/div>\n <div class=\"mt-2 pt-2 border-t border-purple-200\">\n <p>Total Liabilitas: <span id=\"sim-total-liabilities\" class=\"font-bold\">0<\/span><\/p>\n <\/div>\n <\/div>\n \n <div class=\"bg-green-50 p-4 rounded-lg shadow\">\n <h4 class=\"font-bold text-green-700\">Ekuitas<\/h4>\n <div class=\"mt-2\">\n <p>Modal: <span id=\"sim-capital\" class=\"font-bold\">50,000<\/span><\/p>\n <p>Pendapatan: <span id=\"sim-revenue\" class=\"font-bold\">0<\/span><\/p>\n <\/div>\n <div class=\"mt-2 pt-2 border-t border-green-200\">\n <p>Total Ekuitas: <span id=\"sim-total-equity\" class=\"font-bold\">50,000<\/span><\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"flex justify-center mb-6\">\n <div class=\"equation-box bg-gradient-to-r from-blue-50 to-cyan-50 p-4 rounded-xl border border-blue-200 text-center w-full md:w-2\/3\">\n <h3 class=\"text-xl font-bold text-blue-800\">\n <span id=\"sim-total-assets-eq\">50,000<\/span> = \n <span id=\"sim-total-liabilities-eq\">0<\/span> + \n <span id=\"sim-total-equity-eq\">50,000<\/span>\n <\/h3>\n <\/div>\n <\/div>\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n <div class=\"transaction-card bg-white p-4 rounded-lg shadow border border-gray-200 hover:border-blue-300\">\n <h4 class=\"font-bold text-gray-800 mb-2\">Beli Peralatan Tunai<\/h4>\n <p class=\"text-sm text-gray-600 mb-3\">Membeli peralatan seharga Rp 10.000 secara tunai<\/p>\n <button class=\"sim-transaction bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600 transition w-full\" data-transaction=\"buy-equipment\">\n Lakukan Transaksi\n <\/button>\n <\/div>\n \n <div class=\"transaction-card bg-white p-4 rounded-lg shadow border border-gray-200 hover:border-blue-300\">\n <h4 class=\"font-bold text-gray-800 mb-2\">Beli Persediaan Kredit<\/h4>\n <p class=\"text-sm text-gray-600 mb-3\">Membeli persediaan seharga Rp 15.000 secara kredit<\/p>\n <button class=\"sim-transaction bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600 transition w-full\" data-transaction=\"buy-inventory-credit\">\n Lakukan Transaksi\n <\/button>\n <\/div>\n \n <div class=\"transaction-card bg-white p-4 rounded-lg shadow border border-gray-200 hover:border-blue-300\">\n <h4 class=\"font-bold text-gray-800 mb-2\">Bayar Hutang<\/h4>\n <p class=\"text-sm text-gray-600 mb-3\">Membayar hutang usaha sebesar Rp 5.000<\/p>\n <button class=\"sim-transaction bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600 transition w-full\" data-transaction=\"pay-debt\">\n Lakukan Transaksi\n <\/button>\n <\/div>\n \n <div class=\"transaction-card bg-white p-4 rounded-lg shadow border border-gray-200 hover:border-blue-300\">\n <h4 class=\"font-bold text-gray-800 mb-2\">Terima Pendapatan<\/h4>\n <p class=\"text-sm text-gray-600 mb-3\">Menerima pendapatan jasa sebesar Rp 8.000<\/p>\n <button class=\"sim-transaction bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600 transition w-full\" data-transaction=\"receive-revenue\">\n Lakukan Transaksi\n <\/button>\n <\/div>\n \n <div class=\"transaction-card bg-white p-4 rounded-lg shadow border border-gray-200 hover:border-blue-300\">\n <h4 class=\"font-bold text-gray-800 mb-2\">Tambah Modal<\/h4>\n <p class=\"text-sm text-gray-600 mb-3\">Pemilik menambah modal sebesar Rp 20.000<\/p>\n <button class=\"sim-transaction bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600 transition w-full\" data-transaction=\"add-capital\">\n Lakukan Transaksi\n <\/button>\n <\/div>\n \n <div class=\"transaction-card bg-white p-4 rounded-lg shadow border border-gray-200 hover:border-blue-300\">\n <h4 class=\"font-bold text-gray-800 mb-2\">Reset Simulasi<\/h4>\n <p class=\"text-sm text-gray-600 mb-3\">Mengembalikan simulasi ke kondisi awal<\/p>\n <button class=\"bg-gray-500 text-white px-3 py-1 rounded hover:bg-gray-600 transition w-full\" id=\"reset-simulation\">\n Reset\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"latihan\" class=\"tab-content\">\n <div class=\"bg-white rounded-xl shadow-md p-6 mb-8\">\n <h2 class=\"text-2xl font-bold text-blue-700 mb-4\">Latihan Soal Interaktif<\/h2>\n \n <div id=\"quiz-container\">\n <div class=\"mb-6\">\n <div class=\"flex justify-between items-center\">\n <h3 class=\"text-xl font-bold text-gray-800\">Soal <span id=\"current-question\">1<\/span> dari <span id=\"total-questions\">5<\/span><\/h3>\n <div class=\"bg-blue-100 text-blue-800 px-3 py-1 rounded-full\">\n Skor: <span id=\"score\">0<\/span>\n <\/div>\n <\/div>\n <div class=\"w-full bg-gray-200 rounded-full h-2.5 mt-2\">\n <div class=\"bg-blue-600 h-2.5 rounded-full\" id=\"progress-bar\" style=\"width: 20%\"><\/div>\n <\/div>\n <\/div>\n \n <div id=\"question-container\" class=\"mb-6\">\n <p id=\"question-text\" class=\"text-lg font-medium mb-4\">Jika perusahaan membeli peralatan seharga Rp 5.000.000 secara tunai, bagaimana pengaruhnya terhadap persamaan akuntansi?<\/p>\n \n <div class=\"grid gap-3\" id=\"options-container\">\n <div class=\"quiz-option p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-blue-50\" data-option=\"a\">\n <div class=\"flex items-start\">\n <span class=\"font-bold mr-2\">A.<\/span>\n <span>Aset bertambah Rp 5.000.000, Ekuitas bertambah Rp 5.000.000<\/span>\n <\/div>\n <\/div>\n <div class=\"quiz-option p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-blue-50\" data-option=\"b\">\n <div class=\"flex items-start\">\n <span class=\"font-bold mr-2\">B.<\/span>\n <span>Aset tidak berubah (Kas berkurang, Peralatan bertambah), Liabilitas dan Ekuitas tidak berubah<\/span>\n <\/div>\n <\/div>\n <div class=\"quiz-option p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-blue-50\" data-option=\"c\">\n <div class=\"flex items-start\">\n <span class=\"font-bold mr-2\">C.<\/span>\n <span>Aset bertambah Rp 5.000.000, Liabilitas bertambah Rp 5.000.000<\/span>\n <\/div>\n <\/div>\n <div class=\"quiz-option p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-blue-50\" data-option=\"d\">\n <div class=\"flex items-start\">\n <span class=\"font-bold mr-2\">D.<\/span>\n <span>Aset berkurang Rp 5.000.000, Ekuitas berkurang Rp 5.000.000<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div id=\"feedback-container\" class=\"mb-6 hidden\">\n <div id=\"correct-feedback\" class=\"bg-green-100 border-l-4 border-green-500 text-green-700 p-4 hidden\">\n <p class=\"font-bold\">Benar!<\/p>\n <p id=\"correct-explanation\"><\/p>\n <\/div>\n <div id=\"incorrect-feedback\" class=\"bg-red-100 border-l-4 border-red-500 text-red-700 p-4 hidden\">\n <p class=\"font-bold\">Kurang tepat<\/p>\n <p id=\"incorrect-explanation\"><\/p>\n <\/div>\n <\/div>\n \n <div class=\"flex justify-between\">\n <button id=\"prev-btn\" class=\"bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 transition disabled:opacity-50 disabled:cursor-not-allowed\" disabled>\n Sebelumnya\n <\/button>\n <button id=\"next-btn\" class=\"bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition disabled:opacity-50 disabled:cursor-not-allowed\" disabled>\n Selanjutnya\n <\/button>\n <\/div>\n <\/div>\n \n <div id=\"quiz-results\" class=\"hidden text-center py-8\">\n <div class=\"mb-6\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-24 w-24 mx-auto text-green-500\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n <\/svg>\n <\/div>\n <h3 class=\"text-2xl font-bold text-gray-800 mb-2\">Latihan Selesai!<\/h3>\n <p class=\"text-lg mb-4\">Skor Anda: <span id=\"final-score\" class=\"font-bold text-blue-600\">0<\/span> dari <span id=\"max-score\">5<\/span><\/p>\n <div id=\"score-message\" class=\"text-lg mb-6\"><\/div>\n <button id=\"restart-quiz\" class=\"bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition\">\n Coba Lagi\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n <footer class=\"bg-gray-800 text-white py-6 px-4\">\n <div class=\"container mx-auto text-center\">\n <p>Media Pembelajaran Persamaan Dasar Akuntansi<\/p>\n <p class=\"text-sm text-gray-400 mt-2\">\u00a9 2023 Media Pembelajaran Interaktif<\/p>\n <\/div>\n <\/footer>\n\n <script>\n \/\/ Tab Navigation\n const tabBtns = document.querySelectorAll('.tab-btn');\n const tabContents = document.querySelectorAll('.tab-content');\n \n tabBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n const tabId = btn.getAttribute('data-tab');\n \n tabBtns.forEach(b => b.classList.remove('active', 'bg-blue-600'));\n tabContents.forEach(c => c.classList.remove('active'));\n \n btn.classList.add('active', 'bg-blue-600');\n document.getElementById(tabId).classList.add('active');\n });\n });\n \n \/\/ Visualisasi Persamaan\n const assetInput = document.getElementById('asset-input');\n const liabilityInput = document.getElementById('liability-input');\n const equityInput = document.getElementById('equity-input');\n const updateBtn = document.getElementById('update-values');\n const resetBtn = document.getElementById('reset-values');\n const scaleBeam = document.getElementById('scale-beam');\n const leftPlate = document.getElementById('left-plate');\n const rightPlate = document.getElementById('right-plate');\n const assetValue = document.getElementById('asset-value');\n const liabilityValue = document.getElementById('liability-value');\n const equityValue = document.getElementById('equity-value');\n \n function updateScale() {\n const asset = parseInt(assetInput.value) || 0;\n const liability = parseInt(liabilityInput.value) || 0;\n const equity = parseInt(equityInput.value) || 0;\n \n assetValue.textContent = asset.toLocaleString();\n liabilityValue.textContent = liability.toLocaleString();\n equityValue.textContent = equity.toLocaleString();\n \n const rightSide = liability + equity;\n \n if (asset === rightSide) {\n scaleBeam.style.transform = 'rotate(0deg)';\n leftPlate.style.transform = 'translateY(0)';\n rightPlate.style.transform = 'translateY(0)';\n } else if (asset > rightSide) {\n const angle = Math.min(10, (asset - rightSide) \/ 1000);\n scaleBeam.style.transform = `rotate(${angle}deg)`;\n leftPlate.style.transform = `translateY(${angle * 3}px)`;\n rightPlate.style.transform = `translateY(-${angle * 3}px)`;\n } else {\n const angle = Math.min(10, (rightSide - asset) \/ 1000);\n scaleBeam.style.transform = `rotate(-${angle}deg)`;\n leftPlate.style.transform = `translateY(-${angle * 3}px)`;\n rightPlate.style.transform = `translateY(${angle * 3}px)`;\n }\n }\n \n updateBtn.addEventListener('click', updateScale);\n \n resetBtn.addEventListener('click', () => {\n assetInput.value = 10000;\n liabilityInput.value = 6000;\n equityInput.value = 4000;\n updateScale();\n });\n \n \/\/ Initialize scale\n updateScale();\n \n \/\/ Simulasi Transaksi\n const simCash = document.getElementById('sim-cash');\n const simEquipment = document.getElementById('sim-equipment');\n const simInventory = document.getElementById('sim-inventory');\n const simAccountsPayable = document.getElementById('sim-accounts-payable');\n const simCapital = document.getElementById('sim-capital');\n const simRevenue = document.getElementById('sim-revenue');\n const simTotalAssets = document.getElementById('sim-total-assets');\n const simTotalLiabilities = document.getElementById('sim-total-liabilities');\n const simTotalEquity = document.getElementById('sim-total-equity');\n const simTotalAssetsEq = document.getElementById('sim-total-assets-eq');\n const simTotalLiabilitiesEq = document.getElementById('sim-total-liabilities-eq');\n const simTotalEquityEq = document.getElementById('sim-total-equity-eq');\n \n const transactionBtns = document.querySelectorAll('.sim-transaction');\n const resetSimBtn = document.getElementById('reset-simulation');\n \n let simulation = {\n cash: 50000,\n equipment: 0,\n inventory: 0,\n accountsPayable: 0,\n capital: 50000,\n revenue: 0\n };\n \n function updateSimulation() {\n simCash.textContent = simulation.cash.toLocaleString();\n simEquipment.textContent = simulation.equipment.toLocaleString();\n simInventory.textContent = simulation.inventory.toLocaleString();\n simAccountsPayable.textContent = simulation.accountsPayable.toLocaleString();\n simCapital.textContent = simulation.capital.toLocaleString();\n simRevenue.textContent = simulation.revenue.toLocaleString();\n \n const totalAssets = simulation.cash + simulation.equipment + simulation.inventory;\n const totalLiabilities = simulation.accountsPayable;\n const totalEquity = simulation.capital + simulation.revenue;\n \n simTotalAssets.textContent = totalAssets.toLocaleString();\n simTotalLiabilities.textContent = totalLiabilities.toLocaleString();\n simTotalEquity.textContent = totalEquity.toLocaleString();\n \n simTotalAssetsEq.textContent = totalAssets.toLocaleString();\n simTotalLiabilitiesEq.textContent = totalLiabilities.toLocaleString();\n simTotalEquityEq.textContent = totalEquity.toLocaleString();\n }\n \n transactionBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n const transaction = btn.getAttribute('data-transaction');\n \n switch (transaction) {\n case 'buy-equipment':\n simulation.cash -= 10000;\n simulation.equipment += 10000;\n break;\n case 'buy-inventory-credit':\n simulation.inventory += 15000;\n simulation.accountsPayable += 15000;\n break;\n case 'pay-debt':\n if (simulation.accountsPayable >= 5000) {\n simulation.cash -= 5000;\n simulation.accountsPayable -= 5000;\n }\n break;\n case 'receive-revenue':\n simulation.cash += 8000;\n simulation.revenue += 8000;\n break;\n case 'add-capital':\n simulation.cash += 20000;\n simulation.capital += 20000;\n break;\n }\n \n updateSimulation();\n });\n });\n \n resetSimBtn.addEventListener('click', () => {\n simulation = {\n cash: 50000,\n equipment: 0,\n inventory: 0,\n accountsPayable: 0,\n capital: 50000,\n revenue: 0\n };\n updateSimulation();\n });\n \n \/\/ Initialize simulation\n updateSimulation();\n \n \/\/ Quiz Logic\n const questions = [\n {\n question: \"Jika perusahaan membeli peralatan seharga Rp 5.000.000 secara tunai, bagaimana pengaruhnya terhadap persamaan akuntansi?\",\n options: [\n \"Aset bertambah Rp 5.000.000, Ekuitas bertambah Rp 5.000.000\",\n \"Aset tidak berubah (Kas berkurang, Peralatan bertambah), Liabilitas dan Ekuitas tidak berubah\",\n \"Aset bertambah Rp 5.000.000, Liabilitas bertambah Rp 5.000.000\",\n \"Aset berkurang Rp 5.000.000, Ekuitas berkurang Rp 5.000.000\"\n ],\n correctAnswer: 1,\n explanation: \"Ketika membeli peralatan secara tunai, kas berkurang dan peralatan bertambah dengan jumlah yang sama. Total aset tidak berubah, hanya terjadi perubahan komposisi aset.\"\n },\n {\n question: \"Perusahaan menerima pendapatan jasa sebesar Rp 3.000.000 secara tunai. Bagaimana pengaruhnya terhadap persamaan akuntansi?\",\n options: [\n \"Aset bertambah Rp 3.000.000, Ekuitas bertambah Rp 3.000.000\",\n \"Aset bertambah Rp 3.000.000, Liabilitas bertambah Rp 3.000.000\",\n \"Aset tidak berubah, Ekuitas bertambah Rp 3.000.000\",\n \"Aset bertambah Rp 3.000.000, Ekuitas berkurang Rp 3.000.000\"\n ],\n correctAnswer: 0,\n explanation: \"Ketika menerima pendapatan jasa secara tunai, kas (aset) bertambah dan pendapatan (bagian dari ekuitas) juga bertambah dengan jumlah yang sama.\"\n },\n {\n question: \"Perusahaan membeli persediaan barang dagang seharga Rp 8.000.000 secara kredit. Bagaimana pengaruhnya terhadap persamaan akuntansi?\",\n options: [\n \"Aset bertambah Rp 8.000.000, Ekuitas bertambah Rp 8.000.000\",\n \"Aset bertambah Rp 8.000.000, Liabilitas bertambah Rp 8.000.000\",\n \"Aset tidak berubah, Liabilitas bertambah Rp 8.000.000\",\n \"Aset berkurang Rp 8.000.000, Liabilitas berkurang Rp 8.000.000\"\n ],\n correctAnswer: 1,\n explanation: \"Ketika membeli persediaan secara kredit, persediaan (aset) bertambah dan hutang usaha (liabilitas) juga bertambah dengan jumlah yang sama.\"\n },\n {\n question: \"Pemilik perusahaan mengambil uang kas sebesar Rp 2.000.000 untuk keperluan pribadi (prive). Bagaimana pengaruhnya terhadap persamaan akuntansi?\",\n options: [\n \"Aset berkurang Rp 2.000.000, Ekuitas berkurang Rp 2.000.000\",\n \"Aset berkurang Rp 2.000.000, Liabilitas berkurang Rp 2.000.000\",\n \"Aset tidak berubah, Ekuitas berkurang Rp 2.000.000\",\n \"Aset bertambah Rp 2.000.000, Ekuitas bertambah Rp 2.000.000\"\n ],\n correctAnswer: 0,\n explanation: \"Ketika pemilik mengambil uang untuk keperluan pribadi (prive), kas (aset) berkurang dan ekuitas pemilik juga berkurang dengan jumlah yang sama.\"\n },\n {\n question: \"Perusahaan membayar hutang usaha sebesar Rp 4.000.000. Bagaimana pengaruhnya terhadap persamaan akuntansi?\",\n options: [\n \"Aset berkurang Rp 4.000.000, Ekuitas berkurang Rp 4.000.000\",\n \"Aset berkurang Rp 4.000.000, Liabilitas berkurang Rp 4.000.000\",\n \"Aset tidak berubah, Liabilitas berkurang Rp 4.000.000\",\n \"Aset bertambah Rp 4.000.000, Liabilitas bertambah Rp 4.000.000\"\n ],\n correctAnswer: 1,\n explanation: \"Ketika membayar hutang usaha, kas (aset) berkurang dan hutang usaha (liabilitas) juga berkurang dengan jumlah yang sama.\"\n }\n ];\n \n let currentQuestionIndex = 0;\n let score = 0;\n let answeredQuestions = new Array(questions.length).fill(false);\n \n const questionText = document.getElementById('question-text');\n const optionsContainer = document.getElementById('options-container');\n const currentQuestionEl = document.getElementById('current-question');\n const totalQuestionsEl = document.getElementById('total-questions');\n const scoreEl = document.getElementById('score');\n const progressBar = document.getElementById('progress-bar');\n const prevBtn = document.getElementById('prev-btn');\n const nextBtn = document.getElementById('next-btn');\n const feedbackContainer = document.getElementById('feedback-container');\n const correctFeedback = document.getElementById('correct-feedback');\n const incorrectFeedback = document.getElementById('incorrect-feedback');\n const correctExplanation = document.getElementById('correct-explanation');\n const incorrectExplanation = document.getElementById('incorrect-explanation');\n const quizContainer = document.getElementById('quiz-container');\n const quizResults = document.getElementById('quiz-results');\n const finalScoreEl = document.getElementById('final-score');\n const maxScoreEl = document.getElementById('max-score');\n const scoreMessageEl = document.getElementById('score-message');\n const restartQuizBtn = document.getElementById('restart-quiz');\n \n function loadQuestion() {\n const question = questions[currentQuestionIndex];\n \n questionText.textContent = question.question;\n \n optionsContainer.innerHTML = '';\n question.options.forEach((option, index) => {\n const optionDiv = document.createElement('div');\n optionDiv.className = 'quiz-option p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-blue-50';\n optionDiv.setAttribute('data-option', index);\n \n const content = document.createElement('div');\n content.className = 'flex items-start';\n \n const letter = document.createElement('span');\n letter.className = 'font-bold mr-2';\n letter.textContent = String.fromCharCode(65 + index) + '.';\n \n const text = document.createElement('span');\n text.textContent = option;\n \n content.appendChild(letter);\n content.appendChild(text);\n optionDiv.appendChild(content);\n \n optionsContainer.appendChild(optionDiv);\n \n optionDiv.addEventListener('click', () => selectOption(index));\n });\n \n currentQuestionEl.textContent = currentQuestionIndex + 1;\n totalQuestionsEl.textContent = questions.length;\n \n progressBar.style.width = `${((currentQuestionIndex + 1) \/ questions.length) * 100}%`;\n \n prevBtn.disabled = currentQuestionIndex === 0;\n nextBtn.disabled = !answeredQuestions[currentQuestionIndex];\n \n feedbackContainer.classList.add('hidden');\n correctFeedback.classList.add('hidden');\n incorrectFeedback.classList.add('hidden');\n \n \/\/ If question was already answered, show the selected option\n if (answeredQuestions[currentQuestionIndex]) {\n const options = document.querySelectorAll('.quiz-option');\n const correctOption = questions[currentQuestionIndex].correctAnswer;\n \n options.forEach((option, index) => {\n if (index === correctOption) {\n option.classList.add('correct');\n }\n });\n \n feedbackContainer.classList.remove('hidden');\n correctFeedback.classList.remove('hidden');\n correctExplanation.textContent = questions[currentQuestionIndex].explanation;\n }\n }\n \n function selectOption(optionIndex) {\n if (answeredQuestions[currentQuestionIndex]) return;\n \n const options = document.querySelectorAll('.quiz-option');\n const correctOption = questions[currentQuestionIndex].correctAnswer;\n \n options.forEach(option => option.classList.remove('selected', 'correct', 'incorrect'));\n \n options[optionIndex].classList.add('selected');\n \n feedbackContainer.classList.remove('hidden');\n \n if (optionIndex === correctOption) {\n options[optionIndex].classList.add('correct');\n correctFeedback.classList.remove('hidden');\n incorrectFeedback.classList.add('hidden');\n correctExplanation.textContent = questions[currentQuestionIndex].explanation;\n score++;\n scoreEl.textContent = score;\n } else {\n options[optionIndex].classList.add('incorrect');\n options[correctOption].classList.add('correct');\n correctFeedback.classList.add('hidden');\n incorrectFeedback.classList.remove('hidden');\n incorrectExplanation.textContent = questions[currentQuestionIndex].explanation;\n }\n \n answeredQuestions[currentQuestionIndex] = true;\n nextBtn.disabled = false;\n \n \/\/ Check if all questions are answered\n if (answeredQuestions.every(answered => answered)) {\n showResults();\n }\n }\n \n function showResults() {\n quizContainer.classList.add('hidden');\n quizResults.classList.remove('hidden');\n \n finalScoreEl.textContent = score;\n maxScoreEl.textContent = questions.length;\n \n let message = '';\n const percentage = (score \/ questions.length) * 100;\n \n if (percentage === 100) {\n message = 'Sempurna! Anda menguasai konsep persamaan dasar akuntansi dengan sangat baik.';\n } else if (percentage >= 80) {\n message = 'Sangat bagus! Anda memiliki pemahaman yang kuat tentang persamaan dasar akuntansi.';\n } else if (percentage >= 60) {\n message = 'Bagus! Anda memahami dasar-dasar persamaan akuntansi, namun masih perlu sedikit perbaikan.';\n } else if (percentage >= 40) {\n message = 'Cukup baik. Anda memiliki pemahaman dasar, tetapi perlu lebih banyak latihan.';\n } else {\n message = 'Teruslah berlatih. Konsep persamaan dasar akuntansi membutuhkan waktu untuk dipahami dengan baik.';\n }\n \n scoreMessageEl.textContent = message;\n \n \/\/ Create confetti effect for good scores\n if (percentage >= 60) {\n createConfetti();\n }\n }\n \n function createConfetti() {\n const confettiContainer = document.createElement('div');\n confettiContainer.style.position = 'absolute';\n confettiContainer.style.top = '0';\n confettiContainer.style.left = '0';\n confettiContainer.style.width = '100%';\n confettiContainer.style.height = '100%';\n confettiContainer.style.pointerEvents = 'none';\n confettiContainer.style.zIndex = '1000';\n document.body.appendChild(confettiContainer);\n \n const colors = ['#f59e0b', '#3b82f6', '#10b981', '#ef4444', '#8b5cf6'];\n \n for (let i = 0; i < 100; i++) {\n const confetti = document.createElement('div');\n confetti.className = 'confetti';\n confetti.style.left = Math.random() * 100 + '%';\n confetti.style.top = -10 + 'px';\n confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\n confetti.style.width = Math.random() * 10 + 5 + 'px';\n confetti.style.height = Math.random() * 10 + 5 + 'px';\n confetti.style.opacity = '1';\n confetti.style.position = 'absolute';\n confettiContainer.appendChild(confetti);\n \n const animationDuration = Math.random() * 3 + 2;\n const animationDelay = Math.random() * 2;\n \n confetti.style.animation = `fall ${animationDuration}s ease-in ${animationDelay}s forwards`;\n \n \/\/ Add keyframes for falling animation\n const style = document.createElement('style');\n style.innerHTML = `\n @keyframes fall {\n 0% { transform: translateY(0) rotate(0deg); opacity: 1; }\n 100% { transform: translateY(${window.innerHeight}px) rotate(${Math.random() * 360}deg); opacity: 0; }\n }\n `;\n document.head.appendChild(style);\n \n \/\/ Remove confetti after animation\n setTimeout(() => {\n confetti.remove();\n if (i === 99) {\n confettiContainer.remove();\n }\n }, (animationDuration + animationDelay) * 1000);\n }\n }\n \n prevBtn.addEventListener('click', () => {\n if (currentQuestionIndex > 0) {\n currentQuestionIndex--;\n loadQuestion();\n }\n });\n \n nextBtn.addEventListener('click', () => {\n if (currentQuestionIndex < questions.length - 1) {\n currentQuestionIndex++;\n loadQuestion();\n } else {\n showResults();\n }\n });\n \n restartQuizBtn.addEventListener('click', () => {\n currentQuestionIndex = 0;\n score = 0;\n answeredQuestions = new Array(questions.length).fill(false);\n scoreEl.textContent = score;\n \n quizResults.classList.add('hidden');\n quizContainer.classList.remove('hidden');\n \n loadQuestion();\n });\n \n \/\/ Initialize quiz\n loadQuestion();\n \n \/\/ Add event listeners to quiz options\n document.querySelectorAll('.quiz-option').forEach(option => {\n option.addEventListener('click', () => {\n const optionIndex = parseInt(option.getAttribute('data-option'));\n selectOption(optionIndex);\n });\n });\n <\/script>\n<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'961272e9f26d7d69',t:'MTc1Mjg0NjYzNC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Media Pembelajaran Persamaan Dasar Akuntansi Persamaan Dasar Akuntansi Media Pembelajaran Interaktif Konsep Dasar Visualisasi Contoh Transaksi Latihan Soal Persamaan Dasar […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1736","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/smkn1kerumutan.sch.id\/index.php\/wp-json\/wp\/v2\/pages\/1736"}],"collection":[{"href":"https:\/\/smkn1kerumutan.sch.id\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smkn1kerumutan.sch.id\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smkn1kerumutan.sch.id\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smkn1kerumutan.sch.id\/index.php\/wp-json\/wp\/v2\/comments?post=1736"}],"version-history":[{"count":2,"href":"https:\/\/smkn1kerumutan.sch.id\/index.php\/wp-json\/wp\/v2\/pages\/1736\/revisions"}],"predecessor-version":[{"id":1738,"href":"https:\/\/smkn1kerumutan.sch.id\/index.php\/wp-json\/wp\/v2\/pages\/1736\/revisions\/1738"}],"wp:attachment":[{"href":"https:\/\/smkn1kerumutan.sch.id\/index.php\/wp-json\/wp\/v2\/media?parent=1736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}