mirror of
https://github.com/th30d4y/OpenLearnX.git
synced 2026-05-26 11:25:49 +00:00
update
This commit is contained in:
5t4l1n
@@ -0,0 +1,610 @@
|
||||
'use client'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { Trophy, Clock, Users, Send, RefreshCw, Play, Code, Wallet, Shield } from 'lucide-react'
|
||||
|
||||
interface Participant {
|
||||
name: string
|
||||
score: number
|
||||
rank: number
|
||||
completed: boolean
|
||||
language?: string
|
||||
submission_time?: string
|
||||
wallet_address?: string
|
||||
wallet_short?: string
|
||||
blockchain_verified?: boolean
|
||||
}
|
||||
|
||||
interface Problem {
|
||||
title: string
|
||||
description: string
|
||||
function_name: string
|
||||
languages: string[]
|
||||
examples: Array<{input: string, expected_output: string, description: string}>
|
||||
constraints: string[]
|
||||
starter_code: {[key: string]: string}
|
||||
}
|
||||
|
||||
interface ExamSession {
|
||||
exam_code: string
|
||||
student_name: string
|
||||
wallet_address?: string
|
||||
blockchain_verified?: boolean
|
||||
exam_info: any
|
||||
}
|
||||
|
||||
export default function EnhancedExamInterface() {
|
||||
const [examSession, setExamSession] = useState<ExamSession | null>(null)
|
||||
const [problem, setProblem] = useState<Problem | null>(null)
|
||||
const [selectedLanguage, setSelectedLanguage] = useState('python')
|
||||
const [code, setCode] = useState('')
|
||||
const [output, setOutput] = useState('')
|
||||
const [testResults, setTestResults] = useState<any[]>([])
|
||||
const [leaderboard, setLeaderboard] = useState<Participant[]>([])
|
||||
const [waitingParticipants, setWaitingParticipants] = useState<Participant[]>([])
|
||||
const [timeRemaining, setTimeRemaining] = useState(0)
|
||||
const [isRunning, setIsRunning] = useState(false)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [hasSubmitted, setHasSubmitted] = useState(false)
|
||||
const [examStats, setExamStats] = useState<any>({})
|
||||
// ✅ ADD TIMER INITIALIZED STATE
|
||||
const [timerInitialized, setTimerInitialized] = useState(false)
|
||||
const router = useRouter()
|
||||
|
||||
const languageIcons: {[key: string]: string} = {
|
||||
python: '🐍',
|
||||
java: '☕',
|
||||
c: '⚡',
|
||||
bash: '💻'
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const sessionData = localStorage.getItem('exam_session')
|
||||
if (!sessionData) {
|
||||
router.push('/coding/join')
|
||||
return
|
||||
}
|
||||
|
||||
const session = JSON.parse(sessionData)
|
||||
setExamSession(session)
|
||||
|
||||
// Fetch problem details
|
||||
fetchProblem(session.exam_code)
|
||||
|
||||
// Start polling for updates
|
||||
const interval = setInterval(() => {
|
||||
fetchLeaderboard(session.exam_code)
|
||||
}, 3000)
|
||||
|
||||
return () => clearInterval(interval)
|
||||
}, [router])
|
||||
|
||||
// ✅ FIXED TIMER COUNTDOWN
|
||||
useEffect(() => {
|
||||
if (!timerInitialized || timeRemaining <= 0) return
|
||||
|
||||
const timer = setInterval(() => {
|
||||
setTimeRemaining(prev => {
|
||||
const newTime = Math.max(0, prev - 1)
|
||||
if (newTime === 0) {
|
||||
alert('⏰ Time is up! Exam has ended.')
|
||||
}
|
||||
return newTime
|
||||
})
|
||||
}, 1000)
|
||||
|
||||
return () => clearInterval(timer)
|
||||
}, [timerInitialized, timeRemaining])
|
||||
|
||||
const fetchProblem = async (examCode: string) => {
|
||||
try {
|
||||
const response = await fetch(`http://127.0.0.1:5000/api/exam/get-problem/${examCode}`)
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success) {
|
||||
setProblem(data.problem)
|
||||
const defaultLang = data.problem.languages[0] || 'python'
|
||||
setSelectedLanguage(defaultLang)
|
||||
setCode(data.problem.starter_code[defaultLang] || '')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch problem:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ FIXED TIMER CALCULATION IN FETCHLEADERBOARD
|
||||
const fetchLeaderboard = async (examCode: string) => {
|
||||
try {
|
||||
const response = await fetch(`http://127.0.0.1:5000/api/exam/leaderboard/${examCode}`)
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success) {
|
||||
setLeaderboard(data.leaderboard || [])
|
||||
setWaitingParticipants(data.waiting_participants || [])
|
||||
setExamStats(data.stats || {})
|
||||
|
||||
// ✅ FIXED TIMER CALCULATION
|
||||
if (data.exam_info && data.exam_info.status === 'active') {
|
||||
if (data.exam_info.end_time) {
|
||||
const now = Date.now()
|
||||
const endTime = new Date(data.exam_info.end_time).getTime()
|
||||
const remaining = Math.max(0, Math.floor((endTime - now) / 1000))
|
||||
|
||||
console.log(`⏰ Timer calculation:`)
|
||||
console.log(` Current: ${new Date(now).toISOString()}`)
|
||||
console.log(` End: ${new Date(endTime).toISOString()}`)
|
||||
console.log(` Remaining: ${remaining} seconds`)
|
||||
|
||||
setTimeRemaining(remaining)
|
||||
if (!timerInitialized) {
|
||||
setTimerInitialized(true)
|
||||
}
|
||||
} else if (data.exam_info.start_time && data.exam_info.duration_minutes) {
|
||||
// Calculate from start_time + duration
|
||||
const startTime = new Date(data.exam_info.start_time).getTime()
|
||||
const durationMs = data.exam_info.duration_minutes * 60 * 1000
|
||||
const endTime = startTime + durationMs
|
||||
const now = Date.now()
|
||||
const remaining = Math.max(0, Math.floor((endTime - now) / 1000))
|
||||
|
||||
console.log(`⏰ Using start_time + duration - Remaining: ${remaining}s`)
|
||||
setTimeRemaining(remaining)
|
||||
if (!timerInitialized) {
|
||||
setTimerInitialized(true)
|
||||
}
|
||||
}
|
||||
} else if (data.exam_info && data.exam_info.status === 'waiting') {
|
||||
// Show full duration for waiting exams
|
||||
const fullSeconds = (data.exam_info.duration_minutes || 30) * 60
|
||||
setTimeRemaining(fullSeconds)
|
||||
if (!timerInitialized) {
|
||||
setTimerInitialized(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch leaderboard:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleLanguageChange = (language: string) => {
|
||||
setSelectedLanguage(language)
|
||||
if (problem?.starter_code[language]) {
|
||||
setCode(problem.starter_code[language])
|
||||
}
|
||||
setOutput('')
|
||||
setTestResults([])
|
||||
}
|
||||
|
||||
const runCode = async () => {
|
||||
if (!code.trim()) {
|
||||
alert('Please write some code first!')
|
||||
return
|
||||
}
|
||||
|
||||
setIsRunning(true)
|
||||
setOutput('')
|
||||
setTestResults([])
|
||||
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/execute-code', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
code,
|
||||
language: selectedLanguage
|
||||
})
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (result.success) {
|
||||
setOutput('Code executed successfully!')
|
||||
setTestResults(result.test_results || [])
|
||||
} else {
|
||||
setOutput(`Error: ${result.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
setOutput(`Execution failed: ${(error as Error).message}`)
|
||||
} finally {
|
||||
setIsRunning(false)
|
||||
}
|
||||
}
|
||||
|
||||
const submitSolution = async () => {
|
||||
if (!code.trim()) {
|
||||
alert('Please write some code before submitting!')
|
||||
return
|
||||
}
|
||||
|
||||
setIsSubmitting(true)
|
||||
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/submit-solution', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
code,
|
||||
language: selectedLanguage
|
||||
})
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success) {
|
||||
setHasSubmitted(true)
|
||||
setTestResults(data.test_results || [])
|
||||
|
||||
let alertMessage = `Solution submitted successfully!\nScore: ${data.score}%\nPassed: ${data.passed_tests}/${data.total_tests} tests`
|
||||
|
||||
if (data.blockchain_verified) {
|
||||
alertMessage += `\n🔗 Blockchain Verified: ${data.wallet_address?.slice(0, 6)}...${data.wallet_address?.slice(-4)}`
|
||||
}
|
||||
|
||||
alert(alertMessage)
|
||||
fetchLeaderboard(examSession!.exam_code)
|
||||
} else {
|
||||
alert(data.error || 'Failed to submit solution')
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Failed to submit solution. Please try again.')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ FIXED TIME FORMATTING
|
||||
const formatTime = (seconds: number) => {
|
||||
if (seconds < 0) return "00:00"
|
||||
|
||||
const mins = Math.floor(seconds / 60)
|
||||
const secs = seconds % 60
|
||||
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
const getRankColor = (rank: number) => {
|
||||
switch (rank) {
|
||||
case 1: return 'bg-gradient-to-r from-yellow-400 to-yellow-600 text-white'
|
||||
case 2: return 'bg-gradient-to-r from-gray-300 to-gray-500 text-white'
|
||||
case 3: return 'bg-gradient-to-r from-orange-400 to-orange-600 text-white'
|
||||
default: return 'bg-gray-100 text-gray-700'
|
||||
}
|
||||
}
|
||||
|
||||
if (!examSession || !problem) {
|
||||
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-blue-600 mx-auto"></div>
|
||||
<p className="mt-2 text-gray-400">Loading exam interface...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-white">
|
||||
{/* Header with Timer */}
|
||||
<div className="bg-gray-800 border-b border-gray-700 p-4">
|
||||
<div className="max-w-7xl mx-auto flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-xl font-bold">{problem.title}</h1>
|
||||
<p className="text-gray-400">Code: {examSession.exam_code}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
{/* ✅ FIXED TIMER DISPLAY */}
|
||||
{timeRemaining > 0 && (
|
||||
<div className={`flex items-center space-x-2 px-3 py-1 rounded-lg ${
|
||||
timeRemaining <= 300 ? 'bg-red-900' : timeRemaining <= 600 ? 'bg-yellow-900' : 'bg-green-900'
|
||||
}`}>
|
||||
<Clock className={`h-5 w-5 ${
|
||||
timeRemaining <= 300 ? 'text-red-400' : timeRemaining <= 600 ? 'text-yellow-400' : 'text-green-400'
|
||||
}`} />
|
||||
<span className={`font-mono text-lg ${
|
||||
timeRemaining <= 300 ? 'text-red-400' : timeRemaining <= 600 ? 'text-yellow-400' : 'text-green-400'
|
||||
}`}>
|
||||
{formatTime(timeRemaining)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Wallet Info Display */}
|
||||
{examSession.blockchain_verified && examSession.wallet_address && (
|
||||
<div className="flex items-center space-x-2 bg-green-900 px-3 py-1 rounded-lg">
|
||||
<Wallet className="h-4 w-4 text-green-400" />
|
||||
<span className="text-green-200 text-sm font-mono">
|
||||
{examSession.wallet_address.slice(0, 6)}...{examSession.wallet_address.slice(-4)}
|
||||
</span>
|
||||
<Shield className="h-4 w-4 text-green-400" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Participant Count */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<Users className="h-5 w-5 text-blue-400" />
|
||||
<span>{examStats.total_participants || 0} participants</span>
|
||||
{examStats.blockchain_participants > 0 && (
|
||||
<span className="text-green-400 text-sm">
|
||||
({examStats.blockchain_participants} 🔗)
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto p-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Problem & Code Editor */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Problem Description */}
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-bold">{problem.title}</h2>
|
||||
{examSession.blockchain_verified && (
|
||||
<div className="flex items-center space-x-1 text-green-400 text-sm">
|
||||
<Shield className="h-4 w-4" />
|
||||
<span>Blockchain Verified</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="prose prose-invert">
|
||||
<p className="mb-4 text-gray-300">{problem.description}</p>
|
||||
|
||||
<h4 className="text-lg font-semibold mb-2">Examples:</h4>
|
||||
{problem.examples.map((example, index) => (
|
||||
<div key={index} className="bg-gray-900 p-4 rounded mb-3">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="text-blue-400">Input:</span>
|
||||
<code className="ml-2 text-green-400">"{example.input}"</code>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-blue-400">Output:</span>
|
||||
<code className="ml-2 text-green-400">"{example.expected_output}"</code>
|
||||
</div>
|
||||
</div>
|
||||
{example.description && (
|
||||
<div className="mt-2 text-gray-400 text-sm">{example.description}</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<h4 className="text-lg font-semibold mb-2">Constraints:</h4>
|
||||
<ul className="list-disc list-inside mb-4 text-gray-300">
|
||||
{problem.constraints.map((constraint, index) => (
|
||||
<li key={index}>{constraint}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Code Editor */}
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-lg font-bold">Your Solution</h3>
|
||||
|
||||
{/* Language Selector */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<Code className="h-4 w-4 text-gray-400" />
|
||||
<select
|
||||
value={selectedLanguage}
|
||||
onChange={(e) => handleLanguageChange(e.target.value)}
|
||||
disabled={hasSubmitted}
|
||||
className="bg-gray-700 text-white px-3 py-1 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
{problem.languages.map(lang => (
|
||||
<option key={lang} value={lang}>
|
||||
{languageIcons[lang]} {lang.charAt(0).toUpperCase() + lang.slice(1)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
className="w-full h-64 bg-gray-900 text-green-400 font-mono p-4 rounded border border-gray-600 resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
disabled={hasSubmitted}
|
||||
spellCheck={false}
|
||||
placeholder={`Write your ${selectedLanguage} solution here...`}
|
||||
/>
|
||||
|
||||
<div className="flex justify-between items-center mt-4">
|
||||
<div className="text-sm text-gray-400">
|
||||
Function: <code className="text-blue-400">{problem.function_name}</code>
|
||||
{hasSubmitted && (
|
||||
<span className="ml-4 text-green-400">
|
||||
✅ Solution submitted
|
||||
{examSession.blockchain_verified && (
|
||||
<span className="ml-2">🔗 Blockchain verified</span>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-3">
|
||||
<button
|
||||
onClick={runCode}
|
||||
disabled={isRunning || hasSubmitted || !code.trim()}
|
||||
className="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded flex items-center space-x-2 transition-colors"
|
||||
>
|
||||
<Play className="h-4 w-4" />
|
||||
<span>{isRunning ? 'Running...' : 'Test Code'}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={submitSolution}
|
||||
disabled={isSubmitting || hasSubmitted || !code.trim()}
|
||||
className="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-4 py-2 rounded flex items-center space-x-2 transition-colors"
|
||||
>
|
||||
<Send className="h-4 w-4" />
|
||||
<span>{isSubmitting ? 'Submitting...' : hasSubmitted ? 'Submitted' : 'Submit Solution'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Output & Test Results */}
|
||||
{(output || testResults.length > 0) && (
|
||||
<div className="mt-6 bg-gray-900 p-4 rounded">
|
||||
{output && (
|
||||
<div className="mb-4">
|
||||
<h4 className="text-sm font-medium text-gray-400 mb-2">Output:</h4>
|
||||
<pre className="text-green-400 text-sm whitespace-pre-wrap">{output}</pre>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{testResults.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-gray-400 mb-2">Test Results:</h4>
|
||||
<div className="space-y-2">
|
||||
{testResults.map((result, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`p-3 rounded text-sm ${
|
||||
result.passed ? 'bg-green-900 text-green-200' : 'bg-red-900 text-red-200'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<span className="font-medium">
|
||||
Test {index + 1}: {result.passed ? '✅ Passed' : '❌ Failed'}
|
||||
</span>
|
||||
{result.input && (
|
||||
<div className="text-xs mt-1 opacity-75">
|
||||
Input: "{result.input}"
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{!result.passed && result.error && (
|
||||
<span className="text-xs text-right">{result.error}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Leaderboard */}
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Trophy className="h-6 w-6 text-yellow-400" />
|
||||
<h3 className="text-xl font-bold">Live Leaderboard</h3>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => fetchLeaderboard(examSession.exam_code)}
|
||||
className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded"
|
||||
title="Refresh"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<div className="text-2xl font-bold text-blue-400">{examStats.completed_submissions || 0}</div>
|
||||
<div className="text-xs text-gray-400">Submitted</div>
|
||||
</div>
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<div className="text-2xl font-bold text-green-400">{Math.round(examStats.average_score || 0)}%</div>
|
||||
<div className="text-xs text-gray-400">Avg Score</div>
|
||||
</div>
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<div className="text-2xl font-bold text-purple-400">{examStats.highest_score || 0}%</div>
|
||||
<div className="text-xs text-gray-400">Top Score</div>
|
||||
</div>
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<div className="text-2xl font-bold text-orange-400">{examStats.waiting_submissions || 0}</div>
|
||||
<div className="text-xs text-gray-400">Working</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Blockchain Stats */}
|
||||
{examStats.blockchain_participants > 0 && (
|
||||
<div className="bg-green-900 p-3 rounded mb-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-lg font-bold text-green-200">{examStats.blockchain_participants}</div>
|
||||
<div className="text-xs text-green-300">Blockchain Verified</div>
|
||||
</div>
|
||||
<Shield className="h-6 w-6 text-green-400" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Leaderboard */}
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-semibold text-gray-300 mb-3">🏆 Rankings</h4>
|
||||
{leaderboard.length > 0 ? (
|
||||
leaderboard.map((participant) => (
|
||||
<div key={participant.name} className={`p-3 rounded-lg ${getRankColor(participant.rank)}`}>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="font-bold text-lg">#{participant.rank}</span>
|
||||
<div>
|
||||
<div className={`font-medium ${participant.name === examSession.student_name ? 'underline' : ''}`}>
|
||||
{participant.name}
|
||||
{participant.name === examSession.student_name && ' (You)'}
|
||||
{participant.blockchain_verified && (
|
||||
<Shield className="inline h-3 w-3 ml-1 text-green-400" />
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs opacity-75 flex items-center space-x-2">
|
||||
{participant.language && (
|
||||
<span>
|
||||
{languageIcons[participant.language]} {participant.language}
|
||||
</span>
|
||||
)}
|
||||
{participant.wallet_short && (
|
||||
<span className="font-mono text-green-300">
|
||||
{participant.wallet_short}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="font-bold text-lg">{participant.score}%</span>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center text-gray-400 py-4">
|
||||
No submissions yet
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Waiting Participants */}
|
||||
{waitingParticipants.length > 0 && (
|
||||
<div className="mt-6">
|
||||
<h4 className="font-semibold text-gray-300 mb-3">⏳ Still Working</h4>
|
||||
<div className="space-y-1">
|
||||
{waitingParticipants.map((participant) => (
|
||||
<div key={participant.name} className="p-2 bg-gray-700 rounded text-sm flex items-center justify-between">
|
||||
<span>
|
||||
{participant.name}
|
||||
{participant.name === examSession.student_name && ' (You)'}
|
||||
</span>
|
||||
{participant.blockchain_verified && (
|
||||
<Shield className="h-3 w-3 text-green-400" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,445 @@
|
||||
'use client'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useRouter, useParams } from 'next/navigation'
|
||||
import {
|
||||
Shield,
|
||||
Monitor,
|
||||
Copy,
|
||||
AlertTriangle,
|
||||
CheckCircle,
|
||||
ArrowRight,
|
||||
Eye,
|
||||
Lock,
|
||||
Maximize
|
||||
} from 'lucide-react'
|
||||
|
||||
export default function SecurityCheckPage() {
|
||||
const router = useRouter()
|
||||
const params = useParams()
|
||||
const examCode = params.examCode as string
|
||||
|
||||
const [securityChecks, setSecurityChecks] = useState({
|
||||
fullScreen: false,
|
||||
noVirtualBox: false,
|
||||
copyPasteBlocked: false,
|
||||
focusDetection: false
|
||||
})
|
||||
|
||||
const [isFullScreen, setIsFullScreen] = useState(false)
|
||||
const [securityPassed, setSecurityPassed] = useState(false)
|
||||
const [agreementAccepted, setAgreementAccepted] = useState(false)
|
||||
const [focusLostCount, setFocusLostCount] = useState(0)
|
||||
const [warningMessage, setWarningMessage] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
// Check for virtual machine detection
|
||||
detectVirtualMachine()
|
||||
|
||||
// Block copy/paste
|
||||
blockCopyPaste()
|
||||
|
||||
// Setup fullscreen detection
|
||||
setupFullScreenDetection()
|
||||
|
||||
// Setup focus detection
|
||||
setupFocusDetection()
|
||||
|
||||
// Block right-click
|
||||
blockRightClick()
|
||||
|
||||
// Block developer tools
|
||||
blockDevTools()
|
||||
|
||||
return () => {
|
||||
// Cleanup event listeners
|
||||
document.removeEventListener('contextmenu', handleRightClick)
|
||||
document.removeEventListener('keydown', handleKeyDown)
|
||||
window.removeEventListener('blur', handleWindowBlur)
|
||||
window.removeEventListener('focus', handleWindowFocus)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// ✅ VIRTUAL MACHINE DETECTION
|
||||
const detectVirtualMachine = () => {
|
||||
try {
|
||||
const canvas = document.createElement('canvas')
|
||||
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl')
|
||||
|
||||
if (gl) {
|
||||
const debugInfo = gl.getExtension('WEBGL_debug_renderer_info')
|
||||
if (debugInfo) {
|
||||
const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL).toLowerCase()
|
||||
const vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL).toLowerCase()
|
||||
|
||||
const vmIndicators = [
|
||||
'virtualbox', 'vmware', 'parallels', 'qemu',
|
||||
'virtual', 'vm', 'hyper-v', 'kvm'
|
||||
]
|
||||
|
||||
const isVM = vmIndicators.some(indicator =>
|
||||
renderer.includes(indicator) || vendor.includes(indicator)
|
||||
)
|
||||
|
||||
if (isVM) {
|
||||
setWarningMessage('❌ Virtual machines are not allowed for this exam')
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Additional VM detection checks
|
||||
if (
|
||||
navigator.hardwareConcurrency < 2 ||
|
||||
screen.width < 1024 ||
|
||||
screen.height < 768 ||
|
||||
navigator.deviceMemory && navigator.deviceMemory < 2
|
||||
) {
|
||||
setWarningMessage('⚠️ Your system may not meet the minimum requirements')
|
||||
}
|
||||
|
||||
setSecurityChecks(prev => ({ ...prev, noVirtualBox: true }))
|
||||
} catch (error) {
|
||||
console.error('VM detection failed:', error)
|
||||
setSecurityChecks(prev => ({ ...prev, noVirtualBox: true }))
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ BLOCK COPY/PASTE
|
||||
const blockCopyPaste = () => {
|
||||
const preventCopyPaste = (e: Event) => {
|
||||
e.preventDefault()
|
||||
setWarningMessage('⚠️ Copy/Paste is disabled during the exam')
|
||||
setTimeout(() => setWarningMessage(''), 3000)
|
||||
}
|
||||
|
||||
document.addEventListener('copy', preventCopyPaste)
|
||||
document.addEventListener('paste', preventCopyPaste)
|
||||
document.addEventListener('cut', preventCopyPaste)
|
||||
document.addEventListener('drag', preventCopyPaste)
|
||||
document.addEventListener('drop', preventCopyPaste)
|
||||
document.addEventListener('selectstart', preventCopyPaste)
|
||||
|
||||
// Disable text selection
|
||||
document.body.style.userSelect = 'none'
|
||||
document.body.style.webkitUserSelect = 'none'
|
||||
|
||||
setSecurityChecks(prev => ({ ...prev, copyPasteBlocked: true }))
|
||||
}
|
||||
|
||||
// ✅ FULLSCREEN DETECTION
|
||||
const setupFullScreenDetection = () => {
|
||||
const checkFullScreen = () => {
|
||||
const isFS = !!(
|
||||
document.fullscreenElement ||
|
||||
(document as any).webkitFullscreenElement ||
|
||||
(document as any).mozFullScreenElement ||
|
||||
(document as any).msFullscreenElement
|
||||
)
|
||||
|
||||
setIsFullScreen(isFS)
|
||||
setSecurityChecks(prev => ({ ...prev, fullScreen: isFS }))
|
||||
|
||||
if (!isFS && securityPassed) {
|
||||
setWarningMessage('⚠️ You must stay in fullscreen mode during the exam')
|
||||
setTimeout(() => {
|
||||
router.push('/coding')
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('fullscreenchange', checkFullScreen)
|
||||
document.addEventListener('webkitfullscreenchange', checkFullScreen)
|
||||
document.addEventListener('mozfullscreenchange', checkFullScreen)
|
||||
document.addEventListener('MSFullscreenChange', checkFullScreen)
|
||||
}
|
||||
|
||||
// ✅ FOCUS DETECTION
|
||||
const setupFocusDetection = () => {
|
||||
let focusLost = false
|
||||
|
||||
const handleWindowBlur = () => {
|
||||
if (securityPassed) {
|
||||
focusLost = true
|
||||
setFocusLostCount(prev => prev + 1)
|
||||
setWarningMessage('⚠️ You switched tabs/windows. This is being monitored.')
|
||||
|
||||
if (focusLostCount >= 2) {
|
||||
alert('Multiple focus violations detected. Exam will be terminated.')
|
||||
router.push('/coding')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleWindowFocus = () => {
|
||||
if (focusLost) {
|
||||
focusLost = false
|
||||
setTimeout(() => setWarningMessage(''), 3000)
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('blur', handleWindowBlur)
|
||||
window.addEventListener('focus', handleWindowFocus)
|
||||
|
||||
setSecurityChecks(prev => ({ ...prev, focusDetection: true }))
|
||||
}
|
||||
|
||||
// ✅ BLOCK RIGHT-CLICK
|
||||
const blockRightClick = () => {
|
||||
const handleRightClick = (e: MouseEvent) => {
|
||||
e.preventDefault()
|
||||
setWarningMessage('⚠️ Right-click is disabled during the exam')
|
||||
setTimeout(() => setWarningMessage(''), 2000)
|
||||
}
|
||||
|
||||
document.addEventListener('contextmenu', handleRightClick)
|
||||
}
|
||||
|
||||
// ✅ BLOCK DEVELOPER TOOLS
|
||||
const blockDevTools = () => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
// Block F12, Ctrl+Shift+I, Ctrl+Shift+C, Ctrl+U
|
||||
if (
|
||||
e.key === 'F12' ||
|
||||
(e.ctrlKey && e.shiftKey && (e.key === 'I' || e.key === 'C')) ||
|
||||
(e.ctrlKey && e.key === 'U') ||
|
||||
(e.ctrlKey && e.shiftKey && e.key === 'J')
|
||||
) {
|
||||
e.preventDefault()
|
||||
setWarningMessage('⚠️ Developer tools are not allowed during the exam')
|
||||
setTimeout(() => setWarningMessage(''), 3000)
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown)
|
||||
|
||||
// Detect if dev tools are open
|
||||
let devtools = { open: false, orientation: null }
|
||||
const threshold = 160
|
||||
|
||||
setInterval(() => {
|
||||
if (
|
||||
window.outerHeight - window.innerHeight > threshold ||
|
||||
window.outerWidth - window.innerWidth > threshold
|
||||
) {
|
||||
if (!devtools.open) {
|
||||
devtools.open = true
|
||||
setWarningMessage('⚠️ Developer tools detected. Please close them.')
|
||||
}
|
||||
} else {
|
||||
devtools.open = false
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
|
||||
// ✅ ENTER FULLSCREEN
|
||||
const enterFullScreen = async () => {
|
||||
try {
|
||||
const element = document.documentElement
|
||||
|
||||
if (element.requestFullscreen) {
|
||||
await element.requestFullscreen()
|
||||
} else if ((element as any).webkitRequestFullscreen) {
|
||||
await (element as any).webkitRequestFullscreen()
|
||||
} else if ((element as any).mozRequestFullScreen) {
|
||||
await (element as any).mozRequestFullScreen()
|
||||
} else if ((element as any).msRequestFullscreen) {
|
||||
await (element as any).msRequestFullscreen()
|
||||
}
|
||||
} catch (error) {
|
||||
setWarningMessage('❌ Failed to enter fullscreen. Please try again.')
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ CHECK ALL SECURITY MEASURES
|
||||
useEffect(() => {
|
||||
const allChecksPassed = Object.values(securityChecks).every(check => check === true)
|
||||
setSecurityPassed(allChecksPassed && agreementAccepted)
|
||||
}, [securityChecks, agreementAccepted])
|
||||
|
||||
// ✅ PROCEED TO EXAM
|
||||
const proceedToExam = () => {
|
||||
if (securityPassed && isFullScreen) {
|
||||
// Store security session
|
||||
sessionStorage.setItem('exam_security_passed', 'true')
|
||||
sessionStorage.setItem('exam_start_time', new Date().toISOString())
|
||||
|
||||
router.push(`/coding/exam/${examCode}`)
|
||||
} else {
|
||||
setWarningMessage('❌ Please complete all security requirements')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-white">
|
||||
{/* Header */}
|
||||
<div className="bg-gray-800 border-b border-gray-700 p-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-2xl font-bold flex items-center space-x-2">
|
||||
<Shield className="h-6 w-6 text-red-400" />
|
||||
<span>Exam Security Check</span>
|
||||
</h1>
|
||||
<p className="text-gray-400">Exam Code: {examCode}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Warning Message */}
|
||||
{warningMessage && (
|
||||
<div className="bg-red-900 border-b border-red-600 p-3 text-center">
|
||||
<p className="text-red-300">{warningMessage}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="max-w-4xl mx-auto p-8">
|
||||
{/* Security Requirements */}
|
||||
<div className="bg-gray-800 rounded-lg p-6 mb-8">
|
||||
<h2 className="text-xl font-bold mb-6">Security Requirements</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Fullscreen Check */}
|
||||
<div className="flex items-center justify-between p-4 bg-gray-700 rounded-lg">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Maximize className="h-5 w-5 text-blue-400" />
|
||||
<div>
|
||||
<h3 className="font-medium">Fullscreen Mode</h3>
|
||||
<p className="text-sm text-gray-400">Required for exam security</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
{securityChecks.fullScreen ? (
|
||||
<CheckCircle className="h-5 w-5 text-green-400" />
|
||||
) : (
|
||||
<button
|
||||
onClick={enterFullScreen}
|
||||
className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm"
|
||||
>
|
||||
Enter Fullscreen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* VM Detection */}
|
||||
<div className="flex items-center justify-between p-4 bg-gray-700 rounded-lg">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Monitor className="h-5 w-5 text-purple-400" />
|
||||
<div>
|
||||
<h3 className="font-medium">System Verification</h3>
|
||||
<p className="text-sm text-gray-400">Checking for virtual machines</p>
|
||||
</div>
|
||||
</div>
|
||||
{securityChecks.noVirtualBox ? (
|
||||
<CheckCircle className="h-5 w-5 text-green-400" />
|
||||
) : (
|
||||
<AlertTriangle className="h-5 w-5 text-yellow-400" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Copy/Paste Block */}
|
||||
<div className="flex items-center justify-between p-4 bg-gray-700 rounded-lg">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Copy className="h-5 w-5 text-red-400" />
|
||||
<div>
|
||||
<h3 className="font-medium">Copy/Paste Protection</h3>
|
||||
<p className="text-sm text-gray-400">Disabled for exam integrity</p>
|
||||
</div>
|
||||
</div>
|
||||
{securityChecks.copyPasteBlocked ? (
|
||||
<CheckCircle className="h-5 w-5 text-green-400" />
|
||||
) : (
|
||||
<AlertTriangle className="h-5 w-5 text-yellow-400" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Focus Detection */}
|
||||
<div className="flex items-center justify-between p-4 bg-gray-700 rounded-lg">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Eye className="h-5 w-5 text-green-400" />
|
||||
<div>
|
||||
<h3 className="font-medium">Focus Monitoring</h3>
|
||||
<p className="text-sm text-gray-400">Tab switching will be tracked</p>
|
||||
</div>
|
||||
</div>
|
||||
{securityChecks.focusDetection ? (
|
||||
<CheckCircle className="h-5 w-5 text-green-400" />
|
||||
) : (
|
||||
<AlertTriangle className="h-5 w-5 text-yellow-400" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Agreement */}
|
||||
<div className="bg-gray-800 rounded-lg p-6 mb-8">
|
||||
<h2 className="text-xl font-bold mb-4">Exam Agreement</h2>
|
||||
|
||||
<div className="bg-gray-900 p-4 rounded mb-4 max-h-40 overflow-y-auto">
|
||||
<div className="text-sm text-gray-300 space-y-2">
|
||||
<p>By proceeding with this exam, I agree to:</p>
|
||||
<ul className="list-disc list-inside space-y-1 ml-4">
|
||||
<li>Stay in fullscreen mode throughout the exam</li>
|
||||
<li>Not switch tabs, windows, or applications</li>
|
||||
<li>Not use copy/paste or external resources</li>
|
||||
<li>Not use virtual machines or emulators</li>
|
||||
<li>Not open developer tools or inspect elements</li>
|
||||
<li>Accept monitoring of my focus and activity</li>
|
||||
<li>Understand that violations may result in exam termination</li>
|
||||
</ul>
|
||||
<p className="text-yellow-400 font-medium mt-4">
|
||||
Violations: {focusLostCount}/2 (3rd violation = automatic termination)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label className="flex items-center space-x-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={agreementAccepted}
|
||||
onChange={(e) => setAgreementAccepted(e.target.checked)}
|
||||
className="rounded"
|
||||
/>
|
||||
<span>I have read and agree to all terms above</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex space-x-4">
|
||||
<button
|
||||
onClick={proceedToExam}
|
||||
disabled={!securityPassed || !isFullScreen}
|
||||
className="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed px-8 py-3 rounded-lg flex items-center space-x-2 font-medium"
|
||||
>
|
||||
<Lock className="h-5 w-5" />
|
||||
<span>Start Secure Exam</span>
|
||||
<ArrowRight className="h-5 w-5" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => router.push('/coding')}
|
||||
className="bg-gray-600 hover:bg-gray-700 px-8 py-3 rounded-lg"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Status */}
|
||||
<div className="mt-6 p-4 bg-gray-800 rounded-lg">
|
||||
<div className="flex items-center space-x-2">
|
||||
{securityPassed ? (
|
||||
<>
|
||||
<CheckCircle className="h-5 w-5 text-green-400" />
|
||||
<span className="text-green-400 font-medium">All security checks passed</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<AlertTriangle className="h-5 w-5 text-yellow-400" />
|
||||
<span className="text-yellow-400 font-medium">
|
||||
Complete all requirements to proceed
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,545 +1,110 @@
|
||||
'use client'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { Trophy, Clock, Users, Send, RefreshCw, Play, Code, Wallet, Shield } from 'lucide-react'
|
||||
import { Code, Users, Clock, ArrowRight } from 'lucide-react'
|
||||
|
||||
interface Participant {
|
||||
name: string
|
||||
score: number
|
||||
rank: number
|
||||
completed: boolean
|
||||
language?: string
|
||||
submission_time?: string
|
||||
wallet_address?: string
|
||||
wallet_short?: string
|
||||
blockchain_verified?: boolean
|
||||
}
|
||||
|
||||
interface Problem {
|
||||
title: string
|
||||
description: string
|
||||
function_name: string
|
||||
languages: string[]
|
||||
examples: Array<{input: string, expected_output: string, description: string}>
|
||||
constraints: string[]
|
||||
starter_code: {[key: string]: string}
|
||||
}
|
||||
|
||||
interface ExamSession {
|
||||
exam_code: string
|
||||
student_name: string
|
||||
wallet_address?: string
|
||||
blockchain_verified?: boolean
|
||||
exam_info: any
|
||||
}
|
||||
|
||||
export default function EnhancedExamInterface() {
|
||||
const [examSession, setExamSession] = useState<ExamSession | null>(null)
|
||||
const [problem, setProblem] = useState<Problem | null>(null)
|
||||
const [selectedLanguage, setSelectedLanguage] = useState('python')
|
||||
const [code, setCode] = useState('')
|
||||
const [output, setOutput] = useState('')
|
||||
const [testResults, setTestResults] = useState<any[]>([])
|
||||
const [leaderboard, setLeaderboard] = useState<Participant[]>([])
|
||||
const [waitingParticipants, setWaitingParticipants] = useState<Participant[]>([])
|
||||
const [timeRemaining, setTimeRemaining] = useState(0)
|
||||
const [isRunning, setIsRunning] = useState(false)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [hasSubmitted, setHasSubmitted] = useState(false)
|
||||
const [examStats, setExamStats] = useState<any>({})
|
||||
export default function ExamLandingPage() {
|
||||
const router = useRouter()
|
||||
const [examCode, setExamCode] = useState('')
|
||||
|
||||
const languageIcons: {[key: string]: string} = {
|
||||
python: '🐍',
|
||||
java: '☕',
|
||||
c: '⚡',
|
||||
bash: '💻'
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const sessionData = localStorage.getItem('exam_session')
|
||||
if (!sessionData) {
|
||||
router.push('/coding/join')
|
||||
return
|
||||
}
|
||||
|
||||
const session = JSON.parse(sessionData)
|
||||
setExamSession(session)
|
||||
|
||||
// Fetch problem details
|
||||
fetchProblem(session.exam_code)
|
||||
|
||||
// Start polling for updates
|
||||
const interval = setInterval(() => {
|
||||
fetchLeaderboard(session.exam_code)
|
||||
}, 3000)
|
||||
|
||||
return () => clearInterval(interval)
|
||||
}, [router])
|
||||
|
||||
const fetchProblem = async (examCode: string) => {
|
||||
try {
|
||||
const response = await fetch(`http://127.0.0.1:5000/api/exam/get-problem/${examCode}`)
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success) {
|
||||
setProblem(data.problem)
|
||||
const defaultLang = data.problem.languages[0] || 'python'
|
||||
setSelectedLanguage(defaultLang)
|
||||
setCode(data.problem.starter_code[defaultLang] || '')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch problem:', error)
|
||||
const joinExam = () => {
|
||||
if (examCode.trim()) {
|
||||
router.push(`/coding/exam/${examCode.trim().toUpperCase()}`)
|
||||
} else {
|
||||
alert('Please enter a valid exam code')
|
||||
}
|
||||
}
|
||||
|
||||
const fetchLeaderboard = async (examCode: string) => {
|
||||
try {
|
||||
const response = await fetch(`http://127.0.0.1:5000/api/exam/leaderboard/${examCode}`)
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success) {
|
||||
setLeaderboard(data.leaderboard || [])
|
||||
setWaitingParticipants(data.waiting_participants || [])
|
||||
setExamStats(data.stats || {})
|
||||
|
||||
if (data.exam_info.status === 'active' && data.exam_info.end_time) {
|
||||
const endTime = new Date(data.exam_info.end_time)
|
||||
const now = new Date()
|
||||
const remaining = Math.max(0, Math.floor((endTime.getTime() - now.getTime()) / 1000))
|
||||
setTimeRemaining(remaining)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch leaderboard:', error)
|
||||
const handleKeyPress = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
joinExam()
|
||||
}
|
||||
}
|
||||
|
||||
const handleLanguageChange = (language: string) => {
|
||||
setSelectedLanguage(language)
|
||||
if (problem?.starter_code[language]) {
|
||||
setCode(problem.starter_code[language])
|
||||
}
|
||||
setOutput('')
|
||||
setTestResults([])
|
||||
}
|
||||
|
||||
const runCode = async () => {
|
||||
if (!code.trim()) {
|
||||
alert('Please write some code first!')
|
||||
return
|
||||
}
|
||||
|
||||
setIsRunning(true)
|
||||
setOutput('')
|
||||
setTestResults([])
|
||||
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/execute-code', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
code,
|
||||
language: selectedLanguage
|
||||
})
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (result.success) {
|
||||
setOutput('Code executed successfully!')
|
||||
setTestResults(result.test_results || [])
|
||||
} else {
|
||||
setOutput(`Error: ${result.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
setOutput(`Execution failed: ${(error as Error).message}`)
|
||||
} finally {
|
||||
setIsRunning(false)
|
||||
}
|
||||
}
|
||||
|
||||
const submitSolution = async () => {
|
||||
if (!code.trim()) {
|
||||
alert('Please write some code before submitting!')
|
||||
return
|
||||
}
|
||||
|
||||
setIsSubmitting(true)
|
||||
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/submit-solution', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
code,
|
||||
language: selectedLanguage
|
||||
})
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success) {
|
||||
setHasSubmitted(true)
|
||||
setTestResults(data.test_results || [])
|
||||
|
||||
let alertMessage = `Solution submitted successfully!\nScore: ${data.score}%\nPassed: ${data.passed_tests}/${data.total_tests} tests`
|
||||
|
||||
if (data.blockchain_verified) {
|
||||
alertMessage += `\n🔗 Blockchain Verified: ${data.wallet_address?.slice(0, 6)}...${data.wallet_address?.slice(-4)}`
|
||||
}
|
||||
|
||||
alert(alertMessage)
|
||||
fetchLeaderboard(examSession!.exam_code)
|
||||
} else {
|
||||
alert(data.error || 'Failed to submit solution')
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Failed to submit solution. Please try again.')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const formatTime = (seconds: number) => {
|
||||
const mins = Math.floor(seconds / 60)
|
||||
const secs = seconds % 60
|
||||
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
const getRankColor = (rank: number) => {
|
||||
switch (rank) {
|
||||
case 1: return 'bg-gradient-to-r from-yellow-400 to-yellow-600 text-white'
|
||||
case 2: return 'bg-gradient-to-r from-gray-300 to-gray-500 text-white'
|
||||
case 3: return 'bg-gradient-to-r from-orange-400 to-orange-600 text-white'
|
||||
default: return 'bg-gray-100 text-gray-700'
|
||||
}
|
||||
}
|
||||
|
||||
if (!examSession || !problem) {
|
||||
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-blue-600 mx-auto"></div>
|
||||
<p className="mt-2 text-gray-400">Loading exam interface...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-white">
|
||||
{/* Header with Timer */}
|
||||
{/* Header */}
|
||||
<div className="bg-gray-800 border-b border-gray-700 p-4">
|
||||
<div className="max-w-7xl mx-auto flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-xl font-bold">{problem.title}</h1>
|
||||
<p className="text-gray-400">Code: {examSession.exam_code}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
{/* Timer */}
|
||||
{timeRemaining > 0 && (
|
||||
<div className="flex items-center space-x-2 bg-red-900 px-3 py-1 rounded-lg">
|
||||
<Clock className="h-5 w-5 text-red-400" />
|
||||
<span className="font-mono text-lg text-red-400">{formatTime(timeRemaining)}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Wallet Info Display */}
|
||||
{examSession.blockchain_verified && examSession.wallet_address && (
|
||||
<div className="flex items-center space-x-2 bg-green-900 px-3 py-1 rounded-lg">
|
||||
<Wallet className="h-4 w-4 text-green-400" />
|
||||
<span className="text-green-200 text-sm font-mono">
|
||||
{examSession.wallet_address.slice(0, 6)}...{examSession.wallet_address.slice(-4)}
|
||||
</span>
|
||||
<Shield className="h-4 w-4 text-green-400" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Participant Count */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<Users className="h-5 w-5 text-blue-400" />
|
||||
<span>{examStats.total_participants || 0} participants</span>
|
||||
{examStats.blockchain_participants > 0 && (
|
||||
<span className="text-green-400 text-sm">
|
||||
({examStats.blockchain_participants} 🔗)
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<h1 className="text-2xl font-bold">OpenLearnX Coding Exams</h1>
|
||||
<p className="text-gray-400">Join a coding exam with your exam code</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto p-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Problem & Code Editor */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Problem Description */}
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-bold">{problem.title}</h2>
|
||||
{examSession.blockchain_verified && (
|
||||
<div className="flex items-center space-x-1 text-green-400 text-sm">
|
||||
<Shield className="h-4 w-4" />
|
||||
<span>Blockchain Verified</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="prose prose-invert">
|
||||
<p className="mb-4 text-gray-300">{problem.description}</p>
|
||||
|
||||
<h4 className="text-lg font-semibold mb-2">Examples:</h4>
|
||||
{problem.examples.map((example, index) => (
|
||||
<div key={index} className="bg-gray-900 p-4 rounded mb-3">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="text-blue-400">Input:</span>
|
||||
<code className="ml-2 text-green-400">"{example.input}"</code>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-blue-400">Output:</span>
|
||||
<code className="ml-2 text-green-400">"{example.expected_output}"</code>
|
||||
</div>
|
||||
</div>
|
||||
{example.description && (
|
||||
<div className="mt-2 text-gray-400 text-sm">{example.description}</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<h4 className="text-lg font-semibold mb-2">Constraints:</h4>
|
||||
<ul className="list-disc list-inside mb-4 text-gray-300">
|
||||
{problem.constraints.map((constraint, index) => (
|
||||
<li key={index}>{constraint}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{/* Main Content */}
|
||||
<div className="max-w-4xl mx-auto p-8">
|
||||
{/* Join Exam Section */}
|
||||
<div className="bg-gray-800 rounded-lg p-8 mb-8">
|
||||
<div className="text-center mb-8">
|
||||
<Code className="h-16 w-16 text-blue-400 mx-auto mb-4" />
|
||||
<h2 className="text-3xl font-bold mb-2">Join Coding Exam</h2>
|
||||
<p className="text-gray-400">Enter your 6-character exam code to start</p>
|
||||
</div>
|
||||
|
||||
{/* Code Editor */}
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-lg font-bold">Your Solution</h3>
|
||||
|
||||
{/* Language Selector */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<Code className="h-4 w-4 text-gray-400" />
|
||||
<select
|
||||
value={selectedLanguage}
|
||||
onChange={(e) => handleLanguageChange(e.target.value)}
|
||||
disabled={hasSubmitted}
|
||||
className="bg-gray-700 text-white px-3 py-1 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
{problem.languages.map(lang => (
|
||||
<option key={lang} value={lang}>
|
||||
{languageIcons[lang]} {lang.charAt(0).toUpperCase() + lang.slice(1)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="max-w-md mx-auto">
|
||||
<div className="flex space-x-4">
|
||||
<input
|
||||
type="text"
|
||||
value={examCode}
|
||||
onChange={(e) => setExamCode(e.target.value.toUpperCase())}
|
||||
onKeyPress={handleKeyPress}
|
||||
placeholder="Enter exam code (e.g. ABC123)"
|
||||
className="flex-1 p-4 bg-gray-700 border border-gray-600 rounded-lg text-center text-xl font-mono tracking-widest"
|
||||
maxLength={6}
|
||||
/>
|
||||
<button
|
||||
onClick={joinExam}
|
||||
className="bg-blue-600 hover:bg-blue-700 px-6 py-4 rounded-lg flex items-center space-x-2"
|
||||
>
|
||||
<span>Join</span>
|
||||
<ArrowRight className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
className="w-full h-64 bg-gray-900 text-green-400 font-mono p-4 rounded border border-gray-600 resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
disabled={hasSubmitted}
|
||||
spellCheck={false}
|
||||
placeholder={`Write your ${selectedLanguage} solution here...`}
|
||||
/>
|
||||
|
||||
<div className="flex justify-between items-center mt-4">
|
||||
<div className="text-sm text-gray-400">
|
||||
Function: <code className="text-blue-400">{problem.function_name}</code>
|
||||
{hasSubmitted && (
|
||||
<span className="ml-4 text-green-400">
|
||||
✅ Solution submitted
|
||||
{examSession.blockchain_verified && (
|
||||
<span className="ml-2">🔗 Blockchain verified</span>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-3">
|
||||
<button
|
||||
onClick={runCode}
|
||||
disabled={isRunning || hasSubmitted || !code.trim()}
|
||||
className="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded flex items-center space-x-2 transition-colors"
|
||||
>
|
||||
<Play className="h-4 w-4" />
|
||||
<span>{isRunning ? 'Running...' : 'Test Code'}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={submitSolution}
|
||||
disabled={isSubmitting || hasSubmitted || !code.trim()}
|
||||
className="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-4 py-2 rounded flex items-center space-x-2 transition-colors"
|
||||
>
|
||||
<Send className="h-4 w-4" />
|
||||
<span>{isSubmitting ? 'Submitting...' : hasSubmitted ? 'Submitted' : 'Submit Solution'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Output & Test Results */}
|
||||
{(output || testResults.length > 0) && (
|
||||
<div className="mt-6 bg-gray-900 p-4 rounded">
|
||||
{output && (
|
||||
<div className="mb-4">
|
||||
<h4 className="text-sm font-medium text-gray-400 mb-2">Output:</h4>
|
||||
<pre className="text-green-400 text-sm whitespace-pre-wrap">{output}</pre>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{testResults.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-gray-400 mb-2">Test Results:</h4>
|
||||
<div className="space-y-2">
|
||||
{testResults.map((result, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`p-3 rounded text-sm ${
|
||||
result.passed ? 'bg-green-900 text-green-200' : 'bg-red-900 text-red-200'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<span className="font-medium">
|
||||
Test {index + 1}: {result.passed ? '✅ Passed' : '❌ Failed'}
|
||||
</span>
|
||||
{result.input && (
|
||||
<div className="text-xs mt-1 opacity-75">
|
||||
Input: "{result.input}"
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{!result.passed && result.error && (
|
||||
<span className="text-xs text-right">{result.error}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Leaderboard */}
|
||||
{/* Info Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="bg-gray-800 rounded-lg p-6 text-center">
|
||||
<Users className="h-12 w-12 text-green-400 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold mb-2">Multi-User</h3>
|
||||
<p className="text-gray-400">Compete with other students in real-time coding challenges</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 rounded-lg p-6 text-center">
|
||||
<Clock className="h-12 w-12 text-yellow-400 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold mb-2">Timed Exams</h3>
|
||||
<p className="text-gray-400">Complete coding problems within the allocated time limit</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 rounded-lg p-6 text-center">
|
||||
<Code className="h-12 w-12 text-purple-400 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold mb-2">Multi-Language</h3>
|
||||
<p className="text-gray-400">Code in Python, Java, JavaScript, C++, and more</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Instructions */}
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Trophy className="h-6 w-6 text-yellow-400" />
|
||||
<h3 className="text-xl font-bold">Live Leaderboard</h3>
|
||||
<h3 className="text-xl font-bold mb-4">How to Join an Exam</h3>
|
||||
<div className="space-y-3 text-gray-300">
|
||||
<div className="flex items-start space-x-3">
|
||||
<span className="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">1</span>
|
||||
<p>Get your 6-character exam code from your instructor</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => fetchLeaderboard(examSession.exam_code)}
|
||||
className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded"
|
||||
title="Refresh"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<div className="text-2xl font-bold text-blue-400">{examStats.completed_submissions || 0}</div>
|
||||
<div className="text-xs text-gray-400">Submitted</div>
|
||||
<div className="flex items-start space-x-3">
|
||||
<span className="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">2</span>
|
||||
<p>Enter the exam code in the field above and click "Join"</p>
|
||||
</div>
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<div className="text-2xl font-bold text-green-400">{Math.round(examStats.average_score || 0)}%</div>
|
||||
<div className="text-xs text-gray-400">Avg Score</div>
|
||||
<div className="flex items-start space-x-3">
|
||||
<span className="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">3</span>
|
||||
<p>Wait for the instructor to start the exam</p>
|
||||
</div>
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<div className="text-2xl font-bold text-purple-400">{examStats.highest_score || 0}%</div>
|
||||
<div className="text-xs text-gray-400">Top Score</div>
|
||||
</div>
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<div className="text-2xl font-bold text-orange-400">{examStats.waiting_submissions || 0}</div>
|
||||
<div className="text-xs text-gray-400">Working</div>
|
||||
<div className="flex items-start space-x-3">
|
||||
<span className="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold">4</span>
|
||||
<p>Code your solution and submit before time runs out</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Blockchain Stats */}
|
||||
{examStats.blockchain_participants > 0 && (
|
||||
<div className="bg-green-900 p-3 rounded mb-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-lg font-bold text-green-200">{examStats.blockchain_participants}</div>
|
||||
<div className="text-xs text-green-300">Blockchain Verified</div>
|
||||
</div>
|
||||
<Shield className="h-6 w-6 text-green-400" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Leaderboard */}
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-semibold text-gray-300 mb-3">🏆 Rankings</h4>
|
||||
{leaderboard.length > 0 ? (
|
||||
leaderboard.map((participant) => (
|
||||
<div key={participant.name} className={`p-3 rounded-lg ${getRankColor(participant.rank)}`}>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="font-bold text-lg">#{participant.rank}</span>
|
||||
<div>
|
||||
<div className={`font-medium ${participant.name === examSession.student_name ? 'underline' : ''}`}>
|
||||
{participant.name}
|
||||
{participant.name === examSession.student_name && ' (You)'}
|
||||
{participant.blockchain_verified && (
|
||||
<Shield className="inline h-3 w-3 ml-1 text-green-400" />
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs opacity-75 flex items-center space-x-2">
|
||||
{participant.language && (
|
||||
<span>
|
||||
{languageIcons[participant.language]} {participant.language}
|
||||
</span>
|
||||
)}
|
||||
{participant.wallet_short && (
|
||||
<span className="font-mono text-green-300">
|
||||
{participant.wallet_short}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="font-bold text-lg">{participant.score}%</span>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center text-gray-400 py-4">
|
||||
No submissions yet
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Waiting Participants */}
|
||||
{waitingParticipants.length > 0 && (
|
||||
<div className="mt-6">
|
||||
<h4 className="font-semibold text-gray-300 mb-3">⏳ Still Working</h4>
|
||||
<div className="space-y-1">
|
||||
{waitingParticipants.map((participant) => (
|
||||
<div key={participant.name} className="p-2 bg-gray-700 rounded text-sm flex items-center justify-between">
|
||||
<span>
|
||||
{participant.name}
|
||||
{participant.name === examSession.student_name && ' (You)'}
|
||||
</span>
|
||||
{participant.blockchain_verified && (
|
||||
<Shield className="h-3 w-3 text-green-400" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,21 +6,44 @@ import {
|
||||
Trophy,
|
||||
Clock,
|
||||
Play,
|
||||
Pause,
|
||||
Square,
|
||||
UserMinus,
|
||||
RefreshCw,
|
||||
Settings,
|
||||
Monitor,
|
||||
AlertCircle
|
||||
Upload,
|
||||
Plus,
|
||||
Code,
|
||||
TestTube,
|
||||
AlertCircle,
|
||||
Check,
|
||||
Timer
|
||||
} from 'lucide-react'
|
||||
|
||||
interface Participant {
|
||||
name: string
|
||||
score: number
|
||||
completed: boolean
|
||||
submitted_at?: string
|
||||
joined_at: string
|
||||
interface Question {
|
||||
id: string
|
||||
title: string
|
||||
description: string
|
||||
difficulty: 'easy' | 'medium' | 'hard'
|
||||
function_name: string
|
||||
starter_code: Record<string, string>
|
||||
test_cases: TestCase[]
|
||||
examples: Example[]
|
||||
constraints: string[]
|
||||
time_limit?: number
|
||||
memory_limit?: string
|
||||
}
|
||||
|
||||
interface TestCase {
|
||||
input: string
|
||||
expected_output: string
|
||||
description: string
|
||||
is_public: boolean
|
||||
}
|
||||
|
||||
interface Example {
|
||||
input: string
|
||||
expected_output: string
|
||||
description: string
|
||||
}
|
||||
|
||||
interface ExamInfo {
|
||||
@@ -30,11 +53,20 @@ interface ExamInfo {
|
||||
participants_count: number
|
||||
max_participants: number
|
||||
problem_title: string
|
||||
problem_description?: string
|
||||
languages: string[]
|
||||
created_at: string
|
||||
host_name: string
|
||||
}
|
||||
|
||||
interface Participant {
|
||||
name: string
|
||||
score: number
|
||||
completed: boolean
|
||||
joined_at: string
|
||||
submitted_at?: string
|
||||
}
|
||||
|
||||
export default function HostPanel() {
|
||||
const params = useParams()
|
||||
const router = useRouter()
|
||||
@@ -42,42 +74,61 @@ export default function HostPanel() {
|
||||
|
||||
const [examInfo, setExamInfo] = useState<ExamInfo | null>(null)
|
||||
const [participants, setParticipants] = useState<Participant[]>([])
|
||||
const [leaderboard, setLeaderboard] = useState<Participant[]>([])
|
||||
const [timeRemaining, setTimeRemaining] = useState(0)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
// ✅ NEW STATE - Tab management and question upload
|
||||
const [activeTab, setActiveTab] = useState<'overview'|'participants'|'questions'>('overview')
|
||||
const [showUploader, setShowUploader] = useState(false)
|
||||
const [customDuration, setCustomDuration] = useState(30)
|
||||
const [showDurationEdit, setShowDurationEdit] = useState(false)
|
||||
|
||||
// ✅ Empty "question draft"
|
||||
const blankQuestion: Question = {
|
||||
id: '',
|
||||
title: '',
|
||||
description: '',
|
||||
difficulty: 'medium',
|
||||
function_name: 'solve',
|
||||
starter_code: {
|
||||
python: 'def solve():\n # Write your solution here\n pass',
|
||||
java: 'public class Solution {\n public void solve() {\n // Write your solution here\n }\n}',
|
||||
javascript: 'function solve() {\n // Write your solution here\n}'
|
||||
},
|
||||
test_cases: [{ input:'', expected_output:'', description:'Test case 1', is_public:true }],
|
||||
examples: [{ input:'', expected_output:'', description:'Example 1' }],
|
||||
constraints: [''],
|
||||
time_limit: 1000,
|
||||
memory_limit: '128MB'
|
||||
}
|
||||
const [draft, setDraft] = useState<Question>(blankQuestion)
|
||||
|
||||
useEffect(() => {
|
||||
if (examCode) {
|
||||
fetchExamInfo()
|
||||
fetchParticipants()
|
||||
fetchLeaderboard()
|
||||
|
||||
// Auto-refresh every 5 seconds
|
||||
const interval = setInterval(() => {
|
||||
fetchParticipants()
|
||||
fetchLeaderboard()
|
||||
}, 5000)
|
||||
|
||||
return () => clearInterval(interval)
|
||||
}
|
||||
}, [examCode])
|
||||
|
||||
const fetchExamInfo = async () => {
|
||||
try {
|
||||
console.log(`🔍 Fetching exam info for: ${examCode}`)
|
||||
|
||||
const response = await fetch(`http://127.0.0.1:5000/api/exam/info/${examCode}`)
|
||||
const data = await response.json()
|
||||
|
||||
console.log('📦 Exam info response:', data)
|
||||
|
||||
if (data.success) {
|
||||
setExamInfo(data.exam_info)
|
||||
if (data.exam_info.status === 'active') {
|
||||
startTimer(data.exam_info.duration_minutes * 60)
|
||||
}
|
||||
setCustomDuration(data.exam_info.duration_minutes)
|
||||
setError('')
|
||||
} else {
|
||||
setError('Failed to load exam information')
|
||||
setError(data.error || 'Failed to load exam information')
|
||||
}
|
||||
} catch (error) {
|
||||
setError('Network error')
|
||||
console.error('❌ Error fetching exam info:', error)
|
||||
setError('Network error: Could not connect to backend')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
@@ -96,19 +147,92 @@ export default function HostPanel() {
|
||||
}
|
||||
}
|
||||
|
||||
const fetchLeaderboard = async () => {
|
||||
// ✅ UPLOAD HANDLER
|
||||
const uploadQuestion = async () => {
|
||||
if (!draft.title.trim() || !draft.description.trim()) {
|
||||
alert('Title & description are required')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`http://127.0.0.1:5000/api/exam/leaderboard/${examCode}`)
|
||||
const data = await response.json()
|
||||
|
||||
const res = await fetch('http://127.0.0.1:5000/api/exam/upload-question', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type':'application/json' },
|
||||
body: JSON.stringify({ exam_code: examCode, question: draft })
|
||||
})
|
||||
const data = await res.json()
|
||||
|
||||
if (data.success) {
|
||||
setLeaderboard(data.leaderboard)
|
||||
alert('✅ Question saved')
|
||||
setShowUploader(false)
|
||||
setDraft(blankQuestion)
|
||||
fetchExamInfo() // refresh current question/name
|
||||
} else {
|
||||
alert(`❌ ${data.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch leaderboard')
|
||||
console.error('Upload error:', error)
|
||||
alert('❌ Network error occurred')
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ UPDATE DURATION
|
||||
const updateDuration = async () => {
|
||||
try {
|
||||
const res = await fetch('http://127.0.0.1:5000/api/exam/update-duration', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type':'application/json' },
|
||||
body: JSON.stringify({ exam_code: examCode, duration_minutes: customDuration })
|
||||
})
|
||||
const data = await res.json()
|
||||
|
||||
if (data.success) {
|
||||
alert(`✅ Duration updated to ${customDuration} minutes`)
|
||||
setShowDurationEdit(false)
|
||||
fetchExamInfo()
|
||||
} else {
|
||||
alert(`❌ ${data.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
alert('❌ Network error occurred')
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ ADD TEST CASE
|
||||
const addTestCase = () => {
|
||||
setDraft(prev => ({
|
||||
...prev,
|
||||
test_cases: [
|
||||
...prev.test_cases,
|
||||
{
|
||||
input: '',
|
||||
expected_output: '',
|
||||
description: `Test case ${prev.test_cases.length + 1}`,
|
||||
is_public: false
|
||||
}
|
||||
]
|
||||
}))
|
||||
}
|
||||
|
||||
// ✅ UPDATE TEST CASE
|
||||
const updateTestCase = (index: number, field: string, value: string | boolean) => {
|
||||
setDraft(prev => ({
|
||||
...prev,
|
||||
test_cases: prev.test_cases.map((tc, i) =>
|
||||
i === index ? { ...tc, [field]: value } : tc
|
||||
)
|
||||
}))
|
||||
}
|
||||
|
||||
// ✅ REMOVE TEST CASE
|
||||
const removeTestCase = (index: number) => {
|
||||
setDraft(prev => ({
|
||||
...prev,
|
||||
test_cases: prev.test_cases.filter((_, i) => i !== index)
|
||||
}))
|
||||
}
|
||||
|
||||
// ✅ START EXAM
|
||||
const startExam = async () => {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/start-exam', {
|
||||
@@ -119,9 +243,8 @@ export default function HostPanel() {
|
||||
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
setExamInfo(prev => prev ? { ...prev, status: 'active' } : null)
|
||||
startTimer(examInfo?.duration_minutes ? examInfo.duration_minutes * 60 : 1800)
|
||||
alert('✅ Exam started! Participants can now begin coding.')
|
||||
fetchExamInfo()
|
||||
} else {
|
||||
alert(`❌ Failed to start exam: ${data.error}`)
|
||||
}
|
||||
@@ -130,7 +253,10 @@ export default function HostPanel() {
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ STOP EXAM
|
||||
const stopExam = async () => {
|
||||
if (!confirm('Are you sure you want to stop the exam?')) return
|
||||
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/stop-exam', {
|
||||
method: 'POST',
|
||||
@@ -140,9 +266,8 @@ export default function HostPanel() {
|
||||
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
setExamInfo(prev => prev ? { ...prev, status: 'completed' } : null)
|
||||
setTimeRemaining(0)
|
||||
alert('🛑 Exam stopped successfully!')
|
||||
fetchExamInfo()
|
||||
} else {
|
||||
alert(`❌ Failed to stop exam: ${data.error}`)
|
||||
}
|
||||
@@ -151,10 +276,9 @@ export default function HostPanel() {
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ REMOVE PARTICIPANT
|
||||
const removeParticipant = async (participantName: string) => {
|
||||
if (!confirm(`Are you sure you want to remove "${participantName}" from the exam?`)) {
|
||||
return
|
||||
}
|
||||
if (!confirm(`Are you sure you want to remove "${participantName}" from the exam?`)) return
|
||||
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/remove-participant', {
|
||||
@@ -170,7 +294,6 @@ export default function HostPanel() {
|
||||
if (data.success) {
|
||||
alert(`✅ Removed "${participantName}" from the exam`)
|
||||
fetchParticipants()
|
||||
fetchLeaderboard()
|
||||
} else {
|
||||
alert(`❌ Failed to remove participant: ${data.error}`)
|
||||
}
|
||||
@@ -179,43 +302,12 @@ export default function HostPanel() {
|
||||
}
|
||||
}
|
||||
|
||||
const startTimer = (seconds: number) => {
|
||||
setTimeRemaining(seconds)
|
||||
|
||||
const timer = setInterval(() => {
|
||||
setTimeRemaining(prev => {
|
||||
if (prev <= 1) {
|
||||
clearInterval(timer)
|
||||
alert('⏰ Time is up! Exam has ended.')
|
||||
setExamInfo(prev => prev ? { ...prev, status: 'completed' } : null)
|
||||
return 0
|
||||
}
|
||||
return prev - 1
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const formatTime = (seconds: number) => {
|
||||
const mins = Math.floor(seconds / 60)
|
||||
const secs = seconds % 60
|
||||
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'waiting': return 'bg-yellow-600'
|
||||
case 'active': return 'bg-green-600'
|
||||
case 'completed': return 'bg-red-600'
|
||||
default: return 'bg-gray-600'
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<RefreshCw className="h-8 w-8 animate-spin mx-auto mb-4" />
|
||||
<p>Loading host panel...</p>
|
||||
<p>Loading host panel for exam: {examCode}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@@ -224,16 +316,26 @@ export default function HostPanel() {
|
||||
if (error || !examInfo) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="text-center max-w-md">
|
||||
<AlertCircle className="h-12 w-12 text-red-500 mx-auto mb-4" />
|
||||
<h1 className="text-2xl font-bold mb-2">Error</h1>
|
||||
<p className="text-gray-400 mb-4">{error || 'Exam not found'}</p>
|
||||
<button
|
||||
onClick={() => router.push('/coding')}
|
||||
className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded"
|
||||
>
|
||||
Back to Home
|
||||
</button>
|
||||
<h1 className="text-2xl font-bold mb-2">Error Loading Exam</h1>
|
||||
<p className="text-gray-400 mb-4">{error}</p>
|
||||
<p className="text-sm text-gray-500 mb-4">Exam Code: {examCode}</p>
|
||||
|
||||
<div className="space-y-2">
|
||||
<button
|
||||
onClick={fetchExamInfo}
|
||||
className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded mr-2"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
<button
|
||||
onClick={() => router.push('/coding')}
|
||||
className="bg-gray-600 hover:bg-gray-700 px-4 py-2 rounded"
|
||||
>
|
||||
Back to Home
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@@ -245,91 +347,103 @@ export default function HostPanel() {
|
||||
<div className="bg-gray-800 border-b border-gray-700 p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold flex items-center space-x-2">
|
||||
<Monitor className="h-6 w-6" />
|
||||
<span>Host Panel</span>
|
||||
</h1>
|
||||
<h1 className="text-2xl font-bold">Host Panel</h1>
|
||||
<p className="text-gray-400">Managing exam: {examCode}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(examInfo.status)}`}>
|
||||
<div className={`px-3 py-1 rounded-full text-sm font-medium ${
|
||||
examInfo.status === 'waiting' ? 'bg-yellow-600' :
|
||||
examInfo.status === 'active' ? 'bg-green-600' : 'bg-red-600'
|
||||
}`}>
|
||||
{examInfo.status.toUpperCase()}
|
||||
</div>
|
||||
|
||||
{timeRemaining > 0 && (
|
||||
<div className="flex items-center space-x-2 bg-gray-700 px-3 py-1 rounded">
|
||||
<Clock className="h-4 w-4" />
|
||||
<span className="font-mono text-lg">{formatTime(timeRemaining)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ✅ TABS IN HEADER */}
|
||||
<div className="flex space-x-4 mt-4">
|
||||
{['overview','participants','questions'].map(t => (
|
||||
<button key={t}
|
||||
className={`px-4 py-2 rounded ${activeTab===t?'bg-blue-600':'bg-gray-700'}`}
|
||||
onClick={()=>setActiveTab(t as any)}
|
||||
>{t[0].toUpperCase()+t.slice(1)}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex">
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 p-6">
|
||||
{/* Exam Info Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Users className="h-8 w-8 text-blue-400" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Participants</p>
|
||||
<p className="text-2xl font-bold">{examInfo.participants_count}/{examInfo.max_participants}</p>
|
||||
<div className="p-6">
|
||||
{/* ✅ OVERVIEW TAB */}
|
||||
{activeTab === 'overview' && (
|
||||
<>
|
||||
{/* Exam Info Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Users className="h-8 w-8 text-blue-400" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Participants</p>
|
||||
<p className="text-2xl font-bold">{examInfo.participants_count}/{examInfo.max_participants}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Clock className="h-8 w-8 text-green-400" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Duration</p>
|
||||
<div className="flex items-center space-x-2">
|
||||
<p className="text-2xl font-bold">{examInfo.duration_minutes}m</p>
|
||||
{examInfo.status === 'waiting' && (
|
||||
<button
|
||||
onClick={() => setShowDurationEdit(true)}
|
||||
className="text-xs bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Trophy className="h-8 w-8 text-yellow-400" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Problem</p>
|
||||
<p className="text-lg font-bold">{examInfo.problem_title}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Settings className="h-8 w-8 text-purple-400" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Host</p>
|
||||
<p className="text-lg font-bold">{examInfo.host_name}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Control Panel */}
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Clock className="h-8 w-8 text-green-400" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Duration</p>
|
||||
<p className="text-2xl font-bold">{examInfo.duration_minutes}m</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 className="text-xl font-bold mb-4">Exam Controls</h2>
|
||||
<div className="flex space-x-4">
|
||||
{examInfo.status === 'waiting' && (
|
||||
<button
|
||||
onClick={startExam}
|
||||
className="bg-green-600 hover:bg-green-700 px-6 py-2 rounded flex items-center space-x-2"
|
||||
>
|
||||
<Play className="h-4 w-4" />
|
||||
<span>Start Exam</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Trophy className="h-8 w-8 text-yellow-400" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Completed</p>
|
||||
<p className="text-2xl font-bold">{leaderboard.filter(p => p.completed).length}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Settings className="h-8 w-8 text-purple-400" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Problem</p>
|
||||
<p className="text-lg font-bold">{examInfo.problem_title}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Control Panel */}
|
||||
<div className="bg-gray-800 rounded-lg p-6 mb-8">
|
||||
<h2 className="text-xl font-bold mb-4">Exam Controls</h2>
|
||||
|
||||
<div className="flex space-x-4">
|
||||
{examInfo.status === 'waiting' && (
|
||||
<button
|
||||
onClick={startExam}
|
||||
className="bg-green-600 hover:bg-green-700 px-6 py-2 rounded flex items-center space-x-2"
|
||||
>
|
||||
<Play className="h-4 w-4" />
|
||||
<span>Start Exam</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{examInfo.status === 'active' && (
|
||||
<>
|
||||
{examInfo.status === 'active' && (
|
||||
<button
|
||||
onClick={stopExam}
|
||||
className="bg-red-600 hover:bg-red-700 px-6 py-2 rounded flex items-center space-x-2"
|
||||
@@ -337,38 +451,43 @@ export default function HostPanel() {
|
||||
<Square className="h-4 w-4" />
|
||||
<span>Stop Exam</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(examCode)
|
||||
alert('Exam code copied to clipboard!')
|
||||
}}
|
||||
className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded"
|
||||
>
|
||||
Copy Exam Code
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={fetchExamInfo}
|
||||
className="bg-purple-600 hover:bg-purple-700 px-6 py-2 rounded flex items-center space-x-2"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
<span>Refresh Data</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* ✅ PARTICIPANTS TAB */}
|
||||
{activeTab === 'participants' && (
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-bold">Participants ({participants.length})</h2>
|
||||
<button
|
||||
onClick={() => {
|
||||
fetchParticipants()
|
||||
fetchLeaderboard()
|
||||
}}
|
||||
className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded flex items-center space-x-2"
|
||||
onClick={fetchParticipants}
|
||||
className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded flex items-center space-x-2"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
<span>Refresh Data</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(examCode)
|
||||
alert('Exam code copied to clipboard!')
|
||||
}}
|
||||
className="bg-purple-600 hover:bg-purple-700 px-6 py-2 rounded"
|
||||
>
|
||||
Copy Exam Code
|
||||
<span>Refresh</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Participants List */}
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<h2 className="text-xl font-bold mb-4 flex items-center space-x-2">
|
||||
<Users className="h-5 w-5" />
|
||||
<span>Participants ({participants.length})</span>
|
||||
</h2>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
@@ -383,7 +502,7 @@ export default function HostPanel() {
|
||||
</thead>
|
||||
<tbody>
|
||||
{participants.map((participant, index) => (
|
||||
<tr key={index} className="border-b border-gray-700 hover:bg-gray-700">
|
||||
<tr key={index} className="border-b border-gray-700">
|
||||
<td className="py-3 px-4 font-medium">{participant.name}</td>
|
||||
<td className="py-3 px-4 text-gray-400">
|
||||
{new Date(participant.joined_at).toLocaleTimeString()}
|
||||
@@ -407,7 +526,7 @@ export default function HostPanel() {
|
||||
<td className="py-3 px-4">
|
||||
<button
|
||||
onClick={() => removeParticipant(participant.name)}
|
||||
className="bg-red-600 hover:bg-red-700 px-3 py-1 rounded text-sm flex items-center space-x-1"
|
||||
className="bg-red-600 hover:bg-red-700 px-3 py-1 rounded text-xs flex items-center space-x-1"
|
||||
>
|
||||
<UserMinus className="h-3 w-3" />
|
||||
<span>Remove</span>
|
||||
@@ -425,63 +544,233 @@ export default function HostPanel() {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Leaderboard Sidebar */}
|
||||
<div className="w-80 bg-gray-800 p-6">
|
||||
<div className="flex items-center space-x-2 mb-6">
|
||||
<Trophy className="h-6 w-6 text-yellow-400" />
|
||||
<h2 className="text-xl font-bold">Live Leaderboard</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{leaderboard.map((participant, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`p-4 rounded-lg ${
|
||||
index === 0 ? 'bg-gradient-to-r from-yellow-600 to-orange-600' :
|
||||
index === 1 ? 'bg-gradient-to-r from-gray-600 to-gray-500' :
|
||||
index === 2 ? 'bg-gradient-to-r from-orange-600 to-red-600' :
|
||||
'bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="font-bold text-lg">#{index + 1}</span>
|
||||
<span className="font-medium">{participant.name}</span>
|
||||
</div>
|
||||
{participant.submitted_at && (
|
||||
<p className="text-xs text-gray-300 mt-1">
|
||||
Submitted: {new Date(participant.submitted_at).toLocaleTimeString()}
|
||||
</p>
|
||||
)}
|
||||
{/* ✅ QUESTIONS TAB */}
|
||||
{activeTab==='questions' && (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-xl font-bold">Question Management</h2>
|
||||
{examInfo.status === 'waiting' && (
|
||||
<button
|
||||
onClick={()=>setShowUploader(true)}
|
||||
className="bg-green-600 hover:bg-green-700 px-4 py-2 rounded flex items-center space-x-2"
|
||||
>
|
||||
<Plus className="h-4 w-4"/><span>Upload / Replace Question</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Current problem quick view */}
|
||||
<div className="bg-gray-800 p-6 rounded">
|
||||
<h3 className="font-bold text-lg mb-2">{examInfo.problem_title}</h3>
|
||||
<p className="text-gray-300">{examInfo.problem_description || 'No description stored'}</p>
|
||||
{examInfo.status !== 'waiting' && (
|
||||
<p className="text-yellow-400 text-sm mt-2">
|
||||
⚠️ Questions cannot be modified after exam has started
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ✅ UPLOAD MODAL */}
|
||||
{showUploader && (
|
||||
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
|
||||
<div className="bg-gray-800 w-full max-w-6xl max-h-[95vh] overflow-y-auto rounded-lg p-6">
|
||||
<div className="flex justify-between mb-6">
|
||||
<h3 className="text-2xl font-bold">Upload Question</h3>
|
||||
<button
|
||||
onClick={()=>setShowUploader(false)}
|
||||
className="text-gray-400 hover:text-white text-2xl"
|
||||
>✕</button>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-2xl font-bold">{participant.score}%</div>
|
||||
<div className={`text-xs ${participant.completed ? 'text-green-300' : 'text-yellow-300'}`}>
|
||||
{participant.completed ? 'Completed' : 'In Progress'}
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Basic Info */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Question Title *</label>
|
||||
<input
|
||||
className="w-full p-3 bg-gray-700 rounded border border-gray-600"
|
||||
placeholder="e.g., Two Sum Problem"
|
||||
value={draft.title}
|
||||
onChange={e=>setDraft({...draft,title:e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Difficulty</label>
|
||||
<select
|
||||
value={draft.difficulty}
|
||||
onChange={e=>setDraft({...draft,difficulty:e.target.value as any})}
|
||||
className="w-full p-3 bg-gray-700 rounded border border-gray-600"
|
||||
>
|
||||
<option value="easy">Easy</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="hard">Hard</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Problem Description *</label>
|
||||
<textarea
|
||||
className="w-full p-3 bg-gray-700 rounded border border-gray-600"
|
||||
placeholder="Describe the problem clearly with examples..."
|
||||
rows={5}
|
||||
value={draft.description}
|
||||
onChange={e=>setDraft({...draft,description:e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Function Name */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Function Name</label>
|
||||
<input
|
||||
className="w-full p-3 bg-gray-700 rounded border border-gray-600"
|
||||
placeholder="solve"
|
||||
value={draft.function_name}
|
||||
onChange={e=>setDraft({...draft,function_name:e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Starter Code */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Starter Code (Python)</label>
|
||||
<textarea
|
||||
className="w-full p-3 bg-gray-900 text-green-400 font-mono rounded border border-gray-600"
|
||||
rows={6}
|
||||
value={draft.starter_code.python}
|
||||
onChange={e=>setDraft({...draft,starter_code:{...draft.starter_code,python:e.target.value}})}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Test Cases */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<label className="block text-sm font-medium">Test Cases</label>
|
||||
<button
|
||||
onClick={addTestCase}
|
||||
className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded flex items-center space-x-2"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
<span>Add Test Case</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{draft.test_cases.map((testCase, index) => (
|
||||
<div key={index} className="bg-gray-700 p-4 rounded mb-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h4 className="font-medium">Test Case {index + 1}</h4>
|
||||
{draft.test_cases.length > 1 && (
|
||||
<button
|
||||
onClick={() => removeTestCase(index)}
|
||||
className="text-red-400 hover:text-red-300 text-sm"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-2">
|
||||
<div>
|
||||
<label className="block text-xs text-gray-400 mb-1">Input</label>
|
||||
<textarea
|
||||
className="w-full p-2 bg-gray-600 rounded text-sm"
|
||||
rows={2}
|
||||
placeholder='e.g., "hello world"'
|
||||
value={testCase.input}
|
||||
onChange={e => updateTestCase(index, 'input', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-400 mb-1">Expected Output</label>
|
||||
<textarea
|
||||
className="w-full p-2 bg-gray-600 rounded text-sm"
|
||||
rows={2}
|
||||
placeholder='e.g., "HELLO WORLD"'
|
||||
value={testCase.expected_output}
|
||||
onChange={e => updateTestCase(index, 'expected_output', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<label className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={testCase.is_public}
|
||||
onChange={e => updateTestCase(index, 'is_public', e.target.checked)}
|
||||
className="rounded"
|
||||
/>
|
||||
<span className="text-sm">Public (visible to students)</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex space-x-4 pt-4 border-t border-gray-600">
|
||||
<button
|
||||
onClick={uploadQuestion}
|
||||
className="bg-green-600 hover:bg-green-700 px-6 py-3 rounded flex items-center space-x-2"
|
||||
>
|
||||
<Upload className="h-4 w-4" />
|
||||
<span>Save Question</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setShowUploader(false)}
|
||||
className="bg-gray-600 hover:bg-gray-700 px-6 py-3 rounded"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
)}
|
||||
</div>
|
||||
|
||||
{leaderboard.length === 0 && (
|
||||
<div className="text-center py-8 text-gray-400">
|
||||
No submissions yet.
|
||||
)}
|
||||
|
||||
{/* ✅ DURATION EDIT MODAL */}
|
||||
{showDurationEdit && (
|
||||
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
|
||||
<div className="bg-gray-800 rounded-lg p-6 max-w-md w-full">
|
||||
<h3 className="text-xl font-bold mb-4">Edit Exam Duration</h3>
|
||||
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-2">Duration (minutes)</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="300"
|
||||
value={customDuration}
|
||||
onChange={e => setCustomDuration(parseInt(e.target.value) || 30)}
|
||||
className="w-full p-3 bg-gray-700 rounded border border-gray-600"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-4">
|
||||
<button
|
||||
onClick={updateDuration}
|
||||
className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded flex items-center space-x-2"
|
||||
>
|
||||
<Timer className="h-4 w-4" />
|
||||
<span>Update Duration</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setShowDurationEdit(false)}
|
||||
className="bg-gray-600 hover:bg-gray-700 px-4 py-2 rounded"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={fetchLeaderboard}
|
||||
className="w-full mt-6 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm flex items-center justify-center space-x-2"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
<span>Refresh Leaderboard</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user