import React, { useState, useEffect } from 'react' import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { ExternalLink, ArrowLeft, ArrowRight } from 'lucide-react' const quizData = [ { question: "竹久夢二の本名は何か?", choices: ["竹久茂次郎", "竹久一郎", "竹久太郎", "竹久夢二"], correctAnswer: 0, explanation: "竹久夢二は芸名であり、本名は竹久茂次郎でした。", hint: "芸術家が本名とは異なる名前を使用することは珍しくありません。夢二という名前の由来について調べてみるのも面白いかもしれません。" }, { question: "竹久夢二が生まれた年は?", choices: ["1880年", "1884年", "1888年", "1892年"], correctAnswer: 1, explanation: "竹久夢二は1884年(明治17年)9月16日に生まれました。", hint: "明治時代の日本の芸術界について学ぶと、夢二の活動時期をよりよく理解できるでしょう。" }, // ... 他の48問をここに追加 ... ] const shuffleArray = (array) => { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } export default function TakehisaYumejiQuiz() { const [currentScreen, setCurrentScreen] = useState('intro') const [currentQuestion, setCurrentQuestion] = useState(0) const [score, setScore] = useState(0) const [selectedAnswer, setSelectedAnswer] = useState(null) const [shuffledQuestions, setShuffledQuestions] = useState([]) const [userAnswers, setUserAnswers] = useState([]) const [showExplanation, setShowExplanation] = useState(false) const [timeRemaining, setTimeRemaining] = useState(3600) useEffect(() => { setShuffledQuestions(shuffleArray([...quizData])) }, []) useEffect(() => { if (currentScreen === 'quiz' && timeRemaining > 0) { const timer = setInterval(() => { setTimeRemaining(prev => prev - 1) }, 1000) return () => clearInterval(timer) } }, [currentScreen, timeRemaining]) const handleStartQuiz = () => { setCurrentScreen('quiz') } const handleAnswerSelect = (index) => { setSelectedAnswer(index) setShowExplanation(true) const newUserAnswers = [...userAnswers] newUserAnswers[currentQuestion] = index setUserAnswers(newUserAnswers) if (index === shuffledQuestions[currentQuestion].correctAnswer) { setScore(score + 1) } } const handleNextQuestion = () => { if (currentQuestion < shuffledQuestions.length - 1) { setCurrentQuestion(currentQuestion + 1) setSelectedAnswer(null) setShowExplanation(false) } else { setCurrentScreen('result') } } const handlePreviousQuestion = () => { if (currentQuestion > 0) { setCurrentQuestion(currentQuestion - 1) setSelectedAnswer(userAnswers[currentQuestion - 1] || null) setShowExplanation(true) } } const handleRestartQuiz = () => { setCurrentScreen('intro') setCurrentQuestion(0) setScore(0) setSelectedAnswer(null) setUserAnswers([]) setShuffledQuestions(shuffleArray([...quizData])) setTimeRemaining(3600) } const handleOpenApplicationForm = () => { window.open('https://smoothcontact.jp/front/output/7f0000017ba043eb7896519665e2d24f', '_blank', 'noopener,noreferrer') } const formatTime = (seconds) => { const minutes = Math.floor(seconds / 60) const remainingSeconds = seconds % 60 return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}` } const renderIntroScreen = () => ( 竹久夢二検定 挑戦してみよう! 貴方も竹久夢二PR大使になれる。

ようこそ、竹久夢二検定へ!

このクイズは、竹久夢二の知識を試すためのものです。クイズは無料でどなたでも参加できます。

参加費をお支払いいただいた方には以下の特典があります:

  • 特典: 全問正解の方には、竹久夢二アンバサダーとして夢二プロジェクト実行委員会公認の認定証を申請いたします。
  • 参加賞: 全問正解の方もそうでない方も、もれなくPR大使の特性名刺を100枚進呈いたします。

特典、および、参加賞をご希望の方は: 2000円が必要です。

ルールは簡単です。ランダムに出題される50問の4択クイズに挑戦し、正解数を競います。各質問に対して正しい回答を選び、クイズを完了させてください。

竹久夢二の世界を楽しみながら、知識を深めてみませんか?皆さんの挑戦をお待ちしております!

) const renderQuizScreen = () => ( 問題 {currentQuestion + 1}
残り時間: {formatTime(timeRemaining)}

{shuffledQuestions[currentQuestion].question}

{shuffledQuestions[currentQuestion].choices.map((choice, index) => ( ))} {showExplanation && (

解説:

{shuffledQuestions[currentQuestion].explanation}

ヒント:

{shuffledQuestions[currentQuestion].hint}

)}
) const renderResultScreen = () => ( クイズ結果

あなたのスコア: {score} / {shuffledQuestions.length}

ありがとうございました!竹久夢二検定にご参加いただき、誠にありがとうございます。

PR大使名刺の進呈については、以下のリンクから応募フォームにアクセスしてください。

) return (
{currentScreen === 'intro' && renderIntroScreen()} {currentScreen === 'quiz' && renderQuizScreen()} {currentScreen === 'result' && renderResultScreen()}
) }