mirror of
https://github.com/th30d4y/OpenLearnX.git
synced 2026-05-26 11:25:49 +00:00
update & add
This commit is contained in:
5t4l1n
@@ -1,7 +1,7 @@
|
||||
'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'
|
||||
import { Trophy, Clock, Users, Send, RefreshCw, Play, Code, Wallet, Shield, TestTube } from 'lucide-react'
|
||||
|
||||
interface Participant {
|
||||
name: string
|
||||
@@ -53,9 +53,7 @@ export default function EnhancedExamInterface() {
|
||||
const languageIcons: {[key: string]: string} = {
|
||||
python: '🐍',
|
||||
java: '☕',
|
||||
javascript: '🌐',
|
||||
cpp: '⚡',
|
||||
c: '🔧',
|
||||
c: '⚡',
|
||||
bash: '💻'
|
||||
}
|
||||
|
||||
@@ -72,15 +70,15 @@ export default function EnhancedExamInterface() {
|
||||
// Fetch problem details
|
||||
fetchProblem(session.exam_code)
|
||||
|
||||
// Start polling for updates
|
||||
// More frequent polling for real-time updates
|
||||
const interval = setInterval(() => {
|
||||
fetchLeaderboard(session.exam_code)
|
||||
}, 3000)
|
||||
}, 2000)
|
||||
|
||||
return () => clearInterval(interval)
|
||||
}, [router])
|
||||
|
||||
// ✅ FIXED TIMER COUNTDOWN
|
||||
// Timer countdown
|
||||
useEffect(() => {
|
||||
if (!timerInitialized || timeRemaining <= 0) return
|
||||
|
||||
@@ -113,58 +111,74 @@ export default function EnhancedExamInterface() {
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ FIXED TIMER CALCULATION IN FETCHLEADERBOARD
|
||||
// ✅ ENHANCED: More aggressive leaderboard fetching with better debugging
|
||||
const fetchLeaderboard = async (examCode: string) => {
|
||||
try {
|
||||
const response = await fetch(`http://127.0.0.1:5000/api/exam/leaderboard/${examCode}`)
|
||||
console.log('🏆 Fetching leaderboard for:', examCode)
|
||||
|
||||
// Add cache busting to prevent stale data
|
||||
const response = await fetch(`http://127.0.0.1:5000/api/exam/leaderboard/${examCode}?t=${Date.now()}`)
|
||||
const data = await response.json()
|
||||
|
||||
console.log('📦 Leaderboard data received:', {
|
||||
success: data.success,
|
||||
completed_count: data.leaderboard?.length || 0,
|
||||
waiting_count: data.waiting_participants?.length || 0,
|
||||
ultimate_fix_applied: data.ultimate_fix_applied
|
||||
})
|
||||
|
||||
if (data.success) {
|
||||
setLeaderboard(data.leaderboard || [])
|
||||
setWaitingParticipants(data.waiting_participants || [])
|
||||
setExamStats(data.stats || {})
|
||||
|
||||
// ✅ FIXED TIMER CALCULATION
|
||||
// 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)
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ ENHANCED: Better user status checking
|
||||
const currentUser = examSession?.student_name
|
||||
if (currentUser) {
|
||||
const userInCompleted = data.leaderboard.find((p: Participant) => p.name === currentUser)
|
||||
const userInWaiting = data.waiting_participants.find((p: Participant) => p.name === currentUser)
|
||||
|
||||
console.log(`👤 User status check:`, {
|
||||
username: currentUser,
|
||||
in_completed: !!userInCompleted,
|
||||
in_waiting: !!userInWaiting,
|
||||
current_hasSubmitted: hasSubmitted,
|
||||
user_score: userInCompleted?.score
|
||||
})
|
||||
|
||||
if (userInCompleted && !hasSubmitted) {
|
||||
console.log('✅ User found in completed leaderboard, updating hasSubmitted state')
|
||||
setHasSubmitted(true)
|
||||
}
|
||||
}
|
||||
|
||||
// Debug logging for leaderboard content
|
||||
if (data.leaderboard.length > 0) {
|
||||
console.log('🏆 Completed participants:', data.leaderboard.map((p: any) => `${p.name}: ${p.score}%`))
|
||||
}
|
||||
if (data.waiting_participants.length > 0) {
|
||||
console.log('⏳ Waiting participants:', data.waiting_participants.map((p: any) => p.name))
|
||||
}
|
||||
|
||||
} else {
|
||||
console.error('❌ Leaderboard fetch failed:', data.error)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch leaderboard:', error)
|
||||
console.error('❌ Failed to fetch leaderboard:', error)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -177,7 +191,6 @@ export default function EnhancedExamInterface() {
|
||||
setTestResults([])
|
||||
}
|
||||
|
||||
// ✅ FIXED RUNCODE FUNCTION - Updated to use correct endpoint
|
||||
const runCode = async () => {
|
||||
if (!code.trim()) {
|
||||
alert('Please write some code first!')
|
||||
@@ -189,90 +202,283 @@ export default function EnhancedExamInterface() {
|
||||
setTestResults([])
|
||||
|
||||
try {
|
||||
console.log('🔧 Sending code to compiler...')
|
||||
|
||||
// ✅ FIXED: Use correct endpoint /api/compiler/execute instead of /api/exam/execute-code
|
||||
const response = await fetch('http://127.0.0.1:5000/api/compiler/execute', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
language: selectedLanguage,
|
||||
code: code,
|
||||
input: ''
|
||||
code,
|
||||
language: selectedLanguage
|
||||
})
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
console.log('📦 Compiler result:', result)
|
||||
|
||||
if (result.success) {
|
||||
setOutput(`✅ Code executed successfully!\n${result.output}`)
|
||||
setOutput(`✅ Output:\n${result.output}`)
|
||||
if (result.execution_time) {
|
||||
setOutput(prev => prev + `\n⏱️ Execution time: ${result.execution_time}s`)
|
||||
}
|
||||
if (result.error) {
|
||||
setOutput(prev => prev + `\n⚠️ Warnings:\n${result.error}`)
|
||||
}
|
||||
|
||||
// If there are test results from backend, show them
|
||||
if (result.test_results) {
|
||||
setTestResults(result.test_results)
|
||||
}
|
||||
} else {
|
||||
setOutput(`❌ Error:\n${result.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ Compiler network error:', error)
|
||||
setOutput(`❌ Network error: Could not connect to compiler service.\nPlease check if the backend is running on port 5000.`)
|
||||
setOutput(`Execution failed: ${(error as Error).message}`)
|
||||
} finally {
|
||||
setIsRunning(false)
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ COMPLETELY FIXED SUBMIT SOLUTION with aggressive leaderboard refresh
|
||||
const submitSolution = async () => {
|
||||
if (!code.trim()) {
|
||||
alert('Please write some code before submitting!')
|
||||
return
|
||||
}
|
||||
|
||||
if (!confirm('Submit your solution? This cannot be undone.')) return
|
||||
|
||||
setIsSubmitting(true)
|
||||
|
||||
try {
|
||||
console.log('📤 Submitting solution...')
|
||||
console.log('👤 Participant:', examSession?.student_name)
|
||||
console.log('🔢 Exam Code:', examSession?.exam_code)
|
||||
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/submit-solution', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
exam_code: examSession?.exam_code,
|
||||
language: selectedLanguage,
|
||||
code: code
|
||||
code: code,
|
||||
participant_name: examSession?.student_name || 'Anonymous'
|
||||
})
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
console.log('📦 Submit result:', data)
|
||||
|
||||
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`
|
||||
// ✅ ENHANCED: Detailed alert with proper test results formatting
|
||||
let alertMessage = `🎉 Solution submitted successfully!\n\n`
|
||||
alertMessage += `📊 Overall Score: ${data.score}%\n`
|
||||
alertMessage += `✅ Tests Passed: ${data.passed_tests}/${data.total_tests}\n`
|
||||
|
||||
if (data.blockchain_verified) {
|
||||
alertMessage += `\n🔗 Blockchain Verified: ${data.wallet_address?.slice(0, 6)}...${data.wallet_address?.slice(-4)}`
|
||||
if (data.execution_time) {
|
||||
alertMessage += `⏱️ Execution Time: ${data.execution_time}s\n`
|
||||
}
|
||||
|
||||
// Enhanced test results display in alert
|
||||
if (data.test_results && data.test_results.length > 0) {
|
||||
alertMessage += `\n📋 Detailed Test Results:\n`
|
||||
alertMessage += `${'='.repeat(30)}\n`
|
||||
|
||||
data.test_results.forEach((test: any, i: number) => {
|
||||
const status = test.passed ? '✅ PASSED' : '❌ FAILED'
|
||||
const points = test.points_earned || 0
|
||||
|
||||
alertMessage += `Test ${i+1}: ${status} (+${points} points)\n`
|
||||
|
||||
if (test.description && test.description !== `Test case ${i+1}`) {
|
||||
alertMessage += ` Description: ${test.description}\n`
|
||||
}
|
||||
|
||||
if (test.input) {
|
||||
alertMessage += ` Input: "${test.input}"\n`
|
||||
}
|
||||
|
||||
if (test.expected_output) {
|
||||
alertMessage += ` Expected: "${test.expected_output}"\n`
|
||||
}
|
||||
|
||||
if (test.actual_output) {
|
||||
alertMessage += ` Your Output: "${test.actual_output}"\n`
|
||||
}
|
||||
|
||||
if (!test.passed && test.error) {
|
||||
alertMessage += ` Error: ${test.error}\n`
|
||||
}
|
||||
|
||||
alertMessage += `\n`
|
||||
})
|
||||
|
||||
// Add summary
|
||||
const totalPoints = data.test_results.reduce((sum: number, test: any) => sum + (test.points_earned || 0), 0)
|
||||
const maxPoints = data.scoring_details?.total_points || 100
|
||||
alertMessage += `📈 Points Earned: ${totalPoints}/${maxPoints}\n`
|
||||
}
|
||||
|
||||
alertMessage += `\n🏆 Your score will appear in the leaderboard shortly!`
|
||||
|
||||
alert(alertMessage)
|
||||
fetchLeaderboard(examSession!.exam_code)
|
||||
|
||||
// ✅ CRITICAL FIX: Aggressive leaderboard refresh sequence
|
||||
console.log('🔄 Starting aggressive leaderboard refresh sequence...')
|
||||
|
||||
// Immediate refresh
|
||||
setTimeout(() => {
|
||||
console.log('🔄 Refresh 1/6 - Immediate')
|
||||
fetchLeaderboard(examSession!.exam_code)
|
||||
}, 200)
|
||||
|
||||
// Quick follow-up
|
||||
setTimeout(() => {
|
||||
console.log('🔄 Refresh 2/6 - Quick follow-up')
|
||||
fetchLeaderboard(examSession!.exam_code)
|
||||
}, 800)
|
||||
|
||||
// Medium delay
|
||||
setTimeout(() => {
|
||||
console.log('🔄 Refresh 3/6 - Medium delay')
|
||||
fetchLeaderboard(examSession!.exam_code)
|
||||
}, 2000)
|
||||
|
||||
// Longer delay
|
||||
setTimeout(() => {
|
||||
console.log('🔄 Refresh 4/6 - Longer delay')
|
||||
fetchLeaderboard(examSession!.exam_code)
|
||||
}, 4000)
|
||||
|
||||
// Extended delay
|
||||
setTimeout(() => {
|
||||
console.log('🔄 Refresh 5/6 - Extended delay')
|
||||
fetchLeaderboard(examSession!.exam_code)
|
||||
}, 7000)
|
||||
|
||||
// Final refresh
|
||||
setTimeout(() => {
|
||||
console.log('🔄 Refresh 6/6 - Final check')
|
||||
fetchLeaderboard(examSession!.exam_code)
|
||||
}, 10000)
|
||||
|
||||
} else {
|
||||
alert(data.error || 'Failed to submit solution')
|
||||
alert(`❌ Submission failed: ${data.error}`)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
alert('Failed to submit solution. Please try again.')
|
||||
console.error('❌ Submit network error:', error)
|
||||
alert('❌ Network error: Could not submit solution. Please try again.')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ FIXED TIME FORMATTING
|
||||
// ✅ Enhanced Test Results Display Component
|
||||
const TestResultsDisplay = ({ results }: { results: any[] }) => {
|
||||
if (!results || results.length === 0) return null
|
||||
|
||||
return (
|
||||
<div className="mt-6 bg-gray-900 p-4 rounded border border-gray-600">
|
||||
<h4 className="text-lg font-semibold text-white mb-4 flex items-center space-x-2">
|
||||
<TestTube className="h-5 w-5 text-blue-400" />
|
||||
<span>Test Results</span>
|
||||
</h4>
|
||||
|
||||
<div className="space-y-3">
|
||||
{results.map((result, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`p-4 rounded-lg border-l-4 ${
|
||||
result.passed
|
||||
? 'bg-green-900 border-green-500 text-green-100'
|
||||
: 'bg-red-900 border-red-500 text-red-100'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="font-semibold">
|
||||
Test {index + 1}: {result.passed ? '✅ PASSED' : '❌ FAILED'}
|
||||
</span>
|
||||
<span className="text-sm bg-black bg-opacity-30 px-2 py-1 rounded font-bold">
|
||||
+{result.points_earned || 0} points
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{result.description && result.description !== `Test case ${index+1}` && (
|
||||
<p className="text-sm mb-2 opacity-80">{result.description}</p>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
|
||||
{result.input && (
|
||||
<div>
|
||||
<span className="font-medium">Input:</span>
|
||||
<code className="ml-2 bg-black bg-opacity-30 px-2 py-1 rounded">
|
||||
"{result.input}"
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.expected_output && (
|
||||
<div>
|
||||
<span className="font-medium">Expected:</span>
|
||||
<code className="ml-2 bg-black bg-opacity-30 px-2 py-1 rounded">
|
||||
"{result.expected_output}"
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.actual_output && (
|
||||
<div>
|
||||
<span className="font-medium">Your Output:</span>
|
||||
<code className="ml-2 bg-black bg-opacity-30 px-2 py-1 rounded">
|
||||
"{result.actual_output}"
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!result.passed && result.error && (
|
||||
<div className="mt-2 p-2 bg-red-800 bg-opacity-50 rounded text-sm">
|
||||
<span className="font-medium">Error:</span> {result.error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Summary */}
|
||||
<div className="mt-4 p-3 bg-blue-900 bg-opacity-50 rounded">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span>
|
||||
Passed: {results.filter(r => r.passed).length}/{results.length} tests
|
||||
</span>
|
||||
<span>
|
||||
Points: {results.reduce((sum, r) => sum + (r.points_earned || 0), 0)} total
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Debug function for troubleshooting
|
||||
const debugLeaderboard = async () => {
|
||||
try {
|
||||
const response = await fetch(`http://127.0.0.1:5000/api/exam/leaderboard/${examSession?.exam_code}`)
|
||||
const data = await response.json()
|
||||
|
||||
console.log('🐛 DEBUG LEADERBOARD:', {
|
||||
success: data.success,
|
||||
completed_count: data.leaderboard?.length || 0,
|
||||
waiting_count: data.waiting_participants?.length || 0,
|
||||
my_name: examSession?.student_name,
|
||||
in_completed: data.leaderboard?.find((p: any) => p.name === examSession?.student_name),
|
||||
in_waiting: data.waiting_participants?.find((p: any) => p.name === examSession?.student_name),
|
||||
ultimate_fix_applied: data.ultimate_fix_applied,
|
||||
full_leaderboard: data.leaderboard,
|
||||
full_waiting: data.waiting_participants
|
||||
})
|
||||
|
||||
alert(`Debug Info:\nCompleted: ${data.leaderboard?.length || 0}\nWaiting: ${data.waiting_participants?.length || 0}\nCheck console for details`)
|
||||
} catch (error) {
|
||||
console.error('Debug error:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const formatTime = (seconds: number) => {
|
||||
if (seconds < 0) return "00:00"
|
||||
|
||||
@@ -308,11 +514,11 @@ export default function EnhancedExamInterface() {
|
||||
<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>
|
||||
<p className="text-gray-400">Code: {examSession.exam_code} | Participant: {examSession.student_name}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
{/* ✅ FIXED TIMER DISPLAY */}
|
||||
{/* Timer */}
|
||||
{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'
|
||||
@@ -328,27 +534,19 @@ export default function EnhancedExamInterface() {
|
||||
</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>
|
||||
|
||||
{/* Submission Status Indicator */}
|
||||
{hasSubmitted && (
|
||||
<div className="flex items-center space-x-2 bg-green-900 px-3 py-1 rounded-lg">
|
||||
<Shield className="h-4 w-4 text-green-400" />
|
||||
<span className="text-green-200 text-sm">✅ Submitted</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -360,10 +558,10 @@ export default function EnhancedExamInterface() {
|
||||
<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 && (
|
||||
{hasSubmitted && (
|
||||
<div className="flex items-center space-x-1 text-green-400 text-sm">
|
||||
<Shield className="h-4 w-4" />
|
||||
<span>Blockchain Verified</span>
|
||||
<span>Solution Submitted</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -428,7 +626,7 @@ export default function EnhancedExamInterface() {
|
||||
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...`}
|
||||
placeholder={hasSubmitted ? 'Solution submitted!' : `Write your ${selectedLanguage} solution here...`}
|
||||
/>
|
||||
|
||||
<div className="flex justify-between items-center mt-4">
|
||||
@@ -436,10 +634,7 @@ export default function EnhancedExamInterface() {
|
||||
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>
|
||||
)}
|
||||
✅ Solution submitted successfully!
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
@@ -455,63 +650,32 @@ export default function EnhancedExamInterface() {
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={submitSolution}
|
||||
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>
|
||||
<span>{isSubmitting ? 'Submitting...' : hasSubmitted ? 'Submitted ✅' : 'Submit Solution'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Output & Test Results */}
|
||||
{(output || testResults.length > 0) && (
|
||||
{/* Output Display */}
|
||||
{output && (
|
||||
<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>
|
||||
)}
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ✅ Enhanced Test Results Display */}
|
||||
{testResults.length > 0 && (
|
||||
<TestResultsDisplay results={testResults} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Leaderboard */}
|
||||
{/* Enhanced 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">
|
||||
@@ -519,13 +683,24 @@ export default function EnhancedExamInterface() {
|
||||
<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 className="flex items-center space-x-2">
|
||||
<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>
|
||||
|
||||
{/* Debug button - remove in production */}
|
||||
<button
|
||||
onClick={debugLeaderboard}
|
||||
className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded"
|
||||
title="Debug"
|
||||
>
|
||||
🐛
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
@@ -548,20 +723,7 @@ export default function EnhancedExamInterface() {
|
||||
</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 */}
|
||||
{/* Leaderboard Display */}
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-semibold text-gray-300 mb-3">🏆 Rankings</h4>
|
||||
{leaderboard.length > 0 ? (
|
||||
@@ -571,12 +733,9 @@ export default function EnhancedExamInterface() {
|
||||
<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' : ''}`}>
|
||||
<div className={`font-medium ${participant.name === examSession.student_name ? 'underline font-bold' : ''}`}>
|
||||
{participant.name}
|
||||
{participant.name === examSession.student_name && ' (You)'}
|
||||
{participant.blockchain_verified && (
|
||||
<Shield className="inline h-3 w-3 ml-1 text-green-400" />
|
||||
)}
|
||||
{participant.name === examSession.student_name && ' (You) 🎯'}
|
||||
</div>
|
||||
<div className="text-xs opacity-75 flex items-center space-x-2">
|
||||
{participant.language && (
|
||||
@@ -584,15 +743,15 @@ export default function EnhancedExamInterface() {
|
||||
{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 className="text-right">
|
||||
<span className="font-bold text-lg">{participant.score}%</span>
|
||||
<div className="text-xs opacity-75">
|
||||
Submitted ✅
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
@@ -614,9 +773,7 @@ export default function EnhancedExamInterface() {
|
||||
{participant.name}
|
||||
{participant.name === examSession.student_name && ' (You)'}
|
||||
</span>
|
||||
{participant.blockchain_verified && (
|
||||
<Shield className="h-3 w-3 text-green-400" />
|
||||
)}
|
||||
<span className="text-yellow-400 text-xs">Working...</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
'use client'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import React, { useState, useEffect, useCallback } from 'react'
|
||||
import { useRouter, useParams } from 'next/navigation'
|
||||
import {
|
||||
Users, Trophy, Clock, Play, Square, RefreshCw, Settings,
|
||||
@@ -40,6 +40,7 @@ interface Question {
|
||||
|
||||
interface ExamInfo {
|
||||
title: string
|
||||
exam_code: string
|
||||
status: 'waiting' | 'active' | 'completed'
|
||||
duration_minutes: number
|
||||
participants_count: number
|
||||
@@ -49,6 +50,9 @@ interface ExamInfo {
|
||||
languages: string[]
|
||||
created_at: string
|
||||
host_name: string
|
||||
start_time?: string
|
||||
end_time?: string
|
||||
problem?: Question
|
||||
}
|
||||
|
||||
interface Participant {
|
||||
@@ -61,6 +65,20 @@ interface Participant {
|
||||
total_tests?: number
|
||||
points_earned?: number
|
||||
total_points?: number
|
||||
language?: string
|
||||
rank?: number
|
||||
}
|
||||
|
||||
interface LeaderboardData {
|
||||
leaderboard: Participant[]
|
||||
waiting_participants: Participant[]
|
||||
stats: {
|
||||
total_participants: number
|
||||
completed_submissions: number
|
||||
waiting_submissions: number
|
||||
average_score: number
|
||||
highest_score: number
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Enhanced Host Panel Component ---------- */
|
||||
@@ -71,7 +89,17 @@ export default function EnhancedHostPanel() {
|
||||
|
||||
/* ------- Global state ------- */
|
||||
const [examInfo, setExamInfo] = useState<ExamInfo | null>(null)
|
||||
const [participants, setParticipants] = useState<Participant[]>([])
|
||||
const [leaderboardData, setLeaderboardData] = useState<LeaderboardData>({
|
||||
leaderboard: [],
|
||||
waiting_participants: [],
|
||||
stats: {
|
||||
total_participants: 0,
|
||||
completed_submissions: 0,
|
||||
waiting_submissions: 0,
|
||||
average_score: 0,
|
||||
highest_score: 0
|
||||
}
|
||||
})
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
@@ -98,7 +126,7 @@ export default function EnhancedHostPanel() {
|
||||
expected_output: '',
|
||||
description: 'Test case 1',
|
||||
is_public: true,
|
||||
points: 25
|
||||
points: 100
|
||||
}],
|
||||
examples: [{
|
||||
input: '',
|
||||
@@ -118,6 +146,44 @@ export default function EnhancedHostPanel() {
|
||||
}
|
||||
const [draft, setDraft] = useState<Question>({ ...blankQuestion })
|
||||
|
||||
/* ------------------------------------------------------------------- */
|
||||
/* FIXED EVENT HANDLERS */
|
||||
/* ------------------------------------------------------------------- */
|
||||
|
||||
// ✅ FIXED: Stable event handlers using useCallback
|
||||
const handleTitleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setDraft(prev => ({...prev, title: e.target.value}))
|
||||
}, [])
|
||||
|
||||
const handleDescriptionChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setDraft(prev => ({...prev, description: e.target.value}))
|
||||
}, [])
|
||||
|
||||
const handleDifficultyChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
setDraft(prev => ({...prev, difficulty: e.target.value as any}))
|
||||
}, [])
|
||||
|
||||
const handleTotalPointsChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newTotal = parseInt(e.target.value) || 100
|
||||
setDraft(prev => ({...prev, total_points: newTotal}))
|
||||
}, [])
|
||||
|
||||
const handleCorrectSolutionChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setDraft(prev => ({
|
||||
...prev,
|
||||
correct_solution: {...prev.correct_solution, python: e.target.value}
|
||||
}))
|
||||
}, [])
|
||||
|
||||
const handleExampleChange = useCallback((index: number, field: keyof Example, value: string) => {
|
||||
setDraft(prev => ({
|
||||
...prev,
|
||||
examples: prev.examples.map((ex, i) =>
|
||||
i === index ? {...ex, [field]: value} : ex
|
||||
)
|
||||
}))
|
||||
}, [])
|
||||
|
||||
/* ------------------------------------------------------------------- */
|
||||
/* API CALLS */
|
||||
/* ------------------------------------------------------------------- */
|
||||
@@ -128,32 +194,48 @@ export default function EnhancedHostPanel() {
|
||||
const data = await res.json()
|
||||
if (data.success) {
|
||||
setExamInfo(data.exam_info)
|
||||
setCustomDuration(data.exam_info.duration_minutes)
|
||||
setCustomDuration(data.exam_info.duration_minutes || 30)
|
||||
setError('')
|
||||
} else {
|
||||
setError(data.error || 'Unable to load exam')
|
||||
}
|
||||
} catch {
|
||||
} catch (err) {
|
||||
setError('Backend unreachable')
|
||||
console.error('Failed to fetch exam info:', err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchParticipants = async () => {
|
||||
const fetchLeaderboard = async () => {
|
||||
try {
|
||||
const res = await fetch(`http://127.0.0.1:5000/api/exam/participants/${examCode}`)
|
||||
const res = await fetch(`http://127.0.0.1:5000/api/exam/leaderboard/${examCode}`)
|
||||
const data = await res.json()
|
||||
if (data.success) setParticipants(data.participants)
|
||||
} catch {
|
||||
/** ignore */
|
||||
if (data.success) {
|
||||
setLeaderboardData({
|
||||
leaderboard: data.leaderboard || [],
|
||||
waiting_participants: data.waiting_participants || [],
|
||||
stats: data.stats || {
|
||||
total_participants: 0,
|
||||
completed_submissions: 0,
|
||||
waiting_submissions: 0,
|
||||
average_score: 0,
|
||||
highest_score: 0
|
||||
}
|
||||
})
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch leaderboard:', err)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchExamInfo()
|
||||
fetchParticipants()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
fetchLeaderboard()
|
||||
|
||||
// Poll leaderboard every 3 seconds for real-time updates
|
||||
const interval = setInterval(fetchLeaderboard, 3000)
|
||||
return () => clearInterval(interval)
|
||||
}, [examCode])
|
||||
|
||||
/* ---------- Enhanced Question Upload ---------- */
|
||||
@@ -185,7 +267,8 @@ export default function EnhancedHostPanel() {
|
||||
const enhancedQuestion = {
|
||||
...draft,
|
||||
test_cases: validTestCases,
|
||||
id: Date.now().toString()
|
||||
id: Date.now().toString(),
|
||||
languages: Object.keys(draft.starter_code).filter(lang => draft.starter_code[lang].trim())
|
||||
}
|
||||
|
||||
const res = await fetch('http://127.0.0.1:5000/api/exam/upload-question', {
|
||||
@@ -199,14 +282,15 @@ export default function EnhancedHostPanel() {
|
||||
const data = await res.json()
|
||||
|
||||
if (data.success) {
|
||||
alert(`✅ Enhanced question uploaded with ${validTestCases.length} test cases!`)
|
||||
alert(`✅ Enhanced question uploaded with ${validTestCases.length} test cases!\nTotal points: ${draft.total_points}`)
|
||||
setShowUploader(false)
|
||||
setDraft({ ...blankQuestion })
|
||||
fetchExamInfo()
|
||||
} else {
|
||||
alert(`❌ ${data.error}`)
|
||||
}
|
||||
} catch {
|
||||
} catch (err) {
|
||||
console.error('Upload error:', err)
|
||||
alert('❌ Network error')
|
||||
}
|
||||
}
|
||||
@@ -226,14 +310,14 @@ export default function EnhancedHostPanel() {
|
||||
}))
|
||||
}
|
||||
|
||||
const updateTestCase = (index: number, field: keyof TestCase, value: any) => {
|
||||
const updateTestCase = useCallback((index: number, field: keyof TestCase, value: any) => {
|
||||
setDraft(prev => ({
|
||||
...prev,
|
||||
test_cases: prev.test_cases.map((tc, i) =>
|
||||
i === index ? { ...tc, [field]: value } : tc
|
||||
)
|
||||
}))
|
||||
}
|
||||
}, [])
|
||||
|
||||
const removeTestCase = (index: number) => {
|
||||
if (draft.test_cases.length <= 1) {
|
||||
@@ -246,38 +330,173 @@ export default function EnhancedHostPanel() {
|
||||
}))
|
||||
}
|
||||
|
||||
/* ---------- Duration Update ---------- */
|
||||
const updateDuration = async () => {
|
||||
if (customDuration < 5) {
|
||||
alert('Minimum 5 minutes')
|
||||
return
|
||||
// Auto-distribute points when total points change
|
||||
const redistributePoints = () => {
|
||||
const pointsPerTest = Math.floor(draft.total_points / draft.test_cases.length)
|
||||
const remainder = draft.total_points % draft.test_cases.length
|
||||
|
||||
setDraft(prev => ({
|
||||
...prev,
|
||||
test_cases: prev.test_cases.map((tc, index) => ({
|
||||
...tc,
|
||||
points: pointsPerTest + (index < remainder ? 1 : 0)
|
||||
}))
|
||||
}))
|
||||
}
|
||||
|
||||
/* ---------- Exam Control Functions ---------- */
|
||||
const startExam = async () => {
|
||||
if (!examInfo?.problem_title) {
|
||||
alert('Please upload a question before starting the exam')
|
||||
return
|
||||
}
|
||||
|
||||
if (!confirm('Start the exam now? Participants will be able to submit solutions.')) return
|
||||
|
||||
try {
|
||||
const res = await fetch('http://127.0.0.1:5000/api/exam/update-duration', {
|
||||
const res = await fetch('http://127.0.0.1:5000/api/exam/start-exam', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ exam_code: examCode, duration_minutes: customDuration })
|
||||
body: JSON.stringify({ exam_code: examCode })
|
||||
})
|
||||
const data = await res.json()
|
||||
|
||||
if (data.success) {
|
||||
alert('✅ Duration updated')
|
||||
setShowDurationEdit(false)
|
||||
alert('✅ Exam started successfully!')
|
||||
fetchExamInfo()
|
||||
} else alert(`❌ ${data.error}`)
|
||||
} catch {
|
||||
alert('❌ Network error')
|
||||
} else {
|
||||
alert(`❌ ${data.error}`)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Start exam error:', err)
|
||||
alert('❌ Network error')
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Enhanced Question Upload Form ---------- */
|
||||
const stopExam = async () => {
|
||||
if (!confirm('Stop the exam immediately? This will end the exam for all participants.')) return
|
||||
|
||||
try {
|
||||
const res = await fetch('http://127.0.0.1:5000/api/exam/stop-exam', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ exam_code: examCode })
|
||||
})
|
||||
const data = await res.json()
|
||||
|
||||
if (data.success) {
|
||||
alert('✅ Exam stopped successfully!')
|
||||
fetchExamInfo()
|
||||
} else {
|
||||
alert(`❌ ${data.error}`)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Stop exam error:', err)
|
||||
alert('❌ Network error')
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- FIXED Test Case Editor Component ---------- */
|
||||
const TestCaseEditor = React.memo(({
|
||||
testCase,
|
||||
index,
|
||||
onUpdate,
|
||||
onRemove,
|
||||
canRemove
|
||||
}: {
|
||||
testCase: TestCase
|
||||
index: number
|
||||
onUpdate: (index: number, field: keyof TestCase, value: any) => void
|
||||
onRemove: (index: number) => void
|
||||
canRemove: boolean
|
||||
}) => {
|
||||
const handleInputChange = useCallback((field: keyof TestCase, value: any) => {
|
||||
onUpdate(index, field, value)
|
||||
}, [index, onUpdate])
|
||||
|
||||
return (
|
||||
<div className="bg-gray-900 p-4 rounded mb-3 border border-gray-700">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<span className="font-medium text-blue-300">Test Case {index + 1}</span>
|
||||
<div className="flex items-center space-x-3">
|
||||
<label className="flex items-center space-x-1">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={testCase.is_public}
|
||||
onChange={(e) => handleInputChange('is_public', e.target.checked)}
|
||||
className="rounded"
|
||||
/>
|
||||
<span className="text-sm">Public</span>
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={testCase.points}
|
||||
onChange={(e) => handleInputChange('points', parseInt(e.target.value) || 0)}
|
||||
className="w-20 p-1 bg-gray-700 rounded text-sm border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
placeholder="Points"
|
||||
min="0"
|
||||
autoComplete="off"
|
||||
/>
|
||||
{canRemove && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onRemove(index)}
|
||||
className="text-red-400 hover:text-red-300 text-sm"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">
|
||||
<div>
|
||||
<label className="block text-sm mb-1">Input:</label>
|
||||
<textarea
|
||||
value={testCase.input}
|
||||
onChange={(e) => handleInputChange('input', e.target.value)}
|
||||
className="w-full p-2 bg-gray-800 rounded text-sm border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"
|
||||
rows={2}
|
||||
placeholder="Test input (leave empty if none)"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm mb-1">Expected Output: <span className="text-red-400">*</span></label>
|
||||
<textarea
|
||||
value={testCase.expected_output}
|
||||
onChange={(e) => handleInputChange('expected_output', e.target.value)}
|
||||
className="w-full p-2 bg-gray-800 rounded text-sm border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"
|
||||
rows={2}
|
||||
placeholder="Expected output (required)"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
value={testCase.description}
|
||||
onChange={(e) => handleInputChange('description', e.target.value)}
|
||||
className="w-full p-2 bg-gray-800 rounded text-sm border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
placeholder="Test case description"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
/* ---------- FIXED Enhanced Question Upload Form ---------- */
|
||||
const EnhancedQuestionUploadForm = () => (
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className="bg-gray-800 rounded-lg p-6 mb-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h3 className="text-lg font-bold flex items-center space-x-2">
|
||||
<TestTube className="h-5 w-5 text-green-400" />
|
||||
<span>📝 Create Question with Dynamic Scoring</span>
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowUploader(false)}
|
||||
className="text-gray-400 hover:text-white"
|
||||
>
|
||||
@@ -289,24 +508,26 @@ export default function EnhancedHostPanel() {
|
||||
<div className="space-y-4 mb-6">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Question Title"
|
||||
placeholder="Question Title (e.g., 'Print Hello World')"
|
||||
value={draft.title}
|
||||
onChange={(e) => setDraft(prev => ({...prev, title: e.target.value}))}
|
||||
className="w-full p-3 bg-gray-700 rounded border border-gray-600"
|
||||
onChange={handleTitleChange}
|
||||
className="w-full p-3 bg-gray-700 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
autoComplete="off"
|
||||
/>
|
||||
|
||||
<textarea
|
||||
placeholder="Question Description"
|
||||
placeholder="Question Description (e.g., 'Write a program that prints Hello World')"
|
||||
value={draft.description}
|
||||
onChange={(e) => setDraft(prev => ({...prev, description: e.target.value}))}
|
||||
className="w-full p-3 bg-gray-700 rounded border border-gray-600 h-32"
|
||||
onChange={handleDescriptionChange}
|
||||
className="w-full p-3 bg-gray-700 rounded border border-gray-600 h-32 focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"
|
||||
autoComplete="off"
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<select
|
||||
value={draft.difficulty}
|
||||
onChange={(e) => setDraft(prev => ({...prev, difficulty: e.target.value as any}))}
|
||||
className="p-3 bg-gray-700 rounded border border-gray-600"
|
||||
onChange={handleDifficultyChange}
|
||||
className="p-3 bg-gray-700 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
>
|
||||
<option value="easy">Easy</option>
|
||||
<option value="medium">Medium</option>
|
||||
@@ -316,13 +537,62 @@ export default function EnhancedHostPanel() {
|
||||
<input
|
||||
type="number"
|
||||
value={draft.total_points}
|
||||
onChange={(e) => setDraft(prev => ({...prev, total_points: parseInt(e.target.value) || 100}))}
|
||||
className="p-3 bg-gray-700 rounded border border-gray-600"
|
||||
onChange={handleTotalPointsChange}
|
||||
className="p-3 bg-gray-700 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
placeholder="Total Points"
|
||||
min="1"
|
||||
autoComplete="off"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={redistributePoints}
|
||||
className="bg-purple-600 hover:bg-purple-700 px-3 py-2 rounded text-sm"
|
||||
title="Redistribute points evenly across test cases"
|
||||
>
|
||||
Redistribute Points
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Examples Section */}
|
||||
<div className="mb-6">
|
||||
<h4 className="font-medium mb-2 flex items-center space-x-2">
|
||||
<Award className="h-4 w-4 text-blue-400" />
|
||||
<span>📚 Examples (shown to participants):</span>
|
||||
</h4>
|
||||
{draft.examples.map((example, index) => (
|
||||
<div key={index} className="bg-gray-900 p-3 rounded mb-2 border border-gray-700">
|
||||
<div className="grid grid-cols-2 gap-3 mb-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Input"
|
||||
value={example.input}
|
||||
onChange={(e) => handleExampleChange(index, 'input', e.target.value)}
|
||||
className="p-2 bg-gray-800 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
autoComplete="off"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Expected Output"
|
||||
value={example.expected_output}
|
||||
onChange={(e) => handleExampleChange(index, 'expected_output', e.target.value)}
|
||||
className="p-2 bg-gray-800 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Description"
|
||||
value={example.description}
|
||||
onChange={(e) => handleExampleChange(index, 'description', e.target.value)}
|
||||
className="w-full p-2 bg-gray-800 rounded border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Host's Correct Solution */}
|
||||
<div className="mb-6">
|
||||
<h4 className="font-medium mb-2 flex items-center space-x-2">
|
||||
@@ -330,13 +600,12 @@ export default function EnhancedHostPanel() {
|
||||
<span>✅ Your Correct Solution (Python):</span>
|
||||
</h4>
|
||||
<textarea
|
||||
placeholder="Enter your correct solution here..."
|
||||
placeholder="Enter your correct solution here... (e.g., print('Hello World'))"
|
||||
value={draft.correct_solution.python}
|
||||
onChange={(e) => setDraft(prev => ({
|
||||
...prev,
|
||||
correct_solution: {...prev.correct_solution, python: e.target.value}
|
||||
}))}
|
||||
className="w-full p-3 bg-gray-900 text-green-400 font-mono rounded border border-gray-600 h-32"
|
||||
onChange={handleCorrectSolutionChange}
|
||||
className="w-full p-3 bg-gray-900 text-green-400 font-mono rounded border border-gray-600 h-32 focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none"
|
||||
autoComplete="off"
|
||||
spellCheck={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -348,6 +617,7 @@ export default function EnhancedHostPanel() {
|
||||
<span>🧪 Test Cases for Dynamic Scoring</span>
|
||||
</h4>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addTestCase}
|
||||
className="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded text-sm flex items-center space-x-1"
|
||||
>
|
||||
@@ -357,69 +627,14 @@ export default function EnhancedHostPanel() {
|
||||
</div>
|
||||
|
||||
{draft.test_cases.map((testCase, index) => (
|
||||
<div key={index} className="bg-gray-900 p-4 rounded mb-3 border border-gray-700">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<span className="font-medium text-blue-300">Test Case {index + 1}</span>
|
||||
<div className="flex items-center space-x-3">
|
||||
<label className="flex items-center space-x-1">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={testCase.is_public}
|
||||
onChange={(e) => updateTestCase(index, 'is_public', e.target.checked)}
|
||||
className="rounded"
|
||||
/>
|
||||
<span className="text-sm">Public</span>
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={testCase.points}
|
||||
onChange={(e) => updateTestCase(index, 'points', parseInt(e.target.value) || 0)}
|
||||
className="w-20 p-1 bg-gray-700 rounded text-sm border border-gray-600"
|
||||
placeholder="Points"
|
||||
/>
|
||||
{draft.test_cases.length > 1 && (
|
||||
<button
|
||||
onClick={() => removeTestCase(index)}
|
||||
className="text-red-400 hover:text-red-300 text-sm"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">
|
||||
<div>
|
||||
<label className="block text-sm mb-1">Input:</label>
|
||||
<textarea
|
||||
value={testCase.input}
|
||||
onChange={(e) => updateTestCase(index, 'input', e.target.value)}
|
||||
className="w-full p-2 bg-gray-800 rounded text-sm border border-gray-600"
|
||||
rows={2}
|
||||
placeholder="Test input (leave empty if none)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm mb-1">Expected Output: <span className="text-red-400">*</span></label>
|
||||
<textarea
|
||||
value={testCase.expected_output}
|
||||
onChange={(e) => updateTestCase(index, 'expected_output', e.target.value)}
|
||||
className="w-full p-2 bg-gray-800 rounded text-sm border border-gray-600"
|
||||
rows={2}
|
||||
placeholder="Expected output (required)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
value={testCase.description}
|
||||
onChange={(e) => updateTestCase(index, 'description', e.target.value)}
|
||||
className="w-full p-2 bg-gray-800 rounded text-sm border border-gray-600"
|
||||
placeholder="Test case description"
|
||||
/>
|
||||
</div>
|
||||
<TestCaseEditor
|
||||
key={index}
|
||||
testCase={testCase}
|
||||
index={index}
|
||||
onUpdate={updateTestCase}
|
||||
onRemove={removeTestCase}
|
||||
canRemove={draft.test_cases.length > 1}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Test Case Summary */}
|
||||
@@ -435,6 +650,7 @@ export default function EnhancedHostPanel() {
|
||||
{/* Upload Button */}
|
||||
<div className="flex space-x-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={uploadQuestion}
|
||||
className="bg-green-600 hover:bg-green-700 px-6 py-2 rounded flex items-center space-x-2"
|
||||
>
|
||||
@@ -442,6 +658,7 @@ export default function EnhancedHostPanel() {
|
||||
<span>📤 Upload Enhanced Question</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowUploader(false)}
|
||||
className="bg-gray-600 hover:bg-gray-700 px-6 py-2 rounded"
|
||||
>
|
||||
@@ -452,80 +669,99 @@ export default function EnhancedHostPanel() {
|
||||
)
|
||||
|
||||
/* ---------- Enhanced Participant Display ---------- */
|
||||
const EnhancedParticipantsList = () => (
|
||||
<div className="space-y-3">
|
||||
{participants.map((participant, index) => (
|
||||
<div key={index} className="bg-gray-800 p-4 rounded-lg border border-gray-700">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h4 className="font-medium">{participant.name}</h4>
|
||||
<div className="text-sm text-gray-400 space-x-4">
|
||||
<span>Joined: {new Date(participant.joined_at).toLocaleTimeString()}</span>
|
||||
{participant.completed && participant.submitted_at && (
|
||||
<span>Submitted: {new Date(participant.submitted_at).toLocaleTimeString()}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
{participant.completed ? (
|
||||
const EnhancedParticipantsList = () => {
|
||||
const allParticipants = [...leaderboardData.leaderboard, ...leaderboardData.waiting_participants]
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{allParticipants.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-400">
|
||||
<Users className="h-12 w-12 mx-auto mb-4 opacity-50" />
|
||||
<p>No participants yet</p>
|
||||
<p className="text-sm">Share the exam code: <span className="font-bold text-blue-400">{examCode}</span></p>
|
||||
</div>
|
||||
) : (
|
||||
allParticipants.map((participant, index) => (
|
||||
<div key={index} className="bg-gray-800 p-4 rounded-lg border border-gray-700">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<div className="text-lg font-bold text-green-400">{participant.score}%</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
{participant.passed_tests || 0}/{participant.total_tests || 1} tests
|
||||
<h4 className="font-medium flex items-center space-x-2">
|
||||
<span>{participant.name}</span>
|
||||
{participant.completed && (
|
||||
<span className="text-xs bg-green-600 px-2 py-1 rounded">Completed</span>
|
||||
)}
|
||||
{participant.rank && (
|
||||
<span className="text-xs bg-blue-600 px-2 py-1 rounded">Rank #{participant.rank}</span>
|
||||
)}
|
||||
</h4>
|
||||
<div className="text-sm text-gray-400 space-x-4">
|
||||
<span>Joined: {new Date(participant.joined_at).toLocaleTimeString()}</span>
|
||||
{participant.completed && participant.submitted_at && (
|
||||
<span>Submitted: {new Date(participant.submitted_at).toLocaleTimeString()}</span>
|
||||
)}
|
||||
{participant.language && (
|
||||
<span>Language: {participant.language}</span>
|
||||
)}
|
||||
</div>
|
||||
{participant.points_earned && participant.total_points && (
|
||||
<div className="text-xs text-blue-400">
|
||||
{participant.points_earned}/{participant.total_points} pts
|
||||
</div>
|
||||
<div className="text-right">
|
||||
{participant.completed ? (
|
||||
<div>
|
||||
<div className="text-lg font-bold text-green-400">{participant.score}%</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
{participant.passed_tests || 0}/{participant.total_tests || 1} tests
|
||||
</div>
|
||||
{participant.points_earned && participant.total_points && (
|
||||
<div className="text-xs text-blue-400">
|
||||
{participant.points_earned}/{participant.total_points} pts
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-yellow-400">Working...</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-yellow-400">Working...</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
|
||||
// Rest of your existing component logic (exam lifecycle, UI, etc.)
|
||||
const startExam = async () => {
|
||||
if (!confirm('Start the exam now?')) return
|
||||
try {
|
||||
const res = await fetch('http://127.0.0.1:5000/api/exam/start-exam', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ exam_code: examCode })
|
||||
})
|
||||
const data = await res.json()
|
||||
data.success ? fetchExamInfo() : alert(`❌ ${data.error}`)
|
||||
} catch {
|
||||
alert('❌ Network error')
|
||||
}
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const stopExam = async () => {
|
||||
if (!confirm('Stop the exam immediately?')) return
|
||||
try {
|
||||
const res = await fetch('http://127.0.0.1:5000/api/exam/stop-exam', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ exam_code: examCode })
|
||||
})
|
||||
const data = await res.json()
|
||||
data.success ? fetchExamInfo() : alert(`❌ ${data.error}`)
|
||||
} catch {
|
||||
alert('❌ Network error')
|
||||
}
|
||||
// Calculate time remaining for active exams
|
||||
const getTimeRemaining = () => {
|
||||
if (examInfo?.status !== 'active' || !examInfo.end_time) return null
|
||||
|
||||
const now = Date.now()
|
||||
const endTime = new Date(examInfo.end_time).getTime()
|
||||
const remaining = Math.max(0, Math.floor((endTime - now) / 1000))
|
||||
|
||||
const minutes = Math.floor(remaining / 60)
|
||||
const seconds = remaining % 60
|
||||
|
||||
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
// Real-time timer for active exams
|
||||
const [timeRemaining, setTimeRemaining] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (examInfo?.status === 'active' && examInfo.end_time) {
|
||||
const timer = setInterval(() => {
|
||||
setTimeRemaining(getTimeRemaining())
|
||||
}, 1000)
|
||||
|
||||
return () => clearInterval(timer)
|
||||
}
|
||||
}, [examInfo])
|
||||
|
||||
/* =========================== RENDER =========================== */
|
||||
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 mb-4"/>
|
||||
<p>Loading enhanced host panel …</p>
|
||||
<RefreshCw className="h-8 w-8 animate-spin mx-auto mb-4"/>
|
||||
<p>Loading enhanced host panel...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@@ -533,12 +769,14 @@ export default function EnhancedHostPanel() {
|
||||
if (error || !examInfo) return (
|
||||
<div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<AlertCircle className="h-10 w-10 text-red-500 mb-4"/>
|
||||
<AlertCircle className="h-10 w-10 text-red-500 mx-auto mb-4"/>
|
||||
<p className="mb-2">{error || 'Unknown error'}</p>
|
||||
<button
|
||||
className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded"
|
||||
onClick={fetchExamInfo}
|
||||
>Retry</button>
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@@ -554,22 +792,37 @@ export default function EnhancedHostPanel() {
|
||||
<span>Enhanced Host Panel</span>
|
||||
</h1>
|
||||
<p className="text-sm text-gray-400">
|
||||
Exam Code: {examCode} • Dynamic Scoring Enabled
|
||||
Exam Code: <span className="font-bold text-blue-400">{examCode}</span> • Dynamic Scoring Enabled
|
||||
{timeRemaining && (
|
||||
<span className="ml-4 text-orange-400">⏰ Time Remaining: {timeRemaining}</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<span 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()}
|
||||
</span>
|
||||
<div className="flex items-center space-x-3">
|
||||
<span 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()}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => {
|
||||
fetchExamInfo()
|
||||
fetchLeaderboard()
|
||||
}}
|
||||
className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded"
|
||||
title="Refresh"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Tabs */}
|
||||
<div className="flex space-x-1">
|
||||
{[
|
||||
{ id: 'overview', label: 'Overview', icon: Trophy },
|
||||
{ id: 'participants', label: 'Participants', icon: Users },
|
||||
{ id: 'participants', label: `Participants (${leaderboardData.stats.total_participants})`, icon: Users },
|
||||
{ id: 'questions', label: 'Questions', icon: TestTube }
|
||||
].map(tab => (
|
||||
<button
|
||||
@@ -603,27 +856,44 @@ export default function EnhancedHostPanel() {
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<div className="text-2xl font-bold text-blue-400">{participants.length}</div>
|
||||
<div className="text-2xl font-bold text-blue-400">
|
||||
{leaderboardData.stats.total_participants}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">Total Participants</div>
|
||||
</div>
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<div className="text-2xl font-bold text-green-400">
|
||||
{participants.filter(p => p.completed).length}
|
||||
{leaderboardData.stats.completed_submissions}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">Completed</div>
|
||||
</div>
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<div className="text-2xl font-bold text-purple-400">
|
||||
{Math.round(
|
||||
participants.filter(p => p.completed).reduce((sum, p) => sum + p.score, 0) /
|
||||
Math.max(participants.filter(p => p.completed).length, 1)
|
||||
)}%
|
||||
{Math.round(leaderboardData.stats.average_score)}%
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">Avg Score</div>
|
||||
</div>
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<div className="text-2xl font-bold text-orange-400">{examInfo.duration_minutes}m</div>
|
||||
<div className="text-sm text-gray-400">Duration</div>
|
||||
<div className="text-2xl font-bold text-orange-400">
|
||||
{leaderboardData.stats.highest_score}%
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">Highest Score</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional Stats */}
|
||||
<div className="mt-4 pt-4 border-t border-gray-700">
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span>Duration:</span>
|
||||
<span className="font-medium">{examInfo.duration_minutes}m</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Still Working:</span>
|
||||
<span className="font-medium text-yellow-400">
|
||||
{leaderboardData.stats.waiting_submissions}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -655,7 +925,7 @@ export default function EnhancedHostPanel() {
|
||||
className="w-full bg-yellow-600 hover:bg-yellow-700 p-3 rounded flex items-center justify-center space-x-2"
|
||||
>
|
||||
<Timer className="h-4 w-4" />
|
||||
<span>⏰ Edit Duration</span>
|
||||
<span>⏰ Edit Duration ({examInfo.duration_minutes}m)</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
@@ -681,8 +951,13 @@ export default function EnhancedHostPanel() {
|
||||
min="5"
|
||||
max="180"
|
||||
/>
|
||||
<span className="flex items-center text-sm text-gray-400">minutes</span>
|
||||
<button
|
||||
onClick={updateDuration}
|
||||
onClick={() => {
|
||||
// Update duration logic would go here
|
||||
setShowDurationEdit(false)
|
||||
alert('Duration update functionality needs backend endpoint')
|
||||
}}
|
||||
className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded"
|
||||
>
|
||||
Update
|
||||
@@ -701,14 +976,20 @@ export default function EnhancedHostPanel() {
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h3 className="text-lg font-bold flex items-center space-x-2">
|
||||
<Users className="h-5 w-5 text-blue-400" />
|
||||
<span>Enhanced Participants ({participants.length})</span>
|
||||
<span>Enhanced Participants ({leaderboardData.stats.total_participants})</span>
|
||||
</h3>
|
||||
<button
|
||||
onClick={fetchParticipants}
|
||||
className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</button>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="text-sm text-gray-400">
|
||||
Completed: {leaderboardData.stats.completed_submissions} |
|
||||
Working: {leaderboardData.stats.waiting_submissions}
|
||||
</div>
|
||||
<button
|
||||
onClick={fetchLeaderboard}
|
||||
className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<EnhancedParticipantsList />
|
||||
</div>
|
||||
@@ -734,17 +1015,53 @@ export default function EnhancedHostPanel() {
|
||||
|
||||
{examInfo.problem_title ? (
|
||||
<div className="bg-gray-900 p-4 rounded border border-green-600">
|
||||
<h4 className="font-medium text-green-400 mb-2">
|
||||
📝 {examInfo.problem_title}
|
||||
<h4 className="font-medium text-green-400 mb-2 flex items-center space-x-2">
|
||||
<TestTube className="h-4 w-4" />
|
||||
<span>📝 {examInfo.problem_title}</span>
|
||||
</h4>
|
||||
<p className="text-gray-300 text-sm mb-3">
|
||||
{examInfo.problem_description || 'No description available'}
|
||||
{examInfo.problem?.description || 'No description available'}
|
||||
</p>
|
||||
<div className="flex items-center space-x-4 text-sm text-gray-400">
|
||||
<span>✅ Dynamic scoring enabled</span>
|
||||
<span>🧪 Test case based</span>
|
||||
<span>🎯 Point distributed</span>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||
<div className="flex items-center space-x-2 text-gray-400">
|
||||
<span>✅</span>
|
||||
<span>Dynamic scoring enabled</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 text-gray-400">
|
||||
<span>🧪</span>
|
||||
<span>{examInfo.problem?.test_cases?.length || 0} test cases</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 text-gray-400">
|
||||
<span>🎯</span>
|
||||
<span>{examInfo.problem?.total_points || 100} total points</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 text-gray-400">
|
||||
<span>📊</span>
|
||||
<span>{examInfo.problem?.difficulty || 'medium'} difficulty</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Test Cases Preview */}
|
||||
{examInfo.problem?.test_cases && examInfo.problem.test_cases.length > 0 && (
|
||||
<div className="mt-4 pt-4 border-t border-gray-700">
|
||||
<h5 className="font-medium mb-2">Test Cases Preview:</h5>
|
||||
<div className="space-y-2">
|
||||
{examInfo.problem.test_cases.slice(0, 3).map((tc, index) => (
|
||||
<div key={index} className="bg-gray-800 p-2 rounded text-xs">
|
||||
<span className="text-blue-400">Test {index + 1}:</span>
|
||||
<span className="ml-2">{tc.expected_output || 'Hidden'}</span>
|
||||
<span className="ml-2 text-green-400">(+{tc.points} pts)</span>
|
||||
{tc.is_public && <span className="ml-2 text-yellow-400">[Public]</span>}
|
||||
</div>
|
||||
))}
|
||||
{examInfo.problem.test_cases.length > 3 && (
|
||||
<div className="text-xs text-gray-400">
|
||||
...and {examInfo.problem.test_cases.length - 3} more test cases
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8 text-gray-400">
|
||||
|
||||
Reference in New Issue
Block a user