@@ -1,9 +1,13 @@
import { useState } from 'react'
import QuestionCard from '../components/quiz/QuestionCard '
import QuestionItem from '../components/quiz/QuestionItem '
import { fetchQuizQuestions } from '../components/quiz/API'
import { QuestionState } from '../components/quiz/API'
import Link from 'next/link'
import { hasSameContent } from '../components/common/Util'
import NavBar from '../components/common/NavBar'
import Head from 'next/head'
import Footer from '../components/common/Footer'
import Pagination from '../components/common/Pagination'
export type AnswerObject = {
question : string
@@ -67,41 +71,69 @@ export default function Quiz(): JSX.Element {
const previousQuestion = ( ) : void => {
// move on to the previous question if not the last question
const nextQuestion = number - 1
if ( nextQuestion === 0 ) {
const previousQuestion = number - 1
if ( previousQuestion === - 1 ) {
console . log ( 'Cant' )
return
} else {
setNumber ( nextQuestion )
setNumber ( previousQuestion )
}
}
return (
< div className = "container mx-auto text-center flex flex-col" >
< h1 > Quiz< / h1 >
< Link href = "/" > Back< / Link >
{ gameOver || userAnswers . length === TOTAL_QUESTIONS ? (
< button className = "start self-center bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick = { startQuiz } >
Start
< / button >
) : null }
< div className = "grid" >
< NavBar / >
< div className = "container mx-auto pt-2 text-center" >
< Head >
< title > View Selected Quiz< / title >
< meta name = "description" content = "View Selected Quiz" / >
< link rel = "icon" href = "/favicon.ico" / >
< / Head >
< div className = "container mx-auto text-center flex flex-col items-center" >
< h1 className = "px-4 py-2 text-base font-bold" > Quiz Title< / h1 >
{ gameOver || userAnswers . length === TOTAL_QUESTIONS ? (
< div className = "shadow-lg rounded-t-xl bg-blue-500 w-full md:w-64 p-6 dark:bg-gray-800" >
< p className = "text-white text-xl" > Ready?< / p >
< div className = "mt-4" >
< button
type = "button"
className = "py-2 px-4 bg-blue-700 hover:bg-blue-800 focus:ring-blue-500 focus:ring-offset-blue-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg "
onClick = { startQuiz }
>
Start
< / button >
< button
type = "button"
className = "py-2 px-4 mt-2 bg-blue-700 hover:bg-blue-800 focus:ring-blue-500 focus:ring-offset-blue-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg "
onClick = { startQuiz }
>
< Link href = "/quiz_all" > Back To All Quizzes< / Link >
< / button >
< / div >
< / div >
) : null }
{ ! gameOver ? < p className = "score" > Score: { score } < / p > : null }
{ loading && < p > Loading Questions ...< / p > }
{ ! loading && ! gameOver && (
< QuestionCard
questionNumber = { number + 1 }
totalQuestions = { TOTAL_QUESTIONS }
question = { questions [ number ] . question }
answers = { questions [ number ] . answers }
userAnswer = { userAnswers ? userAnswers [ number ] : undefined }
callback = { checkAnswer }
/ >
) }
{ ! gameOver && ! loading && number !== TOTAL_QUESTIONS - 1 ? (
< button className = "next self-center bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick = { nextQuestion } >
Next Question
< / button >
) : null }
{ ! gameOver ? < p className = "score" > Score: { score } < / p > : null }
{ loading && < p > Loading Questions ...< / p > }
{ ! loading && ! gameOver && (
< QuestionItem
questionNumber = { number + 1 }
totalQuestions = { TOTAL_QUESTIONS }
question = { questions [ number ] . question }
answers = { questions [ number ] . answers }
userAnswer = { userAnswers ? userAnswers [ number ] : undefined }
callback = { checkAnswer }
/ >
) }
{ ! gameOver && ! loading ? (
< >
< Pagination numItem = { TOTAL_QUESTIONS } onClickNext = { nextQuestion } onClickPrevious = { previousQuestion } / >
< / >
) : null }
< / div >
< / div >
< Footer / >
< / div >
)
}