[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "BYTEBATTLE - AI-Powered Quiz App", description: "Challenge yourself with AI-generated quizzes across various categories", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 263 70% 50%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 191 97% 77%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 263 70% 50%; --radius: 0.5rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 263 70% 60%; --primary-foreground: 0 0% 98%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 191 97% 77%; --accent-foreground: 240 5.9% 10%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 263 70% 60%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .quiz-card { @apply relative overflow-hidden; } .quiz-card::before { content: ""; @apply absolute -right-4 -bottom-4 w-24 h-24 rounded-full bg-accent/30 blur-xl; } .quiz-card::after { content: ""; @apply absolute -left-4 -top-4 w-16 h-16 rounded-full bg-primary/20 blur-xl; } .animate-bounce-slow { animation: bounce 3s infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } .animate-float { animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, value, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return
} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="app/categories/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Brain, Code, Globe, Atom, Music, Film, BookOpen, Dumbbell } from "lucide-react" const categories = [ { id: "science", name: "Science", description: "Test your knowledge of scientific concepts, discoveries, and theories", icon: Atom, color: "bg-green-100 dark:bg-green-900", iconColor: "text-green-500", questionCount: 500, }, { id: "technology", name: "Technology", description: "Challenge yourself with questions about gadgets, innovations, and tech history", icon: Code, color: "bg-purple-100 dark:bg-purple-900", iconColor: "text-purple-500", questionCount: 450, }, { id: "history", name: "History", description: "Journey through time with questions about historical events and figures", icon: BookOpen, color: "bg-amber-100 dark:bg-amber-900", iconColor: "text-amber-500", questionCount: 600, }, { id: "geography", name: "Geography", description: "Explore the world with questions about countries, landmarks, and natural features", icon: Globe, color: "bg-blue-100 dark:bg-blue-900", iconColor: "text-blue-500", questionCount: 400, }, { id: "entertainment", name: "Entertainment", description: "Test your knowledge of movies, TV shows, music, and pop culture", icon: Film, color: "bg-red-100 dark:bg-red-900", iconColor: "text-red-500", questionCount: 550, }, { id: "music", name: "Music", description: "From classical to contemporary, test your musical knowledge", icon: Music, color: "bg-pink-100 dark:bg-pink-900", iconColor: "text-pink-500", questionCount: 350, }, { id: "sports", name: "Sports", description: "Challenge yourself with questions about athletes, teams, and sporting events", icon: Dumbbell, color: "bg-orange-100 dark:bg-orange-900", iconColor: "text-orange-500", questionCount: 480, }, { id: "general", name: "General Knowledge", description: "A mix of questions from various categories to test your overall knowledge", icon: Brain, color: "bg-teal-100 dark:bg-teal-900", iconColor: "text-teal-500", questionCount: 700, }, ] export default function CategoriesPage() { return (

BYTEBATTLE

Home Categories Leaderboard Profile

Quiz Categories

Choose from a variety of categories to test your knowledge and challenge yourself with AI-generated questions

{categories.map((category) => (
{category.questionCount}+ Questions
{category.name} {category.description}
Easy Medium Hard
))}

BYTEBATTLE

© {new Date().getFullYear()} BYTEBATTLE. All rights reserved.

) } [V0_FILE]typescriptreact:file="app/quiz/new/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/quiz/play/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { useRouter, useSearchParams } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Badge } from "@/components/ui/badge" import { Brain, Clock, ArrowRight, CheckCircle, XCircle } from "lucide-react" import { generateQuestions } from "@/lib/quiz-generator" import type { Question } from "@/lib/types" export default function PlayQuizPage() { const router = useRouter() const searchParams = useSearchParams() const category = searchParams.get("category") || "general" const difficulty = searchParams.get("difficulty") || "medium" const count = Number.parseInt(searchParams.get("count") || "10", 10) const timeLimit = Number.parseInt(searchParams.get("time") || "60", 10) const [questions, setQuestions] = useState([]) const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0) const [selectedAnswer, setSelectedAnswer] = useState(null) const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false) const [score, setScore] = useState(0) const [timeRemaining, setTimeRemaining] = useState(timeLimit) const [quizCompleted, setQuizCompleted] = useState(false) const [loading, setLoading] = useState(true) // Generate questions on component mount useEffect(() => { const loadQuestions = async () => { setLoading(true) try { const generatedQuestions = await generateQuestions(category, difficulty, count) setQuestions(generatedQuestions) } catch (error) { console.error("Failed to generate questions:", error) } finally { setLoading(false) } } loadQuestions() }, [category, difficulty, count]) // Timer effect useEffect(() => { if (loading || quizCompleted || !timeLimit) return const timer = setInterval(() => { setTimeRemaining((prev) => { if (prev <= 1) { clearInterval(timer) if (!isAnswerSubmitted) { handleAnswerSubmit(null) } return 0 } return prev - 1 }) }, 1000) return () => clearInterval(timer) }, [loading, quizCompleted, timeLimit, isAnswerSubmitted]) const currentQuestion = questions[currentQuestionIndex] const handleAnswerSelect = (answer: string) => { if (isAnswerSubmitted) return setSelectedAnswer(answer) } const handleAnswerSubmit = (answer: string | null) => { if (isAnswerSubmitted || !currentQuestion) return const finalAnswer = answer || selectedAnswer const isCorrect = finalAnswer === currentQuestion.correctAnswer if (isCorrect) { setScore((prev) => prev + 1) } setIsAnswerSubmitted(true) // Move to next question after a delay setTimeout(() => { if (currentQuestionIndex < questions.length - 1) { setCurrentQuestionIndex((prev) => prev + 1) setSelectedAnswer(null) setIsAnswerSubmitted(false) setTimeRemaining(timeLimit) } else { setQuizCompleted(true) } }, 1500) } const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins}:${secs.toString().padStart(2, "0")}` } if (loading) { return (

BYTEBATTLE

Generating Your Quiz...

Our AI is crafting challenging questions just for you

) } if (quizCompleted) { const percentage = Math.round((score / questions.length) * 100) return (

BYTEBATTLE

Quiz Completed!
{percentage >= 70 ? (

) : (

)}

Your Score

{score} / {questions.length} ({percentage}%)

{percentage >= 90 ? "Outstanding! You're a true expert!" : percentage >= 70 ? "Great job! You know your stuff!" : percentage >= 50 ? "Good effort! Keep learning!" : "Keep practicing! You'll improve with time!"}

Quiz Details

Category:

{category}

Difficulty:

{difficulty}

Questions:

{questions.length}

Time Limit:

{timeLimit ? `${timeLimit} seconds` : "No limit"}

) } return (

BYTEBATTLE

{category} {difficulty}

Question
{currentQuestionIndex + 1} of {questions.length}

Score: {score}
{timeLimit > 0 && (
{formatTime(timeRemaining)}
)}
{currentQuestion && ( {currentQuestion.question}
{currentQuestion.options.map((option) => { const isSelected = selectedAnswer === option const isCorrect = isAnswerSubmitted && option === currentQuestion.correctAnswer const isWrong = isAnswerSubmitted && isSelected && option !== currentQuestion.correctAnswer return ( ) })}
)}

) } [V0_FILE]typescriptreact:file="app/quiz/play/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="lib/types.ts" isMerged="true" export interface Question { question: string options: string[] correctAnswer: string } export interface User { id: string name: string email: string image?: string score: number quizzesTaken: number } export interface QuizResult { id: string userId: string category: string difficulty: string score: number totalQuestions: number timeSpent: number date: Date } [V0_FILE]typescriptreact:file="app/leaderboard/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Brain, Trophy, Medal, Award } from "lucide-react" // Mock data for leaderboard const leaderboardData = [ { id: "1", name: "Alex Johnson", score: 9850, quizzesTaken: 42, avatar: "/placeholder.svg?height=40&width=40" }, { id: "2", name: "Jamie Smith", score: 8720, quizzesTaken: 38, avatar: "/placeholder.svg?height=40&width=40" }, { id: "3", name: "Taylor Brown", score: 8450, quizzesTaken: 35, avatar: "/placeholder.svg?height=40&width=40" }, { id: "4", name: "Jordan Wilson", score: 7980, quizzesTaken: 31, avatar: "/placeholder.svg?height=40&width=40" }, { id: "5", name: "Casey Miller", score: 7650, quizzesTaken: 29, avatar: "/placeholder.svg?height=40&width=40" }, { id: "6", name: "Riley Davis", score: 7320, quizzesTaken: 27, avatar: "/placeholder.svg?height=40&width=40" }, { id: "7", name: "Morgan Lee", score: 6890, quizzesTaken: 25, avatar: "/placeholder.svg?height=40&width=40" }, { id: "8", name: "Quinn Taylor", score: 6540, quizzesTaken: 23, avatar: "/placeholder.svg?height=40&width=40" }, { id: "9", name: "Avery Martin", score: 6210, quizzesTaken: 21, avatar: "/placeholder.svg?height=40&width=40" }, { id: "10", name: "Reese Clark", score: 5980, quizzesTaken: 19, avatar: "/placeholder.svg?height=40&width=40" }, ] // Mock data for category leaders const categoryLeaders = [ { category: "Science", name: "Alex Johnson", score: 2450 }, { category: "Technology", name: "Jamie Smith", score: 2180 }, { category: "History", name: "Taylor Brown", score: 1950 }, { category: "Geography", name: "Jordan Wilson", score: 1820 }, ] export default function LeaderboardPage() { return (

BYTEBATTLE

Home Categories Leaderboard Profile

Leaderboard

See how you stack up against other BYTEBATTLE players from around the world

{/* Top 3 Players /}
{leaderboardData.slice(0, 3).map((player, index) => (

{index === 0 ? ( ) : index === 1 ? ( ) : ( )}

{player.name}
Rank #{index + 1}

Score

{player.score.toLocaleString()}

Quizzes

{player.quizzesTaken}

))}
{/ Main Leaderboard /}
Global Rankings
{leaderboardData.map((player, index) => (

#{index + 1}

{player.name}

{player.quizzesTaken} quizzes

{player.score.toLocaleString()}

points

))}

{/ Category Leaders /}
Category Champions
{categoryLeaders.map((leader) => (

{leader.category}

{leader.name}

{leader.score.toLocaleString()}

))}
Your Ranking

Sign in to see your ranking

BYTEBATTLE

© {new Date().getFullYear()} BYTEBATTLE. All rights reserved.

) } [V0_FILE]typescriptreact:file="app/profile/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Brain, User, BarChart3, Trophy, Calendar, ArrowUpRight } from "lucide-react" // Mock user data const userData = { name: "Alex Johnson", email: "alex@example.com", joinDate: "Jan 2023", totalScore: 9850, quizzesTaken: 42, averageScore: 85, badges: ["Science Expert", "History Buff", "Quiz Master", "Perfect Score", "Speed Demon"], recentQuizzes: [ { id: "1", category: "Science", score: 9, total: 10, date: "2023-03-01" }, { id: "2", category: "History", score: 8, total: 10, date: "2023-02-28" }, { id: "3", category: "Technology", score: 10, total: 10, date: "2023-02-25" }, { id: "4", category: "Geography", score: 7, total: 10, date: "2023-02-20" }, ], categoryPerformance: [ { category: "Science", score: 92 }, { category: "History", score: 88 }, { category: "Technology", score: 95 }, { category: "Geography", score: 78 }, { category: "Entertainment", score: 82 }, ], } export default function ProfilePage() { const [activeTab, setActiveTab] = useState("overview") return (

BYTEBATTLE

Home Categories Leaderboard Profile

{/ Profile Header /}

{userData.name}

{userData.email}

Joined {userData.joinDate} {userData.totalScore.toLocaleString()} points {userData.quizzesTaken} quizzes

{/ Profile Tabs /}

{/ Tab Content /} {activeTab === "overview" && (
{/ Stats Cards /}
Total Score
{userData.totalScore.toLocaleString()}
Quizzes Taken
{userData.quizzesTaken}
Average Score
{userData.averageScore}%
Global Rank
#42

{/ Category Performance /} Category Performance Your average scores by category
{userData.categoryPerformance.map((category) => (

{category.category} {category.score}%

))}
{/ Recent Quizzes /}
Recent Quizzes

{userData.recentQuizzes.map((quiz) => (

{quiz.category}

{new Date(quiz.date).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", })}

{quiz.score}/{quiz.total}

{Math.round((quiz.score / quiz.total) 100)}%

))}
{/* Badges /} Achievements Badges you've earned through quizzing
{userData.badges.map((badge) => ( {badge} ))}

)} {activeTab === "history" && ( Quiz History All quizzes you've taken
{[...userData.recentQuizzes, ...userData.recentQuizzes].map((quiz, index) => (

{quiz.category}

{new Date(quiz.date).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", })}

{quiz.score}/{quiz.total}

{Math.round((quiz.score / quiz.total) 100)}%

))}
)} {activeTab === "achievements" && (
Earned Badges Achievements you've unlocked
{userData.badges.map((badge) => (

{badge}

Earned on Feb 28, 2023

))}
Available Badges Achievements to unlock
{["Geography Pro", "Music Maestro", "Entertainment Guru", "100 Quizzes"].map((badge) => (

{badge}

Not yet earned

))}

)}

BYTEBATTLE

© {new Date().getFullYear()} BYTEBATTLE. All rights reserved.

) } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/.{ts,tsx}", ".{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/login/page.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Brain } from "lucide-react" export default function LoginPage() { const router = useRouter() const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const handleLogin = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError("") // For demo purposes, we'll simulate a successful login // In a real app, you would make an API call to authenticate console.log("Login attempt with:", { email, password }) try { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) // For demo, we'll accept any email with a password longer than 5 chars if (password.length < 6) { throw new Error("Invalid credentials") } console.log("Login successful") router.push("/profile") } catch (err) { console.error("Login failed:", err) setError("Invalid email or password. Please try again.") } finally { setIsLoading(false) } } return (

BYTEBATTLE

Login Enter your credentials to access your account
{error &&
{error}
}
Email setEmail(e.target.value)} required />

Password Forgot password?
setPassword(e.target.value)} required />

Don't have an account?{" "} Sign up

Or continue with

BYTEBATTLE

© {new Date().getFullYear()} BYTEBATTLE. All rights reserved.

) } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isQuickEdit="true" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="app/quiz/new/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import Link from "next/link" import { useRouter, useSearchParams } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Brain, ArrowRight, Clock, BarChart3 } from "lucide-react" export default function NewQuizPage() { const router = useRouter() const searchParams = useSearchParams() const preselectedCategory = searchParams.get("category") const [selectedCategory, setSelectedCategory] = useState(preselectedCategory || "") const [selectedDifficulty, setSelectedDifficulty] = useState(preselectedCategory ? "medium" : "medium") const [selectedQuestionCount, setSelectedQuestionCount] = useState(10) const [selectedTimeLimit, setSelectedTimeLimit] = useState(60) const categories = [ { id: "javascript", name: "JavaScript", icon: "JS" }, { id: "python", name: "Python", icon: "PY" }, { id: "java", name: "Java", icon: "JV" }, { id: "csharp", name: "C#", icon: "C#" }, { id: "cpp", name: "C++", icon: "C++" }, { id: "ruby", name: "Ruby", icon: "RB" }, { id: "go", name: "Go", icon: "GO" }, { id: "typescript", name: "TypeScript", icon: "TS" }, ] const difficulties = [ { id: "easy", name: "Easy", description: "Basic language concepts and syntax" }, { id: "medium", name: "Medium", description: "Intermediate programming challenges" }, { id: "hard", name: "Hard", description: "Advanced concepts and problem-solving" }, { id: "adaptive", name: "Adaptive", description: "Adjusts difficulty based on your performance" }, ] const questionCounts = [5, 10, 15, 20] const timeLimits = [30, 60, 90, 120, 0] // 0 means no time limit const startQuiz = () => { if (!selectedCategory) { // Add validation feedback alert("Please select a programming language before starting the quiz") return } // Add console logging for debugging console.log("Starting quiz with:", { category: selectedCategory, difficulty: selectedDifficulty, count: selectedQuestionCount, time: selectedTimeLimit, }) router.push( `/quiz/play?category=${selectedCategory}&difficulty=${selectedDifficulty}&count=${selectedQuestionCount}&time=${selectedTimeLimit}`, ) } return (

BYTEBATTLE

Home Categories Leaderboard Profile

Create Your Quiz
Select Category Choose a category for your quiz questions
{categories.map((category) => ( ))}
Select Difficulty Choose how challenging you want your quiz to be
{difficulties.map((difficulty) => ( ))}

Number of Questions
{questionCounts.map((count) => ( ))}
Time Limit (seconds)
{timeLimits.map((time) => ( ))}

BYTEBATTLE

© {new Date().getFullYear()} BYTEBATTLE. All rights reserved.

) } [V0_FILE]typescript:file="lib/quiz-generator.ts" isFixed="true" isEdit="true" isQuickEdit="true" import type { Question } from "./types" // Mock data for demo purposes const mockQuestions: Record = { science: [ { question: "What is the chemical symbol for gold?", options: ["Au", "Ag", "Fe", "Cu"], correctAnswer: "Au", }, { question: "Which planet is known as the Red Planet?", options: ["Venus", "Mars", "Jupiter", "Saturn"], correctAnswer: "Mars", }, { question: "What is the hardest natural substance on Earth?", options: ["Gold", "Platinum", "Diamond", "Titanium"], correctAnswer: "Diamond", }, { question: "What is the largest organ in the human body?", options: ["Heart", "Liver", "Skin", "Brain"], correctAnswer: "Skin", }, { question: "Which of these is NOT a state of matter?", options: ["Solid", "Liquid", "Gas", "Energy"], correctAnswer: "Energy", }, ], technology: [ { question: "Who is the co-founder of Microsoft?", options: ["Steve Jobs", "Bill Gates", "Mark Zuckerberg", "Elon Musk"], correctAnswer: "Bill Gates", }, { question: "What does CPU stand for?", options: [ "Central Processing Unit", "Computer Personal Unit", "Central Processor Utility", "Central Program Unit", ], correctAnswer: "Central Processing Unit", }, { question: "Which programming language is known as the 'mother of all languages'?", options: ["Java", "C", "Python", "FORTRAN"], correctAnswer: "C", }, { question: "What year was the first iPhone released?", options: ["2005", "2007", "2009", "2010"], correctAnswer: "2007", }, { question: "Which company developed the first commercially available quantum computer?", options: ["IBM", "Google", "Microsoft", "D-Wave"], correctAnswer: "D-Wave", }, ], history: [ { question: "In which year did World War II end?", options: ["1943", "1945", "1947", "1950"], correctAnswer: "1945", }, { question: "Who was the first President of the United States?", options: ["Thomas Jefferson", "John Adams", "George Washington", "Benjamin Franklin"], correctAnswer: "George Washington", }, { question: "The ancient city of Rome was built on how many hills?", options: ["Five", "Six", "Seven", "Eight"], correctAnswer: "Seven", }, { question: "Which empire was ruled by Genghis Khan?", options: ["Ottoman Empire", "Mongol Empire", "Roman Empire", "Byzantine Empire"], correctAnswer: "Mongol Empire", }, { question: "The Renaissance period began in which country?", options: ["France", "England", "Italy", "Germany"], correctAnswer: "Italy", }, ], general: [ { question: "Which of these is NOT a primary color?", options: ["Red", "Blue", "Green", "Yellow"], correctAnswer: "Green", }, { question: "What is the capital of Australia?", options: ["Sydney", "Melbourne", "Canberra", "Perth"], correctAnswer: "Canberra", }, { question: "How many sides does a hexagon have?", options: ["5", "6", "7", "8"], correctAnswer: "6", }, { question: "Which of these animals is NOT a mammal?", options: ["Dolphin", "Bat", "Whale", "Penguin"], correctAnswer: "Penguin", }, { question: "Who wrote 'Romeo and Juliet'?", options: ["Charles Dickens", "William Shakespeare", "Jane Austen", "Mark Twain"], correctAnswer: "William Shakespeare", }, ], javascript: [ { question: "What is the output of console.log(typeof NaN)?", options: ["'number'", "'NaN'", "'undefined'", "'object'"], correctAnswer: "'number'", }, { question: "Which method is used to add one or more elements to the end of an array?", options: ["push()", "pop()", "unshift()", "shift()"], correctAnswer: "push()", }, { question: "What does the '===' operator do in JavaScript?", options: [ "Checks for equality", "Checks for equality without type coercion", "Assigns a value", "Checks if a variable is defined", ], correctAnswer: "Checks for equality without type coercion", }, { question: "What is a closure in JavaScript?", options: [ "A way to secure your code", "A function with access to variables in its outer scope", "A method to close a browser window", "A type of loop", ], correctAnswer: "A function with access to variables in its outer scope", }, { question: "Which of these is NOT a valid way to declare a variable in JavaScript?", options: ["let x = 5;", "const y = 10;", "var z = 15;", "int w = 20;"], correctAnswer: "int w = 20;", }, ], python: [ { question: "What is the correct way to create a function in Python?", options: ["function myFunc():", "def myFunc():", "create myFunc():", "func myFunc():"], correctAnswer: "def myFunc():", }, { question: "Which of the following is used to define a block of code in Python?", options: ["Curly braces {}", "Parentheses ()", "Indentation", "Square brackets []"], correctAnswer: "Indentation", }, { question: "What does the 'len()' function do in Python?", options: ["Returns the length of an object", "Rounds a number", "Creates a list", "Defines a new variable"], correctAnswer: "Returns the length of an object", }, { question: "Which of these is NOT a core data type in Python?", options: ["Lists", "Dictionary", "Tuples", "Array"], correctAnswer: "Array", }, { question: "What is the output of 'print(3 * '7')'?", options: ["21", "777", "14", "Error"], correctAnswer: "777", }, ], java: [ { question: "Which keyword is used to define a constant in Java?", options: ["const", "final", "static", "var"], correctAnswer: "final", }, { question: "What is the parent class of all classes in Java?", options: ["Main", "Object", "Super", "Parent"], correctAnswer: "Object", }, { question: "Which of these is NOT a valid access modifier in Java?", options: ["public", "private", "protected", "friend"], correctAnswer: "friend", }, { question: "What does JVM stand for?", options: ["Java Virtual Machine", "Java Variable Method", "Java Visual Monitor", "Java Valid Memory"], correctAnswer: "Java Virtual Machine", }, { question: "Which of these is used to handle exceptions in Java?", options: ["try-catch", "if-else", "for-loop", "switch-case"], correctAnswer: "try-catch", }, ], } // Function to generate questions using AI export async function generateQuestions(category: string, difficulty: string, count: number): Promise { // For demo purposes, return mock data // In a real implementation, we would use the AI SDK to generate questions try { // This is a placeholder for the AI-generated questions // In a real implementation, we would use the AI SDK to generate questions // For now, return mock data based on the category const availableQuestions = mockQuestions[category] || mockQuestions.javascript // Shuffle and return the requested number of questions return shuffleArray(availableQuestions).slice(0, count) // Example of how to use the AI SDK to generate questions: /* const prompt = `Generate ${count} multiple-choice quiz questions about ${category} programming language at ${difficulty} difficulty level. Each question should have 4 options with only one correct answer. Format the response as a JSON array of objects, each with 'question', 'options' (array of 4 strings), and 'correctAnswer' (string matching one of the options).`; const { text } = await generateText({ model: openai("gpt-4o"), prompt, }); return JSON.parse(text) as Question[]; / } catch (error) { console.error("Error generating questions:", error) // Fallback to mock data const availableQuestions = mockQuestions[category] || mockQuestions.javascript return shuffleArray(availableQuestions).slice(0, count) } } // Helper function to shuffle an array function shuffleArray(array: T[]): T[] { 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 } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Brain, Zap, Trophy, BarChart3 } from "lucide-react" export default function Home() { return (

BYTEBATTLE

Home Languages Leaderboard Profile

{/* Hero Section /}

Master Programming with AI-Powered Quizzes

BYTEBATTLE generates fresh, challenging questions across various programming languages, adapting to your skill level for a personalized learning experience.

{/ Features Section /}

Powerful Features

BYTEBATTLE combines cutting-edge AI with engaging gameplay to create a unique coding quiz experience

AI-Generated Questions

Our AI creates fresh, original coding questions that adapt to your skill level and learning pace

Personalized Learning

Track your coding progress and receive personalized recommendations based on your performance

Competitive Leaderboards

Compete with fellow coders and climb the global and language-specific leaderboards

{/ CTA Section */}

Ready to Level Up Your Coding Skills?

Start your first coding quiz now and discover the power of AI-generated learning

BYTEBATTLE

About Privacy Terms Contact

© {new Date().getFullYear()} BYTEBATTLE. All rights reserved.

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This