从零搭建基于 AI 问答平台(11) 定义 mcq 组件

效果

实现步骤如下：

添加 MCQ 模块

修改 src/app/play/mcq/[gameId]/page.tsx:

return <MCQ game={game} />;

添加 src/components/play/MCQ.tsx:

"use client";
import { Game, Question } from "@prisma/client";
import React from "react";
import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

import { BarChart, ChevronRight, Loader2, Timer } from "lucide-react";
import { Button } from "../ui/button";

type Props = {
  game: Game & { questions: Pick<Question, "id" | "options" | "question">[] };
};

const MCQ = ({ game }: Props) => {
  const [questionIndex, setQuestionIndex] = React.useState(0);
  const [hasEnded, setHasEnded] = React.useState(false);

  const [selectedChoice, setSelectedChoice] = React.useState<number>(0);

  const currentQuestion = React.useMemo(() => {
    return game.questions[questionIndex];
  }, [questionIndex, game.questions]);

  const options = React.useMemo(() => {
    if (!currentQuestion) return [];
    if (!currentQuestion.options) return [];
    return JSON.parse(currentQuestion.options as string) as string[];
  }, [currentQuestion]);


  const handleNext = React.useCallback(() => {
    setQuestionIndex((questionIndex) => questionIndex + 1);
  }, [setQuestionIndex]);


  if (hasEnded) {
    return (
      <div className="absolute flex flex-col justify-center -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
        <div className="px-4 py-2 mt-2 font-semibold text-white bg-green-500 rounded-md whitespace-nowrap">
          You Completed 
        </div>
      </div>
    );
  }

  return (
    <div className="absolute -translate-x-1/2 -translate-y-1/2 md:w-[80vw] max-w-4xl w-[90vw] top-1/2 left-1/2">
      <div className="flex flex-row justify-between">
        
          {/* topic */}
          <p>
            <span className="text-slate-400">Topic</span> &nbsp;
            <span className="px-2 py-1 text-white rounded-lg bg-slate-800">
              {game.topic}
            </span>
          </p>
          <div className="flex self-start mt-3 text-slate-400">
            <Timer className="mr-2" />
            <span>00:00</span>
          </div>

      </div>
      <Card className="w-full mt-4">
        <CardHeader className="flex flex-row items-center">
          <CardTitle className="mr-5 text-center divide-y divide-zinc-600/50">
            <div>{questionIndex + 1}</div>
            <div className="text-base text-slate-400">
              {game.questions.length}
            </div>
          </CardTitle>
          <CardDescription className="flex-grow text-lg">
            {currentQuestion?.question}
          </CardDescription>
        </CardHeader>
      </Card>
      <div className="flex flex-col items-center justify-center w-full mt-4">
        {options.map((option, index) => {
          return (
            <Button
              key={option}
              variant={selectedChoice === index ? "default" : "outline"}
              className="justify-start w-full py-8 mb-4"
              onClick={() => setSelectedChoice(index)}
            >
              <div className="flex items-center justify-start">
                <div className="p-2 px-3 mr-5 border rounded-md">
                  {index + 1}
                </div>
                <div className="text-start">{option}</div>
              </div>
            </Button>
          );
        })}
        <Button
          variant="default"
          className="mt-2"
          size="lg"
          disabled={hasEnded}
          onClick={() => {
            handleNext();
          }}
        >
          Next <ChevronRight className="w-4 h-4 ml-2" />
        </Button>
      </div>
    </div>
  );
};

export default MCQ;

其中注意几个写法：

当前问题

const currentQuestion = React.useMemo(() => {
  return game.questions[questionIndex];
}, [questionIndex, game.questions]);

const options = React.useMemo(() => {
  if (!currentQuestion) return [];
  if (!currentQuestion.options) return [];
  return JSON.parse(currentQuestion.options as string) as string[];
}, [currentQuestion]);

上下结构的标签

<CardTitle className="mr-5 text-center divide-y divide-zinc-600/50">
  <div>{questionIndex + 1}</div>
  <div className="text-base text-slate-400">
    {game.questions.length}
  </div>
</CardTitle>

显示选项

const [selectedChoice, setSelectedChoice] = React.useState<number>(0);

{options.map((option, index) => {
  return (
    <Button
      key={option}
      variant={selectedChoice === index ? "default" : "outline"}
      className="justify-start w-full py-8 mb-4"
      onClick={() => setSelectedChoice(index)}
    >
      <div className="flex items-center justify-start">
        <div className="p-2 px-3 mr-5 border rounded-md">
          {index + 1}
        </div>
        <div className="text-start">{option}</div>
      </div>
    </Button>
  );
})}

如果感兴趣本项目，请访问项目目录： 从零搭建基于 AI 问答平台 - 目录

---

作者：Bearalise
出处：从零搭建基于 AI 问答平台(11) 定义 mcq 组件
版权：本文版权归作者所有
转载：欢迎转载，但未经作者同意，必须保留此段声明，必须在文章中给出原文链接。