Bhs Inggris

UJIAN Deskriptif

Desember 31, 2025 http://bambangharyanto21.madrasah.id 0

<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();
      }
    }

if (violationCount >= 3) {
        clearInterval(warningInterval);
        setTimeout(() => {
          autoSubmitExam();
        }, 2000);
      }
    }

function autoSubmitExam() {
      hideWarning();
      if (timerInterval) {
        clearInterval(timerInterval);
      }
      submitExam();
    }

function saveProgress() {
      localStorage.setItem('anbk_progress', JSON.stringify({
        answers,
        studentName,
        studentClass,
        timeLeft,
        violationCount,
        timestamp: new Date().toISOString()
      }));
    }

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 getAnsweredCount() {
      return Object.keys(answers).length;
    }

<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">
          
          <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>

<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>

<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>

<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>

<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();
        });
      });
    }

<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 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);
    }

Tingkat Kesulitan:

Pilihan Jawaban: ${question.options.map((option, idx) => `

Opsi ${String.fromCharCode(65 + idx)}:

`).join('')}

Kunci Jawaban:

`; document.body.appendChild(overlay); document.getElementById('save-edit-btn').addEventListener('click', () => { const newContent = document.getElementById('edit-content').value.trim(); const newDifficulty = document.getElementById('edit-difficulty').value; const newOptions = []; for (let i = 0; i < question.options.length; i++) { const optionValue = document.getElementById(`edit-option-${i}`).value.trim(); if (!optionValue) { showInlineMessage('Semua opsi harus diisi!', 'error'); return; } newOptions.push(optionValue); } const answerIndex = parseInt(document.getElementById('edit-answer').value); const newAnswer = newOptions[answerIndex]; if (!newContent) { showInlineMessage('Pertanyaan tidak boleh kosong!', 'error'); return; } questions[questionIndex].content = newContent; questions[questionIndex].difficulty = newDifficulty; questions[questionIndex].options = newOptions; questions[questionIndex].answer = newAnswer; overlay.remove(); showInlineMessage('Soal berhasil diperbarui!', 'success'); render(); }); document.getElementById('cancel-edit-btn').addEventListener('click', () => { overlay.remove(); }); overlay.addEventListener('click', (e) => { if (e.target === overlay) { overlay.remove(); } }); } document.addEventListener('DOMContentLoaded', initApp);

UJIAN Deskriptif

ANBK - Ujian Bahasa Inggris

Baca selengkapnya »

soal thank you

Desember 31, 2025 http://bambangharyanto21.madrasah.id 0

<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="https://cdn.tailwindcss.com"></script>
  <style>
    body {
      box-sizing: border-box;
    }
    
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    .question-number {
      transition: all 0.2s;
    }
    
    .question-number:hover {
      transform: scale(1.05);
    }
    
    .answered {
      background: #2563eb;
      color: white;
    }
    
    .doubt {
      background: #f59e0b;
      color: white;
    }
    
    .current {
      border: 3px solid #1e40af;
    }
    
    @keyframes pulse-red {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
    
    .warning-overlay {
      animation: pulse-red 1s infinite;
    }
    
    @keyframes countdown-pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }
    
    .countdown-number {
      animation: countdown-pulse 1s infinite;
    }
    
    .option-button {
      transition: all 0.2s;
    }
    
    .option-button:hover {
      transform: translateX(4px);
    }
    
    .option-selected {
      background: #dbeafe;
      border-color: #2563eb;
    }
    
    @media print {
      .no-print {
        display: none !important;
      }
      
      body {
        background: white !important;
      }
      
      #resultScreen {
        padding: 20px !important;
      }
      
      .bg-gradient-to-br {
        background: white !important;
      }
      
      .shadow-2xl {
        box-shadow: none !important;
      }
      
      .print-header {
        border-bottom: 3px solid #1e40af;
        padding-bottom: 20px;
        margin-bottom: 30px;
      }
      
      .print-section {
        page-break-inside: avoid;
      }
    }
  </style>
  <style>@view-transition { navigation: auto; }</style>
  <script src="/_sdk/data_sdk.js" type="text/javascript"></script>
  <script src="/_sdk/element_sdk.js" type="text/javascript"></script>
 </head>
 <body class="h-full bg-gradient-to-br from-blue-50 to-blue-100">
  <div id="loginScreen" class="h-full flex items-center justify-center p-4">
   <div class="bg-white rounded-2xl shadow-2xl p-8 w-full max-w-md">
    <div class="text-center mb-6">
     <div class="bg-blue-600 text-white w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4"><span class="text-4xl">📝</span>
     </div>
     <h1 class="text-3xl font-bold text-blue-900 mb-2">ANBK 2024</h1>
     <p class="text-gray-600">Ujian Bahasa Inggris - Kelas 12</p>
     <p class="text-sm text-gray-500 mt-2">Ungkapan Terimakasih</p>
    </div>
    <div class="space-y-4">
     <div><label class="block text-sm font-semibold text-gray-700 mb-2" for="studentName">Nama Lengkap</label> <input type="text" id="studentName" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none" placeholder="Masukkan nama lengkap">
     </div>
     <div><label class="block text-sm font-semibold text-gray-700 mb-2" for="studentClass">Kelas</label> <select id="studentClass" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"> <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="bg-blue-50 p-4 rounded-lg">
      <div class="flex items-center gap-3 text-sm"><span class="text-2xl">⏱️</span>
       <div>
        <p class="font-semibold text-blue-900">Waktu: 90 Menit</p>
        <p class="text-blue-700">Total Soal: 40 (20 Reguler + 20 HOTS)</p>
       </div>
      </div>
     </div>
     <div class="bg-red-50 border-2 border-red-300 p-4 rounded-lg">
      <p class="text-sm font-bold text-red-900 mb-2">⚠️ PERINGATAN ANTI-CHEATING:</p>
      <ul class="text-xs text-red-800 space-y-1">
       <li>• JANGAN pindah tab atau minimize browser</li>
       <li>• Maksimal 3x peringatan, lebih dari itu ujian otomatis submit</li>
       <li>• Jika pindah tab 10 detik, ujian auto-submit</li>
       <li>• F12, Inspect, dan Right-click diblokir</li>
      </ul>
     </div><button onclick="startExam()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 rounded-lg text-lg transition-all transform hover:scale-105"> MULAI UJIAN </button> <button onclick="showTeacherLogin()" class="w-full bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-3 rounded-lg transition-all"> 🔑 Mode Guru </button>
    </div>
   </div>
  </div>
  <div id="teacherLogin" class="hidden h-full flex items-center justify-center p-4" style="background: rgba(0,0,0,0.5);">
   <div class="bg-white rounded-2xl shadow-2xl p-8 w-full max-w-md">
    <h2 class="text-2xl font-bold text-blue-900 mb-6 text-center">🔐 Akses Guru</h2>
    <div class="space-y-4">
     <div><label class="block text-sm font-semibold text-gray-700 mb-2" for="teacherPassword">Password</label> <input type="password" id="teacherPassword" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none" placeholder="Masukkan password">
     </div><button onclick="verifyTeacher()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition-all"> MASUK </button> <button onclick="hideTeacherLogin()" class="w-full bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-3 rounded-lg transition-all"> BATAL </button>
    </div>
   </div>
  </div>
  <div id="warningOverlay" class="hidden fixed inset-0 bg-red-600 warning-overlay z-50 flex flex-col items-center justify-center p-8">
   <div class="text-center text-white">
    <div class="text-9xl mb-8">
     ⚠️
    </div>
    <h1 class="text-6xl font-bold mb-6">PERINGATAN!</h1>
    <p class="text-3xl mb-8">JANGAN PINDAH TAB!</p>
    <div class="bg-white text-red-600 rounded-full w-48 h-48 flex items-center justify-center mx-auto mb-8"><span id="warningCountdown" class="text-8xl font-bold countdown-number">10</span>
    </div>
    <p class="text-2xl mb-6">Ujian akan otomatis disubmit dalam <span id="warningCountdownText" class="font-bold">10</span> detik</p>
    <div class="bg-yellow-400 text-red-900 px-8 py-4 rounded-lg mb-8 inline-block">
     <p class="text-xl font-bold">Pelanggaran: <span id="violationCount">0</span>/3</p>
    </div><button onclick="returnToExam()" class="bg-white text-red-600 font-bold py-6 px-12 rounded-lg text-2xl hover:bg-gray-100 transition-all transform hover:scale-105 shadow-2xl"> KEMBALI KE UJIAN </button>
   </div>
  </div>
  <div id="examScreen" class="hidden h-full flex flex-col">
   <div class="bg-blue-900 text-white py-4 px-6 shadow-lg no-print">
    <div class="flex justify-between items-center">
     <div>
      <h2 class="text-xl font-bold">ANBK - Bahasa Inggris</h2>
      <p class="text-sm text-blue-200" id="studentInfo"></p>
     </div>
     <div class="text-center">
      <div class="bg-white text-blue-900 px-6 py-3 rounded-lg font-bold text-2xl" id="timer">
       90:00
      </div>
      <p class="text-xs mt-1 text-blue-200">Waktu Tersisa</p>
     </div>
    </div>
   </div>
   <div class="flex-1 flex overflow-hidden">
    <div id="desktopSidebar" class="w-64 bg-white shadow-lg overflow-y-auto no-print transition-all duration-300">
     <div class="p-4">
      <div class="flex justify-between items-center mb-4">
       <h3 class="font-bold text-gray-700">Navigasi Soal</h3><button onclick="toggleDesktopSidebar()" class="text-gray-600 hover:text-gray-800 font-bold text-xl" title="Sembunyikan navigasi"> ◀ </button>
      </div>
      <div class="grid grid-cols-4 gap-2" id="questionNav"></div>
      <div class="mt-6 space-y-2 text-xs">
       <div class="flex items-center gap-2">
        <div class="w-8 h-8 bg-gray-200 rounded"></div><span>Belum dijawab</span>
       </div>
       <div class="flex items-center gap-2">
        <div class="w-8 h-8 bg-blue-600 rounded"></div><span>Sudah dijawab</span>
       </div>
       <div class="flex items-center gap-2">
        <div class="w-8 h-8 bg-orange-500 rounded"></div><span>Ragu-ragu</span>
       </div>
      </div><button onclick="submitExam()" class="w-full mt-6 bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-lg transition-all"> SUBMIT UJIAN </button>
     </div>
    </div>
    <div class="flex-1 overflow-y-auto p-8 bg-white relative"> <button id="showSidebarBtn" onclick="toggleDesktopSidebar()" class="hidden fixed left-4 top-24 bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-lg shadow-lg z-10 no-print" title="Tampilkan navigasi"> ▶ Navigasi </button>
     <div id="questionContainer"></div>
     <div class="flex justify-between items-center mt-8 no-print"><button onclick="previousQuestion()" id="prevBtn" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-3 px-6 rounded-lg transition-all"> ← Sebelumnya </button>
      <div class="flex gap-3"><button onclick="toggleDoubt()" id="doubtBtn" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-lg transition-all"> 🤔 Ragu-ragu </button> <button onclick="nextQuestion()" id="nextBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition-all"> Selanjutnya ��� </button>
      </div>
     </div>
    </div>
   </div>
  </div>
  <div id="resultScreen" class="hidden h-full overflow-y-auto p-8">
   <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-2xl shadow-2xl p-8" id="resultContent">
     <div class="print-header">
      <div class="text-center mb-8">
       <div class="text-6xl mb-4 no-print">
        🎓
       </div>
       <h1 class="text-4xl font-bold text-blue-900 mb-2">Hasil Ujian ANBK</h1>
       <p class="text-gray-600">Ujian Bahasa Inggris - Ungkapan Terimakasih</p>
       <p class="text-sm text-gray-500 mt-2">Kelas 12 - Tahun 2024</p>
      </div>
     </div>
     <div class="print-section">
      <div class="grid md:grid-cols-2 gap-6 mb-8">
       <div class="bg-blue-50 p-6 rounded-lg">
        <p class="text-sm text-gray-600 mb-1">Nama Siswa</p>
        <p class="text-xl font-bold text-blue-900" id="resultName"></p>
       </div>
       <div class="bg-blue-50 p-6 rounded-lg">
        <p class="text-sm text-gray-600 mb-1">Kelas</p>
        <p class="text-xl font-bold text-blue-900" id="resultClass"></p>
       </div>
      </div>
     </div>
     <div class="print-section">
      <div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white p-8 rounded-xl mb-8 text-center">
       <p class="text-2xl mb-2">Nilai Akhir</p>
       <p class="text-7xl font-bold" id="finalScore">0</p>
       <p class="text-xl mt-2" id="scoreCategory"></p>
      </div>
     </div>
     <div class="print-section">
      <div class="grid md:grid-cols-3 gap-4 mb-8">
       <div class="bg-green-50 border-2 border-green-300 p-4 rounded-lg text-center">
        <p class="text-3xl font-bold text-green-700" id="correctCount">0</p>
        <p class="text-sm text-gray-600">Benar</p>
       </div>
       <div class="bg-red-50 border-2 border-red-300 p-4 rounded-lg text-center">
        <p class="text-3xl font-bold text-red-700" id="wrongCount">0</p>
        <p class="text-sm text-gray-600">Salah</p>
       </div>
       <div class="bg-yellow-50 border-2 border-yellow-300 p-4 rounded-lg text-center">
        <p class="text-3xl font-bold text-yellow-700" id="violationCountResult">0</p>
        <p class="text-sm text-gray-600">Pelanggaran</p>
       </div>
      </div>
     </div>
     <div class="print-section mt-8 pt-6 border-t-2 border-gray-200">
      <div class="grid grid-cols-2 gap-8 text-center">
       <div>
        <p class="text-sm text-gray-600 mb-8">Mengetahui,</p>
        <p class="text-sm text-gray-600 mb-2">Guru Mata Pelajaran</p>
        <div class="border-b-2 border-black w-48 mx-auto mt-16 mb-2"></div>
        <p class="text-sm font-semibold">(...........................)</p>
       </div>
       <div>
        <p class="text-sm text-gray-600 mb-8">Siswa,</p>
        <p class="text-sm text-gray-600 mb-2"> </p>
        <div class="border-b-2 border-black w-48 mx-auto mt-16 mb-2"></div>
        <p class="text-sm font-semibold" id="resultNameFooter"></p>
       </div>
      </div>
      <p class="text-center text-xs text-gray-500 mt-8">Tanggal Cetak: <span id="printDate"></span></p>
     </div>
     <div class="flex gap-4 no-print mt-8"><button onclick="printResult()" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 rounded-lg transition-all"> 🖨️ Cetak Hasil </button> <button onclick="restartExam()" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-4 rounded-lg transition-all"> �� Ujian Baru </button>
     </div>
    </div>
   </div>
  </div>
  <div id="teacherMode" class="hidden h-full overflow-y-auto p-8">
   <div class="max-w-6xl mx-auto">
    <div class="bg-white rounded-2xl shadow-2xl p-8">
     <div class="flex justify-between items-center mb-8">
      <h1 class="text-3xl font-bold text-blue-900">👨‍🏫 Mode Guru - Kunci Jawaban</h1><button onclick="exitTeacherMode()" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-6 rounded-lg transition-all"> Keluar </button>
     </div>
     <div id="answerKeyContainer" class="space-y-6"></div>
    </div>
   </div>
  </div>
  <script>
    // ====== KONFIGURASI GOOGLE SHEETS ======
    // URL Apps Script untuk menyimpan data ujian
    const GOOGLE_SHEET_URL = 'https://script.google.com/macros/s/AKfycbyczxqxIu2HZrdt1BBik79tsf2TUb7Ptihhnia6bGAsW4CF7SRRNCcxKNKTXGqsIG8Y/exec';
    // ========================================
    
    // Disable right-click and keyboard shortcuts
    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();
      }
    });

const questions = [
      // REGULER QUESTIONS (20)
      {
        content: "A: 'Thank you so much for helping me with my homework.'\nB: '______'\n\nWhat is the most appropriate response?",
        image: null,
        options: [
          "You're welcome",
          "I don't care",
          "That's bad",
          "Never mind me",
          "I hate homework"
        ],
        answer: "You're welcome",
        difficulty: "REGULER"
      },
      {
        content: "Which expression is used to show gratitude?",
        image: null,
        options: [
          "I'm grateful for your help",
          "I don't like this",
          "This is terrible",
          "Go away please",
          "I'm angry with you"
        ],
        answer: "I'm grateful for your help",
        difficulty: "REGULER"
      },
      {
        content: "A: 'I really appreciate your support.'\nB: '______'\n\nChoose the best response:",
        image: null,
        options: [
          "My pleasure",
          "I'm busy",
          "That's wrong",
          "Go home",
          "I don't understand"
        ],
        answer: "My pleasure",
        difficulty: "REGULER"
      },
      {
        content: "What is the formal way to express thanks?",
        image: null,
        options: [
          "I would like to express my gratitude",
          "Thanks dude",
          "Whatever",
          "I don't care much",
          "That's okay I guess"
        ],
        answer: "I would like to express my gratitude",
        difficulty: "REGULER"
      },
      {
        content: "A: 'Thanks for the lovely gift!'\nB: '______'",
        image: null,
        options: [
          "I'm glad you like it",
          "It's expensive",
          "Buy your own",
          "I want it back",
          "That's mine"
        ],
        answer: "I'm glad you like it",
        difficulty: "REGULER"
      },
      {
        content: "Which is NOT an expression of gratitude?",
        image: null,
        options: [
          "I blame you",
          "Thank you",
          "I appreciate it",
          "I'm grateful",
          "Many thanks"
        ],
        answer: "I blame you",
        difficulty: "REGULER"
      },
      {
        content: "A: 'I can't thank you enough for your kindness.'\n\nThis sentence means:",
        image: null,
        options: [
          "I'm very grateful",
          "I don't need thanks",
          "I'm not thankful",
          "I'm angry",
          "I'm disappointed"
        ],
        answer: "I'm very grateful",
        difficulty: "REGULER"
      },
      {
        content: "What do you say after someone thanks you?",
        image: null,
        options: [
          "Don't mention it",
          "Say sorry",
          "Go away",
          "I'm angry",
          "That's bad"
        ],
        answer: "Don't mention it",
        difficulty: "REGULER"
      },
      {
        content: "A: 'Thanks a million!'\nB: '______'",
        image: null,
        options: [
          "Anytime!",
          "No way",
          "I refuse",
          "That's wrong",
          "Go home"
        ],
        answer: "Anytime!",
        difficulty: "REGULER"
      },
      {
        content: "Which expression shows deep appreciation?",
        image: null,
        options: [
          "I'm deeply grateful",
          "I don't care at all",
          "This is boring",
          "I'm disappointed",
          "That's terrible"
        ],
        answer: "I'm deeply grateful",
        difficulty: "REGULER"
      },
      {
        content: "A: 'I owe you one for helping me move.'\n\nWhat does this expression mean?",
        image: null,
        options: [
          "I will return the favor someday",
          "I will pay you money",
          "I don't like you",
          "You owe me something",
          "I'm not grateful"
        ],
        answer: "I will return the favor someday",
        difficulty: "REGULER"
      },
      {
        content: "Complete the dialogue:\nA: 'Thank you for your time.'\nB: '______'",
        image: null,
        options: [
          "No problem at all",
          "You wasted it",
          "I'm angry",
          "Go away now",
          "I hate this"
        ],
        answer: "No problem at all",
        difficulty: "REGULER"
      },
      {
        content: "Which phrase is the MOST casual way to say thank you?",
        image: null,
        options: [
          "Thanks a bunch",
          "I express my deepest gratitude",
          "I am eternally grateful",
          "I wish to convey my appreciation",
          "I am indebted to you"
        ],
        answer: "Thanks a bunch",
        difficulty: "REGULER"
      },
      {
        content: "A: 'I really appreciate what you did.'\n\nWhat is another way to say this?",
        image: null,
        options: [
          "I'm thankful for your help",
          "I don't care about it",
          "I'm disappointed in you",
          "You shouldn't have done it",
          "I'm angry with you"
        ],
        answer: "I'm thankful for your help",
        difficulty: "REGULER"
      },
      {
        content: "When someone says 'It was nothing', they mean:",
        image: null,
        options: [
          "You're welcome, it was easy to help",
          "I did nothing for you",
          "I don't want to help",
          "You should not thank me",
          "I'm upset with you"
        ],
        answer: "You're welcome, it was easy to help",
        difficulty: "REGULER"
      },
      {
        content: "Which is the MOST sincere way to thank someone?",
        image: null,
        options: [
          "I truly appreciate everything you've done",
          "Thanks I guess",
          "Whatever, thanks",
          "Okay, thank you",
          "Fine, I appreciate it"
        ],
        answer: "I truly appreciate everything you've done",
        difficulty: "REGULER"
      },
      {
        content: "A: 'I'm so grateful for your patience.'\n\nWhat quality is being appreciated?",
        image: null,
        options: [
          "Willingness to wait and not rush",
          "Intelligence",
          "Wealth",
          "Speed",
          "Strength"
        ],
        answer: "Willingness to wait and not rush",
        difficulty: "REGULER"
      },
      {
        content: "Complete: 'I can't express how ______ I am for your support.'",
        image: null,
        options: [
          "thankful",
          "angry",
          "sad",
          "confused",
          "tired"
        ],
        answer: "thankful",
        difficulty: "REGULER"
      },
      {
        content: "Which phrase means 'thank you very much' in a casual way?",
        image: null,
        options: [
          "Thanks a ton",
          "I formally express gratitude",
          "I am most appreciative",
          "I extend my thanks",
          "I convey my appreciation"
        ],
        answer: "Thanks a ton",
        difficulty: "REGULER"
      },
      {
        content: "A: 'Thank you for being there for me.'\n\nThis thanks someone for:",
        image: null,
        options: [
          "Emotional support and presence",
          "Giving money",
          "Doing homework",
          "Buying food",
          "Lending books"
        ],
        answer: "Emotional support and presence",
        difficulty: "REGULER"
      },
      
      // HOTS QUESTIONS (20)
      {
        content: "In a business meeting, your colleague helped you prepare a crucial presentation. Which response shows the MOST professional gratitude while maintaining workplace boundaries?",
        image: null,
        options: [
          "I genuinely appreciate your expertise and time. Your input was invaluable to the presentation's success.",
          "Thanks buddy, you're the best!",
          "Thank you so much, I love you!",
          "I owe you one, mate!",
          "Thanks, but I could have done it alone."
        ],
        answer: "I genuinely appreciate your expertise and time. Your input was invaluable to the presentation's success.",
        difficulty: "HOTS"
      },
      {
        content: "Analyze this dialogue:\n\nTeacher: 'You've improved tremendously this semester.'\nStudent: 'I couldn't have done it without your guidance and patience.'\n\nWhat does the student's response demonstrate?",
        image: null,
        options: [
          "Acknowledging help while showing humility",
          "Refusing to take responsibility",
          "Showing overconfidence",
          "Being sarcastic",
          "Expressing disappointment"
        ],
        answer: "Acknowledging help while showing humility",
        difficulty: "HOTS"
      },
      {
        content: "Context: You received scholarship from a foundation. Which letter opening shows appropriate formal gratitude with cultural sensitivity?",
        image: null,
        options: [
          "I am writing to express my sincere gratitude for the scholarship award. This generous support will significantly impact my educational journey.",
          "Hey! Thanks a lot for the money!",
          "I got your scholarship, thanks!",
          "Thank you. I needed this money badly.",
          "I appreciate the cash you sent."
        ],
        answer: "I am writing to express my sincere gratitude for the scholarship award. This generous support will significantly impact my educational journey.",
        difficulty: "HOTS"
      },
      {
        content: "Compare these responses:\n\nA: 'No problem at all!'\nB: 'It was my pleasure to assist you.'\n\nWhat is the key difference in these responses to thanks?",
        image: null,
        options: [
          "B is more formal and emphasizes willingness to help",
          "A is more polite than B",
          "B is rude and dismissive",
          "A shows more gratitude",
          "They are exactly the same"
        ],
        answer: "B is more formal and emphasizes willingness to help",
        difficulty: "HOTS"
      },
      {
        content: "A customer sent this email: 'Thank you for resolving the issue so quickly. Your professionalism is commendable.'\n\nWhat makes this expression of gratitude effective?",
        image: null,
        options: [
          "It specifies the action and adds genuine compliment",
          "It uses simple words only",
          "It's very short",
          "It doesn't mention specific details",
          "It's casual and friendly"
        ],
        answer: "It specifies the action and adds genuine compliment",
        difficulty: "HOTS"
      },
      {
        content: "In which situation would 'I'm indebted to you' be MOST appropriately used?",
        image: null,
        options: [
          "Someone saved your life or helped you through a major crisis",
          "Someone held the door for you",
          "Someone lent you a pen",
          "Someone said hello to you",
          "Someone smiled at you"
        ],
        answer: "Someone saved your life or helped you through a major crisis",
        difficulty: "HOTS"
      },
      {
        content: "Analyze this scenario:\n\nEmployee: 'I want to thank you for believing in me when others didn't. Your trust has shaped my career.'\n\nWhat rhetorical strategy is being used?",
        image: null,
        options: [
          "Contrasting past doubt with present gratitude to emphasize impact",
          "Making demands for recognition",
          "Complaining about others",
          "Bragging about achievements",
          "Criticizing other people"
        ],
        answer: "Contrasting past doubt with present gratitude to emphasize impact",
        difficulty: "HOTS"
      },
      {
        content: "Which response shows graceful acceptance of thanks while redirecting credit?",
        image: null,
        options: [
          "I appreciate your kind words, but it was truly a team effort",
          "Yes, I did it all by myself",
          "Of course, I'm the best",
          "You should thank me more",
          "I know I'm amazing"
        ],
        answer: "I appreciate your kind words, but it was truly a team effort",
        difficulty: "HOTS"
      },
      {
        content: "Context: Your mentor is retiring. Which expression combines gratitude with emotional intelligence?",
        image: null,
        options: [
          "Your mentorship has profoundly influenced my professional growth. I will carry forward the lessons you've taught me throughout my career.",
          "Thanks for everything, goodbye!",
          "I'll miss getting help from you.",
          "Who will help me now that you're leaving?",
          "Thank you, I hope your replacement is as good."
        ],
        answer: "Your mentorship has profoundly influenced my professional growth. I will carry forward the lessons you've taught me throughout my career.",
        difficulty: "HOTS"
      },
      {
        content: "Evaluate these thank-you scenarios:\n\n1. Thanking someone for constructive criticism\n2. Thanking someone for a compliment\n\nWhich requires MORE emotional maturity?",
        image: null,
        options: [
          "Scenario 1 - It requires accepting feedback gracefully",
          "Scenario 2 - Compliments are harder to accept",
          "Both are equally easy",
          "Neither requires emotional maturity",
          "Scenario 2 - You must disagree with compliments"
        ],
        answer: "Scenario 1 - It requires accepting feedback gracefully",
        difficulty: "HOTS"
      },
      {
        content: "Your team completed a difficult project. You want to thank everyone while highlighting individual contributions. What is the BEST approach?",
        image: null,
        options: [
          "Thank the team collectively first, then acknowledge specific contributions of key members",
          "Only thank the leaders publicly",
          "Send a generic group email",
          "Thank everyone exactly the same way",
          "Don't mention specific contributions to avoid jealousy"
        ],
        answer: "Thank the team collectively first, then acknowledge specific contributions of key members",
        difficulty: "HOTS"
      },
      {
        content: "A student wrote: 'Thank you for failing me last semester. It taught me to work harder.'\n\nWhat rhetorical device is being used?",
        image: null,
        options: [
          "Paradoxical gratitude - thanking for negative outcome that led to growth",
          "Sarcasm - mocking the teacher",
          "Irony - saying opposite of what is meant",
          "Hyperbole - exaggerating feelings",
          "Simple politeness"
        ],
        answer: "Paradoxical gratitude - thanking for negative outcome that led to growth",
        difficulty: "HOTS"
      },
      {
        content: "In Japanese culture, excessive thanking can sometimes create social debt. In Western culture, not thanking enough seems rude. How should you navigate this in international business?",
        image: null,
        options: [
          "Research the specific culture and adapt your gratitude expression accordingly",
          "Always use excessive thanks to be safe",
          "Never thank anyone to avoid mistakes",
          "Use the same approach for everyone",
          "Only follow your own cultural norms"
        ],
        answer: "Research the specific culture and adapt your gratitude expression accordingly",
        difficulty: "HOTS"
      },
      {
        content: "Compare: 'Thanks for your help' vs 'I appreciate your willingness to help even when you were busy.'\n\nWhat principle of effective gratitude does the second demonstrate?",
        image: null,
        options: [
          "Specificity and acknowledgment of sacrifice",
          "Using longer sentences",
          "Being overly formal",
          "Avoiding directness",
          "Creating obligation"
        ],
        answer: "Specificity and acknowledgment of sacrifice",
        difficulty: "HOTS"
      },
      {
        content: "A CEO publicly thanked an employee by name for an idea that saved the company millions. Three months later, the employee quit. What might have gone wrong?",
        image: null,
        options: [
          "Public recognition wasn't backed by tangible rewards or career advancement",
          "The employee didn't like being thanked",
          "Too much attention made them uncomfortable only",
          "Nothing went wrong, it's unrelated",
          "The CEO thanked them too much"
        ],
        answer: "Public recognition wasn't backed by tangible rewards or career advancement",
        difficulty: "HOTS"
      },
      {
        content: "Your colleague helped you during a personal crisis but asked you to keep it private. How should you express gratitude?",
        image: null,
        options: [
          "Thank them privately and respect their wish for confidentiality",
          "Publicly announce their help anyway to honor them",
          "Post about it on social media without names",
          "Tell everyone but not mention their name",
          "Don't thank them since they wanted privacy"
        ],
        answer: "Thank them privately and respect their wish for confidentiality",
        difficulty: "HOTS"
      },
      {
        content: "Analyze: 'I'm thankful for the opportunity to fail under your guidance. It taught me more than success ever could.'\n\nWhat makes this gratitude sophisticated?",
        image: null,
        options: [
          "It reframes failure as a valuable learning experience",
          "It blames the mentor for failure",
          "It shows the person didn't learn anything",
          "It's sarcastic and insincere",
          "It avoids taking responsibility"
        ],
        answer: "It reframes failure as a valuable learning experience",
        difficulty: "HOTS"
      },
      {
        content: "In a resignation letter, you want to thank your boss while maintaining professionalism. Which approach is BEST?",
        image: null,
        options: [
          "Thank them for specific skills and opportunities gained, wish the company well",
          "Only focus on negative aspects and what you didn't get",
          "Thank them excessively and apologize for leaving",
          "Don't mention them at all",
          "Thank them but criticize company policies"
        ],
        answer: "Thank them for specific skills and opportunities gained, wish the company well",
        difficulty: "HOTS"
      },
      {
        content: "Your assistant worked 80-hour weeks on a project. You want to thank them. What's the MOST appropriate action?",
        image: null,
        options: [
          "Combine sincere thanks with time off and discuss workload balance for the future",
          "Just say 'good job' and move on",
          "Give them more work immediately",
          "Thank them publicly only",
          "Send a generic email"
        ],
        answer: "Combine sincere thanks with time off and discuss workload balance for the future",
        difficulty: "HOTS"
      },
      {
        content: "You received harsh but accurate criticism that improved your work. Years later, you want to thank that person. What should you emphasize?",
        image: null,
        options: [
          "How their honesty, though difficult to hear, led to your growth and better outcomes",
          "That you were hurt but forgive them now",
          "That they were too harsh but you survived",
          "That you disagreed then and still do",
          "That others were nicer than them"
        ],
        answer: "How their honesty, though difficult to hear, led to your growth and better outcomes",
        difficulty: "HOTS"
      },
      {
        content: "Compare these thank-you notes:\nA: 'Thank you for the gift.'\nB: 'Thank you for the beautiful scarf. The color is perfect, and I wore it today!'\n\nWhy is B more effective?",
        image: null,
        options: [
          "It shows the gift was appreciated, used, and adds specific details",
          "It's longer in word count",
          "It uses more formal language",
          "It mentions the price",
          "It's written in cursive"
        ],
        answer: "It shows the gift was appreciated, used, and adds specific details",
        difficulty: "HOTS"
      }
    ].slice(0, 40); // Pastikan hanya 40 soal

let currentQuestion = 0;
    let answers = {};
    let doubtful = new Set();
    let timeLeft = 90 * 60;
    let timerInterval;
    let studentName = '';
    let studentClass = '';
    let violations = 0;
    let isWarningActive = false;
    let warningTimer = null;
    let warningCountdown = 10;

// Anti-Cheating System
    function setupAntiCheating() {
      document.addEventListener('visibilitychange', handleVisibilityChange);
      window.addEventListener('blur', handleWindowBlur);
      window.addEventListener('focus', handleWindowFocus);
    }

function handleVisibilityChange() {
      if (document.hidden && !isWarningActive) {
        showWarning();
      }
    }

function handleWindowBlur() {
      if (!isWarningActive) {
        showWarning();
      }
    }

function handleWindowFocus() {
      // Window focused but we let the warning handle return
    }

function returnToExam() {
      clearInterval(warningTimer);
      isWarningActive = false;
      document.getElementById('warningOverlay').classList.add('hidden');
      saveToLocalStorage();
    }

function autoSubmitExam(reason) {
      clearInterval(warningTimer);
      clearInterval(timerInterval);
      isWarningActive = false;
      document.getElementById('warningOverlay').classList.add('hidden');
      calculateScore();
      showResult();
    }

function selectAnswer(answer) {
      answers[currentQuestion] = answer;
      renderQuestion();
      renderQuestionNav();
      saveToLocalStorage();
    }

function previousQuestion() {
      if (currentQuestion > 0) {
        currentQuestion--;
        renderQuestion();
        renderQuestionNav();
      }
    }

function nextQuestion() {
      if (currentQuestion < questions.length - 1) {
        currentQuestion++;
        renderQuestion();
        renderQuestionNav();
      }
    }

function showResult() {
      document.getElementById('examScreen').classList.add('hidden');
      document.getElementById('resultScreen').classList.remove('hidden');
      localStorage.removeItem('anbk_exam_data');
    }

function restartExam() {
      currentQuestion = 0;
      answers = {};
      doubtful = new Set();
      timeLeft = 90 * 60;
      violations = 0;
      isWarningActive = false;
      
      document.getElementById('resultScreen').classList.add('hidden');
      document.getElementById('loginScreen').classList.remove('hidden');
      document.getElementById('studentName').value = '';
      document.getElementById('studentClass').value = '';
      
      localStorage.removeItem('anbk_exam_data');
    }

function saveToLocalStorage() {
      const data = {
        currentQuestion,
        answers,
        doubtful: Array.from(doubtful),
        timeLeft,
        studentName,
        studentClass,
        violations
      };
      localStorage.setItem('anbk_exam_data', JSON.stringify(data));
    }

// Teacher Mode
    function showTeacherLogin() {
      document.getElementById('teacherLogin').classList.remove('hidden');
    }

function hideTeacherLogin() {
      document.getElementById('teacherLogin').classList.add('hidden');
      document.getElementById('teacherPassword').value = '';
    }

Gunakan Enter untuk membuat baris baru (dialog)

Pilihan Jawaban (5 opsi)

${q.options.map((opt, i) => `

${String.fromCharCode(65 + i)}.

`).join('')}

Kunci Jawaban

⚠️ Pilih jawaban yang benar dari opsi A-E

`; document.body.appendChild(modal); // Update answer dropdown when options change for (let i = 0; i < 5; i++) { document.getElementById(`editOption${i}`).addEventListener('input', () => { updateAnswerDropdown(); }); } } function updateAnswerDropdown() { const answerSelect = document.getElementById('editAnswer'); const currentAnswer = answerSelect.value; let newHtml = ''; for (let i = 0; i < 5; i++) { const optValue = document.getElementById(`editOption${i}`).value; const letter = String.fromCharCode(65 + i); newHtml += ``; } answerSelect.innerHTML = newHtml; } function closeEditModal() { const modal = document.getElementById('editQuestionModal'); if (modal) { modal.remove(); } } function saveEditedQuestion(event, index) { event.preventDefault(); // Ambil semua nilai const difficulty = document.getElementById('editDifficulty').value; const content = document.getElementById('editContent').value; const options = []; for (let i = 0; i < 5; i++) { options.push(document.getElementById(`editOption${i}`).value); } const answer = document.getElementById('editAnswer').value; // Validasi: pastikan kunci jawaban ada di pilihan if (!options.includes(answer)) { showToast('⚠️ Kunci jawaban harus salah satu dari pilihan A-E!'); return; } // Update soal questions[index] = { content: content, image: questions[index].image, options: options, answer: answer, difficulty: difficulty }; // Tutup modal closeEditModal(); // Refresh tampilan renderAnswerKey(); // Tampilkan notifikasi sukses showSuccessToast(`✓ Soal nomor ${index + 1} berhasil diperbarui!`); } function showSuccessToast(message) { const toast = document.createElement('div'); toast.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50'; toast.textContent = message; document.body.appendChild(toast); setTimeout(() => { toast.remove(); }, 3000); } function showToast(message) { const toast = document.createElement('div'); toast.className = 'fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50'; toast.textContent = message; document.body.appendChild(toast); setTimeout(() => { toast.remove(); }, 3000); } // Initialize window.addEventListener('load', () => { const saved = localStorage.getItem('anbk_exam_data'); if (saved) { const confirmMsg = document.createElement('div'); confirmMsg.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50'; confirmMsg.innerHTML = `

Lanjutkan Ujian?

Anda memiliki ujian yang tersimpan. Lanjutkan ujian?

`; document.body.appendChild(confirmMsg); } }); function resumeExam() { document.querySelector('.fixed.inset-0').remove(); const data = JSON.parse(localStorage.getItem('anbk_exam_data')); studentName = data.studentName; studentClass = data.studentClass; document.getElementById('loginScreen').classList.add('hidden'); document.getElementById('examScreen').classList.remove('hidden'); document.getElementById('studentInfo').textContent = `${studentName} - ${studentClass}`; loadFromLocalStorage(); renderQuestionNav(); renderQuestion(); startTimer(); setupAntiCheating(); }

soal thank you

ANBK - Ujian Bahasa Inggris 📝 ANBK 2024 Ujian Bahasa Inggris - Kelas 12 ...

Baca selengkapnya »

Bhs Inggris_MAN 2

Pramuka Blok

Juara Musikalisasi Puisi

Panitia dan Pengawas Ruang USBN BK 2019

AKM Tahun2020

Rapat kenaikan kelas Tahun Pelajaran 2019/2020

[Informasi][carouselslide][recent][9]

UJIAN Deskriptif

soal thank you

Lanjutkan Ujian?

[Kesiswaan][hot][recent][3]

[Artikel Guru][vertical][animated][7]

[Artikel Siswa][vertical][animated][7]

[Galery Kegiatan][combine][recent][10]