在线知识挑战系统为用户提供了一个互动性强、反馈及时的学习体验平台。通过倒计时机制增加紧张感，即时结果显示正确答案帮助用户学习，得分统计激发用户的竞争心理。这种系统特别适用于教育应用、技能评估或娱乐类游戏。本文将介绍如何使用 HTML、CSS 和 JavaScript 实现一个完整的知识挑战系统。效果演示
这个知识挑战系统具有完整的交互流程：用户点击“开始答题”按钮进入挑战界面，系统展示第一道题目并启动 30 秒倒计时。用户可以选择答案选项，系统立即显示正确或错误状态，并在 1 秒后自动跳转到下一题。当时间耗尽而未作答时，系统会标记正确答案并自动跳转。完成后，系统显示总得分和鼓励信息，用户可以选择重新挑战。
页面结构
开始界面
<div class="start-screen" id="startScreen"> <h2>欢迎参加在线知识挑战</h2> <p>本挑战包含 <span id="totalQuestions">0</span> 道题目，每题100金币</p> <p>每题限时30秒，答对获得100金币，祝您好运！</p> <button class="btn" onclick="startQuiz()">开始答题</button></div>
题目容器
包含圆形倒计时器和题目卡片，显示当前题目和可选择的答案。<div class="quiz-container hidden" id="quizContainer"> <div id="timer" class="circular-timer"> <svg width="70" height="70" viewBox="0 0 70 70"> <circle class="circle-bg" cx="35" cy="35" r="30"></circle> <circle class="circle" cx="35" cy="35" r="30" stroke-dasharray="188.5" stroke-dashoffset="0" id="timerCircle"></circle> </svg> <div class="timer-center" id="timerText">30</div> </div>
<div class="question-card" id="questionCard"> <div class="question-header"> <div class="question-counter" id="questionCounter">1 / 10</div> <div class="question-text" id="questionText"></div> </div> <div class="options" id="optionsContainer"></div> </div></div>
结果界面
<div class="result-screen hidden" id="resultScreen"> <h2>答题完成！</h2> <div class="score-display"> <div class="score-number" id="finalScore">0金币</div> <div class="result-message" id="resultMessage"></div> </div> <button class="btn" onclick="restartQuiz()">重新答题</button></div>
核心功能实现
系统通过全局变量维护挑战状态，包括当前题目索引、得分、用户答案记录和计时器。startQuiz 函数负责重置这些变量并切换到题目界面。let currentQuestion = 0;let score = 0;let answers = [];const timeLimit = 30;let timer = null;
function startQuiz() { startScreen.classList.add('hidden'); quizContainer.classList.remove('hidden'); currentQuestion = 0; score = 0; answers = new Array(questions.length).fill(null);
displayQuestion(); startTimer();}
圆形倒计时实现
使用 SVG 圆形元素创建视觉化的倒计时效果，通过修改 stroke-dashoffset 属性控制圆弧长度，同时改变颜色以提示剩余时间。function startTimer() { clearInterval(timer); let timeLeft = timeLimit; const radius = 30; const circumference = 2 * Math.PI * radius;
timerCircle.style.strokeDasharray = circumference; timerCircle.style.strokeDashoffset = 0; timerCircle.style.stroke = '#3b82f6'; timerText.textContent = timeLeft.toString();
const initialOffset = (timeLeft / timeLimit) * circumference; timerCircle.style.strokeDashoffset = circumference - initialOffset;
timer = setInterval(() => { timeLeft--;
if (timeLeft <= 0) { handleTimeout(); return; }
const offset = (timeLeft / timeLimit) * circumference; timerCircle.style.strokeDashoffset = circumference - offset; timerText.textContent = timeLeft.toString();
if (timeLeft <= 10) { timerCircle.style.stroke = '#ef4444'; timerText.style.color = '#ef4444'; } }, 1000);}
题目渲染与交互
displayQuestion 函数根据当前题目数据渲染选项，并处理用户交互逻辑。它会根据用户是否已作答来决定显示样式和交互行为。function displayQuestion() { const q = questions[currentQuestion]; const userAnswer = answers[currentQuestion];
questionText.textContent = q.question; questionCounter.textContent = `${currentQuestion + 1} / ${questions.length}`;
optionsContainer.innerHTML = ''; q.options.forEach((option, index) => { const el = document.createElement('div'); el.className = 'option';
if (userAnswer === null) { el.onclick = () => selectOption(index); }
if (userAnswer !== null) { if (userAnswer === index) { el.classList.add('selected'); if (userAnswer === q.correct) el.classList.add('correct'); else el.classList.add('incorrect'); } if (index === q.correct && userAnswer !== q.correct) { el.classList.add('correct'); } }
el.innerHTML = `<span class="option-letter">${String.fromCharCode(65 + index)}</span>${option}`; optionsContainer.appendChild(el); });}
答案处理与导航
selectOption 函数处理用户选择，验证答案正确性并更新得分，然后延迟跳转到下一题。goToNextQuestion 函数管理题目间的导航逻辑。function selectOption(optionIndex) { if (answers[currentQuestion] !== null) return;
clearInterval(timer); answers[currentQuestion] = optionIndex; const q = questions[currentQuestion]; const options = optionsContainer.querySelectorAll('.option');
options.forEach((el, index) => { el.classList.remove('selected', 'correct', 'incorrect');
if (index === optionIndex) { el.classList.add('selected'); if (optionIndex === q.correct) { el.classList.add('correct'); score += 100; } else { el.classList.add('incorrect'); } } if (index === q.correct && optionIndex !== q.correct) { el.classList.add('correct'); } });
setTimeout(goToNextQuestion, 1000);}
function goToNextQuestion() { if (currentQuestion < questions.length - 1) { currentQuestion++; displayQuestion(); startTimer(); } else { endQuiz(); }}
扩展建议
添加难度等级选择功能，调整题目数量和时间限制
实现用户登录系统，保存历史得分和排名
增加音效反馈，提升用户体验的沉浸感
源码地址
阅读原文：https://mp.weixin.qq.com/s/a-fCEZpHIlD3ZfGOoE25Ug
该文章在 2026/1/13 9:29:42 编辑过
400 186 1886
