feat: quiz
This commit is contained in:
mehedi-hasan
parent
7b680bc196
commit
f7ad1ac2ab
|
|
@ -0,0 +1,29 @@
|
||||||
|
import Header from "@/components/layout/header";
|
||||||
|
import Sidebar from "@/components/layout/sidebar";
|
||||||
|
import StoreProvider from "@/lib/store-provider";
|
||||||
|
import type { Metadata } from "next";
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "Dashboard | Skilled Ai",
|
||||||
|
description:
|
||||||
|
"Empower your coding journey at Skilled Ai. Access tutorials, challenges, and expert-led courses to master programming languages and tools. Join a supportive community for discussions and code reviews. Elevate your skills and stay ahead in the tech world with us!",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function DashboardLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<StoreProvider lastUpdate={new Date().getTime()}>
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
<div className="flex h-screen overflow-hidden">
|
||||||
|
<Sidebar />
|
||||||
|
<main className="w-full pt-16">{children}</main>
|
||||||
|
</div>
|
||||||
|
</StoreProvider>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,242 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from "@/components/ui/form";
|
||||||
|
import { z } from "zod";
|
||||||
|
import FileUpload from "@/components/file-upload";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||||
|
|
||||||
|
const ImgSchema = z.object({
|
||||||
|
fileName: z.string(),
|
||||||
|
name: z.string(),
|
||||||
|
fileSize: z.number(),
|
||||||
|
size: z.number(),
|
||||||
|
fileKey: z.string(),
|
||||||
|
key: z.string(),
|
||||||
|
fileUrl: z.string(),
|
||||||
|
url: z.string(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const IMG_MAX_LIMIT = 1;
|
||||||
|
const formSchema = z.object({
|
||||||
|
imgUrl: z
|
||||||
|
.array(ImgSchema)
|
||||||
|
.max(IMG_MAX_LIMIT, { message: "You can only add up to 3 images" })
|
||||||
|
.min(1, { message: "At least one image must be added." }),
|
||||||
|
});
|
||||||
|
|
||||||
|
type FileFormValues = z.infer<typeof formSchema>;
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
const [initialData, setInitialData] = useState(null);
|
||||||
|
const action = initialData ? "Save changes" : "Create";
|
||||||
|
const defaultValues = initialData
|
||||||
|
? initialData
|
||||||
|
: {
|
||||||
|
imgUrl: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
const form = useForm<FileFormValues>({
|
||||||
|
resolver: zodResolver(formSchema),
|
||||||
|
defaultValues,
|
||||||
|
});
|
||||||
|
|
||||||
|
const onSubmit = async (data: FileFormValues) => {};
|
||||||
|
return (
|
||||||
|
<ScrollArea className="h-full">
|
||||||
|
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
|
||||||
|
<div className="max-w-3xl mx-auto">
|
||||||
|
<h2 className="text-3xl font-bold tracking-tight mb-4">
|
||||||
|
Hi, Welcome back 👋
|
||||||
|
</h2>
|
||||||
|
<Alert className="mb-4">
|
||||||
|
<AlertDescription className="text-base">
|
||||||
|
Empower your coding journey at Skilled Ai. Access tutorials,
|
||||||
|
challenges, and expert-led courses to master programming languages
|
||||||
|
and tools. Join a supportive community for discussions and code
|
||||||
|
reviews. Elevate your skills and stay ahead in the tech world with
|
||||||
|
us!
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className=" w-full">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="imgUrl"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel className="mb-0">
|
||||||
|
Upload your resume or CV
|
||||||
|
</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<FileUpload
|
||||||
|
onChange={field.onChange}
|
||||||
|
value={field.value}
|
||||||
|
onRemove={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* <div className="flex items-center justify-between space-y-2">
|
||||||
|
<h2 className="text-3xl font-bold tracking-tight">
|
||||||
|
Hi, Welcome back 👋
|
||||||
|
</h2>
|
||||||
|
<div className="hidden md:flex items-center space-x-2">
|
||||||
|
<CalendarDateRangePicker />
|
||||||
|
<Button>Download</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Tabs defaultValue="overview" className="space-y-4">
|
||||||
|
<TabsList>
|
||||||
|
<TabsTrigger value="overview">Overview</TabsTrigger>
|
||||||
|
<TabsTrigger value="analytics" disabled>
|
||||||
|
Analytics
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
<TabsContent value="overview" className="space-y-4">
|
||||||
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">
|
||||||
|
Total Revenue
|
||||||
|
</CardTitle>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
className="h-4 w-4 text-muted-foreground"
|
||||||
|
>
|
||||||
|
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
|
||||||
|
</svg>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">$45,231.89</div>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
+20.1% from last month
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">
|
||||||
|
Subscriptions
|
||||||
|
</CardTitle>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
className="h-4 w-4 text-muted-foreground"
|
||||||
|
>
|
||||||
|
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
||||||
|
<circle cx="9" cy="7" r="4" />
|
||||||
|
<path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
|
||||||
|
</svg>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">+2350</div>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
+180.1% from last month
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">Sales</CardTitle>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
className="h-4 w-4 text-muted-foreground"
|
||||||
|
>
|
||||||
|
<rect width="20" height="14" x="2" y="5" rx="2" />
|
||||||
|
<path d="M2 10h20" />
|
||||||
|
</svg>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">+12,234</div>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
+19% from last month
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">
|
||||||
|
Active Now
|
||||||
|
</CardTitle>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
className="h-4 w-4 text-muted-foreground"
|
||||||
|
>
|
||||||
|
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
|
||||||
|
</svg>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">+573</div>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
+201 since last hour
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-7">
|
||||||
|
<Card className="col-span-4">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Overview</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="pl-2">
|
||||||
|
<Overview />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card className="col-span-4 md:col-span-3">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Recent Sales</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
You made 265 sales this month.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<RecentSales />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs> */}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { StartScreen } from "@/components/quiz/start-screen";
|
||||||
|
import { Question } from "@/components/quiz/question";
|
||||||
|
const Page = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{/* <StartScreen /> */}
|
||||||
|
<Question difficulty={"easy"} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Page;
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { FinishedScreen } from "@/components/quiz/finished-screen";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const Page = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<FinishedScreen />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Page;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
export const ErrorMessage = () => {
|
||||||
|
return (
|
||||||
|
<p className="error">
|
||||||
|
Oh no! There was an error fecthing questions.
|
||||||
|
</p>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,90 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
// import { useNavigate } from 'react-router-dom'
|
||||||
|
// import { useSelector } from 'react-redux'
|
||||||
|
import { useQuizStore } from "@/lib/quiz-store";
|
||||||
|
import { useShallow } from "zustand/react/shallow";
|
||||||
|
import { SocialMedia } from "./social-media";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { Button } from "../ui/button";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardFooter,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "../ui/card";
|
||||||
|
|
||||||
|
export const FinishedScreen = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
const {
|
||||||
|
points,
|
||||||
|
highscore,
|
||||||
|
gameMode,
|
||||||
|
totalCorrectAns,
|
||||||
|
questionsArray,
|
||||||
|
reset,
|
||||||
|
} = useQuizStore(
|
||||||
|
useShallow((store) => ({
|
||||||
|
points: store.points,
|
||||||
|
highscore: store.highscore,
|
||||||
|
gameMode: store.gameMode,
|
||||||
|
totalCorrectAns: store.totalCorrectAns,
|
||||||
|
questionsArray: store.questionsArray,
|
||||||
|
reset: store.reset,
|
||||||
|
})),
|
||||||
|
);
|
||||||
|
// const {points, highscore} = useSelector(store => store.questions)
|
||||||
|
// const {gameMode} = useSelector(store => store.difficulty)
|
||||||
|
const percentage = Math.ceil((points * 100) / 300);
|
||||||
|
// const navigate = useNavigate()
|
||||||
|
|
||||||
|
let congrats;
|
||||||
|
if (percentage === 100) congrats = "Perfect!";
|
||||||
|
if (percentage >= 80 && percentage < 100) congrats = "Excellent!";
|
||||||
|
if (percentage >= 50 && percentage < 80) congrats = "Good!";
|
||||||
|
if (percentage > 0 && percentage < 50) congrats = "Bad luck!";
|
||||||
|
if (percentage === 0) congrats = "Oh no!";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="max-w-2xl mx-auto mt-8">
|
||||||
|
{/* <p className="result">
|
||||||
|
{congrats} You scored <strong>{points}</strong> out of 300 ({percentage}
|
||||||
|
%)
|
||||||
|
</p> */}
|
||||||
|
{/* <p className="highscore">(Highscore: {highscore} points)</p> */}
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Quiz Results</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-green-500">Correct: {totalCorrectAns}</p>
|
||||||
|
<p className="text-rose-500">
|
||||||
|
Incorrect: {questionsArray.length - totalCorrectAns}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
<CardFooter>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
reset();
|
||||||
|
router.push(`/dashboard/quiz`);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Reset
|
||||||
|
</Button>
|
||||||
|
</CardFooter>
|
||||||
|
{/* <div className="reset-btns">
|
||||||
|
<Button className="btn" onClick={() => router.push(`/dashboard/quiz`)}>
|
||||||
|
Main Menu
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className="btn"
|
||||||
|
onClick={() => router.push(`/dashboard/quiz/${gameMode}`)}
|
||||||
|
>
|
||||||
|
Reset
|
||||||
|
</Button>
|
||||||
|
</div> */}
|
||||||
|
{/* <SocialMedia /> */}
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
import React from 'react'
|
||||||
|
// import { Outlet } from 'react-router-dom'
|
||||||
|
|
||||||
|
export const Header = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<header className='app-header'>
|
||||||
|
<h1>The trivia <span>Quiz</span></h1>
|
||||||
|
</header>
|
||||||
|
{/* <Outlet/> */}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
export const Loader = () => {
|
||||||
|
return (
|
||||||
|
<div className="loader-container">
|
||||||
|
<div className="loader"></div>
|
||||||
|
<h3>Loading questions...</h3>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
import { useQuizStore } from "@/lib/quiz-store";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import React from "react";
|
||||||
|
import { useShallow } from "zustand/react/shallow";
|
||||||
|
import { Button } from "../ui/button";
|
||||||
|
// import { useNavigate } from 'react-router-dom'
|
||||||
|
// import { useDispatch, useSelector } from 'react-redux'
|
||||||
|
// import { gameEnded, nextQuestion } from '../features/questions/questionsSlice'
|
||||||
|
|
||||||
|
export const Next = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const { index, gameEnded, nextQuestion, questionsArray } = useQuizStore(
|
||||||
|
useShallow((store) => ({
|
||||||
|
index: store.index,
|
||||||
|
gameEnded: store.gameEnded,
|
||||||
|
nextQuestion: store.nextQuestion,
|
||||||
|
questionsArray: store.questionsArray,
|
||||||
|
})),
|
||||||
|
);
|
||||||
|
|
||||||
|
// const {index} = useSelector(store => store.questions)
|
||||||
|
|
||||||
|
// const dispatch = useDispatch()
|
||||||
|
// const navigate = useNavigate()
|
||||||
|
|
||||||
|
const handleFinish = () => {
|
||||||
|
gameEnded();
|
||||||
|
router.push("/dashboard/quiz/results");
|
||||||
|
};
|
||||||
|
|
||||||
|
if (index < questionsArray.length - 1)
|
||||||
|
return (
|
||||||
|
<Button className="" onClick={nextQuestion}>
|
||||||
|
Next
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button className="" onClick={handleFinish}>
|
||||||
|
Finish
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
import { useQuizStore } from "@/lib/quiz-store";
|
||||||
|
import React from "react";
|
||||||
|
import { useShallow } from "zustand/react/shallow";
|
||||||
|
import { Progress } from "../ui/progress";
|
||||||
|
|
||||||
|
export const ProgressBar = () => {
|
||||||
|
const { index, points, answer, questionsArray } = useQuizStore(
|
||||||
|
useShallow((store) => ({
|
||||||
|
index: store.index,
|
||||||
|
points: store.points,
|
||||||
|
answer: store.answer,
|
||||||
|
questionsArray: store.questionsArray,
|
||||||
|
})),
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Progress
|
||||||
|
value={(100 / questionsArray.length) * index}
|
||||||
|
className="w-full h-4"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* <progress max="15" value={index + Number(answer !== null)} /> */}
|
||||||
|
{/* <div className="flex justify-between"> */}
|
||||||
|
<p>
|
||||||
|
<strong>{index + 1}</strong> / {questionsArray.length}
|
||||||
|
</p>
|
||||||
|
{/* <p>
|
||||||
|
<strong>{points}</strong> / 300
|
||||||
|
</p> */}
|
||||||
|
{/* </div> */}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,106 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useEffect } from "react";
|
||||||
|
// import { getQuestions, newAnswer } from "../features/questions/questionsSlice";
|
||||||
|
import { Loader } from "./loader";
|
||||||
|
import { ErrorMessage } from "./error-message";
|
||||||
|
import { ProgressBar } from "./progress";
|
||||||
|
import { Timer } from "./timer";
|
||||||
|
import { Next } from "./next";
|
||||||
|
import { useQuizStore } from "@/lib/quiz-store";
|
||||||
|
import { useShallow } from "zustand/react/shallow";
|
||||||
|
import { Button } from "../ui/button";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
export const Question = ({ difficulty }: { difficulty: string }) => {
|
||||||
|
// const { difficulty } = useParams();
|
||||||
|
// const { gameMode } = useSelector((store) => store.difficulty);
|
||||||
|
// const { status, index, currentQuestion, answer } = useSelector(
|
||||||
|
// (store) => store.questions,
|
||||||
|
// );
|
||||||
|
|
||||||
|
const {
|
||||||
|
restartTimer,
|
||||||
|
// gameMode,
|
||||||
|
status,
|
||||||
|
index,
|
||||||
|
currentQuestion,
|
||||||
|
answer,
|
||||||
|
newAnswer,
|
||||||
|
} = useQuizStore(
|
||||||
|
useShallow((store) => ({
|
||||||
|
restartTimer: store.restartTimer,
|
||||||
|
gameMode: store.gameMode,
|
||||||
|
status: store.status,
|
||||||
|
index: store.index,
|
||||||
|
currentQuestion: store.currentQuestion,
|
||||||
|
answer: store.answer,
|
||||||
|
newAnswer: store.newAnswer,
|
||||||
|
})),
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
restartTimer();
|
||||||
|
// getQuestions(gameMode);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
}, [index]);
|
||||||
|
|
||||||
|
const statement = currentQuestion?.question;
|
||||||
|
const options = currentQuestion?.options;
|
||||||
|
const hasAnswered = answer !== null;
|
||||||
|
// const styleCat = {
|
||||||
|
// backgroundColor: difficulty === "medium" ? "#e3ce0e" : "#fc2121",
|
||||||
|
// };
|
||||||
|
return (
|
||||||
|
<div className=" max-w-4xl mx-auto mt-8 px-4">
|
||||||
|
{status === "loading" && <Loader />}
|
||||||
|
{status === "error" && <ErrorMessage />}
|
||||||
|
{status === "ready" && (
|
||||||
|
<>
|
||||||
|
<ProgressBar />
|
||||||
|
<div className="space-y-4 mt-8">
|
||||||
|
{/* <div
|
||||||
|
className="category"
|
||||||
|
// style={difficulty !== "easy" ? styleCat : {}}
|
||||||
|
>
|
||||||
|
{difficulty} quiz
|
||||||
|
</div> */}
|
||||||
|
<h4 className="text-xl font-semibold">{statement}</h4>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
{options?.map((option: any, index: number) => {
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
variant={`${answer === option ? "default" : "secondary"}`}
|
||||||
|
key={index}
|
||||||
|
className={cn("justify-start text-lg py-6 disabled:pointer-events-auto disabled:cursor-not-allowed")}
|
||||||
|
// className={cn(answer === option ? "answer" : "")}
|
||||||
|
// className={`${answer === option ? "answer" : ""}
|
||||||
|
// ${
|
||||||
|
// hasAnswered
|
||||||
|
// ? currentQuestion.correctAnswer === option
|
||||||
|
// ? "correct"
|
||||||
|
// : ""
|
||||||
|
// : ""
|
||||||
|
// }
|
||||||
|
// `}
|
||||||
|
disabled={hasAnswered}
|
||||||
|
onClick={() => newAnswer(option)}
|
||||||
|
>
|
||||||
|
{option}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between mt-6 items-center">
|
||||||
|
<div>{answer && <Next />}</div>
|
||||||
|
<Timer />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import React from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Github, Linkedin } from "lucide-react";
|
||||||
|
// import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
export const SocialMedia = () => {
|
||||||
|
return (
|
||||||
|
<div className="">
|
||||||
|
<Link href="/dashboard/quiz" >
|
||||||
|
<Github />
|
||||||
|
</Link>
|
||||||
|
<Link href="/dashboard/quiz">
|
||||||
|
<Linkedin />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
// import { useNavigate } from "react-router-dom";
|
||||||
|
// import { SocialMedia } from "./SocialMedia";
|
||||||
|
// import { selectGameMode } from "../features/difficulty/difficultySlice";
|
||||||
|
// import { useDispatch } from "react-redux";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { useQuizStore } from "@/lib/quiz-store";
|
||||||
|
import { useShallow } from "zustand/react/shallow";
|
||||||
|
import { Button } from "../ui/button";
|
||||||
|
|
||||||
|
export const StartScreen = () => {
|
||||||
|
// const dispatch = useDispatch();
|
||||||
|
// const navigate = useNavigate();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const { selectGameMode } = useQuizStore(
|
||||||
|
useShallow((store) => ({
|
||||||
|
selectGameMode: store.selectGameMode,
|
||||||
|
})),
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleClick = (e: any) => {
|
||||||
|
selectGameMode(e.target.value);
|
||||||
|
router.push(`/dashboard/quiz/${e.target.value}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="text-center mt-20">
|
||||||
|
<h2 className="font-bold text-4xl">Welcome to The Trivia Quiz!</h2>
|
||||||
|
<h3 className="font-bold text-xl mt-2">15 question to test your general knowledge</h3>
|
||||||
|
<h4 className="mt-4 mb-2">First, choose the test difficulty:</h4>
|
||||||
|
<div className="flex gap-2 justify-center">
|
||||||
|
<Button
|
||||||
|
// className="btn2"
|
||||||
|
value="easy"
|
||||||
|
onClick={handleClick}
|
||||||
|
// style={{ backgroundColor: "#0ee32a" }}
|
||||||
|
>
|
||||||
|
Easy
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
// className="btn2"
|
||||||
|
value="medium"
|
||||||
|
onClick={handleClick}
|
||||||
|
// style={{ backgroundColor: "#e3ce0e" }}
|
||||||
|
>
|
||||||
|
Medium
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
// className="btn2"
|
||||||
|
value="hard"
|
||||||
|
onClick={handleClick}
|
||||||
|
// style={{ backgroundColor: "#fc2121" }}
|
||||||
|
>
|
||||||
|
Hard
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{/* <SocialMedia /> */}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
import React, { useEffect } from "react";
|
||||||
|
// import { useNavigate } from 'react-router-dom'
|
||||||
|
// import { useDispatch, useSelector } from 'react-redux'
|
||||||
|
// import { lessSeconds, restartTimer } from '../features/timer/timerSlice'
|
||||||
|
// import { gameEnded } from '../features/questions/questionsSlice'
|
||||||
|
import { useQuizStore } from "@/lib/quiz-store";
|
||||||
|
import { useShallow } from "zustand/react/shallow";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { buttonVariants } from "../ui/button";
|
||||||
|
|
||||||
|
export const Timer = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
const { secondsRemaining, gameEnded, lessSeconds, restartTimer } =
|
||||||
|
useQuizStore(
|
||||||
|
useShallow((store) => ({
|
||||||
|
secondsRemaining: store.secondsRemaining,
|
||||||
|
gameEnded: store.gameEnded,
|
||||||
|
lessSeconds: store.lessSeconds,
|
||||||
|
restartTimer: store.restartTimer,
|
||||||
|
})),
|
||||||
|
);
|
||||||
|
// const {secondsRemaining} = useSelector(store => store.timer)
|
||||||
|
const mins = Math.floor(secondsRemaining / 60);
|
||||||
|
const sec = secondsRemaining % 60;
|
||||||
|
|
||||||
|
// const dispatch = useDispatch();
|
||||||
|
// const navigate = useNavigate();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (secondsRemaining === 0) {
|
||||||
|
gameEnded();
|
||||||
|
restartTimer();
|
||||||
|
router.push("/dashboard/quiz/results");
|
||||||
|
}
|
||||||
|
}, [secondsRemaining]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
lessSeconds();
|
||||||
|
}, 1000);
|
||||||
|
return () => clearInterval(timer);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={buttonVariants({ variant: "outline" })}>
|
||||||
|
{mins < 10 && "0"}
|
||||||
|
{mins}:{sec < 10 && "0"}
|
||||||
|
{sec}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,171 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { createContext, useContext } from "react";
|
||||||
|
import { createStore, useStore as useZustandStore } from "zustand";
|
||||||
|
import { PreloadedStoreInterface } from "./store-provider";
|
||||||
|
import { questions } from "@/constants/data";
|
||||||
|
|
||||||
|
function shuffleArray(array: any) {
|
||||||
|
const newArray = [...array];
|
||||||
|
// for (let i = newArray.length - 1; i > 0; i--) {
|
||||||
|
// const j = Math.floor(Math.random() * (i + 1));
|
||||||
|
// [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
|
||||||
|
// }
|
||||||
|
return newArray;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface StoreInterface {
|
||||||
|
gameMode: null | string;
|
||||||
|
questionsArray: any[];
|
||||||
|
//loading, error, ready
|
||||||
|
status: string;
|
||||||
|
index: number;
|
||||||
|
currentQuestion: any;
|
||||||
|
answer: null;
|
||||||
|
points: number;
|
||||||
|
highscore: number;
|
||||||
|
secondsRemaining: number;
|
||||||
|
totalCorrectAns: number;
|
||||||
|
lessSeconds: () => void;
|
||||||
|
restartTimer: () => void;
|
||||||
|
selectGameMode: (gameMode: string) => void;
|
||||||
|
newAnswer: (answer: any) => void;
|
||||||
|
nextQuestion: () => void;
|
||||||
|
gameEnded: () => void;
|
||||||
|
lastUpdate: number;
|
||||||
|
light: boolean;
|
||||||
|
count: number;
|
||||||
|
// tick: (lastUpdate: number) => void;
|
||||||
|
// increment: () => void;
|
||||||
|
// decrement: () => void;
|
||||||
|
reset: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getDefaultInitialState() {
|
||||||
|
return {
|
||||||
|
lastUpdate: new Date(1970, 1, 1).getTime(),
|
||||||
|
light: false,
|
||||||
|
count: 0,
|
||||||
|
gameMode: null,
|
||||||
|
questionsArray: questions,
|
||||||
|
//loading, error, ready
|
||||||
|
status: "ready",
|
||||||
|
index: 0,
|
||||||
|
currentQuestion: {
|
||||||
|
id: questions[0].id,
|
||||||
|
correctAnswer: questions[0].correctAnswer,
|
||||||
|
question: questions[0].question.text,
|
||||||
|
options: shuffleArray([
|
||||||
|
...questions[0].incorrectAnswers,
|
||||||
|
questions[0].correctAnswer,
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
answer: null,
|
||||||
|
points: 0,
|
||||||
|
highscore: 0,
|
||||||
|
secondsRemaining: 210,
|
||||||
|
totalCorrectAns: 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export type StoreType = ReturnType<typeof initializeStore>;
|
||||||
|
|
||||||
|
const storeContext = createContext<StoreType | null>(null);
|
||||||
|
|
||||||
|
export const Provider = storeContext.Provider;
|
||||||
|
|
||||||
|
export function useQuizStore<T>(selector: (state: StoreInterface) => T) {
|
||||||
|
const store = useContext(storeContext);
|
||||||
|
|
||||||
|
if (!store) throw new Error("Store is missing the provider");
|
||||||
|
|
||||||
|
return useZustandStore(store, selector);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function initializeStore(preloadedState: PreloadedStoreInterface) {
|
||||||
|
return createStore<StoreInterface>((set, get) => ({
|
||||||
|
...getDefaultInitialState(),
|
||||||
|
...preloadedState,
|
||||||
|
selectGameMode: (gameMode) =>
|
||||||
|
set({
|
||||||
|
gameMode,
|
||||||
|
}),
|
||||||
|
newAnswer: (answer) => {
|
||||||
|
// console.log(get().totalCorrectAns);
|
||||||
|
set({
|
||||||
|
answer,
|
||||||
|
points:
|
||||||
|
answer === get().currentQuestion.correctAnswer
|
||||||
|
? get().points + 20
|
||||||
|
: get().points,
|
||||||
|
totalCorrectAns:
|
||||||
|
answer === get().currentQuestion.correctAnswer
|
||||||
|
? get().totalCorrectAns + 1
|
||||||
|
: get().totalCorrectAns,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
nextQuestion: () => {
|
||||||
|
let temp = get().questionsArray[get().index + 1];
|
||||||
|
let newArray = {
|
||||||
|
id: temp.id,
|
||||||
|
correctAnswer: temp.correctAnswer,
|
||||||
|
question: temp.question.text,
|
||||||
|
options: shuffleArray([...temp.incorrectAnswers, temp.correctAnswer]),
|
||||||
|
};
|
||||||
|
set({
|
||||||
|
index: (get().index += 1),
|
||||||
|
currentQuestion: newArray,
|
||||||
|
answer: null,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
gameEnded: () =>
|
||||||
|
set({
|
||||||
|
highscore:
|
||||||
|
get().points > get().highscore ? get().points : get().highscore,
|
||||||
|
}),
|
||||||
|
lessSeconds: () => set({ secondsRemaining: (get().secondsRemaining -= 1) }),
|
||||||
|
restartTimer: () => set({ secondsRemaining: 210 }),
|
||||||
|
reset: () =>
|
||||||
|
set({
|
||||||
|
lastUpdate: new Date(1970, 1, 1).getTime(),
|
||||||
|
light: false,
|
||||||
|
count: 0,
|
||||||
|
gameMode: null,
|
||||||
|
questionsArray: questions,
|
||||||
|
//loading, error, ready
|
||||||
|
status: "ready",
|
||||||
|
index: 0,
|
||||||
|
currentQuestion: {
|
||||||
|
id: questions[0].id,
|
||||||
|
correctAnswer: questions[0].correctAnswer,
|
||||||
|
question: questions[0].question.text,
|
||||||
|
options: shuffleArray([
|
||||||
|
...questions[0].incorrectAnswers,
|
||||||
|
questions[0].correctAnswer,
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
answer: null,
|
||||||
|
points: 0,
|
||||||
|
highscore: 0,
|
||||||
|
secondsRemaining: 210,
|
||||||
|
totalCorrectAns: 0,
|
||||||
|
}),
|
||||||
|
// tick: (lastUpdate) =>
|
||||||
|
// set({
|
||||||
|
// lastUpdate,
|
||||||
|
// light: !get().light,
|
||||||
|
// }),
|
||||||
|
// increment: () =>
|
||||||
|
// set({
|
||||||
|
// count: get().count + 1,
|
||||||
|
// }),
|
||||||
|
// decrement: () =>
|
||||||
|
// set({
|
||||||
|
// count: get().count - 1,
|
||||||
|
// }),
|
||||||
|
// reset: () =>
|
||||||
|
// set({
|
||||||
|
// count: getDefaultInitialState().count,
|
||||||
|
// }),
|
||||||
|
}));
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue