"use client" import { useState } from "react" const CheckCircle = ({ className }: { className?: string }) => ( ) const XCircle = ({ className }: { className?: string }) => ( ) const Trophy = ({ className }: { className?: string }) => ( ) const Star = ({ className }: { className?: string }) => ( ) const ChevronLeft = ({ className }: { className?: string }) => ( ) const ChevronRight = ({ className }: { className?: string }) => ( ) const Gift = ({ className }: { className?: string }) => ( ) interface Question { id: number question: string options: string[] correctAnswer: number } const quizData: Question[] = [ { id: 1, question: "Which planet is known as the 'Red Planet'?", options: ["Venus", "Mars", "Jupiter", "Saturn"], correctAnswer: 1, }, { id: 2, question: "What is the largest mammal in the world?", options: ["African Elephant", "Blue Whale", "Giraffe", "Polar Bear"], correctAnswer: 1, }, { id: 3, question: "Which element has the chemical symbol 'Au'?", options: ["Silver", "Aluminum", "Gold", "Argon"], correctAnswer: 2, }, { id: 4, question: "How many bones are there in an adult human body?", options: ["186", "206", "226", "246"], correctAnswer: 1, }, { id: 5, question: "What is the speed of light in a vacuum?", options: ["299,792,458 m/s", "300,000,000 m/s", "186,000 miles/s", "All of the above"], correctAnswer: 0, }, ] export function Component() { const [currentQuestion, setCurrentQuestion] = useState(0) const [selectedAnswer, setSelectedAnswer] = useState(null) const [score, setScore] = useState(0) const [showFeedback, setShowFeedback] = useState(false) const [quizCompleted, setQuizCompleted] = useState(false) const [answers, setAnswers] = useState<(number | null)[]>(Array(quizData.length).fill(null)) const handleAnswerSelect = (answerIndex: number) => { if (selectedAnswer !== null) return setSelectedAnswer(answerIndex) setShowFeedback(true) const newAnswers = [...answers] newAnswers[currentQuestion] = answerIndex setAnswers(newAnswers) if (answerIndex === quizData[currentQuestion].correctAnswer) { setScore(score + 1) } } const handleNext = () => { if (currentQuestion < quizData.length - 1) { setCurrentQuestion(currentQuestion + 1) setSelectedAnswer(answers[currentQuestion + 1]) setShowFeedback(answers[currentQuestion + 1] !== null) } else { setQuizCompleted(true) } } const handlePrevious = () => { if (currentQuestion > 0) { setCurrentQuestion(currentQuestion - 1) setSelectedAnswer(answers[currentQuestion - 1]) setShowFeedback(answers[currentQuestion - 1] !== null) } } const resetQuiz = () => { setCurrentQuestion(0) setSelectedAnswer(null) setScore(0) setShowFeedback(false) setQuizCompleted(false) setAnswers(Array(quizData.length).fill(null)) } const calculateScore = () => { return answers.reduce((total, answer, index) => { if (answer === quizData[index].correctAnswer) { return total + 1 } return total }, 0) } const getScoreMessage = () => { const finalScore = calculateScore() const percentage = (finalScore / quizData.length) * 100 if (percentage >= 80) return "Excellent! You're a science genius!" if (percentage >= 60) return "Great job! You know your science!" if (percentage >= 40) return "Not bad! Keep learning!" return "Keep studying and try again!" } if (quizCompleted) { const finalScore = calculateScore() return (

Quiz Complete!

Congratulations on completing the science trivia challenge!

{finalScore}/{quizData.length}

{Math.round((finalScore / quizData.length) * 100)}% Correct

{Array.from({ length: 5 }).map((_, i) => (

))}

{getScoreMessage()}

{quizData.map((_, index) => (

{answers[index] === quizData[index].correctAnswer ? ( ) : ( )}

Q{index + 1}

))}

) } return (

Question {currentQuestion + 1} of {quizData.length}

Score: {calculateScore()}/{answers.filter((a) => a !== null).length}

{quizData.map((_, index) => (

{answers[index] !== null && (

{answers[index] === quizData[index].correctAnswer ? ( ) : ( )}

)}

{index + 1}

))}

{quizData[currentQuestion].question}

{quizData[currentQuestion].options.map((option, index) => { let buttonClass = "w-full p-4 text-left border-2 transition-all duration-300 hover:border-blue-400/50 dark:hover:border-blue-500/60 hover:shadow-md dark:hover:shadow-lg transform hover:scale-[1.02] active:scale-[0.98] rounded-lg cursor-pointer" let icon = null if (showFeedback) { if (index === quizData[currentQuestion].correctAnswer) { buttonClass += " bg-green-100/10 dark:bg-green-400/20 text-green-600 dark:text-green-400 border-green-500 shadow-lg animate-pulse" icon = } else if (index === selectedAnswer) { buttonClass += " bg-red-100/10 dark:bg-red-400/20 text-red-600 dark:text-red-400 border-red-500" icon = } else { buttonClass += " opacity-50 dark:opacity-40" } } else { if (index === selectedAnswer) { buttonClass += " bg-blue-100/10 dark:bg-blue-500/20 border-blue-500" } else { buttonClass += " hover:bg-slate-100/50 dark:hover:bg-slate-700/30 border-slate-200 dark:border-slate-600/50" } } return ( ) })}

{showFeedback && (

{selectedAnswer === quizData[currentQuestion].correctAnswer ? (

Correct! Well done!

) : (

The correct answer is:{" "} {quizData[currentQuestion].options[quizData[currentQuestion].correctAnswer]}

)}

{selectedAnswer !== null ? "Answer selected" : "Select an answer"}

) }

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build

Quiz Section

Created by

Installation

How to use