UJIAN Deskriptif Desember 31, 2025 http://bambangharyanto21.madrasah.id 0 <!--doctype html--> <html lang="id" class="h-full"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ANBK - Ujian Bahasa Inggris</title> <script src="/_sdk/data_sdk.js"></script> <script src="/_sdk/element_sdk.js"></script> <script src="https://cdn.tailwindcss.com"></script> <style> body { box-sizing: border-box; } @keyframes pulse-warning { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .warning-pulse { animation: pulse-warning 0.5s ease-in-out infinite; } @keyframes countdown-scale { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .countdown-animation { animation: countdown-scale 1s ease-in-out infinite; } </style> <style>@view-transition { navigation: auto; }</style> </head> <body class="h-full bg-gradient-to-br from-blue-50 to-blue-100"> <div id="app" class="h-full w-full overflow-auto"></div> <script> const GOOGLE_SCRIPT_URL = 'https://script.google.com/macros/s/AKfycbwxvuHv5LerhwPXYDe7xN1LfLRLKXi9DlALodUC5U_u0AJ1jNhevhG9P8hp1AupTrTW3Q/exec'; const questions = [ { content: "Read the following descriptive text:\n\n\"The Eiffel Tower is one of the most iconic landmarks in the world. Standing at 330 meters tall, this iron lattice tower is located in Paris, France. Built in 1889, it was initially criticized by Parisians but has since become a beloved symbol of French culture. The tower attracts millions of visitors annually who come to admire its architectural beauty and panoramic views of the city.\"\n\nWhat is the main purpose of the text?", image: null, options: [ "To describe the Eiffel Tower's characteristics and significance", "To criticize the initial reception of the Eiffel Tower", "To explain how to build an iron tower", "To compare French landmarks", "To narrate the history of Paris" ], answer: "To describe the Eiffel Tower's characteristics and significance", difficulty: "REGULER" }, { content: "Which of the following is NOT mentioned in the text about the Eiffel Tower?", image: null, options: [ "Its height", "Its location", "The year it was built", "The architect's name", "Its current popularity" ], answer: "The architect's name", difficulty: "REGULER" }, { content: "\"The ancient library had towering bookshelves that reached the ceiling, filled with leather-bound volumes. Dust particles danced in the sunlight streaming through stained glass windows, creating a mystical atmosphere.\"\n\nWhat descriptive technique is primarily used in this passage?", image: null, options: [ "Visual and sensory imagery", "Dialogue and conversation", "Statistical data", "Chronological sequence", "Cause and effect" ], answer: "Visual and sensory imagery", difficulty: "REGULER" }, { content: "Identify the correct structure of a descriptive text:", image: null, options: [ "Identification - Description", "Orientation - Events - Reorientation", "Thesis - Arguments - Reiteration", "Goal - Materials - Steps", "Issue - Arguments - Recommendation" ], answer: "Identification - Description", difficulty: "REGULER" }, { content: "\"Mount Bromo is _____ active volcano in East Java. It stands at 2,329 meters and offers _____ spectacular sunrise views.\"\n\nFill in the blanks with the correct articles:", image: null, options: [ "an - (no article needed)", "a - the", "the - a", "an - a", "the - the" ], answer: "an - (no article needed)", difficulty: "REGULER" }, { content: "Which sentence best describes a place using sensory details?", image: null, options: [ "The beach had soft, white sand that felt warm beneath my feet, while the salty breeze carried the sound of crashing waves", "The beach is located near the city", "Many people visit the beach every year", "The beach is very popular", "The beach was built in 1990" ], answer: "The beach had soft, white sand that felt warm beneath my feet, while the salty breeze carried the sound of crashing waves", difficulty: "REGULER" }, { content: "\"The mysterious cave entrance was concealed behind a curtain of hanging vines, and its interior remained unexplored for centuries.\"\n\nWhat grammatical feature is prominent in descriptive texts as shown above?", image: null, options: [ "Use of adjectives and present/past tense", "Use of imperative sentences", "Use of future tense only", "Use of first-person narrative", "Use of direct speech" ], answer: "Use of adjectives and present/past tense", difficulty: "REGULER" }, { content: "Read this description:\n\n\"Komodo dragons are the largest living lizards, reaching up to 3 meters in length. These powerful predators have rough, scaly skin and a venomous bite. They inhabit several Indonesian islands and primarily hunt deer, pigs, and smaller dragons.\"\n\nWhat aspect is being described?", image: null, options: [ "Physical characteristics and behavior of Komodo dragons", "The history of Komodo Island", "How to train Komodo dragons", "The diet of Indonesian people", "The weather in Indonesia" ], answer: "Physical characteristics and behavior of Komodo dragons", difficulty: "REGULER" }, { content: "Which of the following adjectives would best describe a person's character in a descriptive text?", image: null, options: [ "Compassionate, determined, and generous", "Tall, short, and medium", "Yesterday, today, and tomorrow", "Quickly, slowly, and carefully", "Running, jumping, and swimming" ], answer: "Compassionate, determined, and generous", difficulty: "REGULER" }, { content: "\"The traditional market buzzed with activity as vendors called out their prices, colorful fruits were displayed in neat pyramids, and the aroma of fresh spices filled the air.\"\n\nThis description effectively uses:", image: null, options: [ "Multiple sensory details (sound, sight, smell)", "Only visual description", "Scientific terminology", "Historical facts", "Statistical data" ], answer: "Multiple sensory details (sound, sight, smell)", difficulty: "REGULER" }, { content: "Analyze the following two descriptions:\n\nText A: \"The garden was beautiful with many flowers.\"\nText B: \"The garden bloomed with vibrant roses, delicate jasmine, and golden marigolds, their petals glistening with morning dew.\"\n\nWhat makes Text B more effective as a descriptive text?", image: null, options: [ "It provides specific, vivid details and uses descriptive vocabulary", "It is shorter and simpler", "It uses more complex grammar", "It focuses on one flower only", "It uses scientific names" ], answer: "It provides specific, vivid details and uses descriptive vocabulary", difficulty: "HOTS" }, { content: "Consider this description:\n\n\"The abandoned mansion loomed at the end of the overgrown path, its windows like hollow eyes staring into the darkness, and the creaking gate seemed to whisper warnings to those who dared approach.\"\n\nWhat literary technique enhances this descriptive text?", image: null, options: [ "Personification and simile to create atmosphere", "Direct quotation from witnesses", "Statistical evidence about old buildings", "Chronological timeline of events", "Scientific explanation of decay" ], answer: "Personification and simile to create atmosphere", difficulty: "HOTS" }, { content: "A student writes: \"My teacher is kind. She has black hair. She wears glasses. She teaches well.\"\n\nHow can this be improved to become a better descriptive paragraph?", image: null, options: [ "Combine sentences with varied structure, add specific details about appearance and teaching style, use descriptive adjectives", "Make each sentence longer", "Add more sentences with the same structure", "Change to future tense", "Remove all adjectives" ], answer: "Combine sentences with varied structure, add specific details about appearance and teaching style, use descriptive adjectives", difficulty: "HOTS" }, { content: "Read these two passages:\n\nPassage 1: \"The restaurant serves Italian food. It is located downtown. Many customers eat there.\"\n\nPassage 2: \"Nestled in the heart of downtown, the intimate Italian trattoria welcomes guests with the rich aroma of simmering marinara and freshly baked focaccia, while candlelight dances across rustic wooden tables.\"\n\nWhat distinguishes Passage 2 as superior descriptive writing?", image: null, options: [ "Integration of sensory imagery, spatial language, and atmospheric details that transport the reader", "It is longer in length", "It uses more difficult words", "It mentions more restaurants", "It uses passive voice" ], answer: "Integration of sensory imagery, spatial language, and atmospheric details that transport the reader", difficulty: "HOTS" }, { content: "Evaluate this descriptive sentence:\n\n\"The storm approached with menacing dark clouds that swallowed the sun, fierce winds that bent trees like blades of grass, and thunder that shook the earth beneath our feet.\"\n\nWhat makes this an effective example of descriptive writing for advanced learners?", image: null, options: [ "It uses parallel structure, vivid verbs, and simile to create progressive intensity", "It is grammatically simple", "It uses only one type of adjective", "It avoids metaphorical language", "It focuses only on facts" ], answer: "It uses parallel structure, vivid verbs, and simile to create progressive intensity", difficulty: "HOTS" }, { content: "A descriptive text states: \"The coral reef ecosystem teems with biodiversity, featuring over 400 species of coral that create intricate underwater gardens, while schools of tropical fish navigate through the maze-like structures.\"\n\nWhich aspect demonstrates sophisticated descriptive writing?", image: null, options: [ "Combining factual information with visual metaphors and dynamic action verbs", "Using only scientific terminology", "Listing species names", "Avoiding technical vocabulary", "Using simple present tense exclusively" ], answer: "Combining factual information with visual metaphors and dynamic action verbs", difficulty: "HOTS" }, { content: "Compare these openings:\n\nA: \"I will describe my hometown.\"\nB: \"Cradled between emerald mountains and a sapphire coast, my hometown awakens each morning to the symphony of fishing boats and market vendors.\"\n\nWhy is Opening B more effective for engaging readers in a descriptive essay?", image: null, options: [ "It immediately immerses readers through metaphor, color imagery, and auditory details", "It is more formal", "It announces the topic clearly", "It uses academic language", "It is shorter" ], answer: "It immediately immerses readers through metaphor, color imagery, and auditory details", difficulty: "HOTS" }, { content: "Analyze this description:\n\n\"The centuries-old library wasn't merely a building; it was a sanctuary where time itself seemed suspended, where the whispers of ancient scholars still echoed through corridors lined with wisdom, and where every leather-bound volume held universes waiting to be discovered.\"\n\nWhat advanced descriptive technique is employed?", image: null, options: [ "Extended metaphor with philosophical depth and sensory layering", "Simple comparison", "Chronological description", "Statistical presentation", "Direct statement of facts" ], answer: "Extended metaphor with philosophical depth and sensory layering", difficulty: "HOTS" }, { content: "A student writes: \"The sunset was beautiful with orange and red colors.\"\n\nWhich revision demonstrates mastery of descriptive writing techniques?", image: null, options: [ "The sunset painted the sky in layers of molten gold and crimson, as if the heavens themselves were aflame, casting the world below in warm, amber light", "The sunset had many colors including orange, red, and some yellow", "The beautiful sunset appeared in the sky with various colors", "The sunset that was beautiful showed orange and red", "Many people watched the orange and red sunset" ], answer: "The sunset painted the sky in layers of molten gold and crimson, as if the heavens themselves were aflame, casting the world below in warm, amber light", difficulty: "HOTS" }, { content: "Examine this descriptive passage:\n\n\"The master chef's hands moved with practiced precision, transforming simple ingredients into culinary art. Each motion was deliberate—the rhythmic chopping, the gentle folding of delicate herbs, the careful plating that turned the dish into an edible masterpiece.\"\n\nWhat sophisticated element elevates this description?", image: null, options: [ "Focus on process and movement with specific action verbs and transformation theme", "Listing cooking steps", "Naming kitchen tools", "Describing the chef's appearance", "Explaining recipes" ], answer: "Focus on process and movement with specific action verbs and transformation theme", difficulty: "HOTS" }, { content: "\"Borobudur Temple is the largest Buddhist temple in the world. Located in Central Java, Indonesia, this magnificent structure was built in the 9th century. The temple features 2,672 relief panels and 504 Buddha statues, showcasing incredible ancient craftsmanship.\"\n\nWhat is the primary focus of this descriptive text?", image: null, options: [ "The physical features and historical significance of Borobudur", "How to visit Borobudur Temple", "The religion of Buddhism", "Indonesian tourism industry", "Ancient building techniques" ], answer: "The physical features and historical significance of Borobudur", difficulty: "REGULER" }, { content: "Which sentence demonstrates effective use of descriptive adjectives?", image: null, options: [ "The ancient, moss-covered bridge stretched across the turbulent river", "The bridge is over the river", "There is a bridge", "The bridge was built many years ago", "People cross the bridge daily" ], answer: "The ancient, moss-covered bridge stretched across the turbulent river", difficulty: "REGULER" }, { content: "\"My grandmother's kitchen always smells of cinnamon and vanilla. The worn wooden counters tell stories of countless meals prepared with love, while sunlight streams through lace curtains, creating dancing patterns on the tiled floor.\"\n\nWhat makes this description effective?", image: null, options: [ "It combines sensory details (smell, sight, touch) with emotional connection", "It lists kitchen items", "It uses simple sentences", "It focuses only on furniture", "It provides measurements" ], answer: "It combines sensory details (smell, sight, touch) with emotional connection", difficulty: "REGULER" }, { content: "Identify the correct order of adjectives in English:\n\n\"She wore a _____ dress to the party.\"", image: null, options: [ "beautiful long red silk", "red beautiful silk long", "long silk red beautiful", "silk red long beautiful", "red long beautiful silk" ], answer: "beautiful long red silk", difficulty: "REGULER" }, { content: "\"The rainforest canopy forms a living ceiling, where exotic birds flash their brilliant plumage and monkeys swing through the emerald labyrinth of branches.\"\n\nWhat descriptive technique is used here?", image: null, options: [ "Metaphor and vivid imagery to create atmosphere", "Statistical data about rainforests", "Simple factual statements", "Chronological description", "Scientific classification" ], answer: "Metaphor and vivid imagery to create atmosphere", difficulty: "REGULER" }, { content: "Which of the following would be the BEST opening sentence for a descriptive essay about a city?", image: null, options: [ "Tokyo awakens before dawn, a symphony of neon lights and bustling energy that never truly sleeps", "Tokyo is the capital of Japan", "This essay will describe Tokyo", "Tokyo has many people", "I visited Tokyo last year" ], answer: "Tokyo awakens before dawn, a symphony of neon lights and bustling energy that never truly sleeps", difficulty: "HOTS" }, { content: "Analyze these two descriptions of the same object:\n\nA: \"The watch was expensive and shiny.\"\nB: \"The platinum timepiece gleamed under the showroom lights, its intricate mechanism visible through the sapphire crystal, a masterpiece of Swiss engineering.\"\n\nWhat advanced technique does description B employ?", image: null, options: [ "Specific vocabulary, technical details, and sensory imagery combined", "Longer sentences", "More adjectives only", "Past tense usage", "Personal opinion" ], answer: "Specific vocabulary, technical details, and sensory imagery combined", difficulty: "HOTS" }, { content: "\"The desert stretched endlessly, an ocean of golden sand where heat waves distorted the horizon, and the silence was so profound it seemed to have weight.\"\n\nWhat literary device enhances this description?", image: null, options: [ "Extended metaphor comparing desert to ocean with personification of silence", "Simple comparison", "Direct statement", "Historical reference", "Statistical description" ], answer: "Extended metaphor comparing desert to ocean with personification of silence", difficulty: "HOTS" }, { content: "A student writes: \"The concert was amazing. The music was loud. Everyone was dancing. I had fun.\"\n\nHow should this be improved for advanced descriptive writing?", image: null, options: [ "Integrate sensory details, vary sentence structure, use specific verbs, and create immersive atmosphere", "Add more short sentences", "Use bigger words", "Make it longer only", "Remove all emotions" ], answer: "Integrate sensory details, vary sentence structure, use specific verbs, and create immersive atmosphere", difficulty: "HOTS" }, { content: "Consider this description:\n\n\"The violinist's bow danced across the strings, coaxing melodies that seemed to paint colors in the air, each note a brushstroke in an invisible masterpiece that held the audience spellbound.\"\n\nWhat makes this description sophisticated?", image: null, options: [ "Synesthesia (mixing senses), personification, and metaphorical layering", "Mentioning musical instruments", "Using the past tense", "Describing the audience", "Listing musical terms" ], answer: "Synesthesia (mixing senses), personification, and metaphorical layering", difficulty: "HOTS" } ]; let currentView = 'start'; let currentQuestion = 0; let answers = {}; let studentName = ''; let studentClass = ''; let timeLeft = 90 * 60; let timerInterval = null; let violationCount = 0; let warningTimeout = null; let warningCountdown = 10; let warningInterval = null; let isWarningActive = false; let examStartTime = null; let isTeacherMode = false; const defaultConfig = { primary_color: "#1e40af", background_color: "#eff6ff", text_color: "#1e3a8a", warning_color: "#dc2626", success_color: "#16a34a" }; let config = defaultConfig; const dataHandler = { onDataChanged(data) { console.log('Data updated:', data.length, 'records'); } }; async function initApp() { if (window.dataSdk) { const result = await window.dataSdk.init(dataHandler); if (!result.isOk) { console.error('Failed to initialize Data SDK'); } } if (window.elementSdk) { window.elementSdk.init({ defaultConfig, onConfigChange: async (newConfig) => { config = newConfig; applyStyles(); }, mapToCapabilities: (cfg) => ({ recolorables: [ { get: () => cfg.primary_color || defaultConfig.primary_color, set: (value) => { cfg.primary_color = value; window.elementSdk.setConfig({ primary_color: value }); } }, { get: () => cfg.background_color || defaultConfig.background_color, set: (value) => { cfg.background_color = value; window.elementSdk.setConfig({ background_color: value }); } }, { get: () => cfg.text_color || defaultConfig.text_color, set: (value) => { cfg.text_color = value; window.elementSdk.setConfig({ text_color: value }); } }, { get: () => cfg.warning_color || defaultConfig.warning_color, set: (value) => { cfg.warning_color = value; window.elementSdk.setConfig({ warning_color: value }); } }, { get: () => cfg.success_color || defaultConfig.success_color, set: (value) => { cfg.success_color = value; window.elementSdk.setConfig({ success_color: value }); } } ], borderables: [], fontEditable: undefined, fontSizeable: undefined }), mapToEditPanelValues: (cfg) => new Map() }); } loadSavedProgress(); setupAntiCheat(); render(); } function applyStyles() { const app = document.getElementById('app'); if (app) { app.style.background = `linear-gradient(to bottom right, ${config.background_color}, ${adjustColorBrightness(config.background_color, -10)})`; } } function adjustColorBrightness(hex, percent) { const num = parseInt(hex.replace("#", ""), 16); const amt = Math.round(2.55 * percent); const R = (num >> 16) + amt; const G = (num >> 8 & 0x00FF) + amt; const B = (num & 0x0000FF) + amt; return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)) .toString(16).slice(1); } function setupAntiCheat() { document.addEventListener('visibilitychange', handleVisibilityChange); window.addEventListener('blur', handleBlur); window.addEventListener('focus', handleFocus); document.addEventListener('contextmenu', (e) => e.preventDefault()); document.addEventListener('keydown', (e) => { if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && e.key === 'I') || (e.ctrlKey && e.shiftKey && e.key === 'J') || (e.ctrlKey && e.key === 'U')) { e.preventDefault(); } }); } function handleVisibilityChange() { if (currentView === 'exam' && !isTeacherMode && document.hidden) { showWarning(); } } function handleBlur() { if (currentView === 'exam' && !isTeacherMode && !isWarningActive) { showWarning(); } } function handleFocus() { if (isWarningActive && currentView === 'exam') { hideWarning(); } } function showWarning() { if (isWarningActive) return; isWarningActive = true; violationCount++; warningCountdown = 10; saveProgress(); const warningOverlay = document.createElement('div'); warningOverlay.id = 'warning-overlay'; warningOverlay.className = 'fixed inset-0 z-50 flex items-center justify-center warning-pulse'; warningOverlay.style.backgroundColor = config.warning_color || defaultConfig.warning_color; warningOverlay.innerHTML = ` <div class="text-center text-white p-8"> <div class="text-8xl mb-6">⚠️</div> <h1 class="text-5xl font-bold mb-4">PERINGATAN!</h1> <p class="text-3xl mb-8">JANGAN PINDAH TAB ATAU MINIMIZE!</p> <div class="text-9xl font-bold mb-6 countdown-animation" id="countdown-number">${warningCountdown}</div> <p class="text-2xl mb-6">Detik tersisa sebelum ujian otomatis di-submit</p> <p class="text-xl mb-8">Pelanggaran: ${violationCount}/3</p> <button id="return-button" class="px-8 py-4 text-2xl font-bold rounded-lg transition-all transform hover:scale-105" style="background-color: white; color: ${config.warning_color || defaultConfig.warning_color};"> KEMBALI KE UJIAN </button> </div> `; document.body.appendChild(warningOverlay); document.getElementById('return-button').addEventListener('click', () => { hideWarning(); }); warningInterval = setInterval(() => { warningCountdown--; const countdownEl = document.getElementById('countdown-number'); if (countdownEl) { countdownEl.textContent = warningCountdown; } if (warningCountdown <= 0) { clearInterval(warningInterval); autoSubmitExam(); } }, 1000); if (violationCount >= 3) { clearInterval(warningInterval); setTimeout(() => { autoSubmitExam(); }, 2000); } } function hideWarning() { isWarningActive = false; if (warningInterval) { clearInterval(warningInterval); warningInterval = null; } const overlay = document.getElementById('warning-overlay'); if (overlay) { overlay.remove(); } } function autoSubmitExam() { hideWarning(); if (timerInterval) { clearInterval(timerInterval); } submitExam(); } function loadSavedProgress() { const saved = localStorage.getItem('anbk_progress'); if (saved) { const data = JSON.parse(saved); answers = data.answers || {}; studentName = data.studentName || ''; studentClass = data.studentClass || ''; timeLeft = data.timeLeft || 90 * 60; violationCount = data.violationCount || 0; } } function saveProgress() { localStorage.setItem('anbk_progress', JSON.stringify({ answers, studentName, studentClass, timeLeft, violationCount, timestamp: new Date().toISOString() })); } function startTimer() { if (timerInterval) clearInterval(timerInterval); timerInterval = setInterval(() => { timeLeft--; saveProgress(); if (timeLeft <= 0) { clearInterval(timerInterval); autoSubmitExam(); } render(); }, 1000); } function formatTime(seconds) { const mins = Math.floor(seconds / 60); const secs = seconds % 60; return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; } async function submitExam() { if (timerInterval) { clearInterval(timerInterval); } const score = calculateScore(); const completionTime = formatTime(90 * 60 - timeLeft); // Simpan ke Canva Sheet (Data SDK) if (window.dataSdk && !isTeacherMode) { const result = await window.dataSdk.create({ student_name: studentName, student_class: studentClass, answers: JSON.stringify(answers), score: score, completion_time: completionTime, violations_count: violationCount, submitted_at: new Date().toISOString() }); if (!result.isOk) { console.error('Failed to save exam results to Canva Sheet'); } } // Kirim juga ke Google Spreadsheet if (!isTeacherMode) { try { await fetch(GOOGLE_SCRIPT_URL, { method: 'POST', mode: 'no-cors', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ student_name: studentName, student_class: studentClass, score: score, completion_time: completionTime, violations_count: violationCount, answers: JSON.stringify(answers), submitted_at: new Date().toISOString() }) }); console.log('✅ Data berhasil dikirim ke Google Spreadsheet'); } catch (error) { console.error('❌ Gagal mengirim ke Google Spreadsheet:', error); } } currentView = 'result'; localStorage.removeItem('anbk_progress'); render(); } function calculateScore() { let correct = 0; questions.forEach((q, index) => { if (answers[index] === q.answer) { correct++; } }); return (correct / questions.length) * 100; } function getAnsweredCount() { return Object.keys(answers).length; } function render() { const app = document.getElementById('app'); if (currentView === 'start') { app.innerHTML = renderStartScreen(); attachStartScreenListeners(); } else if (currentView === 'exam') { app.innerHTML = renderExamScreen(); attachExamScreenListeners(); } else if (currentView === 'result') { app.innerHTML = renderResultScreen(); attachResultScreenListeners(); } else if (currentView === 'teacher') { app.innerHTML = renderTeacherScreen(); attachTeacherScreenListeners(); } applyStyles(); } function renderStartScreen() { return ` <div class="min-h-full flex items-center justify-center p-4"> <div class="bg-white rounded-2xl shadow-2xl p-8 max-w-md w-full"> <div class="text-center mb-8"> <div class="text-6xl mb-4">📝</div> <h1 class="text-3xl font-bold mb-2" style="color: ${config.text_color};">UJIAN ANBK</h1> <p class="text-lg" style="color: ${config.text_color};">Bahasa Inggris - Descriptive Text</p> <p class="text-sm mt-2" style="color: ${config.text_color};">SMA Kelas 12</p> </div> <div class="mb-6 p-4 rounded-lg" style="background-color: ${config.background_color};"> <div class="flex justify-between items-center mb-2"> <span class="font-semibold" style="color: ${config.text_color};">⏱️ Waktu:</span> <span style="color: ${config.text_color};">90 menit</span> </div> <div class="flex justify-between items-center mb-2"> <span class="font-semibold" style="color: ${config.text_color};">📝 Jumlah Soal:</span> <span style="color: ${config.text_color};">30 soal</span> </div> <div class="flex justify-between items-center"> <span class="font-semibold" style="color: ${config.text_color};">🎯 Tipe:</span> <span style="color: ${config.text_color};">15 Reguler + 15 HOTS</span> </div> </div> <div class="mb-6"> <label class="block mb-2 font-semibold" style="color: ${config.text_color};">Nama Lengkap:</label> <input type="text" id="student-name" class="w-full p-3 border-2 rounded-lg" style="border-color: ${config.primary_color};" placeholder="Masukkan nama lengkap"> </div> <div class="mb-6"> <label class="block mb-2 font-semibold" style="color: ${config.text_color};">Kelas:</label> <select id="student-class" class="w-full p-3 border-2 rounded-lg" style="border-color: ${config.primary_color};"> <option value="">-- Pilih Kelas --</option> <option value="12 A">12 A</option> <option value="12 B">12 B</option> <option value="12 C">12 C</option> <option value="12 D">12 D</option> <option value="12 E">12 E</option> <option value="12 F">12 F</option> <option value="12 G">12 G</option> <option value="12 H">12 H</option> <option value="12 I">12 I</option> <option value="12 J">12 J</option> <option value="12 K">12 K</option> </select> </div> <div class="mb-6 p-4 rounded-lg border-2" style="border-color: ${config.warning_color}; background-color: #fef2f2;"> <h3 class="font-bold mb-2" style="color: ${config.warning_color};">⚠️ PERHATIAN - SISTEM ANTI-CHEATING:</h3> <ul class="text-sm space-y-1" style="color: ${config.warning_color};"> <li>• DILARANG pindah tab/minimize browser</li> <li>• Peringatan akan muncul jika melanggar</li> <li>• Maksimal 3x pelanggaran</li> <li>• Auto-submit jika lebih dari 3x pelanggaran</li> <li>• Countdown 10 detik untuk kembali ke ujian</li> </ul> </div> <button id="start-btn" class="w-full py-3 rounded-lg text-white font-bold text-lg transition-all transform hover:scale-105" style="background-color: ${config.primary_color};"> MULAI UJIAN </button> <button id="teacher-access-btn" class="w-full mt-3 py-2 rounded-lg font-semibold text-sm transition-all" style="background-color: ${config.background_color}; color: ${config.text_color};"> 🔐 Akses Guru </button> <div class="mt-4 p-3 rounded-lg text-xs text-center" style="background-color: ${config.success_color}; color: white;"> ✅ Data otomatis tersimpan ke Canva Sheet & Google Spreadsheet </div> </div> </div> `; } function attachStartScreenListeners() { const startBtn = document.getElementById('start-btn'); const nameInput = document.getElementById('student-name'); const classInput = document.getElementById('student-class'); const teacherBtn = document.getElementById('teacher-access-btn'); startBtn.addEventListener('click', () => { const name = nameInput.value.trim(); const cls = classInput.value.trim(); if (!name || !cls) { showInlineMessage('Mohon isi nama dan kelas terlebih dahulu!', 'error'); return; } studentName = name; studentClass = cls; examStartTime = new Date(); currentView = 'exam'; startTimer(); render(); }); teacherBtn.addEventListener('click', () => { showPasswordDialog(); }); } function renderExamScreen() { const question = questions[currentQuestion]; const answeredCount = getAnsweredCount(); return ` <div class="flex flex-col lg:flex-row h-full"> <!-- Header Mobile - Timer & Info --> <div class="lg:hidden bg-white shadow-md p-3 sticky top-0 z-10"> <div class="flex justify-between items-center mb-3"> <div class="flex-1"> <div class="text-xs font-semibold" style="color: ${config.text_color};">${studentName} - ${studentClass}</div> <div class="text-xs" style="color: ${config.text_color};">Dijawab: ${answeredCount}/${questions.length}</div> </div> <div class="text-center px-3 py-2 rounded-lg" style="background-color: ${config.primary_color};"> <div class="text-lg font-bold text-white">${formatTime(timeLeft)}</div> <div class="text-xs text-white">Tersisa</div> </div> </div> <!-- Navigation Soal Mobile --> <div class="mb-2"> <div class="flex justify-between items-center mb-2"> <h3 class="font-bold text-xs" style="color: ${config.text_color};">NAVIGASI SOAL:</h3> <div class="flex items-center gap-2 text-xs"> <div class="flex items-center"> <div class="w-3 h-3 rounded mr-1" style="background-color: ${config.success_color};"></div> <span style="color: ${config.text_color};">Dijawab</span> </div> <div class="flex items-center"> <div class="w-3 h-3 rounded mr-1" style="background-color: ${config.background_color}; border: 1px solid ${config.text_color};"></div> <span style="color: ${config.text_color};">Belum</span> </div> </div> </div> <div class="grid grid-cols-10 gap-1 mb-2"> ${questions.map((_, index) => ` <button class="question-nav-btn w-full aspect-square rounded text-xs font-semibold transition-all ${ currentQuestion === index ? 'ring-2 ring-offset-1' : '' }" data-index="${index}" style="background-color: ${ answers[index] !== undefined ? config.success_color : config.background_color }; color: ${ answers[index] !== undefined ? 'white' : config.text_color }; ${ currentQuestion === index ? `ring-color: ${config.primary_color};` : '' }"> ${index + 1} </button> `).join('')} </div> </div> ${violationCount > 0 ? ` <div class="p-2 rounded-lg text-xs text-center" style="background-color: #fef2f2; color: ${config.warning_color};"> ⚠️ Pelanggaran: ${violationCount}/3 </div> ` : ''} </div> <!-- Sidebar Desktop --> <div class="hidden lg:block w-64 bg-white shadow-xl p-4 overflow-y-auto"> <div class="mb-6"> <div class="text-center p-3 rounded-lg mb-4" style="background-color: ${config.primary_color};"> <div class="text-2xl font-bold text-white">${formatTime(timeLeft)}</div> <div class="text-xs text-white">Waktu Tersisa</div> </div> <div class="text-sm mb-2" style="color: ${config.text_color};"> <strong>${studentName}</strong><br> ${studentClass} </div> <div class="text-xs" style="color: ${config.text_color};"> Dijawab: ${answeredCount}/${questions.length} </div> </div> <div class="mb-4"> <h3 class="font-bold mb-3 text-sm" style="color: ${config.text_color};">NOMOR SOAL:</h3> <div class="grid grid-cols-5 gap-2"> ${questions.map((_, index) => ` <button class="question-nav-btn w-10 h-10 rounded-lg font-semibold text-sm transition-all ${ currentQuestion === index ? 'ring-2 ring-offset-2' : '' }" data-index="${index}" style="background-color: ${ answers[index] !== undefined ? config.success_color : config.background_color }; color: ${ answers[index] !== undefined ? 'white' : config.text_color }; ${ currentQuestion === index ? `ring-color: ${config.primary_color};` : '' }"> ${index + 1} </button> `).join('')} </div> </div> <div class="mb-4 p-3 rounded-lg text-xs" style="background-color: ${config.background_color}; color: ${config.text_color};"> <div class="flex items-center mb-1"> <div class="w-4 h-4 rounded mr-2" style="background-color: ${config.success_color};"></div> Sudah dijawab </div> <div class="flex items-center"> <div class="w-4 h-4 rounded mr-2" style="background-color: ${config.background_color}; border: 1px solid ${config.text_color};"></div> Belum dijawab </div> </div> ${answeredCount === questions.length ? ` <button id="submit-btn-desktop" class="w-full py-3 rounded-lg text-white font-bold text-sm mb-4 transition-all transform hover:scale-105" style="background-color: ${config.success_color};"> ✓ SUBMIT UJIAN </button> ` : ''} ${violationCount > 0 ? ` <div class="p-3 rounded-lg text-xs" style="background-color: #fef2f2; color: ${config.warning_color};"> ⚠️ Pelanggaran: ${violationCount}/3 </div> ` : ''} </div> <!-- Main Content --> <div class="flex-1 overflow-y-auto p-3 lg:p-6"> <div class="max-w-4xl mx-auto"> <div class="bg-white rounded-2xl shadow-xl p-4 lg:p-8"> <div class="flex justify-between items-center mb-4 lg:mb-6"> <h2 class="text-lg lg:text-2xl font-bold" style="color: ${config.text_color};">Soal ${currentQuestion + 1} dari ${questions.length}</h2> <span class="px-3 lg:px-4 py-1 rounded-full text-xs lg:text-sm font-semibold" style="background-color: ${ question.difficulty === 'HOTS' ? config.warning_color : config.primary_color }; color: white;"> ${question.difficulty} </span> </div> <div class="mb-6 lg:mb-8"> <p class="text-base lg:text-lg whitespace-pre-line leading-relaxed" style="color: ${config.text_color};">${question.content}</p> ${question.image ? ` <img src="${question.image}" alt="Soal" class="mt-4 rounded-lg max-w-full"> ` : ''} </div> <div class="space-y-2 lg:space-y-3"> ${question.options.map((option, idx) => ` <label class="flex items-start p-3 lg:p-4 rounded-lg cursor-pointer transition-all border-2 ${ answers[currentQuestion] === option ? 'ring-2 ring-offset-2' : '' }" style="border-color: ${ answers[currentQuestion] === option ? config.primary_color : '#e5e7eb' }; ${ answers[currentQuestion] === option ? `background-color: ${config.background_color}; ring-color: ${config.primary_color};` : 'background-color: white;' }"> <input type="radio" name="answer" value="${option}" class="mt-1 mr-2 lg:mr-3" ${answers[currentQuestion] === option ? 'checked' : ''}> <span class="text-sm lg:text-base" style="color: ${config.text_color};">${String.fromCharCode(65 + idx)}. ${option}</span> </label> `).join('')} </div> <!-- Mobile Submit Button --> <div class="lg:hidden mt-6 mb-4"> ${answeredCount === questions.length ? ` <button id="submit-btn-mobile" class="w-full py-4 rounded-lg text-white font-bold text-lg transition-all transform hover:scale-105 shadow-lg" style="background-color: ${config.success_color};"> ✓ SUBMIT UJIAN (${answeredCount}/${questions.length}) </button> ` : ` <div class="w-full py-4 rounded-lg text-center font-bold text-lg opacity-50 cursor-not-allowed" style="background-color: ${config.background_color}; color: ${config.text_color};"> Jawab semua soal untuk submit (${answeredCount}/${questions.length}) </div> `} </div> <div class="flex justify-between gap-2 mt-6"> <button id="prev-btn" class="px-4 lg:px-6 py-2 lg:py-3 rounded-lg font-semibold text-sm lg:text-base transition-all" style="background-color: ${config.background_color}; color: ${config.text_color};" ${currentQuestion === 0 ? 'disabled' : ''}> ← Sebelumnya </button> ${currentQuestion === questions.length - 1 ? '' : ` <button id="next-btn" class="px-4 lg:px-6 py-2 lg:py-3 rounded-lg text-white font-semibold text-sm lg:text-base transition-all transform hover:scale-105" style="background-color: ${config.primary_color};"> Selanjutnya → </button> `} </div> </div> </div> </div> </div> `; } function attachExamScreenListeners() { const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const submitBtnMobile = document.getElementById('submit-btn-mobile'); const submitBtnDesktop = document.getElementById('submit-btn-desktop'); const answerInputs = document.querySelectorAll('input[name="answer"]'); const questionNavBtns = document.querySelectorAll('.question-nav-btn'); answerInputs.forEach(input => { input.addEventListener('change', (e) => { answers[currentQuestion] = e.target.value; saveProgress(); render(); }); }); questionNavBtns.forEach(btn => { btn.addEventListener('click', () => { currentQuestion = parseInt(btn.dataset.index); render(); }); }); if (prevBtn) { prevBtn.addEventListener('click', () => { if (currentQuestion > 0) { currentQuestion--; render(); } }); } if (nextBtn) { nextBtn.addEventListener('click', () => { if (currentQuestion < questions.length - 1) { currentQuestion++; render(); } }); } if (submitBtnMobile) { submitBtnMobile.addEventListener('click', () => { const answeredCount = getAnsweredCount(); if (answeredCount < questions.length) { const confirmMsg = `Anda baru menjawab ${answeredCount} dari ${questions.length} soal.\n\nYakin ingin submit sekarang?`; showConfirmDialog(confirmMsg, () => { submitExam(); }); } else { submitExam(); } }); } if (submitBtnDesktop) { submitBtnDesktop.addEventListener('click', () => { const answeredCount = getAnsweredCount(); if (answeredCount < questions.length) { const confirmMsg = `Anda baru menjawab ${answeredCount} dari ${questions.length} soal.\n\nYakin ingin submit sekarang?`; showConfirmDialog(confirmMsg, () => { submitExam(); }); } else { submitExam(); } }); } } function renderResultScreen() { const score = calculateScore(); const completionTime = formatTime(90 * 60 - timeLeft); const correct = Math.round((score / 100) * questions.length); return ` <div class="min-h-full flex items-center justify-center p-4"> <div class="bg-white rounded-2xl shadow-2xl p-8 max-w-2xl w-full"> <div class="text-center mb-8"> <div class="text-8xl mb-4">${score >= 75 ? '🎉' : score >= 60 ? '👍' : '💪'}</div> <h1 class="text-4xl font-bold mb-2" style="color: ${config.text_color};">UJIAN SELESAI!</h1> <p class="text-xl" style="color: ${config.text_color};">Hasil Ujian ANBK Anda</p> </div> <div class="space-y-4 mb-8"> <div class="p-4 rounded-lg" style="background-color: ${config.background_color};"> <div class="flex justify-between items-center"> <span class="font-semibold" style="color: ${config.text_color};">Nama:</span> <span style="color: ${config.text_color};">${studentName}</span> </div> </div> <div class="p-4 rounded-lg" style="background-color: ${config.background_color};"> <div class="flex justify-between items-center"> <span class="font-semibold" style="color: ${config.text_color};">Kelas:</span> <span style="color: ${config.text_color};">${studentClass}</span> </div> </div> <div class="p-6 rounded-lg text-center" style="background-color: ${score >= 75 ? config.success_color : score >= 60 ? '#f59e0b' : config.warning_color};"> <div class="text-5xl font-bold text-white mb-2">${score.toFixed(1)}</div> <div class="text-white">Nilai Akhir</div> </div> <div class="grid grid-cols-2 gap-4"> <div class="p-4 rounded-lg" style="background-color: ${config.background_color};"> <div class="text-center"> <div class="text-3xl font-bold" style="color: ${config.success_color};">${correct}</div> <div class="text-sm" style="color: ${config.text_color};">Benar</div> </div> </div> <div class="p-4 rounded-lg" style="background-color: ${config.background_color};"> <div class="text-center"> <div class="text-3xl font-bold" style="color: ${config.warning_color};">${questions.length - correct}</div> <div class="text-sm" style="color: ${config.text_color};">Salah</div> </div> </div> </div> <div class="p-4 rounded-lg" style="background-color: ${config.background_color};"> <div class="flex justify-between items-center"> <span class="font-semibold" style="color: ${config.text_color};">Waktu Pengerjaan:</span> <span style="color: ${config.text_color};">${completionTime}</span> </div> </div> ${violationCount > 0 ? ` <div class="p-4 rounded-lg" style="background-color: #fef2f2;"> <div class="flex justify-between items-center"> <span class="font-semibold" style="color: ${config.warning_color};">Pelanggaran:</span> <span style="color: ${config.warning_color};">${violationCount}x</span> </div> </div> ` : ''} <div class="p-3 rounded-lg text-sm text-center" style="background-color: ${config.success_color}; color: white;"> ✅ Data tersimpan di Canva Sheet & Google Spreadsheet </div> </div> <div class="space-y-3"> <button id="screenshot-btn" class="w-full py-3 rounded-lg text-white font-semibold transition-all transform hover:scale-105" style="background-color: ${config.primary_color};"> 📸 Screenshot Hasil </button> <button id="restart-btn" class="w-full py-3 rounded-lg font-semibold transition-all" style="background-color: ${config.background_color}; color: ${config.text_color};"> 🔄 Ujian Baru </button> </div> </div> </div> `; } function attachResultScreenListeners() { const screenshotBtn = document.getElementById('screenshot-btn'); const restartBtn = document.getElementById('restart-btn'); screenshotBtn.addEventListener('click', () => { showInlineMessage('Gunakan screenshot tool browser Anda (Print Screen atau Ctrl+Shift+S)', 'info'); }); restartBtn.addEventListener('click', () => { showConfirmDialog('Yakin ingin memulai ujian baru? Progress saat ini akan dihapus.', () => { resetExam(); }); }); } function renderTeacherScreen() { return ` <div class="min-h-full p-6"> <div class="max-w-6xl mx-auto"> <div class="bg-white rounded-2xl shadow-2xl p-8 mb-6"> <div class="flex justify-between items-center mb-6"> <div> <h1 class="text-3xl font-bold" style="color: ${config.text_color};">Mode Guru</h1> <p style="color: ${config.text_color};">Kunci Jawaban & Pembahasan</p> </div> <button id="exit-teacher-btn" class="px-6 py-2 rounded-lg font-semibold transition-all" style="background-color: ${config.warning_color}; color: white;"> ← Keluar </button> </div> <div class="space-y-6"> ${questions.map((q, index) => ` <div class="border-2 rounded-lg p-6" style="border-color: ${config.background_color};"> <div class="flex justify-between items-start mb-4"> <h3 class="text-xl font-bold" style="color: ${config.text_color};">Soal ${index + 1}</h3> <div class="flex gap-2 items-center"> <span class="px-3 py-1 rounded-full text-sm font-semibold" style="background-color: ${ q.difficulty === 'HOTS' ? config.warning_color : config.primary_color }; color: white;"> ${q.difficulty} </span> <button class="edit-question-btn px-3 py-1 rounded-lg text-sm font-semibold transition-all" data-index="${index}" style="background-color: ${config.primary_color}; color: white;"> ✏️ Edit </button> </div> </div> <p class="mb-4 whitespace-pre-line" style="color: ${config.text_color};">${q.content}</p> ${q.image ? ` <img src="${q.image}" alt="Soal ${index + 1}" class="mb-4 rounded-lg max-w-md"> ` : ''} <div class="space-y-2 mb-4"> ${q.options.map((option, idx) => ` <div class="flex items-start p-3 rounded-lg ${option === q.answer ? 'ring-2' : ''}" style="background-color: ${option === q.answer ? config.success_color : config.background_color}; color: ${option === q.answer ? 'white' : config.text_color}; ${option === q.answer ? `ring-color: ${config.success_color};` : ''}"> <span class="font-semibold mr-2">${String.fromCharCode(65 + idx)}.</span> <span>${option}</span> ${option === q.answer ? ' ✓' : ''} </div> `).join('')} </div> <div class="p-4 rounded-lg" style="background-color: ${config.success_color}; color: white;"> <strong>Kunci Jawaban: ${q.answer}</strong> </div> </div> `).join('')} </div> </div> </div> </div> `; } function attachTeacherScreenListeners() { const exitBtn = document.getElementById('exit-teacher-btn'); const editBtns = document.querySelectorAll('.edit-question-btn'); exitBtn.addEventListener('click', () => { isTeacherMode = false; currentView = 'start'; render(); }); editBtns.forEach(btn => { btn.addEventListener('click', () => { const questionIndex = parseInt(btn.dataset.index); showEditQuestionDialog(questionIndex); }); }); } function resetExam() { currentQuestion = 0; answers = {}; timeLeft = 90 * 60; violationCount = 0; studentName = ''; studentClass = ''; examStartTime = null; isTeacherMode = false; currentView = 'start'; if (timerInterval) { clearInterval(timerInterval); timerInterval = null; } localStorage.removeItem('anbk_progress'); render(); } function showInlineMessage(message, type) { const messageDiv = document.createElement('div'); messageDiv.className = 'fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 transition-all transform'; messageDiv.style.backgroundColor = type === 'error' ? config.warning_color : type === 'success' ? config.success_color : config.primary_color; messageDiv.style.color = 'white'; messageDiv.textContent = message; document.body.appendChild(messageDiv); setTimeout(() => { messageDiv.style.opacity = '0'; setTimeout(() => messageDiv.remove(), 300); }, 3000); } function showConfirmDialog(message, onConfirm) { const overlay = document.createElement('div'); overlay.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50'; overlay.innerHTML = ` <div class="bg-white rounded-2xl p-8 max-w-md mx-4 shadow-2xl"> <p class="text-lg mb-6" style="color: ${config.text_color};">${message}</p> <div class="flex gap-4"> <button id="confirm-yes" class="flex-1 py-3 rounded-lg text-white font-semibold" style="background-color: ${config.success_color};"> Ya, Submit </button> <button id="confirm-no" class="flex-1 py-3 rounded-lg font-semibold" style="background-color: ${config.background_color}; color: ${config.text_color};"> Batal </button> </div> </div> `; document.body.appendChild(overlay); document.getElementById('confirm-yes').addEventListener('click', () => { overlay.remove(); onConfirm(); }); document.getElementById('confirm-no').addEventListener('click', () => { overlay.remove(); }); } function showPasswordDialog() { const overlay = document.createElement('div'); overlay.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50'; overlay.innerHTML = ` <div class="bg-white rounded-2xl p-8 max-w-md mx-4 shadow-2xl"> <h2 class="text-2xl font-bold mb-4" style="color: ${config.text_color};">🔐 Akses Guru</h2> <p class="mb-4" style="color: ${config.text_color};">Masukkan password untuk mengakses mode guru:</p> <input type="password" id="teacher-password" class="w-full p-3 border-2 rounded-lg mb-4" style="border-color: ${config.primary_color};" placeholder="Password guru"> <div id="password-error" class="text-sm mb-4 hidden" style="color: ${config.warning_color};"> ❌ Password salah! Coba lagi. </div> <div class="flex gap-4"> <button id="password-submit" class="flex-1 py-3 rounded-lg text-white font-semibold" style="background-color: ${config.primary_color};"> Masuk </button> <button id="password-cancel" class="flex-1 py-3 rounded-lg font-semibold" style="background-color: ${config.background_color}; color: ${config.text_color};"> Batal </button> </div> </div> `; document.body.appendChild(overlay); const passwordInput = document.getElementById('teacher-password'); const errorDiv = document.getElementById('password-error'); passwordInput.focus(); passwordInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') { document.getElementById('password-submit').click(); } }); document.getElementById('password-submit').addEventListener('click', () => { const password = passwordInput.value; if (password === 'masbaha1975') { overlay.remove(); isTeacherMode = true; currentView = 'teacher'; render(); } else { errorDiv.classList.remove('hidden'); passwordInput.value = ''; passwordInput.focus(); } }); document.getElementById('password-cancel').addEventListener('click', () => { overlay.remove(); }); overlay.addEventListener('click', (e) => { if (e.target === overlay) { overlay.remove(); } }); } function showEditQuestionDialog(questionIndex) { const question = questions[questionIndex]; const overlay = document.createElement('div'); overlay.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 overflow-y-auto p-4'; overlay.innerHTML = ` <div class="bg-white rounded-2xl p-8 max-w-4xl w-full my-8 shadow-2xl"> <h2 class="text-2xl font-bold mb-6" style="color: ${config.text_color};">✏️ Edit Soal ${questionIndex + 1}</h2> <div class="space-y-4 mb-6"> <div> <label class="block mb-2 font-semibold" style="color: ${config.text_color};">Pertanyaan:</label> <textarea id="edit-content" class="w-full p-3 border-2 rounded-lg" rows="6" style="border-color: ${config.primary_color};">${question.content} Tingkat Kesulitan: REGULER HOTS Pilihan Jawaban: ${question.options.map((option, idx) => ` Opsi ${String.fromCharCode(65 + idx)}: `).join('')} Kunci Jawaban: ${question.options.map((option, idx) => ` ${String.fromCharCode(65 + idx)}. ${option} `).join('')}
