✨Feat: 完成前端测试问答

2026-03-29 09:37:25 +08:00
parent dd8cd97cc5
commit 51e71da224
4 changed files with 316 additions and 9 deletions
@@ -3,3 +3,4 @@
 2. 难度分布：5道基础题、5道中级题、5道进阶题
 3. 每道题都要提供详细的解析说明
 4. 选项之间要有明显的区别，避免模棱两可
+5. 输出选项不需要提供 ABCD 字母
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { ProgressBar, Label, Tabs } from "@heroui/react";
 import Card from "./components/Card";
 import Guodegang from "./components/Guodegang";
+import Quiz from "./components/Quiz";
 import Topic from "./components/Topic";

 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -13,15 +14,21 @@ function App() {
  const [guodegangData, setGuodegangData]: any = useState(null);
  const [guodegangLoading, setGuodegangLoading] = useState(false);
  const [guodegangError, setGuodegangError] = useState<string | null>(null);
+  const [quizData, setQuizData]: any = useState(null);
+  const [quizLoading, setQuizLoading] = useState(false);
+  const [quizError, setQuizError] = useState<string | null>(null);

  const fetchData = async (topicToFetch: string) => {
    setCardLoading(true);
    setGuodegangLoading(true);
+    setQuizLoading(true);
    setCardError(null);
    setGuodegangError(null);
+    setQuizError(null);

    const cardUrl = `http://localhost:8080/card/${encodeURIComponent(topicToFetch)}`;
    const guodegangUrl = `http://localhost:8080/guodegang/${encodeURIComponent(topicToFetch)}`;
+    const quizUrl = `http://localhost:8080/quiz/${encodeURIComponent(topicToFetch)}`;

    const abortController = new AbortController();
    const timeoutId = setTimeout(() => abortController.abort(), 300000);
@@ -54,7 +61,21 @@ function App() {
      }
    };

-    Promise.allSettled([fetchCard(), fetchGuodegang()]).finally(() => {
+    const fetchQuiz = async () => {
+      try {
+        const response = await fetch(quizUrl, { signal: abortController.signal });
+        if (!response.ok) throw new Error(`Quiz API failed: ${response.status}`);
+        const result = await response.json();
+        setQuizData(result.message);
+      } catch (error) {
+        console.error("Error fetching quiz data:", error);
+        setQuizError("Failed to load quiz data");
+      } finally {
+        setQuizLoading(false);
+      }
+    };
+
+    Promise.allSettled([fetchCard(), fetchGuodegang(), fetchQuiz()]).finally(() => {
      clearTimeout(timeoutId);
    });
  };
@@ -68,12 +89,12 @@ function App() {

  const cardLoaded = !cardLoading && !!cardData;
  const guodegangLoaded = !guodegangLoading && !!guodegangData;
+  const quizLoaded = !quizLoading && !!quizData;

  const progress = (() => {
    if (!topic) return 0;
-    if (cardLoaded && guodegangLoaded) return 100;
-    if (cardLoaded || guodegangLoaded) return 50;
-    return 10;
+    const loadedCount = [cardLoaded, guodegangLoaded, quizLoaded].filter(Boolean).length;
+    return Math.round((loadedCount / 3) * 100);
  })();

  return (
@@ -104,6 +125,11 @@ function App() {
                            <Tabs.Indicator />
                            🎭 德云社讲解
                        </Tabs.Tab>
+                        <Tabs.Tab id="quiz">
+                            <Tabs.Separator />
+                            <Tabs.Indicator />
+                            📝 测验问答
+                        </Tabs.Tab>
                    </Tabs.List>
                </Tabs.ListContainer>
                <Tabs.Panel id="card">
@@ -112,6 +138,9 @@ function App() {
                <Tabs.Panel id="guodegang">
                    <Guodegang topic={topic} data={guodegangData} loading={guodegangLoading} error={guodegangError} />
                </Tabs.Panel>
+                <Tabs.Panel id="quiz">
+                    <Quiz topic={topic} data={quizData} loading={quizLoading} error={quizError} />
+                </Tabs.Panel>
            </Tabs>
        </div>
    </div>
@@ -65,10 +65,8 @@ export default function Guodegang({ topic, data, loading, error }: Props) {
            <div className="h-1 w-20 bg-gradient-to-r from-yellow-500 to-orange-500 rounded"></div>
          </div>

-          <Card.Description className="px-6 pb-6">
-            <p className="text-gray-700 leading-relaxed whitespace-pre-line">
+          <Card.Description className="px-6 pb-6 text-gray-700 leading-relaxed whitespace-pre-line">
            {data!.content}
-            </p>
          </Card.Description>
        </div>
      </Card>
@@ -0,0 +1,279 @@
+import { Button } from "@heroui/react";
+import { useState, useMemo } from "react";
+
+interface Questions {
+  question: string;
+  options: string[];
+  answer: string;
+  explanation: string;
+}
+
+interface QuizData {
+  questions: Questions[];
+}
+
+interface Props {
+  topic: string;
+  data: QuizData | null;
+  loading: boolean;
+  error: string | null;
+}
+
+interface UserAnswer {
+  selected: string;
+  correct: boolean;
+}
+
+export default function Quiz({ topic, data, loading, error }: Props) {
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+  const [selectedOption, setSelectedOption] = useState<string | null>(null);
+  const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false);
+  const [userAnswers, setUserAnswers] = useState<Map<number, UserAnswer>>(new Map());
+  const [quizComplete, setQuizComplete] = useState(false);
+
+  const currentQuestion = data?.questions?.[currentQuestionIndex];
+  const isLastQuestion = data?.questions ? currentQuestionIndex === data.questions.length - 1 : false;
+
+  const correctCount = useMemo(() => {
+    return Array.from(userAnswers.values()).filter(a => a.correct).length;
+  }, [userAnswers]);
+
+  const handleOptionSelect = (option: string) => {
+    if (!isAnswerSubmitted) {
+      setSelectedOption(option);
+    }
+  };
+
+  const handleSubmit = () => {
+    if (selectedOption && currentQuestion) {
+      const isCorrect = selectedOption === currentQuestion.answer;
+      setUserAnswers(new Map(userAnswers).set(currentQuestionIndex, {
+        selected: selectedOption,
+        correct: isCorrect
+      }));
+      setIsAnswerSubmitted(true);
+    }
+  };
+
+  const handleNext = () => {
+    if (isLastQuestion) {
+      setQuizComplete(true);
+    } else {
+      setCurrentQuestionIndex(prev => prev + 1);
+      setSelectedOption(null);
+      setIsAnswerSubmitted(false);
+    }
+  };
+
+  const handleRetry = () => {
+    setCurrentQuestionIndex(0);
+    setSelectedOption(null);
+    setIsAnswerSubmitted(false);
+    setUserAnswers(new Map());
+    setQuizComplete(false);
+  };
+
+  if (loading) {
+    return (
+      <div className="w-full max-w-4xl mx-auto p-6">
+        <div className="text-center text-gray-600 text-lg">Loading quiz...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="w-full max-w-4xl mx-auto p-6">
+        <div className="text-center text-red-600 text-lg">{error}</div>
+      </div>
+    );
+  }
+
+  if (!data || data.questions.length === 0) {
+    return (
+      <div className="w-full max-w-4xl mx-auto p-6">
+        <div className="text-center text-gray-600">
+          <div className="text-5xl mb-4">📝</div>
+          <div className="text-xl font-medium mb-2">测验问答</div>
+          <div className="text-sm text-gray-500">输入主题后，这里将显示相关的测验题目</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (quizComplete) {
+    const percentage = Math.round((correctCount / data.questions.length) * 100);
+    
+    return (
+      <div className="w-full max-w-4xl mx-auto p-6 space-y-8">
+        <div>
+          <h2 className="text-3xl font-bold text-center text-gray-800 mb-2">{topic} - Quiz Complete!</h2>
+          <div className="h-1 w-32 mx-auto bg-gradient-to-r from-blue-500 to-indigo-500 rounded"></div>
+        </div>
+
+        <div className="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-8 border border-blue-200">
+          <div className="text-center">
+            <div className="text-6xl mb-4">{percentage >= 60 ? '🎉' : percentage >= 40 ? '👍' : '💪'}</div>
+            <div className="text-5xl font-bold text-gray-800 mb-4">
+              {correctCount} / {data.questions.length}
+            </div>
+            <div className="text-2xl font-semibold text-gray-600 mb-2">
+              {percentage}%
+            </div>
+            <p className="text-gray-500">
+              {percentage >= 80 ? 'Excellent!' : percentage >= 60 ? 'Good job!' : 'Keep practicing!'}
+            </p>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h3 className="text-xl font-semibold text-gray-800 mb-4">Review Your Answers</h3>
+          {data.questions.map((question, index) => {
+            const userAnswer = userAnswers.get(index);
+            const isCorrect = userAnswer?.correct ?? false;
+            const userSelected = userAnswer?.selected;
+
+            return (
+              <div key={index} className={`p-6 rounded-xl border-2 ${isCorrect ? 'border-green-300 bg-green-50' : 'border-red-300 bg-red-50'}`}>
+                <div className="flex items-start gap-3 mb-4">
+                  <span className={`text-2xl ${isCorrect ? 'text-green-500' : 'text-red-500'}`}>
+                    {isCorrect ? '✓' : '✗'}
+                  </span>
+                  <div className="flex-1">
+                    <p className="font-medium text-gray-800 mb-2">Question {index + 1}: {question.question}</p>
+                    <div className="space-y-2 text-sm">
+                      <div className={isCorrect ? 'text-green-600' : 'text-red-700'}>
+                        Your answer: <span className="font-medium">{userSelected}</span>
+                        {!isCorrect && (
+                          <span className="ml-2 text-green-600 font-medium">(Correct: {question.answer})</span>
+                        )}
+                      </div>
+                    </div>
+                    <div className="mt-3 p-3 bg-white rounded-lg text-sm text-gray-700">
+                      <span className="font-medium">Explanation:</span> {question.explanation}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="flex justify-center">
+          <Button variant="primary" size="lg" onPress={handleRetry}>
+            Try Again 🔄
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!currentQuestion) {
+    return null;
+  }
+
+  const isCorrect = selectedOption === currentQuestion.answer;
+
+  return (
+    <div className="w-full max-w-4xl mx-auto p-6 space-y-8">
+      <div>
+        <div className="flex justify-between items-center mb-2">
+          <h2 className="text-2xl font-bold text-gray-800">{topic}</h2>
+          <span className="text-sm text-gray-500 font-medium">
+            Question {currentQuestionIndex + 1} of {data.questions.length}
+          </span>
+        </div>
+        <div className="h-1 w-full bg-gray-200 rounded-full overflow-hidden">
+          <div 
+            className="h-full bg-gradient-to-r from-blue-500 to-indigo-500 transition-all duration-300"
+            style={{ width: `${((currentQuestionIndex + 1) / data.questions.length) * 100}%` }}
+          />
+        </div>
+      </div>
+
+      <div className="space-y-8">
+        <h2 className="text-2xl font-semibold text-center text-gray-800 leading-relaxed">
+          {currentQuestion.question}
+        </h2>
+
+        <div className="grid grid-cols-4 gap-4">
+          {currentQuestion.options.map((option, index) => {
+            const letter = String.fromCharCode(65 + index);
+            const isSelected = selectedOption === option;
+            const isCorrectOption = isAnswerSubmitted && option === currentQuestion.answer;
+            const isWrongUserAnswer = isAnswerSubmitted && isSelected && option !== currentQuestion.answer;
+
+            return (
+              <button
+                key={index}
+                onClick={() => handleOptionSelect(option)}
+                disabled={isAnswerSubmitted}
+                className={`
+                  p-6 rounded-xl border-2 transition-all duration-200
+                  ${isAnswerSubmitted
+                    ? isCorrectOption
+                      ? 'border-green-500 bg-green-50'
+                      : isWrongUserAnswer
+                        ? 'border-red-500 bg-red-50 opacity-60'
+                        : 'border-gray-200 opacity-60'
+                    : isSelected
+                      ? 'border-blue-500 bg-blue-50 shadow-md'
+                      : 'border-gray-200 hover:border-blue-400 hover:bg-blue-50'
+                  }
+                `}
+              >
+                <div className="text-center space-y-2">
+                  <div className={`font-bold text-lg ${isCorrectOption ? 'text-green-600' : isWrongUserAnswer ? 'text-red-600' : 'text-gray-800'}`}>
+                    {letter}.
+                  </div>
+                  <div className={`text-sm font-medium ${isCorrectOption ? 'text-green-700' : isWrongUserAnswer ? 'text-gray-600' : 'text-gray-700'}`}>
+                    {option}
+                  </div>
+                  {isCorrectOption && !isWrongUserAnswer && (
+                    <div className="text-green-600 font-bold">✓</div>
+                  )}
+                </div>
+              </button>
+            );
+          })}
+        </div>
+
+        {!isAnswerSubmitted ? (
+          <div className="flex justify-center">
+            <Button
+              variant="primary"
+              size="lg"
+              isDisabled={!selectedOption}
+              onPress={handleSubmit}
+              className="min-w-[150px]"
+            >
+              Submit
+            </Button>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center space-y-4">
+            <div className={`${isCorrect ? 'text-green-600' : 'text-red-600'} text-xl font-semibold`}>
+              {isCorrect ? '✓ Correct!' : '✗ Incorrect. Correct answer is ' + currentQuestion.answer}
+            </div>
+
+            <div className="w-full mt-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-200 p-6">
+              <h3 className="font-bold text-gray-800 mb-2 text-lg">Explanation:</h3>
+              <p className="text-gray-700 leading-relaxed">{currentQuestion.explanation}</p>
+            </div>
+
+            <div className="flex justify-center mt-4">
+              <Button
+                variant="primary"
+                size="lg"
+                onPress={handleNext}
+                className="min-w-[180px]"
+              >
+                {isLastQuestion ? 'Finish Quiz' : 'Next Question →'}
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}