qizz + panel

frontend/app/quizzes/[quizId]/page.tsx

@@ -1,11 +1,332 @@
-import { QuizRunner } from "@/components/quiz-runner"
+'use client'
+import React, { useState, useEffect } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { Brain, Clock, CheckCircle, XCircle, Sparkles, AlertCircle } from 'lucide-react'
 
-interface QuizPageProps {
-  params: {
-    quizId: string
+interface Question {
+  id: string
+  question_number: number
+  question_text: string
+  options: string[]
+  correct_answer: string
+  points: number
+  ai_prediction?: any
+}
+
+interface Quiz {
+  id: string
+  title: string
+  description: string
+  questions: Question[]
+  generated_by?: string
+  total_points: number
+}
+
+export default function QuizTaking() {
+  const params = useParams()
+  const router = useRouter()
+  const quizId = params.quizId as string
+
+  const [quiz, setQuiz] = useState<Quiz | null>(null)
+  const [currentQuestion, setCurrentQuestion] = useState(0)
+  const [answers, setAnswers] = useState<Record<string, string>>({})
+  const [loading, setLoading] = useState(true)
+  const [submitting, setSubmitting] = useState(false)
+  const [results, setResults] = useState<any>(null)
+  const [showAIHint, setShowAIHint] = useState(false)
+  const [aiPrediction, setAIPrediction] = useState<any>(null)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    fetchQuiz()
+  }, [quizId])
+
+  const fetchQuiz = async () => {
+    try {
+      const response = await fetch(`http://127.0.0.1:5000/api/quizzes/${quizId}`)
+      const data = await response.json()
+
+      if (data.success) {
+        setQuiz(data.quiz)
+      } else {
+        setError(data.error || 'Quiz not found')
+      }
+    } catch (err) {
+      setError('Failed to load quiz')
+    } finally {
+      setLoading(false)
+    }
   }
-}
 
-export default function QuizPage({ params }: QuizPageProps) {
-  return <QuizRunner quizId={params.quizId} />
+  const getAIHint = async () => {
+    if (!quiz || !quiz.questions[currentQuestion]) return
+
+    try {
+      setShowAIHint(true)
+      const response = await fetch('http://127.0.0.1:5000/api/quizzes/ai-predict', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          question_text: quiz.questions[currentQuestion].question_text
+        })
+      })
+
+      const data = await response.json()
+      if (data.success) {
+        setAIPrediction(data.prediction)
+      }
+    } catch (err) {
+      console.error('Failed to get AI hint:', err)
+    }
+  }
+
+  const handleAnswerSelect = (questionId: string, answer: string) => {
+    setAnswers(prev => ({ ...prev, [questionId]: answer }))
+  }
+
+  const submitQuiz = async () => {
+    if (!quiz) return
+
+    const unanswered = quiz.questions.filter(q => !answers[q.id])
+    if (unanswered.length > 0) {
+      if (!confirm(`You have ${unanswered.length} unanswered questions. Submit anyway?`)) {
+        return
+      }
+    }
+
+    setSubmitting(true)
+    try {
+      const response = await fetch(`http://127.0.0.1:5000/api/quizzes/${quizId}/submit`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          answers,
+          participant_name: 'User' // You can get this from auth context
+        })
+      })
+
+      const data = await response.json()
+      if (data.success) {
+        setResults(data.results)
+      } else {
+        setError(data.error || 'Failed to submit quiz')
+      }
+    } catch (err) {
+      setError('Failed to submit quiz')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600 mx-auto mb-4"></div>
+          <p>Loading AI Quiz...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
+        <div className="text-center">
+          <AlertCircle className="h-12 w-12 text-red-400 mx-auto mb-4" />
+          <p className="text-xl mb-4">{error}</p>
+          <button
+            onClick={() => router.push('/quizzes')}
+            className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded"
+          >
+            Back to Quizzes
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  if (results) {
+    return (
+      <div className="min-h-screen bg-gray-900 text-white">
+        <div className="max-w-4xl mx-auto p-6">
+          <div className="text-center mb-8">
+            <div className="text-6xl mb-4">
+              {results.score >= 80 ? '🏆' : results.score >= 60 ? '🎉' : '📚'}
+            </div>
+            <h1 className="text-3xl font-bold mb-2">Quiz Complete!</h1>
+            <p className="text-xl text-gray-300">
+              You scored {results.score}% ({results.correct_answers}/{results.total_questions})
+            </p>
+          </div>
+
+          {/* AI Feedback */}
+          {results.ai_feedback && (
+            <div className="bg-gray-800 rounded-lg p-6 mb-6">
+              <h2 className="text-xl font-bold mb-4 flex items-center space-x-2">
+                <Brain className="h-5 w-5 text-purple-400" />
+                <span>🤖 AI Feedback</span>
+              </h2>
+              
+              <div className="space-y-4">
+                {results.ai_feedback.map((feedback: any, index: number) => (
+                  <div key={index} className="bg-gray-900 p-4 rounded border-l-4 border-purple-500">
+                    <h3 className="font-semibold mb-2">Question {index + 1}</h3>
+                    <p className="text-sm text-gray-300 mb-2">{feedback.question}</p>
+                    <div className="flex items-center space-x-2 mb-2">
+                      {feedback.is_correct ? (
+                        <CheckCircle className="h-4 w-4 text-green-400" />
+                      ) : (
+                        <XCircle className="h-4 w-4 text-red-400" />
+                      )}
+                      <span className="text-sm">
+                        Your answer: {feedback.user_answer}
+                      </span>
+                    </div>
+                    {feedback.ai_feedback && (
+                      <p className="text-sm text-purple-300 bg-purple-900 bg-opacity-30 p-2 rounded">
+                        🤖 {feedback.ai_feedback.feedback}
+                      </p>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <div className="text-center">
+            <button
+              onClick={() => router.push('/quizzes')}
+              className="bg-blue-600 hover:bg-blue-700 px-8 py-3 rounded-lg font-semibold"
+            >
+              Back to Quizzes
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (!quiz) return null
+
+  const question = quiz.questions[currentQuestion]
+  const progress = ((currentQuestion + 1) / quiz.questions.length) * 100
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-white">
+      <div className="max-w-4xl mx-auto p-6">
+        {/* Header */}
+        <div className="mb-6">
+          <div className="flex items-center justify-between mb-4">
+            <h1 className="text-2xl font-bold flex items-center space-x-2">
+              {quiz.generated_by === 'AI' && <Brain className="h-6 w-6 text-purple-400" />}
+              <span>{quiz.title}</span>
+            </h1>
+            <div className="text-sm text-gray-400">
+              Question {currentQuestion + 1} of {quiz.questions.length}
+            </div>
+          </div>
+          
+          {/* Progress Bar */}
+          <div className="w-full bg-gray-700 rounded-full h-2">
+            <div 
+              className="bg-purple-600 h-2 rounded-full transition-all duration-300"
+              style={{ width: `${progress}%` }}
+            ></div>
+          </div>
+        </div>
+
+        {/* Question */}
+        <div className="bg-gray-800 rounded-lg p-6 mb-6">
+          <div className="flex justify-between items-start mb-4">
+            <h2 className="text-xl font-semibold">
+              {question.question_text}
+            </h2>
+            {quiz.generated_by === 'AI' && (
+              <button
+                onClick={getAIHint}
+                className="bg-purple-600 hover:bg-purple-700 px-3 py-1 rounded text-sm flex items-center space-x-1"
+              >
+                <Sparkles className="h-4 w-4" />
+                <span>AI Hint</span>
+              </button>
+            )}
+          </div>
+
+          {/* AI Hint */}
+          {showAIHint && aiPrediction && (
+            <div className="bg-purple-900 bg-opacity-30 border border-purple-600 p-4 rounded mb-4">
+              <h3 className="font-semibold mb-2 flex items-center space-x-2">
+                <Brain className="h-4 w-4" />
+                <span>🤖 AI Suggestion</span>
+              </h3>
+              <p className="text-sm">
+                AI predicts: <strong>{aiPrediction.predicted_answer}</strong>
+              </p>
+              <p className="text-xs text-gray-400 mt-1">
+                Confidence: {(aiPrediction.confidence * 100).toFixed(1)}%
+              </p>
+            </div>
+          )}
+
+          {/* Options */}
+          <div className="space-y-3">
+            {question.options.map((option, index) => (
+              <button
+                key={index}
+                onClick={() => handleAnswerSelect(question.id, option)}
+                className={`w-full p-4 text-left rounded-lg border transition-colors ${
+                  answers[question.id] === option
+                    ? 'bg-purple-900 border-purple-500 text-purple-100'
+                    : 'bg-gray-700 border-gray-600 hover:bg-gray-600'
+                }`}
+              >
+                <div className="flex items-center space-x-3">
+                  <span className="w-6 h-6 rounded-full border-2 border-gray-400 flex items-center justify-center text-sm">
+                    {String.fromCharCode(65 + index)}
+                  </span>
+                  <span>{option}</span>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Navigation */}
+        <div className="flex justify-between items-center">
+          <button
+            onClick={() => setCurrentQuestion(prev => Math.max(0, prev - 1))}
+            disabled={currentQuestion === 0}
+            className="bg-gray-700 hover:bg-gray-600 disabled:bg-gray-800 px-6 py-2 rounded"
+          >
+            Previous
+          </button>
+
+          <div className="text-sm text-gray-400">
+            {Object.keys(answers).length} of {quiz.questions.length} answered
+          </div>
+
+          {currentQuestion === quiz.questions.length - 1 ? (
+            <button
+              onClick={submitQuiz}
+              disabled={submitting}
+              className="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-6 py-2 rounded flex items-center space-x-2"
+            >
+              {submitting ? (
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+              ) : null}
+              <span>{submitting ? 'Submitting...' : 'Submit Quiz'}</span>
+            </button>
+          ) : (
+            <button
+              onClick={() => setCurrentQuestion(prev => Math.min(quiz.questions.length - 1, prev + 1))}
+              className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded"
+            >
+              Next
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
 }