AI Assessment Maker (Stable Engine)

AI Assessment Maker

Buat file asesmen .html yang siap dimainkan.

Mata Pelajaran

Topik Materi & Skenario

Judul Asesmen

Token (Opsional)

Kunci Pembahasan (Opsional)

URL Google Apps Script (Opsional)

Teks Footer Kustom (Opsional)

Target Soal (Max 100)

Waktu (menit)

Passing Grade

Level Kognitif SMA (Standar Bloom)

LOTS (C1-C2) MOTS (C3) HOTS (C4-C6) AKM (Literasi) TKA (Akademik) SNBT (Penalaran)

Jenis Soal

Pilihan Ganda (Satu Jawaban Benar) Pilihan Ganda Kompleks (Banyak Jawaban)

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>/*--THEME-TITLE--*/</title>
    <script src="https://cdn.tailwindcss.com/"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <script>
    window.MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\$', '\$']],
        displayMath: [['$$', '$$'], ['\\[', '\\]']],
        processEscapes: true
      },
      svg: { fontCache: 'global' }
    };
    </script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    
    <style>
        :root {
            --tahoe-blue: /*--THEME-COLOR-PRIMARY--*/;
            --tahoe-blue-dark: /*--THEME-COLOR-PRIMARY-DARK--*/;
            --tahoe-gray: #4a4a4a;
            --tahoe-gray-light: #f5f5f7;
            --tahoe-text-dark: #333333;
            --tahoe-text-light: #ffffff;
            --success-color: #34c759;
            --danger-color: #ff3b30;
        }

body {
            font-family: 'Inter', sans-serif;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            background: /*--THEME-GRADIENT-LIGHT--*/;
            color: var(--tahoe-text-dark);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0.5rem;
            transition: background 0.3s, color 0.3s;
        }

body.dark-mode {
            background: /*--THEME-GRADIENT-DARK--*/;
            color: var(--tahoe-text-light);
        }

.macos-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 24px;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

.dark-mode .macos-card {
            background: rgba(45, 45, 45, 0.7);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .macos-btn {
            background: var(--tahoe-blue);
            color: white;
            font-weight: 600;
            border-radius: 12px;
            transition: background 0.2s, transform 0.1s;
        }
        .macos-btn:hover { background: var(--tahoe-blue-dark); }
        .macos-btn:active { transform: scale(0.98); }

.macos-input {
            background: rgba(255, 255, 255, 0.5);
            border-radius: 8px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            color: var(--tahoe-text-dark);
            transition: background 0.2s, border-color 0.2s;
        }
        .dark-mode .macos-input {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--tahoe-text-light);
        }
        .dark-mode .macos-input::placeholder { color: #8e8e93; }
        .macos-input:focus { outline: none; border-color: var(--tahoe-blue); box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2); }

.quiz-slide { display: none; animation: slideIn 0.4s ease-out forwards; width: 100%; }
        .quiz-slide.active { display: block; }
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .custom-message-overlay {
            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            justify-content: center; align-items: center; z-index: 9999;
            backdrop-filter: blur(8px); background-color: rgba(0, 0, 0, 0.5);
            animation: fadeIn 0.3s ease-out;
        }
        .custom-message-content {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            color: var(--tahoe-text-dark); padding: 2rem 3rem;
            border-radius: 16px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            text-align: center; max-width: 90%; width: 400px; animation: popIn 0.3s ease-out;
        }
        .dark-mode .custom-message-content {
            background: rgba(45, 45, 45, 0.8);
            color: var(--tahoe-text-light);
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        
        @keyframes shake {
          10%, 90% { transform: translate3d(-1px, 0, 0); }
          20%, 80% { transform: translate3d(2px, 0, 0); }
          30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
          40%, 60% { transform: translate3d(4px, 0, 0); }
        }

#loading-screenshot {
            display: none; position: fixed; top: 50%; left: 50%;
            transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.7);
            color: white; padding: 1rem 2rem; border-radius: 8px; z-index: 10000;
        }
        .progress-dot {
            width: 8px; height: 8px; border-radius: 50%; background-color: #e5e5e5;
            margin: 0 2px; transition: all 0.3s; cursor: pointer;
        }
        .dark-mode .progress-dot { background-color: #3c3c3e; }
        .progress-dot.active { background-color: var(--tahoe-blue); transform: scale(1.3); }
        .progress-dot.answered { background-color: var(--tahoe-blue-dark); }
        .theme-toggle {
            position: fixed; top: 20px; right: 20px; z-index: 1000;
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 50%; width: 50px; height: 50px; display: flex;
            align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            cursor: pointer; transition: background-color 0.3s;
        }
        .dark-mode .theme-toggle {
            background: rgba(45, 45, 45, 0.5);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }
        .question-indicator {
            position: absolute; top: 10px; right: 10px;
            background: rgba(0, 0, 0, 0.05);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: var(--tahoe-text-dark); padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 600;
        }
        .dark-mode .question-indicator {
            background: rgba(255, 255, 255, 0.05);
            color: var(--tahoe-text-light);
        }
        .option-selected {
            background: rgba(0, 122, 255, 0.1) !important;
            border-color: var(--tahoe-blue) !important;
            transform: translateY(-2px);
        }
        .dark-mode .option-selected {
            background: rgba(0, 122, 255, 0.2) !important;
        }
        
        .certificate-bg {
            background: linear-gradient(135deg, var(--tahoe-blue), var(--tahoe-blue-dark));
            border: 8px solid var(--tahoe-blue); position: relative; overflow: hidden;
            color: white;
        }
        
        .dark-mode .dark-mode-visible { display: block; }
        .dark-mode-visible { display: none; }
        .dark-mode .dark-mode-hidden { display: none; }
        
        .question-container .stimulus {
            background-color: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            padding: 1.25rem;
            margin-bottom: 1.5rem;
            line-height: 1.7;
            overflow-x: auto; 
            font-size: 0.95rem;
        }
        .dark-mode .question-container .stimulus {
            background-color: #2c2c2e;
            border-color: #3a3a3c;
        }
        .question-container .stimulus p { margin-bottom: 1rem; }
        .question-container .stimulus p:last-child { margin-bottom: 0; }
        
        .question-container .stimulus svg, 
        .question-container .stimulus table, 
        .question-container .stimulus img { 
            margin: 1rem auto; 
            display: block; 
            max-width: 100%; 
            border-radius: 8px;
        }
        
        .question-container .stimulus table { 
            border-collapse: collapse; 
            width: 100%; 
            text-align: left; 
            font-size: 0.9em; 
            border: 1px solid #ddd;
        }
        .question-container .stimulus th, 
        .question-container .stimulus td { 
            padding: 8px 12px; 
            border: 1px solid #ddd; 
        }
        .dark-mode .question-container .stimulus th, 
        .dark-mode .question-container .stimulus td { 
            border: 1px solid #4a4a4e; 
        }
        .question-container .stimulus th { 
            background-color: #f1f1f1; 
            font-weight: 600;
        }
        .dark-mode .question-container .stimulus th { 
            background-color: #3a3a3c; 
        }
        
        .question-container .stimulus svg text {
            fill: currentColor;
            font-family: 'Inter', sans-serif;
            stroke: none;
        }
        
        .question-container .stimulus svg path,
        .question-container .stimulus svg line,
        .question-container .stimulus svg polyline,
        .question-container .stimulus svg rect,
        .question-container .stimulus svg polygon,
        .question-container .stimulus svg circle {
            stroke: currentColor;
        }

.dark-mode .text-tahoe-gray { color: #aeaeb2; }
        .dark-mode .text-gray-800 { color: #f2f2f7; }
        
        /* Fullscreen Adaptation */
        .container {
            width: 100%;
            max-width: 800px; 
            margin: 0 auto;
        }
        
        @media (max-width: 640px) {
            .macos-card { border-radius: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
            body { padding: 0; }
        }
        
    </style>
</head>
<body>
    
    <div class="theme-toggle" onclick="toggleTheme()">
        <i class="fas fa-sun text-yellow-400 dark-mode-hidden"></i>
        <i class="fas fa-moon text-gray-700 dark-mode-visible"></i>
    </div>

<div class="custom-message-overlay" id="custom-message-box">
        <div class="custom-message-content">
            <p class="mb-4" id="custom-message-text"></p>
            <div class="flex justify-center space-x-4" id="custom-message-buttons"></div>
        </div>
    </div>
    
    <div class="custom-message-overlay" id="password-prompt-overlay" style="z-index: 10000; display: none;">
        <div class="custom-message-content">
            <h4 class="text-lg font-bold mb-3 text-tahoe-blue">Kunci Pembahasan</h4>
            <p class="mb-4 text-sm text-tahoe-gray dark:text-tahoe-gray">Masukkan password guru untuk membuka pembahasan soal.</p>
            <input class="w-full px-4 py-3 macos-input" id="password-input" type="password" placeholder="Password...">
            <div class="flex justify-center space-x-4 mt-4">
                <button class="py-2 px-5 bg-gray-300 text-gray-800 rounded-lg shadow-md hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-200" onclick="hidePasswordPrompt()">Batal</button>
                <button class="py-2 px-5 text-white rounded-lg shadow-md macos-btn" onclick="checkPassword()">Buka</button>
            </div>
        </div>
    </div>

<div id="loading-screenshot" class="hidden"><i class="fas fa-spinner fa-spin mr-2"></i> Mengambil screenshot...</div>

<div class="macos-card container mx-auto p-6 sm:p-8 w-full">
        <h1 class="text-2xl sm:text-3xl font-bold text-center text-tahoe-blue mb-2">/*--THEME-TITLE--*/ /*--THEME-EMOJI--*/</h1>
        <p class="text-center text-tahoe-gray text-xs sm:text-sm mb-6">/*--THEME-DESCRIPTION--*/</p>
        
        <div id="start-screen">
            <h2 class="text-lg sm:text-xl font-semibold text-center mb-6">/*--THEME-SUBTITLE--*/</h2>
            <div class="space-y-4 max-w-md mx-auto">
                <div>
                    <label class="block text-sm font-medium text-tahoe-gray mb-1" for="nama">Nama Lengkap</label>
                    <input class="w-full px-4 py-3 macos-input focus:ring-2 focus:ring-tahoe-blue transition" id="nama" placeholder="Masukkan nama lengkap" required type="text" />
                </div>
                <div>
                    <label class="block text-sm font-medium text-tahoe-gray mb-1" for="sekolah">Asal Sekolah</label>
                    <input class="w-full px-4 py-3 macos-input focus:ring-2 focus:ring-tahoe-blue transition" id="sekolah" placeholder="Masukkan asal sekolah" required type="text" />
                </div>
                <div>
                    <label class="block text-sm font-medium text-tahoe-gray mb-1" for="kelas">Kelas</label>
                    <input class="w-full px-4 py-3 macos-input focus:ring-2 focus:ring-tahoe-blue transition" id="kelas" placeholder="Contoh: 12 IPA 1" required type="text" />
                </div>
                <div class="hidden" id="token-input-container">
                    <label class="block text-sm font-medium text-tahoe-gray mb-1" for="token_input">Token</label>
                    <input class="w-full px-4 py-3 macos-input focus:ring-2 focus:ring-tahoe-blue transition" id="token_input" placeholder="Masukkan token untuk memulai" required type="text" />
                </div>
                <div class="flex items-center mt-5">
                    <input class="h-4 w-4 text-tahoe-blue focus:ring-tahoe-blue border-gray-300 rounded" id="no-cheat-checkbox" type="checkbox" />
                    <label class="ml-2 block text-sm text-tahoe-gray" for="no-cheat-checkbox">Saya menyatakan tidak akan melakukan kecurangan selama asesmen.</label>

</div>
                <button class="w-full py-3 mt-4 macos-btn font-bold shadow-md transition-all duration-300" onclick="startGame()">Mulai Asesmen! <i class="fas fa-play ml-1"></i></button>
            </div>
        </div>

<div id="quiz-container"><div id="slides"></div></div>
            <div class="flex flex-col sm:flex-row justify-between mt-6 space-y-3 sm:space-y-0 sm:space-x-3">
                <button class="flex-1 py-3 bg-gray-300 text-gray-800 font-bold rounded-lg hover:bg-gray-400 transition dark:bg-gray-700 dark:text-gray-200" disabled id="prevBtn" onclick="prevSlide()"><i class="fas fa-arrow-left mr-2"></i> Sebelumnya</button>
                <button class="flex-1 py-3 text-white font-bold rounded-lg transition macos-btn" id="nextBtn" onclick="nextSlide()">Selanjutnya <i class="fas fa-arrow-right ml-2"></i></button>
                <button class="hidden flex-1 py-3 text-white font-bold rounded-lg transition macos-btn" id="submitBtn" onclick="confirmSubmit()">Selesaikan <i class="fas fa-flag-checkered ml-2"></i></button>
            </div>
        </div>

<div class="hidden" id="game-over-screen">
            <h2 class="text-2xl font-bold text-tahoe-blue mb-4 text-center">Asesmen Selesai! 🥳</h2>
            
            <div id="certificate-container" class="hidden p-4 rounded-lg shadow-lg border-2 certificate-bg"></div>
            
            <div class="score-summary mb-6 p-4 rounded-lg macos-card" id="score-summary-container">
                <p><strong>Nama:</strong> <span id="final-nama"></span></p>
                <p><strong>Asal Sekolah:</strong> <span id="final-sekolah"></span></p> 
                <p><strong>Kelas:</strong> <span id="final-kelas"></span></p> 
                <p><strong>Sisa Waktu:</strong> <span id="final-time"></span></p>
                <p class="text-lg font-bold"><strong>Skor Akhir:</strong> <span id="final-score" class="text-tahoe-blue"></span></p>
                <p class="text-xs text-tahoe-gray mt-2">Waktu Mulai: <span id="final-start-time"></span> | Selesai: <span id="final-end-time"></span></p>
                <button onclick="window.location.reload()" class="w-full mt-4 py-3 text-white font-bold rounded-lg shadow-md transition macos-btn"><i class="fas fa-redo mr-2"></i> Ulangi Asesmen</button>
            </div>
            
            <div class="screenshot-container mt-6 hidden" id="screenshot-container">
                <h3 class="text-lg font-semibold text-tahoe-blue mb-4" id="screenshot-title"></h3>
                <img alt="Screenshot Hasil" class="w-full rounded-lg shadow-md border" id="screenshot-img" />
                <a class="inline-block mt-4 py-2 px-4 text-white font-bold rounded-lg transition macos-btn" download="/*--THEME-FILENAME--*/.png" href="#" id="download-screenshot"></a>
            </div>
            
            <button id="show-pembahasan-btn" class="w-full mt-6 py-3 bg-gray-600 text-white font-bold rounded-lg shadow-md transition hover:bg-gray-700 dark:bg-gray-700 dark:text-gray-200" onclick="handleShowPembahasanClick()">
                <i class="fas fa-lock mr-2"></i> Buka Kunci Pembahasan
            </button>
            
            <div class="pembahasan mt-6 hidden text-left" id="pembahasan"></div>
        </div>
        <footer class="text-center mt-8 py-4 border-t"><p class="text-tahoe-gray text-xs sm:text-sm">/*--THEME-FOOTER-TEXT--*/</p></footer>
    </div>

const originalSoalPG = [
            {q: "Loading...", o: ["...","...","...","..."], k: 0, type: "multiple", difficulty: "easy", penjelasan: "Loading..."}
        ];

function startGame() {
            const namaInput = document.getElementById('nama');
            const sekolahInput = document.getElementById('sekolah');
            const kelasInput = document.getElementById('kelas'); 
            
            if (QUIZ_TOKEN) {
                const tokenInput = document.getElementById('token_input').value;
                if (tokenInput.trim() !== QUIZ_TOKEN) {
                    showCustomMessage('Token yang Anda masukkan salah. Silakan coba lagi.');
                    return;
                }
            }

if (!namaInput.value.trim() || !sekolahInput.value.trim() || !kelasInput.value.trim()) { 
                showCustomMessage('Harap isi Nama Lengkap, Asal Sekolah, dan Kelas.'); 
                return; 
            }
            if (!document.getElementById('no-cheat-checkbox').checked) { 
                showCustomMessage('Anda harus menyetujui pernyataan untuk memulai.'); 
                return; 
            }
            participant = { 
                nama: namaInput.value.trim(), 
                sekolah: sekolahInput.value.trim(), 
                kelas: kelasInput.value.trim() 
            };
            
            shuffledSoalPG = JSON.parse(JSON.stringify(originalSoalPG));
            shuffleArray(shuffledSoalPG);
            
            shuffledSoalPG.forEach(q => {
                if(q.o) {
                    const optionsWithOriginalIndex = q.o.map((text, idx) => ({ text, originalIndex: idx }));
                    shuffleArray(optionsWithOriginalIndex);
                    q.o = optionsWithOriginalIndex.map(opt => opt.text);
                    if (Array.isArray(q.k)) { 
                        q.k = q.k.map(key => optionsWithOriginalIndex.findIndex(opt => opt.originalIndex === key)).sort((a, b) => a - b);
                    } else { 
                        q.k = optionsWithOriginalIndex.findIndex(opt => opt.originalIndex === q.k); 
                    }
                }
            });
            
            answers = Array(shuffledSoalPG.length).fill(null);
            tabViolationCount = 0; 
            sessionStorage.setItem('tabViolationCount', '0');
            
            setupDOM();
            renderSlides();
            renderProgressDots();
            startTimer();
            requestWakeLock();
        }

if (!isCategory) {
                 document.querySelectorAll(`label > input[name="soal${idx}"]`).forEach(input => {
                    input.parentElement.classList.remove('option-selected', 'dark:border-tahoe-blue', 'border-tahoe-blue');
                 });
                if (question.type === 'multipleanswer') {
                    document.querySelectorAll(`input[name="soal${idx}"]:checked`).forEach(input => {
                        input.parentElement.classList.add('option-selected', 'dark:border-tahoe-blue', 'border-tahoe-blue');
                    });
                } else {
                    const radio = document.querySelector(`input[name="soal${idx}"]:checked`);
                    if(radio) radio.parentElement.classList.add('option-selected', 'dark:border-tahoe-blue', 'border-tahoe-blue');
                }
            }
        }

function updateNav() {
            document.getElementById('prevBtn').disabled = currentSlide === 0;
            document.getElementById('prevBtn').classList.toggle('opacity-50', currentSlide === 0);
            document.getElementById('nextBtn').classList.toggle('hidden', currentSlide >= shuffledSoalPG.length - 1);
            document.getElementById('submitBtn').classList.toggle('hidden', currentSlide < shuffledSoalPG.length - 1);
        }

function navigateToSlide(index) {
            if (index >= 0 && index < shuffledSoalPG.length) { currentSlide = index; showSlide(currentSlide); }
        }

let pembahasanContent = `<h3 class="text-xl font-semibold text-tahoe-blue my-4"><i class="fas fa-book-open mr-2"></i>Ulasan Soal</h3>`;
            
            shuffledSoalPG.forEach((s, i) => {
                let isCorrect = false;
                let jawabanAndaText = 'Tidak dijawab';
                let jawabanBenarText = '';

if (isCategoryQuestion(s)) {
                    const correctAnswers = s.o.map((_, idx) => s.k.includes(idx));
                    const userAnswer = answers[i] || Array(s.o.length).fill(null);
                    isCorrect = arraysEqual(userAnswer, correctAnswers);
                    jawabanAndaText = s.o.map((pernyataan, idx) => {
                        const jawaban = userAnswer[idx] === true ? 'Benar' : userAnswer[idx] === false ? 'Salah' : 'Kosong';
                        return `<div>${pernyataan}: <b>${jawaban}</b></div>`;
                    }).join('');
                    jawabanBenarText = s.o.map((pernyataan, idx) => {
                        const jawaban = correctAnswers[idx] ? 'Benar' : 'Salah';
                        return `<div>${pernyataan}: <b>${jawaban}</b></div>`;
                    }).join('');
                } else if (s.type === 'multipleanswer') { 
                    isCorrect = arraysEqual(answers[i], s.k);
                    jawabanAndaText = answers[i] && answers[i].length > 0 ? answers[i].map(j => s.o[j]).join(', ') : 'Tidak dijawab';
                    jawabanBenarText = s.k.map(j => s.o[j]).join(', ');
                } else { 
                    isCorrect = answers[i] === s.k;
                    jawabanAndaText = answers[i] !== null ? s.o[answers[i]] : 'Tidak dijawab';
                    jawabanBenarText = s.o[s.k];
                }

if (isCorrect) {
                    let weight = 1;
                    if (['hard','hots','snbt','tka'].includes(s.difficulty)) weight = 2;
                    if (['medium','mots','akm'].includes(s.difficulty)) weight = 1.5;
                    totalCorrectWeight += weight;
                }

pembahasanContent += `<div class="p-4 rounded-lg border-l-4 ${isCorrect ? 'border-success-color' : 'border-danger-color'} mb-3 macos-card">
                    <div class="font-semibold text-tahoe-text-dark dark:text-tahoe-text-light">Soal ${i + 1}: ${s.q.replace(/<br>/g, ' ')}</div>
                    <div class="text-sm mt-2 text-tahoe-gray dark:text-tahoe-gray">Jawaban Anda: <div class="font-medium p-2 rounded mt-1 ${isCorrect ? 'bg-green-100 dark:bg-green-900/50' : 'bg-red-100 dark:bg-red-900/50'}">${jawabanAndaText}</div></div>
                    <div class="text-sm text-tahoe-gray dark:text-tahoe-gray">Jawaban Benar: <div class="font-medium p-2 rounded mt-1 bg-blue-100 dark:bg-blue-900/50">${jawabanBenarText}</div></div>
                    <p class="text-sm mt-1 text-tahoe-gray dark:text-tahoe-gray"><strong>Penjelasan:</strong> ${s.penjelasan}</p>
                </div>`;
            });
            
            const score = totalPossibleScoreWeight > 0 ? Math.round((totalCorrectWeight / totalPossibleScoreWeight) * 100) : 0;

if (APPSCRIPT_URL && APPSCRIPT_URL.startsWith("https://script.google.com/")) {
                const quizTitle = "/*--THEME-TITLE--*/"; 
                const sisaWaktuFormatted = `${Math.floor(timeLeft / 60).toString().padStart(2, '0')}:${(timeLeft % 60).toString().padStart(2, '0')}`;
                const status = score >= passingGrade ? 'Lulus' : 'Tidak Lulus'; 
                const payload = { judul: quizTitle, nama: participant.nama, sekolah: participant.sekolah, kelas: participant.kelas, skor: score, sisaWaktu: sisaWaktuFormatted, status: status };
                try {
                    fetch(APPSCRIPT_URL, { method: 'POST', headers: { 'Content-Type': 'text/plain;charset=utf-8' }, body: JSON.stringify(payload) })
                    .catch(err => console.warn('Gagal mengirim ke Sheets:', err));
                } catch (err) { console.warn('Error fetch Sheets:', err); }
            }
            
            document.getElementById('final-nama').textContent = participant.nama;
            document.getElementById('final-sekolah').textContent = participant.sekolah;
            document.getElementById('final-kelas').textContent = participant.kelas; 
            document.getElementById('final-time').textContent = `${Math.floor(timeLeft / 60).toString().padStart(2, '0')}:${(timeLeft % 60).toString().padStart(2, '0')}`;
            document.getElementById('final-score').textContent = `${score}/100`;
            document.getElementById('final-start-time').textContent = formatDateTime(gameStartTime);
            document.getElementById('final-end-time').textContent = formatDateTime(gameEndTime);
            document.getElementById('pembahasan').innerHTML = pembahasanContent;
            document.getElementById('game-screen').classList.add('hidden');
            document.getElementById('game-over-screen').classList.remove('hidden');

if (score >= passingGrade) {
                document.getElementById('certificate-container').innerHTML = `
                    <div class="text-center p-4">
                        <h1 class="text-2xl font-bold text-white">SERTIFKAT KELULUSAN</h1>
                        <p class="mt-2">Diberikan kepada</p>
                        <h2 class="text-3xl font-bold text-white my-2" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">${participant.nama}</h2>
                        <p>dari <span class="font-semibold">${participant.sekolah} (${participant.kelas})</span></p>
                        <p class="mt-2">atas keberhasilan menyelesaikan "/*--THEME-TITLE--*/"</p>
                        <p class="text-4xl font-bold text-white my-3">${score}<span class="text-2xl">/100</span></p>
                        <p class="text-xs text-gray-200">Diberikan pada: ${formatDateTime(gameEndTime)}</p>
                    </div>`;
                document.getElementById('certificate-container').classList.remove('hidden');
                document.getElementById('score-summary-container').classList.add('hidden');
                document.getElementById('pembahasan').classList.add('hidden'); 
                takeScreenshot('#certificate-container', 'Sertifikat Anda', 'Unduh Sertifikat <i class="fas fa-certificate ml-2"></i>', `Selamat, ${participant.nama}! Anda lulus.`);
            } else {
                document.getElementById('score-summary-container').classList.remove('hidden');
                document.getElementById('certificate-container').classList.add('hidden');
                document.getElementById('pembahasan').classList.add('hidden');
                const finalMessage = reason === 'Waktu Habis!' ? `Waktu habis, ${participant.nama}.` : `Maaf, ${participant.nama}, Anda belum lulus.`;
                takeScreenshot('#score-summary-container', 'Hasil /*--THEME-TITLE--*/', 'Unduh Hasil <i class="fas fa-download ml-2"></i>', `${finalMessage} Skor Anda: ${score}. Terus belajar dan coba lagi!`);
            }
        }
        
        async function takeScreenshot(selector, title, btnText, msg) {
            const container = document.getElementById('screenshot-container');
            document.getElementById('screenshot-title').textContent = title;
            document.getElementById('download-screenshot').innerHTML = btnText;
            container.classList.remove('hidden');
            document.getElementById('loading-screenshot').style.display = 'block';
            try {
                const element = document.querySelector(selector);
                const isDarkMode = document.body.classList.contains('dark-mode');
                let backgroundColor = (selector === '#certificate-container') ? null : (isDarkMode ? '#1c1c1e' : '#e5e5e5');
                const canvas = await html2canvas(element, { scale: 2, useCORS: true, backgroundColor: backgroundColor });
                const dataUrl = canvas.toDataURL('image/png');
                document.getElementById('screenshot-img').src = dataUrl;
                document.getElementById('download-screenshot').href = dataUrl;
                showCustomMessage(msg, null, 'info'); 
            } catch (error) {
                console.error('Screenshot error:', error);
                container.innerHTML = '<p class="text-red-500">Gagal mengambil screenshot.</p>';
            } finally {
                document.getElementById('loading-screenshot').style.display = 'none';
            }
        }

Selasa, 13 Januari 2026

AI Assessment Maker 📝

AI Assessment Maker

Stable Education Engine...

Tidak ada komentar:

Posting Komentar

Geografi Sariwangi for Android

Info Bencana Real-time