从零搭建基于 AI 问答平台(10) 定义 mcq 和 open ended 页面

效果

实现步骤如下：

添加 api 集成

修改 src/components/forms/QuizCreation.tsx:

const onSubmit = async (data: Input) => {
  setShowLoader(true);
  getQuestions(data, {
    onError: (error) => {
      setShowLoader(false);
      if (error instanceof AxiosError) {
        if (error.response?.status === 500) {
          console.log("Error");
        }
      }
    },
    onSuccess: ({ gameId }: { gameId: string }) => {
      setFinishedLoading(true);
      setTimeout(() => {
        if (form.getValues("type") === "mcq") {
          router.push(`/play/mcq/${gameId}`);
        } else if (form.getValues("type") === "open_ended") {
          router.push(`/play/open-ended/${gameId}`);
        }
      }, 2000);
    },
  });
};

实现 mcq 页面

添加 src/app/play/mcq/[gameId]/page.tsx:

import { prisma } from "@/lib/db";
import { auth } from "@clerk/nextjs/server";

import { redirect } from "next/navigation";
import React from "react";

type Props = {
  params: {
    gameId: string;
  };
};

const MCQPage = async ({ params }: Props) => {
  const { gameId } = await params;
  const { userId } = await auth();

  if (!userId) {
    return redirect('/');
  }

  const game = await prisma.game.findUnique({
    where: {
      id: gameId,
    },
    include: {
      questions: {
        select: {
          id: true,
          question: true,
          options: true,
        },
      },
    },
  });
  if (!game || game.gameType === "open_ended") {
    return redirect("/quiz");
  }
  return <pre>{JSON.stringify(game, null, 2)}</pre>;
};

export default MCQPage;

实现 open ended 页面

添加 src/app/play/open-ended/[gameId]/page.tsx:

import { prisma } from "@/lib/db";
import { auth } from "@clerk/nextjs/server";

import { redirect } from "next/navigation";
import React from "react";

type Props = {
  params: {
    gameId: string;
  };
};

const OpenEndedPage = async ({ params }: Props) => {
  const { gameId } = await params;
  const { userId } = await auth();
  if (!userId) {
    return redirect('/');
  }
  
  const game = await prisma.game.findUnique({
    where: {
      id: gameId,
    },
    include: {
      questions: {
        select: {
          id: true,
          question: true,
          answer: true,
        },
      },
    },
  });
  if (!game || game.gameType === "mcq") {
    return redirect("/quiz");
  }
  return <pre>{JSON.stringify(game, null, 2)}</pre>;
};

export default OpenEndedPage;

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

---

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