Update script.js

New drag-and-drop human verification
Instantly shows right and wrong for each question
Does not destroy the original project structure

quiz-app/script.js

@@ -1,98 +1,128 @@
 const quizData = [
-    {
+    { question: "Which language runs in a web browser?",
-        question: "Which language runs in a web browser?",
+      a: "Java", b: "C", c: "Python", d: "JavaScript", correct: "d" },
-        a: "Java",
+    { question: "What does CSS stand for?",
-        b: "C",
+      a: "Central Style Sheets", b: "Cascading Style Sheets",
-        c: "Python",
+      c: "Cascading Simple Sheets", d: "Cars SUVs Sailboats", correct: "b" },
-        d: "JavaScript",
+    { question: "What does HTML stand for?",
-        correct: "d",
+      a: "Hypertext Markup Language", b: "Hypertext Markdown Language",
-    },
+      c: "Hyperloop Machine Language", d: "Helicopters Terminals Motorboats Lamborginis", correct: "a" },
-    {
+    { question: "What year was JavaScript launched?",
-        question: "What does CSS stand for?",
+      a: "1996", b: "1995", c: "1994", d: "none of the above", correct: "b" },
-        a: "Central Style Sheets",
+  ];
-        b: "Cascading Style Sheets",
+  
-        c: "Cascading Simple Sheets",
+  /* -------- DOM 选择 -------- */
-        d: "Cars SUVs Sailboats",
+  // 人机验证
-        correct: "b",
+  const verifyContainer = document.getElementById('verify-container');
-    },
+  const drag  = document.getElementById('drag');
-    {
+  const drop  = document.getElementById('drop');
-        question: "What does HTML stand for?",
+  const verifyMsg = document.getElementById('verify-msg');
-        a: "Hypertext Markup Language",
+  
-        b: "Hypertext Markdown Language",
+  // Quiz
-        c: "Hyperloop Machine Language",
+  const quiz       = document.getElementById('quiz');
-        d: "Helicopters Terminals Motorboats Lamborginis",
+  const answerEls  = document.querySelectorAll('.answer');
-        correct: "a",
+  const questionEl = document.getElementById('question');
-    },
+  const a_text     = document.getElementById('a_text');
-    {
+  const b_text     = document.getElementById('b_text');
-        question: "What year was JavaScript launched?",
+  const c_text     = document.getElementById('c_text');
-        a: "1996",
+  const d_text     = document.getElementById('d_text');
-        b: "1995",
+  const feedbackEl = document.getElementById('feedback');
-        c: "1994",
+  const submitBtn  = document.getElementById('submit');
-        d: "none of the above",
+  
-        correct: "b",
+  /* -------- 人机验证逻辑 -------- */
-    },
+  drag.addEventListener('dragstart', e => {
-];
+    e.dataTransfer.setData('text/plain', 'drag');
-
+  });
-const quiz = document.getElementById('quiz')
+  
-const answerEls = document.querySelectorAll('.answer')
+  drop.addEventListener('dragover', e => e.preventDefault());
-const questionEl = document.getElementById('question')
+  
-const a_text = document.getElementById('a_text')
+  drop.addEventListener('drop', e => {
-const b_text = document.getElementById('b_text')
+    e.preventDefault();
-const c_text = document.getElementById('c_text')
+    const data = e.dataTransfer.getData('text/plain');
-const d_text = document.getElementById('d_text')
+    if (data === 'drag') {
-const submitBtn = document.getElementById('submit')
+      drop.appendChild(drag);      
-
+      drag.style.cursor = 'default';
-let currentQuiz = 0
+      verifyMsg.textContent = '✅ Verification passed! Click to start 👉';
-let score = 0
+      verifyMsg.style.color = '#27ae60';
-
+      // 点击开始答题
-loadQuiz()
+      verifyMsg.style.cursor = drop.style.cursor = 'pointer';
-
+      verifyMsg.addEventListener('click', startQuiz);
-function loadQuiz() {
+      drop.addEventListener('click', startQuiz);
-    deselectAnswers()
-
-    const currentQuizData = quizData[currentQuiz]
-
-    questionEl.innerText = currentQuizData.question
-    a_text.innerText = currentQuizData.a
-    b_text.innerText = currentQuizData.b
-    c_text.innerText = currentQuizData.c
-    d_text.innerText = currentQuizData.d
-}
-
-function deselectAnswers() {
-    answerEls.forEach(answerEl => answerEl.checked = false)
-}
-
-function getSelected() {
-    let answer
-
-    answerEls.forEach(answerEl => {
-        if(answerEl.checked) {
-            answer = answerEl.id
-        }
-    })
-
-    return answer
-}
-
-submitBtn.addEventListener('click', () => {
-    const answer = getSelected()
-    
-    if(answer) {
-        if(answer === quizData[currentQuiz].correct) {
-            score++
-        }
-
-        currentQuiz++
-
-        if(currentQuiz < quizData.length) {
-            loadQuiz()
-        } else {
-            quiz.innerHTML = `
-                <h2>You answered ${score}/${quizData.length} questions correctly</h2>
-
-                <button onclick="location.reload()">Reload</button>
-            `
-        }
     }
-})
+  });
+  
+  function startQuiz() {
+    // 1. 收起人机验证
+    verifyContainer.classList.add('hidden');
+  
+    // 2. 展示 Quiz
+    quiz.classList.remove('hidden');       
+    quiz.style.visibility = 'visible';
+    quiz.classList.add('fade-in');
+  
+    // 3. 载入第一题
+    loadQuiz();
+  }
+  
+  /* -------- Quiz 逻辑 -------- */
+  let currentQuiz = 0;
+  let score       = 0;
+  let submitted   = false;   // 标记当前题是否已提交
+  
+  function loadQuiz() {
+    deselectAnswers();
+    const cur = quizData[currentQuiz];
+    questionEl.innerText = cur.question;
+    a_text.innerText = cur.a;
+    b_text.innerText = cur.b;
+    c_text.innerText = cur.c;
+    d_text.innerText = cur.d;
+  }
+  
+  function deselectAnswers() {
+    answerEls.forEach(el => (el.checked = false));
+  }
+  
+  function getSelected() {
+    let answer = null;
+    answerEls.forEach(el => {
+      if (el.checked) answer = el.id;
+    });
+    return answer;
+  }
+  
+  submitBtn.addEventListener('click', () => {
+    if (!submitted) {
+      const answer = getSelected();
+      if (!answer) return;  
+  
+      const correct = quizData[currentQuiz].correct;
+      if (answer === correct) {
+        score++;
+        feedbackEl.textContent = '✅ Correct!';
+        feedbackEl.style.color = 'green';
+      } else {
+        const correctText = quizData[currentQuiz][correct];
+        feedbackEl.textContent = `❌ Wrong! Correct answer: ${correctText}`;
+        feedbackEl.style.color = 'red';
+      }
+  
+      submitted = true;
+      submitBtn.textContent = currentQuiz === quizData.length - 1 ? 'Finish' : 'Next';
+    }
+    else {
+      currentQuiz++;
+      submitted = false;
+  
+      if (currentQuiz < quizData.length) {
+        feedbackEl.textContent = '';
+        submitBtn.textContent  = 'Submit';
+        loadQuiz();
+      } else {
+        quiz.innerHTML = `
+          <h2>You answered ${score} / ${quizData.length} questions correctly</h2>
+          <button onclick="location.reload()">Reload</button>
+        `;
+      }
+    }
+  });