功能概述

基于 React 和 Tailwind CSS 開發的在線大前端知識考試系統。頁面設計簡潔美觀，交互流暢，適合前端開發者、學習者進行自我測試和知識鞏固。系統內置多道涵蓋 React、CSS、JavaScript、HTTP 等前端核心知識點的題目，支持單選與多選題型，實時統計答題進度與得分，帶來沉浸式的答題體驗。

功能特點

• 多題型支持：支持單選題與多選題，靈活考察知識點。
• 實時進度條：頂部進度條動態展示已答題數，激勵用戶完成全部題目。
• 即時評分反饋：提交后即時顯示得分與答題結果，便于自我評估。
• 答題狀態保存：每道題的作答狀態實時保存，切換題目不會丟失已選答案。
• 移動端友好：頁面自適應，移動端與 PC 端均有良好體驗。
• 美觀 UI：采用 Tailwind CSS，界面現代、簡潔、易用。
• 底部固定提交按鈕：方便用戶隨時提交答卷，提升交互效率。

技術亮點

• React Hooks：全程使用useState等 React Hooks 進行狀態管理，代碼簡潔高效。
• 函數式編程：采用函數式思維處理答題邏輯，易于維護和擴展。
• Tailwind CSS：利用 Tailwind CSS 實現響應式布局和現代化 UI，無需自定義大量樣式。
• 組件化設計：題目渲染、進度條、彈窗等均為獨立組件，結構清晰，便于復用。
• 無后端依賴：純前端實現，開箱即用，適合快速集成到各類前端項目或教學場景。

使用場景

• 前端面試準備：幫助求職者自測前端基礎知識，查漏補缺。
• 在線課程配套：作為前端課程的隨堂測驗或課后練習工具。
• 企業內訓考核：企業可用于員工前端技能評測與培訓。
• 技術社區活動：技術沙龍、社區活動中的知識競賽環節。
• 自我提升：前端開發者日常自測、鞏固知識點。

完整源碼

import React, { useState } from "react";const questions = [{type: "single",question: "React中用于管理組件內部狀態的鉤子是？",options: ["useEffect", "useState", "useRef", "useMemo"],answer: [1],},{type: "multi",question: "以下哪些屬于前端構建工具？",options: ["Webpack", "Babel", "Nginx", "Vite"],answer: [0, 1, 3],},{type: "single",question: "CSS中用于設置元素外邊距的屬性是？",options: ["padding", "margin", "border", "outline"],answer: [1],},{type: "single",question: "Vue3中響應式數據的核心API是？",options: ["reactive", "computed", "watch", "ref"],answer: [0],},{type: "multi",question: "以下哪些是HTTP請求方法？",options: ["GET", "POST", "FETCH", "PUT"],answer: [0, 1, 3],},{type: "single",question: "在HTML5中用于繪制圖形的標簽是？",options: ["<svg>", "<canvas>", "<img>", "<picture>"],answer: [1],},{type: "multi",question: "以下哪些屬于JavaScript原始類型？",options: ["String", "Object", "Number", "Boolean"],answer: [0, 2, 3],},{type: "single",question: "下列哪個不是CSS預處理器？",options: ["Sass", "Less", "Stylus", "PostCSS"],answer: [3],},{type: "multi",question: "以下哪些屬于前端路由實現方式？",options: ["Hash路由", "History路由", "Memory路由", "File路由"],answer: [0, 1, 2],},{type: "single",question: "在Node.js中用于引入模塊的關鍵字是？",options: ["import", "require", "include", "export"],answer: [1],},
];export default function Survey() {const [userAnswers, setUserAnswers] = useState(Array(questions.length).fill([]));const [submitted, setSubmitted] = useState(false);const [score, setScore] = useState(0);// 計算已答題數const answeredCount = userAnswers.filter((a) => a.length > 0).length;const handleChange = (qIdx, optIdx, type) => {setUserAnswers((prev) => {const newAnswers = [...prev];if (type === "single") {newAnswers[qIdx] = [optIdx];} else {if (newAnswers[qIdx].includes(optIdx)) {newAnswers[qIdx] = newAnswers[qIdx].filter((i) => i !== optIdx);} else {newAnswers[qIdx] = [...newAnswers[qIdx], optIdx];}}return newAnswers;});};const handleSubmit = (e) => {e.preventDefault();let total = 0;questions.forEach((q, idx) => {const user = userAnswers[idx].sort().join(",");const right = q.answer.sort().join(",");if (user === right) total++;});setScore(total);setSubmitted(true);setTimeout(() => setSubmitted(false), 3000);};return (<div className="max-w-2xl mx-auto p-4 pb-24 relative min-h-screen">{/* 進度條 */}<div className="w-full pb-4 sticky top-0 z-20 bg-white px-2 sm:px-4"><div className="flex items-center mb-1"><span className="text-sm text-gray-600">進度：</span><span className="ml-2 text-sm font-bold text-blue-600">{answeredCount} / {questions.length}</span></div><div className="w-full h-2 bg-gray-200 rounded overflow-hidden"><divclassName="h-2 bg-blue-500 rounded transition-all duration-300"style={{ width: `${(answeredCount / questions.length) * 100}%` }}></div></div></div><h1 className="text-2xl font-bold mb-4">大前端知識考試</h1><form onSubmit={handleSubmit}>{questions.map((q, qIdx) => (<div key={qIdx} className="mb-6 p-4 border rounded"><div className="mb-2 font-medium">{qIdx + 1}. {q.question}{q.type === "multi" && (<span className="ml-2 text-xs text-blue-500">（多選）</span>)}</div><div>{q.options.map((opt, optIdx) => (<label key={optIdx} className="block cursor-pointer mb-1"><inputtype={q.type === "single" ? "radio" : "checkbox"}name={`q${qIdx}`}value={optIdx}checked={userAnswers[qIdx].includes(optIdx)}onChange={() => handleChange(qIdx, optIdx, q.type)}className="mr-2"/>{opt}</label>))}</div></div>))}{/* 固定底部提交按鈕 */}<div className="fixed left-0 right-0 bottom-0 z-30 bg-white border-t shadow-lg p-4 flex justify-center"><buttontype="submit"className="bg-blue-600 text-white w-full px-8 py-3 rounded-lg text-lg font-bold shadow hover:bg-blue-700 transition disabled:bg-gray-400 disabled:cursor-not-allowed"disabled={answeredCount !== questions.length}>提交</button></div></form>{submitted && (<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-40 z-50"><div className="bg-white p-8 rounded shadow text-center"><div className="text-xl font-bold mb-2">考試得分</div><div className="text-3xl text-blue-600 mb-4">{score} / {questions.length}</div><div>答題結果已記錄！</div></div></div>)}</div>);
}

React Tailwind css 大前端考試、問卷響應式模板 - 高質量源碼分享平臺-免費下載各類網站源碼與模板及前沿動態資訊