New drag-and-drop human verification Instantly shows right and wrong for each question Does not destroy the original project structurepull/234/head
ERIC-HLR
4 months ago
committed by
GitHub
parent
c92b0bc3a8
commit
b3d835256a
@ -1,98 +1,128 @@
|
||||
const quizData = [
|
||||
{
|
||||
question: "Which language runs in a web browser?",
|
||||
a: "Java",
|
||||
b: "C",
|
||||
c: "Python",
|
||||
d: "JavaScript",
|
||||
correct: "d",
|
||||
},
|
||||
{
|
||||
question: "What does CSS stand for?",
|
||||
a: "Central Style Sheets",
|
||||
b: "Cascading Style Sheets",
|
||||
c: "Cascading Simple Sheets",
|
||||
d: "Cars SUVs Sailboats",
|
||||
correct: "b",
|
||||
},
|
||||
{
|
||||
question: "What does HTML stand for?",
|
||||
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?",
|
||||
a: "1996",
|
||||
b: "1995",
|
||||
c: "1994",
|
||||
d: "none of the above",
|
||||
correct: "b",
|
||||
},
|
||||
];
|
||||
|
||||
const quiz = document.getElementById('quiz')
|
||||
const answerEls = document.querySelectorAll('.answer')
|
||||
const questionEl = document.getElementById('question')
|
||||
const a_text = document.getElementById('a_text')
|
||||
const b_text = document.getElementById('b_text')
|
||||
const c_text = document.getElementById('c_text')
|
||||
const d_text = document.getElementById('d_text')
|
||||
const submitBtn = document.getElementById('submit')
|
||||
|
||||
let currentQuiz = 0
|
||||
let score = 0
|
||||
|
||||
loadQuiz()
|
||||
|
||||
function loadQuiz() {
|
||||
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>
|
||||
`
|
||||
}
|
||||
{ question: "Which language runs in a web browser?",
|
||||
a: "Java", b: "C", c: "Python", d: "JavaScript", correct: "d" },
|
||||
{ question: "What does CSS stand for?",
|
||||
a: "Central Style Sheets", b: "Cascading Style Sheets",
|
||||
c: "Cascading Simple Sheets", d: "Cars SUVs Sailboats", correct: "b" },
|
||||
{ question: "What does HTML stand for?",
|
||||
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?",
|
||||
a: "1996", b: "1995", c: "1994", d: "none of the above", correct: "b" },
|
||||
];
|
||||
|
||||
/* -------- DOM 选择 -------- */
|
||||
// 人机验证
|
||||
const verifyContainer = document.getElementById('verify-container');
|
||||
const drag = document.getElementById('drag');
|
||||
const drop = document.getElementById('drop');
|
||||
const verifyMsg = document.getElementById('verify-msg');
|
||||
|
||||
// Quiz
|
||||
const quiz = document.getElementById('quiz');
|
||||
const answerEls = document.querySelectorAll('.answer');
|
||||
const questionEl = document.getElementById('question');
|
||||
const a_text = document.getElementById('a_text');
|
||||
const b_text = document.getElementById('b_text');
|
||||
const c_text = document.getElementById('c_text');
|
||||
const d_text = document.getElementById('d_text');
|
||||
const feedbackEl = document.getElementById('feedback');
|
||||
const submitBtn = document.getElementById('submit');
|
||||
|
||||
/* -------- 人机验证逻辑 -------- */
|
||||
drag.addEventListener('dragstart', e => {
|
||||
e.dataTransfer.setData('text/plain', 'drag');
|
||||
});
|
||||
|
||||
drop.addEventListener('dragover', e => e.preventDefault());
|
||||
|
||||
drop.addEventListener('drop', e => {
|
||||
e.preventDefault();
|
||||
const data = e.dataTransfer.getData('text/plain');
|
||||
if (data === 'drag') {
|
||||
drop.appendChild(drag);
|
||||
drag.style.cursor = 'default';
|
||||
verifyMsg.textContent = '✅ Verification passed! Click to start 👉';
|
||||
verifyMsg.style.color = '#27ae60';
|
||||
// 点击开始答题
|
||||
verifyMsg.style.cursor = drop.style.cursor = 'pointer';
|
||||
verifyMsg.addEventListener('click', startQuiz);
|
||||
drop.addEventListener('click', startQuiz);
|
||||
}
|
||||
});
|
||||
|
||||
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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
Loading…
Reference in new issue