[V0_FILE]typescriptreact:file="components/site-footer.tsx" isMerged="true" import Link from "next/link" import { BookOpen } from "lucide-react" export function SiteFooter() { return ( ) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ThemeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="app/blog/page.tsx" isMerged="true" import Image from "next/image" import { ExternalLink, Calendar } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" export default function BlogPage() { return (

Teaching Blog

Read my latest thoughts and teaching strategies on Substack

) } interface BlogPostCardProps { title: string date: string excerpt: string imageUrl: string postUrl: string } function BlogPostCard({ title, date, excerpt, imageUrl, postUrl }: BlogPostCardProps) { return (

{date}

{title} {excerpt}

) } [V0_FILE]typescriptreact:file="components/interactive-quiz.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" interface Question { id: number text: string options: string[] correctAnswer: number } interface QuizProps { title: string description: string questions: Question[] } export function InteractiveQuiz({ title, description, questions }: QuizProps) { const [currentQuestion, setCurrentQuestion] = useState(0) const [selectedOption, setSelectedOption] = useState(null) const [score, setScore] = useState(0) const [showResults, setShowResults] = useState(false) const [answered, setAnswered] = useState(false) const handleOptionSelect = (index: number) => { setSelectedOption(index) } const handleSubmit = () => { if (selectedOption === null) return if (!answered) { // Check if answer is correct if (selectedOption === questions[currentQuestion].correctAnswer) { setScore(score + 1) } setAnswered(true) } else { // Move to next question or show results setAnswered(false) setSelectedOption(null) if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1) } else { setShowResults(true) } } } const resetQuiz = () => { setCurrentQuestion(0) setSelectedOption(null) setScore(0) setShowResults(false) setAnswered(false) } return ( {title} {description} {!showResults ? (

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

{questions[currentQuestion].text}

{questions[currentQuestion].options.map((option, index) => (

!answered && handleOptionSelect(index)} disabled={answered} /> {option}

))} {answered && (

{selectedOption === questions[currentQuestion].correctAnswer ? "Correct! Well done." : "Incorrect. The correct answer is highlighted."}

)}

) : (

Quiz Complete!

Your score: {score} out of {questions.length}

{score === questions.length ? "Perfect score! Excellent work!" : score > questions.length / 2 ? "Good job! Keep learning." : "Keep studying and try again!"}

)} {!showResults ? ( ) : ( )} ) } [V0_FILE]typescriptreact:file="app/games/interactive-quiz/page.tsx" isMerged="true" import { InteractiveQuiz } from "@/components/interactive-quiz" export default function QuizPage() { // Your custom quiz data const constitutionQuiz = { title: "U.S. Constitution Quiz", description: "Test your knowledge about the U.S. Constitution", questions: [ { id: 1, text: "In what year was the U.S. Constitution signed?", options: ["1776", "1787", "1789", "1791"], correctAnswer: 1, }, { id: 2, text: "How many articles are in the original U.S. Constitution?", options: ["5", "7", "10", "12"], correctAnswer: 1, }, { id: 3, text: "Which branch of government has the power to declare war?", options: ["Executive", "Legislative", "Judicial", "State"], correctAnswer: 1, }, { id: 4, text: "What are the first ten amendments to the Constitution called?", options: ["The Preamble", "The Bill of Rights", "The Articles of Confederation", "The Federalist Papers"], correctAnswer: 1, }, { id: 5, text: "Which amendment abolished slavery?", options: ["13th Amendment", "14th Amendment", "15th Amendment", "16th Amendment"], correctAnswer: 0, }, ], } return (

Interactive Quizzes

Test your knowledge of American History with these interactive quizzes

) } [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]plaintext:file="public/images/political-figures.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" [V0_FILE]plaintext:file="public/images/eighties.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" [V0_FILE]plaintext:file="public/images/revolutionary-america.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" [V0_FILE]plaintext:file="public/images/native-american.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" [V0_FILE]plaintext:file="public/images/women-and-war.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" [V0_FILE]plaintext:file="public/images/compromises.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" [V0_FILE]plaintext:file="public/images/colonial-america.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" [V0_FILE]typescriptreact:file="components/historical-image.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" interface HistoricalImageProps { theme: | "political-figures" | "eighties" | "revolutionary-america" | "native-american" | "women-and-war" | "compromises" | "colonial-america" width: number height: number } export function HistoricalImage({ theme, width, height }: HistoricalImageProps) { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas dimensions canvas.width = width canvas.height = height // Draw themed background const drawBackground = () => { ctx.fillStyle = getBackgroundColor(theme) ctx.fillRect(0, 0, width, height) } // Draw themed elements const drawThemeElements = () => { switch (theme) { case "political-figures": drawPoliticalFigures(ctx, width, height) break case "eighties": drawEighties(ctx, width, height) break case "revolutionary-america": drawRevolutionaryAmerica(ctx, width, height) break case "native-american": drawNativeAmerican(ctx, width, height) break case "women-and-war": drawWomenAndWar(ctx, width, height) break case "compromises": drawCompromises(ctx, width, height) break case "colonial-america": drawColonialAmerica(ctx, width, height) break } } // Draw text overlay const drawTextOverlay = () => { ctx.fillStyle = "rgba(0, 0, 0, 0.5)" ctx.fillRect(0, height - 40, width, 40) ctx.fillStyle = "#ffffff" ctx.font = "bold 16px Arial" ctx.textAlign = "center" ctx.textBaseline = "middle" ctx.fillText(getThemeTitle(theme), width / 2, height - 20) } // Execute drawing drawBackground() drawThemeElements() drawTextOverlay() }, [theme, width, height]) return

Teaching Blog

{questions[currentQuestion].text}

Quiz Complete!

Interactive Quizzes

Modern America Connections

Independence Era Connections

Early American Peoples Connections

American Society Connections

American Challenges Connections

Settlement Era Connections

American Documents Connections

Historical Leaders Connections

Early Colonies Connections

Religious History Connections

Civil Rights Connections

Space Race Connections

WWII Home Front Connections

Presidential Assassinations Connections

Civil War Technology Connections

Feminism Connections

FactFinder: Spot the Truth

{currentPuzzle.title} Mini Crossword

Across

Down

Historical Mini Crosswords

How to Play

Educational Benefits

Teacher Admin