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