React Tailwind css 大前端考试、问卷响应式模板

功能概述

基于 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 大前端考试、问卷响应式模板 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿动态资讯