fix: quiz result

This commit is contained in:
mehedi-hasan 2024-04-23 22:10:10 +06:00
parent 4e75d7eea5
commit a7049fc9e2
4 changed files with 56 additions and 21 deletions

View File

@ -25,6 +25,7 @@ export const FinishedScreen = () => {
totalCorrectAns,
questionsArray,
reset,
correctAns
} = useQuizStore(
useShallow((store) => ({
points: store.points,
@ -33,6 +34,7 @@ export const FinishedScreen = () => {
totalCorrectAns: store.totalCorrectAns,
questionsArray: store.questionsArray,
reset: store.reset,
correctAns: store.correctAns
})),
);
// const {points, highscore} = useSelector(store => store.questions)
@ -58,10 +60,14 @@ export const FinishedScreen = () => {
<CardTitle>Quiz Results</CardTitle>
</CardHeader>
<CardContent>
<p className="text-green-500">Correct: {totalCorrectAns}</p>
<p className="text-green-500">Correct: {correctAns.length}</p>
<p className="text-rose-500">
Incorrect: {questionsArray.length - correctAns.length}
</p>
{/* <p className="text-green-500">Correct: {totalCorrectAns}</p>
<p className="text-rose-500">
Incorrect: {questionsArray.length - totalCorrectAns}
</p>
</p> */}
</CardContent>
<CardFooter>
<Button

View File

@ -7,15 +7,17 @@ import { Button } from "../ui/button";
// import { useDispatch, useSelector } from 'react-redux'
// import { gameEnded, nextQuestion } from '../features/questions/questionsSlice'
export const Next = () => {
export const Next = ({ currentCorrectAns }: { currentCorrectAns: string }) => {
const router = useRouter();
const { index, gameEnded, nextQuestion, questionsArray } = useQuizStore(
const { index, gameEnded, nextQuestion, questionsArray, newAnswer } =
useQuizStore(
useShallow((store) => ({
index: store.index,
gameEnded: store.gameEnded,
nextQuestion: store.nextQuestion,
questionsArray: store.questionsArray,
newAnswer: store.newAnswer,
})),
);
@ -31,7 +33,13 @@ export const Next = () => {
if (index < questionsArray.length - 1)
return (
<Button className="" onClick={nextQuestion}>
<Button
className=""
onClick={() => {
newAnswer(currentCorrectAns);
nextQuestion();
}}
>
Next
</Button>
);

View File

@ -18,6 +18,7 @@ export const Question = ({ difficulty }: { difficulty: string }) => {
// const { status, index, currentQuestion, answer } = useSelector(
// (store) => store.questions,
// );
const [currentCorrectAns, setCurrentCorrectAns] = useState("");
const [isStart, setIsStart] = useState(false);
@ -75,7 +76,10 @@ export const Question = ({ difficulty }: { difficulty: string }) => {
{options?.map((option: any, index: number) => {
return (
<Button
variant={`${answer === option ? "default" : "secondary"}`}
// variant={`${answer === option ? "default" : "secondary"}`}
variant={`${
currentCorrectAns === option ? "default" : "secondary"
}`}
key={index}
className={cn(
"justify-start text-lg py-6 disabled:pointer-events-auto disabled:cursor-not-allowed",
@ -90,8 +94,9 @@ export const Question = ({ difficulty }: { difficulty: string }) => {
// : ""
// }
// `}
disabled={ !isStart}
onClick={() => newAnswer(option)}
disabled={!isStart}
onClick={() => setCurrentCorrectAns(option)}
// onClick={() => newAnswer(option)}
>
{option}
</Button>
@ -100,9 +105,18 @@ export const Question = ({ difficulty }: { difficulty: string }) => {
</div>
</div>
<div className="flex justify-between mt-6 items-center">
<div>{answer && <Next />}</div>
<div>
{/* {answer && <Next currentCorrectAns={currentCorrectAns} />} */}
{currentCorrectAns !== "" && (
<Next currentCorrectAns={currentCorrectAns} />
)}
</div>
{isStart ? <Timer /> : <Button onClick={() => setIsStart(true)}>Start</Button>}
{isStart ? (
<Timer />
) : (
<Button onClick={() => setIsStart(true)}>Start</Button>
)}
</div>
</>
)}

View File

@ -39,6 +39,7 @@ export interface StoreInterface {
// increment: () => void;
// decrement: () => void;
reset: () => void;
correctAns: string[];
}
function getDefaultInitialState() {
@ -65,6 +66,7 @@ function getDefaultInitialState() {
highscore: 0,
secondsRemaining: 210,
totalCorrectAns: 0,
correctAns: [],
};
}
@ -94,10 +96,15 @@ export function initializeStore(preloadedState: PreloadedStoreInterface) {
// console.log(get().totalCorrectAns);
set({
answer,
points:
answer === get().currentQuestion.correctAnswer
? get().points + 20
: get().points,
// points:
// answer === get().currentQuestion.correctAnswer
// ? get().points + 20
// : get().points,
correctAns:
answer === get().currentQuestion.correctAnswer &&
!get().correctAns.includes(answer)
? [...get().correctAns, answer]
: get().correctAns,
totalCorrectAns:
answer === get().currentQuestion.correctAnswer
? get().totalCorrectAns + 1