mirror of
https://github.com/th30d4y/OpenLearnX.git
synced 2026-05-26 19:26:33 +00:00
some kinda
This commit is contained in:
5t4l1n
@@ -1,11 +1,441 @@
|
||||
import { CodingProblemView } from "@/components/coding-problem-view"
|
||||
'use client'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useRouter, useParams } from 'next/navigation'
|
||||
import { Play, Clock, CheckCircle, XCircle, ArrowLeft, Trophy } from 'lucide-react'
|
||||
|
||||
interface CodingProblemPageProps {
|
||||
params: {
|
||||
problemId: string
|
||||
interface TestCase {
|
||||
input: string
|
||||
expected: string
|
||||
description: string
|
||||
}
|
||||
|
||||
interface Problem {
|
||||
id: string
|
||||
title: string
|
||||
description: string
|
||||
difficulty: 'Easy' | 'Medium' | 'Hard'
|
||||
category: string
|
||||
examples: TestCase[]
|
||||
constraints: string[]
|
||||
hints: string[]
|
||||
starter_code: string
|
||||
function_name: string
|
||||
}
|
||||
|
||||
export default function ProblemPage() {
|
||||
const params = useParams()
|
||||
const router = useRouter()
|
||||
const problemId = params.problemId as string
|
||||
|
||||
const [problem, setProblem] = useState<Problem | null>(null)
|
||||
const [code, setCode] = useState('')
|
||||
const [output, setOutput] = useState('')
|
||||
const [testResults, setTestResults] = useState<any[]>([])
|
||||
const [isRunning, setIsRunning] = useState(false)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [showHints, setShowHints] = useState(false)
|
||||
const [activeTab, setActiveTab] = useState<'description' | 'examples' | 'constraints'>('description')
|
||||
|
||||
useEffect(() => {
|
||||
loadProblem(problemId)
|
||||
}, [problemId])
|
||||
|
||||
const loadProblem = async (id: string) => {
|
||||
try {
|
||||
// In a real app, this would fetch from your backend
|
||||
const problems: Record<string, Problem> = {
|
||||
'string-capitalizer': {
|
||||
id: 'string-capitalizer',
|
||||
title: 'String Capitalizer',
|
||||
description: 'Write a function that takes a string as input and returns the string converted to uppercase.',
|
||||
difficulty: 'Easy',
|
||||
category: 'String Manipulation',
|
||||
examples: [
|
||||
{ input: 'hello', expected: 'HELLO', description: 'Basic string conversion' },
|
||||
{ input: 'world', expected: 'WORLD', description: 'Another basic case' },
|
||||
{ input: 'Python Programming', expected: 'PYTHON PROGRAMMING', description: 'String with spaces' }
|
||||
],
|
||||
constraints: [
|
||||
'Input string length will be between 1 and 1000 characters',
|
||||
'Input may contain letters, numbers, and spaces',
|
||||
'Function must be named exactly "capitalize_string"'
|
||||
],
|
||||
hints: [
|
||||
'Python has a built-in method to convert strings to uppercase',
|
||||
'The upper() method can be used on any string',
|
||||
'Remember to return the result, not just print it'
|
||||
],
|
||||
starter_code: 'def capitalize_string(text):\n # Write your solution here\n pass',
|
||||
function_name: 'capitalize_string'
|
||||
},
|
||||
'reverse-string': {
|
||||
id: 'reverse-string',
|
||||
title: 'Reverse String',
|
||||
description: 'Write a function that takes a string and returns it reversed.',
|
||||
difficulty: 'Easy',
|
||||
category: 'String Manipulation',
|
||||
examples: [
|
||||
{ input: 'hello', expected: 'olleh', description: 'Basic string reversal' },
|
||||
{ input: 'python', expected: 'nohtyp', description: 'Another basic case' },
|
||||
{ input: 'OpenLearnX', expected: 'XnraeLnepO', description: 'Mixed case string' }
|
||||
],
|
||||
constraints: [
|
||||
'Input string length will be between 1 and 1000 characters',
|
||||
'Function must be named exactly "reverse_string"'
|
||||
],
|
||||
hints: [
|
||||
'Python strings can be sliced with [::-1]',
|
||||
'You can also use the reversed() function',
|
||||
'Remember to return the result'
|
||||
],
|
||||
starter_code: 'def reverse_string(text):\n # Write your solution here\n pass',
|
||||
function_name: 'reverse_string'
|
||||
},
|
||||
'fibonacci': {
|
||||
id: 'fibonacci',
|
||||
title: 'Fibonacci Sequence',
|
||||
description: 'Write a function that returns the nth number in the Fibonacci sequence.',
|
||||
difficulty: 'Medium',
|
||||
category: 'Algorithms',
|
||||
examples: [
|
||||
{ input: '0', expected: '0', description: 'First Fibonacci number' },
|
||||
{ input: '1', expected: '1', description: 'Second Fibonacci number' },
|
||||
{ input: '5', expected: '5', description: 'Sixth Fibonacci number (0,1,1,2,3,5)' }
|
||||
],
|
||||
constraints: [
|
||||
'n will be between 0 and 30',
|
||||
'Function must be named exactly "fibonacci"',
|
||||
'Should handle edge cases for n=0 and n=1'
|
||||
],
|
||||
hints: [
|
||||
'Base cases: fib(0) = 0, fib(1) = 1',
|
||||
'For n > 1: fib(n) = fib(n-1) + fib(n-2)',
|
||||
'Consider using iteration instead of recursion for better performance'
|
||||
],
|
||||
starter_code: 'def fibonacci(n):\n # Write your solution here\n pass',
|
||||
function_name: 'fibonacci'
|
||||
}
|
||||
}
|
||||
|
||||
const selectedProblem = problems[id]
|
||||
if (selectedProblem) {
|
||||
setProblem(selectedProblem)
|
||||
setCode(selectedProblem.starter_code)
|
||||
} else {
|
||||
// Problem not found
|
||||
router.push('/coding')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load problem:', error)
|
||||
router.push('/coding')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default function CodingProblemPage({ params }: CodingProblemPageProps) {
|
||||
return <CodingProblemView problemId={params.problemId} />
|
||||
const runCode = async () => {
|
||||
if (!problem || !code.trim()) return
|
||||
|
||||
setIsRunning(true)
|
||||
setOutput('')
|
||||
setTestResults([])
|
||||
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/coding/execute', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
code,
|
||||
language: 'python',
|
||||
problem_id: problem.id,
|
||||
test_cases: problem.examples
|
||||
})
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (result.success) {
|
||||
setOutput(result.output || '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 (!problem || !code.trim()) return
|
||||
|
||||
setIsSubmitting(true)
|
||||
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/coding/submit', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
code,
|
||||
problem_id: problem.id
|
||||
})
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (result.success) {
|
||||
alert(`Solution submitted! Score: ${result.score}% (${result.passed_tests}/${result.total_tests} tests passed)`)
|
||||
} else {
|
||||
alert(`Submission failed: ${result.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Failed to submit solution')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const getDifficultyColor = (difficulty: string) => {
|
||||
switch (difficulty) {
|
||||
case 'Easy': return 'text-green-600 bg-green-100'
|
||||
case 'Medium': return 'text-yellow-600 bg-yellow-100'
|
||||
case 'Hard': return 'text-red-600 bg-red-100'
|
||||
default: return 'text-gray-600 bg-gray-100'
|
||||
}
|
||||
}
|
||||
|
||||
if (!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 problem...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
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-7xl mx-auto flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
|
||||
>
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
</button>
|
||||
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">{problem.title}</h1>
|
||||
<div className="flex items-center space-x-3 mt-1">
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getDifficultyColor(problem.difficulty)}`}>
|
||||
{problem.difficulty}
|
||||
</span>
|
||||
<span className="text-gray-400 text-sm">{problem.category}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<button
|
||||
onClick={() => setShowHints(!showHints)}
|
||||
className="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 rounded-lg text-sm transition-colors"
|
||||
>
|
||||
{showHints ? 'Hide Hints' : 'Show Hints'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => router.push('/coding/exam')}
|
||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm transition-colors flex items-center space-x-2"
|
||||
>
|
||||
<Trophy className="h-4 w-4" />
|
||||
<span>Join Exam</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto p-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Problem Description */}
|
||||
<div className="space-y-6">
|
||||
{/* Navigation Tabs */}
|
||||
<div className="bg-gray-800 rounded-lg">
|
||||
<div className="flex border-b border-gray-700">
|
||||
{(['description', 'examples', 'constraints'] as const).map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
className={`px-6 py-3 font-medium capitalize transition-colors ${
|
||||
activeTab === tab
|
||||
? 'bg-gray-700 text-white border-b-2 border-blue-500'
|
||||
: 'text-gray-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{tab}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
{activeTab === 'description' && (
|
||||
<div className="prose prose-invert max-w-none">
|
||||
<p className="text-gray-300 leading-relaxed">{problem.description}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'examples' && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Examples:</h3>
|
||||
{problem.examples.map((example, index) => (
|
||||
<div key={index} className="bg-gray-900 p-4 rounded-lg">
|
||||
<div className="mb-2">
|
||||
<span className="text-blue-400">Input:</span>
|
||||
<code className="ml-2 text-green-400">"{example.input}"</code>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<span className="text-blue-400">Output:</span>
|
||||
<code className="ml-2 text-green-400">"{example.expected}"</code>
|
||||
</div>
|
||||
<div className="text-gray-400 text-sm">{example.description}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'constraints' && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Constraints:</h3>
|
||||
<ul className="space-y-2">
|
||||
{problem.constraints.map((constraint, index) => (
|
||||
<li key={index} className="flex items-start space-x-2">
|
||||
<span className="text-blue-400 mt-1">•</span>
|
||||
<span className="text-gray-300">{constraint}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hints Section */}
|
||||
{showHints && (
|
||||
<div className="bg-yellow-900 border border-yellow-600 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold mb-4 text-yellow-300">💡 Hints:</h3>
|
||||
<ul className="space-y-2">
|
||||
{problem.hints.map((hint, index) => (
|
||||
<li key={index} className="flex items-start space-x-2">
|
||||
<span className="text-yellow-400 mt-1">{index + 1}.</span>
|
||||
<span className="text-yellow-100">{hint}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Code Editor & Results */}
|
||||
<div className="space-y-6">
|
||||
{/* 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">Code Editor</h3>
|
||||
<span className="text-sm text-gray-400">Python</span>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
className="w-full h-80 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"
|
||||
spellCheck={false}
|
||||
/>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-3">
|
||||
<button
|
||||
onClick={runCode}
|
||||
disabled={isRunning || !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...' : 'Run Code'}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={submitSolution}
|
||||
disabled={isSubmitting || !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"
|
||||
>
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
<span>{isSubmitting ? 'Submitting...' : 'Submit'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Output & Test Results */}
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<h3 className="text-lg font-bold mb-4">Output & Test Results</h3>
|
||||
|
||||
{/* Console Output */}
|
||||
{output && (
|
||||
<div className="mb-4">
|
||||
<h4 className="text-sm font-medium text-gray-400 mb-2">Console Output:</h4>
|
||||
<div className="bg-black p-4 rounded font-mono text-sm">
|
||||
<pre className="text-green-400 whitespace-pre-wrap">{output}</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Test Results */}
|
||||
{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 flex items-center justify-between ${
|
||||
result.passed ? 'bg-green-900 border border-green-600' : 'bg-red-900 border border-red-600'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
{result.passed ? (
|
||||
<CheckCircle className="h-4 w-4 text-green-400" />
|
||||
) : (
|
||||
<XCircle className="h-4 w-4 text-red-400" />
|
||||
)}
|
||||
<span className="text-sm">Test {index + 1}</span>
|
||||
</div>
|
||||
|
||||
<div className="text-right text-sm">
|
||||
{result.passed ? (
|
||||
<span className="text-green-400">Passed</span>
|
||||
) : (
|
||||
<span className="text-red-400">Failed: {result.error}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!output && testResults.length === 0 && (
|
||||
<div className="text-center text-gray-400 py-8">
|
||||
<Clock className="h-8 w-8 mx-auto mb-2 opacity-50" />
|
||||
<p>Run your code to see output and test results</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,312 @@
|
||||
'use client'
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
export default function CreateExam() {
|
||||
const [examData, setExamData] = useState({
|
||||
title: 'String Capitalizer Challenge',
|
||||
host_name: '',
|
||||
duration_minutes: 30,
|
||||
max_participants: 50,
|
||||
problem_id: 'string-capitalizer'
|
||||
})
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [result, setResult] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const router = useRouter()
|
||||
|
||||
const handleInputChange = (field: string, value: any) => {
|
||||
setExamData(prev => ({
|
||||
...prev,
|
||||
[field]: value
|
||||
}))
|
||||
setError('')
|
||||
}
|
||||
|
||||
const createExam = async () => {
|
||||
// Clear previous messages
|
||||
setError('')
|
||||
setResult('')
|
||||
|
||||
// Validation
|
||||
if (!examData.title.trim()) {
|
||||
setError('Please enter exam title')
|
||||
return
|
||||
}
|
||||
|
||||
if (!examData.host_name.trim()) {
|
||||
setError('Please enter host name')
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
setResult('⏳ Creating exam...')
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
title: examData.title.trim(),
|
||||
problem_id: examData.problem_id,
|
||||
duration_minutes: examData.duration_minutes,
|
||||
host_name: examData.host_name.trim(),
|
||||
max_participants: examData.max_participants
|
||||
}
|
||||
|
||||
console.log('📤 Sending payload:', payload)
|
||||
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/create-exam', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
})
|
||||
|
||||
console.log('📡 Response status:', response.status)
|
||||
|
||||
const data = await response.json()
|
||||
console.log('📦 Full backend response:', data)
|
||||
|
||||
if (data.success) {
|
||||
// ✅ ENHANCED DEBUGGING - Log all fields
|
||||
console.log('🔍 All response fields:', Object.keys(data))
|
||||
console.log('📝 exam_code field:', data.exam_code)
|
||||
console.log('🗄️ exam_id field:', data.exam_id)
|
||||
console.log('📋 exam_details:', data.exam_details)
|
||||
|
||||
// ✅ CORRECTED: Use exam_code, NOT exam_id
|
||||
const participantCode = data.exam_code // This should be "JEX99M"
|
||||
const databaseId = data.exam_id // This is the MongoDB ObjectId
|
||||
|
||||
console.log('📝 Participant Code (CORRECT for sharing):', participantCode)
|
||||
console.log('🗄️ Database ID (internal only):', databaseId)
|
||||
|
||||
// ✅ ENHANCED: Check if exam_code exists
|
||||
if (!participantCode) {
|
||||
console.error('❌ ERROR: exam_code is missing from response!')
|
||||
setError('Backend did not return exam_code. Check backend logs.')
|
||||
return
|
||||
}
|
||||
|
||||
// ✅ SIMPLIFIED SUCCESS MESSAGE - Easier to spot issues
|
||||
const simpleAlert = `Exam created! Share this code with participants: ${participantCode}`
|
||||
|
||||
// ✅ DETAILED SUCCESS MESSAGE for result display
|
||||
const successMessage = `🎉 EXAM CREATED SUCCESSFULLY!
|
||||
|
||||
📝 EXAM CODE FOR PARTICIPANTS:
|
||||
┌─────────────────┐
|
||||
│ ${participantCode} │
|
||||
└─────────────────┘
|
||||
|
||||
📋 Exam Details:
|
||||
• Title: ${data.exam_details?.title || examData.title}
|
||||
• Duration: ${data.exam_details?.duration || examData.duration_minutes} minutes
|
||||
• Max Participants: ${data.exam_details?.max_participants || examData.max_participants}
|
||||
• Host: ${examData.host_name}
|
||||
• Languages: ${data.exam_details?.languages?.join(', ') || 'Python'}
|
||||
|
||||
🔗 Share this code with participants: ${participantCode}
|
||||
📱 Join URL: localhost:3000/coding/join
|
||||
|
||||
⚠️ IMPORTANT: Give participants "${participantCode}",
|
||||
NOT the database ID "${databaseId}"!
|
||||
|
||||
✅ Participants will use: ${participantCode}`
|
||||
|
||||
setResult(successMessage)
|
||||
|
||||
// ✅ SIMPLE ALERT - This should show the correct code
|
||||
alert(simpleAlert)
|
||||
|
||||
// ✅ ADDITIONAL PROMINENT ALERT
|
||||
setTimeout(() => {
|
||||
alert(`✅ EXAM CODE: ${participantCode}
|
||||
|
||||
Share this 6-character code with participants.
|
||||
They will enter: ${participantCode}`)
|
||||
}, 500)
|
||||
|
||||
// Store the correct exam code for host dashboard
|
||||
localStorage.setItem('created_exam', JSON.stringify({
|
||||
exam_code: participantCode, // 6-character code for participants
|
||||
exam_id: databaseId, // Internal database ID
|
||||
exam_details: data.exam_details,
|
||||
host_name: examData.host_name,
|
||||
created_at: new Date().toISOString()
|
||||
}))
|
||||
|
||||
// Redirect to host dashboard after 5 seconds (increased time)
|
||||
setTimeout(() => {
|
||||
router.push(`/coding/host/${participantCode}`)
|
||||
}, 5000)
|
||||
|
||||
} else {
|
||||
setError(data.error || 'Failed to create exam')
|
||||
setResult('')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ Network error:', error)
|
||||
setError('Network error: Could not connect to backend server')
|
||||
setResult('')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-green-900 via-blue-900 to-purple-900 flex items-center justify-center p-4">
|
||||
<div className="bg-white rounded-xl shadow-2xl p-8 w-full max-w-2xl">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="w-16 h-16 bg-gradient-to-r from-green-600 to-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">Create Coding Exam</h1>
|
||||
<p className="text-gray-600">Set up a new coding challenge for participants</p>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Exam Title
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={examData.title}
|
||||
onChange={(e) => handleInputChange('title', e.target.value)}
|
||||
placeholder="Enter exam title"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Host/Instructor Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={examData.host_name}
|
||||
onChange={(e) => handleInputChange('host_name', e.target.value)}
|
||||
placeholder="Enter your name"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Duration (minutes)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={examData.duration_minutes}
|
||||
onChange={(e) => handleInputChange('duration_minutes', parseInt(e.target.value) || 30)}
|
||||
min="5"
|
||||
max="180"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Max Participants
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={examData.max_participants}
|
||||
onChange={(e) => handleInputChange('max_participants', parseInt(e.target.value) || 50)}
|
||||
min="1"
|
||||
max="200"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={createExam}
|
||||
disabled={loading || !examData.title.trim() || !examData.host_name.trim()}
|
||||
className="w-full bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white font-semibold py-3 px-4 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
||||
>
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent mr-2"></div>
|
||||
Creating Exam...
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<svg className="inline h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
|
||||
</svg>
|
||||
Create Exam
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<div className="mt-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm flex items-start">
|
||||
<svg className="h-4 w-4 mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Success Result Display */}
|
||||
{result && (
|
||||
<div className="mt-6 p-6 bg-green-50 border border-green-200 text-green-700 rounded-lg whitespace-pre-line text-sm">
|
||||
{result}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Enhanced Debug Info */}
|
||||
<div className="mt-6 p-4 bg-gray-50 rounded-lg text-xs">
|
||||
<p className="text-gray-500 mb-2">Debug Info:</p>
|
||||
<p className="text-gray-400">Title: "{examData.title}"</p>
|
||||
<p className="text-gray-400">Host: "{examData.host_name}"</p>
|
||||
<p className="text-gray-400">Duration: {examData.duration_minutes} minutes</p>
|
||||
<p className="text-green-600 font-medium">✅ Will show exam_code (6 chars), NOT exam_id</p>
|
||||
<p className="text-blue-600 font-medium">🔍 Check browser console for detailed logs</p>
|
||||
</div>
|
||||
|
||||
{/* Features Info */}
|
||||
<div className="mt-6 pt-6 border-t border-gray-200">
|
||||
<h3 className="text-sm font-medium text-gray-700 mb-3">Exam Features:</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-gray-600">
|
||||
<div className="flex items-center">
|
||||
<svg className="h-4 w-4 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Real-time participant tracking
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<svg className="h-4 w-4 text-blue-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
Live leaderboard
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<svg className="h-4 w-4 text-purple-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m18 4l4 4-4 4M6 16l-4-4 4-4" />
|
||||
</svg>
|
||||
Multi-language support
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<svg className="h-4 w-4 text-yellow-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Timed exam sessions
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,547 @@
|
||||
'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>({})
|
||||
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])
|
||||
|
||||
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 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 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 */}
|
||||
<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>
|
||||
</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,597 @@
|
||||
'use client'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useParams, useRouter } from 'next/navigation'
|
||||
import {
|
||||
Users, Trophy, Clock, Play, Square, UserX, AlertTriangle,
|
||||
RefreshCw, Settings, BarChart, Eye, Trash2, Plus, Timer
|
||||
} from 'lucide-react'
|
||||
|
||||
interface Participant {
|
||||
name: string
|
||||
joined_at: string
|
||||
score: number
|
||||
completed: boolean
|
||||
language?: string
|
||||
submission_time?: string
|
||||
rank?: number
|
||||
kicked?: boolean
|
||||
}
|
||||
|
||||
interface ExamData {
|
||||
exam_info: {
|
||||
exam_code: string
|
||||
title: string
|
||||
status: string
|
||||
duration_minutes: number
|
||||
max_participants: number
|
||||
time_elapsed: number
|
||||
time_remaining: number
|
||||
start_time?: string
|
||||
end_time?: string
|
||||
}
|
||||
participants: {
|
||||
total: number
|
||||
completed: number
|
||||
working: number
|
||||
all_participants: Participant[]
|
||||
recent_joins: Participant[]
|
||||
}
|
||||
leaderboard: Participant[]
|
||||
statistics: {
|
||||
average_score: number
|
||||
highest_score: number
|
||||
lowest_score: number
|
||||
completion_rate: number
|
||||
}
|
||||
}
|
||||
|
||||
export default function HostDashboard() {
|
||||
const params = useParams()
|
||||
const router = useRouter()
|
||||
const examCode = params.examCode as string
|
||||
|
||||
const [examData, setExamData] = useState<ExamData | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [activeTab, setActiveTab] = useState<'overview' | 'participants' | 'leaderboard' | 'settings'>('overview')
|
||||
const [selectedParticipant, setSelectedParticipant] = useState<string | null>(null)
|
||||
const [showKickModal, setShowKickModal] = useState(false)
|
||||
const [refreshInterval, setRefreshInterval] = useState(3000) // 3 seconds
|
||||
|
||||
useEffect(() => {
|
||||
if (!examCode) return
|
||||
|
||||
fetchDashboardData()
|
||||
const interval = setInterval(fetchDashboardData, refreshInterval)
|
||||
return () => clearInterval(interval)
|
||||
}, [examCode, refreshInterval])
|
||||
|
||||
const fetchDashboardData = async () => {
|
||||
try {
|
||||
const response = await fetch(`http://127.0.0.1:5000/api/exam/host-dashboard/${examCode}`)
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success) {
|
||||
setExamData(data)
|
||||
} else {
|
||||
console.error('Failed to fetch dashboard data:', data.error)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching dashboard data:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const startExam = async () => {
|
||||
try {
|
||||
const response = 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 response.json()
|
||||
if (data.success) {
|
||||
alert('Exam started successfully!')
|
||||
fetchDashboardData()
|
||||
} else {
|
||||
alert(`Failed to start exam: ${data.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Failed to start exam')
|
||||
}
|
||||
}
|
||||
|
||||
const endExam = async () => {
|
||||
if (!confirm('Are you sure you want to end the exam? This cannot be undone.')) return
|
||||
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/end-exam', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ exam_code: examCode })
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
alert('Exam ended successfully!')
|
||||
fetchDashboardData()
|
||||
} else {
|
||||
alert(`Failed to end exam: ${data.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Failed to end exam')
|
||||
}
|
||||
}
|
||||
|
||||
const extendExam = async (minutes: number) => {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/extend-exam', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
exam_code: examCode,
|
||||
additional_minutes: minutes
|
||||
})
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
alert(`Exam extended by ${minutes} minutes!`)
|
||||
fetchDashboardData()
|
||||
} else {
|
||||
alert(`Failed to extend exam: ${data.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Failed to extend exam')
|
||||
}
|
||||
}
|
||||
|
||||
const removeParticipant = async (participantName: string) => {
|
||||
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', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
exam_code: examCode,
|
||||
participant_name: participantName
|
||||
})
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
alert(`Participant "${participantName}" removed successfully!`)
|
||||
fetchDashboardData()
|
||||
setShowKickModal(false)
|
||||
setSelectedParticipant(null)
|
||||
} else {
|
||||
alert(`Failed to remove participant: ${data.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Failed to remove participant')
|
||||
}
|
||||
}
|
||||
|
||||
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-100 text-yellow-800'
|
||||
case 'active': return 'bg-green-100 text-green-800'
|
||||
case 'completed': return 'bg-gray-100 text-gray-800'
|
||||
default: return 'bg-gray-100 text-gray-800'
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
|
||||
<p className="mt-2 text-gray-400">Loading host dashboard...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!examData) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<AlertTriangle className="h-12 w-12 text-red-400 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-bold mb-2">Exam Not Found</h2>
|
||||
<p className="text-gray-400">The exam code "{examCode}" is invalid or expired.</p>
|
||||
<button
|
||||
onClick={() => router.push('/coding/create')}
|
||||
className="mt-4 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded"
|
||||
>
|
||||
Create New Exam
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-white">
|
||||
{/* Header */}
|
||||
<div className="bg-gray-800 border-b border-gray-700 p-6">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">{examData.exam_info.title}</h1>
|
||||
<div className="flex items-center space-x-4 mt-2">
|
||||
<span className="text-lg font-mono font-bold text-blue-400">
|
||||
CODE: {examData.exam_info.exam_code}
|
||||
</span>
|
||||
<span className={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(examData.exam_info.status)}`}>
|
||||
{examData.exam_info.status.toUpperCase()}
|
||||
</span>
|
||||
<span className="text-gray-400">
|
||||
{examData.participants.total}/{examData.exam_info.max_participants} participants
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
{/* Timer */}
|
||||
{examData.exam_info.status === 'active' && examData.exam_info.time_remaining > 0 && (
|
||||
<div className="flex items-center space-x-2 bg-red-900 px-4 py-2 rounded-lg">
|
||||
<Clock className="h-5 w-5 text-red-400" />
|
||||
<span className="font-mono text-lg">{formatTime(examData.exam_info.time_remaining)}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Control Buttons */}
|
||||
{examData.exam_info.status === 'waiting' && (
|
||||
<button
|
||||
onClick={startExam}
|
||||
className="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg flex items-center space-x-2"
|
||||
>
|
||||
<Play className="h-4 w-4" />
|
||||
<span>Start Exam</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{examData.exam_info.status === 'active' && (
|
||||
<div className="flex space-x-2">
|
||||
<button
|
||||
onClick={() => extendExam(10)}
|
||||
className="bg-yellow-600 hover:bg-yellow-700 px-3 py-2 rounded flex items-center space-x-1"
|
||||
>
|
||||
<Timer className="h-4 w-4" />
|
||||
<span>+10min</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={endExam}
|
||||
className="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg flex items-center space-x-2"
|
||||
>
|
||||
<Square className="h-4 w-4" />
|
||||
<span>End Exam</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={fetchDashboardData}
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto p-6">
|
||||
{/* Tab Navigation */}
|
||||
<div className="flex space-x-1 mb-6">
|
||||
{[
|
||||
{ id: 'overview', label: 'Overview', icon: BarChart },
|
||||
{ id: 'participants', label: 'Participants', icon: Users },
|
||||
{ id: 'leaderboard', label: 'Leaderboard', icon: Trophy },
|
||||
{ id: 'settings', label: 'Settings', icon: Settings }
|
||||
].map(tab => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id as any)}
|
||||
className={`px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors ${
|
||||
activeTab === tab.id
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
<tab.icon className="h-4 w-4" />
|
||||
<span>{tab.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Tab Content */}
|
||||
{activeTab === 'overview' && (
|
||||
<div className="space-y-6">
|
||||
{/* Statistics Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<div className="bg-gray-800 p-6 rounded-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-400">Total Participants</h3>
|
||||
<p className="text-3xl font-bold text-blue-400">{examData.participants.total}</p>
|
||||
</div>
|
||||
<Users className="h-8 w-8 text-blue-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 p-6 rounded-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-400">Completed</h3>
|
||||
<p className="text-3xl font-bold text-green-400">{examData.participants.completed}</p>
|
||||
</div>
|
||||
<Trophy className="h-8 w-8 text-green-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 p-6 rounded-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-400">Still Working</h3>
|
||||
<p className="text-3xl font-bold text-yellow-400">{examData.participants.working}</p>
|
||||
</div>
|
||||
<Clock className="h-8 w-8 text-yellow-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 p-6 rounded-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-400">Average Score</h3>
|
||||
<p className="text-3xl font-bold text-purple-400">
|
||||
{Math.round(examData.statistics.average_score)}%
|
||||
</p>
|
||||
</div>
|
||||
<BarChart className="h-8 w-8 text-purple-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent Activity */}
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<h3 className="text-lg font-bold mb-4">Recent Participants</h3>
|
||||
<div className="space-y-2">
|
||||
{examData.participants.recent_joins.slice(0, 5).map((participant, index) => (
|
||||
<div key={participant.name} className="flex items-center justify-between p-3 bg-gray-700 rounded">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-sm font-bold">
|
||||
{participant.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium">{participant.name}</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
Joined {new Date(participant.joined_at).toLocaleTimeString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className={`px-2 py-1 rounded text-xs ${
|
||||
participant.completed ? 'bg-green-900 text-green-200' : 'bg-yellow-900 text-yellow-200'
|
||||
}`}>
|
||||
{participant.completed ? `${participant.score}% completed` : 'Working'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'participants' && (
|
||||
<div className="bg-gray-800 rounded-lg overflow-hidden">
|
||||
<div className="p-6 border-b border-gray-700">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-lg font-bold">All Participants ({examData.participants.total})</h3>
|
||||
<div className="text-sm text-gray-400">
|
||||
Completion Rate: {Math.round(examData.statistics.completion_rate)}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-700">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Participant</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Status</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Score</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Language</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Joined</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-700">
|
||||
{examData.participants.all_participants.map((participant) => (
|
||||
<tr key={participant.name} className="hover:bg-gray-700">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-sm font-bold mr-3">
|
||||
{participant.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div className="font-medium">{participant.name}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
participant.completed
|
||||
? 'bg-green-900 text-green-200'
|
||||
: participant.kicked
|
||||
? 'bg-red-900 text-red-200'
|
||||
: 'bg-yellow-900 text-yellow-200'
|
||||
}`}>
|
||||
{participant.kicked ? 'Kicked' : participant.completed ? 'Completed' : 'Working'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
|
||||
{participant.completed ? `${participant.score}%` : '-'}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
|
||||
{participant.language || '-'}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
|
||||
{new Date(participant.joined_at).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
||||
<div className="flex space-x-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedParticipant(participant.name)
|
||||
setShowKickModal(true)
|
||||
}}
|
||||
className="text-red-400 hover:text-red-300"
|
||||
title="Remove Participant"
|
||||
>
|
||||
<UserX className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'leaderboard' && (
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<h3 className="text-lg font-bold mb-6">Live Leaderboard</h3>
|
||||
<div className="space-y-3">
|
||||
{examData.leaderboard.map((participant, index) => {
|
||||
const rankColors = {
|
||||
1: 'bg-gradient-to-r from-yellow-600 to-yellow-500 text-white',
|
||||
2: 'bg-gradient-to-r from-gray-400 to-gray-500 text-white',
|
||||
3: 'bg-gradient-to-r from-orange-600 to-orange-500 text-white'
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={participant.name}
|
||||
className={`p-4 rounded-lg ${
|
||||
rankColors[participant.rank as keyof typeof rankColors] || 'bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="text-2xl font-bold">#{participant.rank}</div>
|
||||
<div>
|
||||
<div className="font-bold text-lg">{participant.name}</div>
|
||||
<div className="text-sm opacity-75">
|
||||
{participant.language && `${participant.language} • `}
|
||||
Submitted: {new Date(participant.submission_time!).toLocaleTimeString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-2xl font-bold">{participant.score}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'settings' && (
|
||||
<div className="space-y-6">
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<h3 className="text-lg font-bold mb-4">Exam Controls</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<button
|
||||
onClick={() => extendExam(5)}
|
||||
disabled={examData.exam_info.status !== 'active'}
|
||||
className="bg-yellow-600 hover:bg-yellow-700 disabled:bg-gray-600 px-4 py-2 rounded text-left"
|
||||
>
|
||||
<div className="font-medium">Extend by 5 minutes</div>
|
||||
<div className="text-sm opacity-75">Add more time to the exam</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => extendExam(15)}
|
||||
disabled={examData.exam_info.status !== 'active'}
|
||||
className="bg-yellow-600 hover:bg-yellow-700 disabled:bg-gray-600 px-4 py-2 rounded text-left"
|
||||
>
|
||||
<div className="font-medium">Extend by 15 minutes</div>
|
||||
<div className="text-sm opacity-75">Add significant extra time</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={endExam}
|
||||
disabled={examData.exam_info.status !== 'active'}
|
||||
className="bg-red-600 hover:bg-red-700 disabled:bg-gray-600 px-4 py-2 rounded text-left"
|
||||
>
|
||||
<div className="font-medium">End Exam Early</div>
|
||||
<div className="text-sm opacity-75">Stop the exam immediately</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<h3 className="text-lg font-bold mb-4">Auto-Refresh Settings</h3>
|
||||
<div className="flex items-center space-x-4">
|
||||
<label className="text-sm font-medium">Update Interval:</label>
|
||||
<select
|
||||
value={refreshInterval}
|
||||
onChange={(e) => setRefreshInterval(Number(e.target.value))}
|
||||
className="bg-gray-700 border border-gray-600 rounded px-3 py-1 text-sm"
|
||||
>
|
||||
<option value={1000}>1 second</option>
|
||||
<option value={3000}>3 seconds</option>
|
||||
<option value={5000}>5 seconds</option>
|
||||
<option value={10000}>10 seconds</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Kick Participant Modal */}
|
||||
{showKickModal && selectedParticipant && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-gray-800 rounded-lg p-6 w-full max-w-md">
|
||||
<h3 className="text-lg font-bold mb-4">Remove Participant</h3>
|
||||
<p className="text-gray-300 mb-6">
|
||||
Are you sure you want to remove <strong>"{selectedParticipant}"</strong> from the exam?
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
<div className="flex justify-end space-x-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowKickModal(false)
|
||||
setSelectedParticipant(null)
|
||||
}}
|
||||
className="px-4 py-2 bg-gray-600 hover:bg-gray-700 rounded"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => removeParticipant(selectedParticipant)}
|
||||
className="px-4 py-2 bg-red-600 hover:bg-red-700 rounded"
|
||||
>
|
||||
Remove Participant
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,330 @@
|
||||
'use client'
|
||||
import React, { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { Wallet, Shield, Code, AlertCircle, CheckCircle } from 'lucide-react'
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
ethereum?: any
|
||||
}
|
||||
}
|
||||
|
||||
export default function JoinExamWallet() {
|
||||
const [examCode, setExamCode] = useState('')
|
||||
const [studentName, setStudentName] = useState('')
|
||||
const [walletAddress, setWalletAddress] = useState('')
|
||||
const [isConnecting, setIsConnecting] = useState(false)
|
||||
const [isJoining, setIsJoining] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [step, setStep] = useState<'connect' | 'auth' | 'join'>('connect')
|
||||
const [authMessage, setAuthMessage] = useState('')
|
||||
const router = useRouter()
|
||||
|
||||
const connectWallet = async () => {
|
||||
if (!window.ethereum) {
|
||||
setError('MetaMask is not installed. Please install MetaMask to continue.')
|
||||
return
|
||||
}
|
||||
|
||||
setIsConnecting(true)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
const accounts = await window.ethereum.request({
|
||||
method: 'eth_requestAccounts'
|
||||
})
|
||||
|
||||
if (accounts.length > 0) {
|
||||
setWalletAddress(accounts[0])
|
||||
setStep('auth')
|
||||
}
|
||||
} catch (error: any) {
|
||||
setError('Failed to connect wallet: ' + error.message)
|
||||
} finally {
|
||||
setIsConnecting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const getAuthMessage = async () => {
|
||||
if (!examCode.trim()) {
|
||||
setError('Please enter exam code')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/wallet-auth-message', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
wallet_address: walletAddress,
|
||||
exam_code: examCode.toUpperCase()
|
||||
})
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success) {
|
||||
setAuthMessage(data.message)
|
||||
setStep('join')
|
||||
} else {
|
||||
setError(data.error || 'Failed to get authentication message')
|
||||
}
|
||||
} catch (error) {
|
||||
setError('Connection failed. Please check if the backend is running.')
|
||||
}
|
||||
}
|
||||
|
||||
const signAndJoinExam = async () => {
|
||||
if (!studentName.trim()) {
|
||||
setError('Please enter your name')
|
||||
return
|
||||
}
|
||||
|
||||
setIsJoining(true)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
// Sign the message
|
||||
const signature = await window.ethereum.request({
|
||||
method: 'personal_sign',
|
||||
params: [authMessage, walletAddress]
|
||||
})
|
||||
|
||||
// Join exam with signature
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/join-exam-wallet', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
wallet_address: walletAddress,
|
||||
exam_code: examCode.toUpperCase(),
|
||||
signature: signature,
|
||||
student_name: studentName
|
||||
})
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success) {
|
||||
// Store session data
|
||||
localStorage.setItem('exam_session', JSON.stringify({
|
||||
exam_code: examCode.toUpperCase(),
|
||||
student_name: studentName,
|
||||
wallet_address: walletAddress,
|
||||
blockchain_verified: true,
|
||||
exam_info: data.exam_info
|
||||
}))
|
||||
|
||||
// Redirect to exam interface
|
||||
router.push('/coding/exam')
|
||||
} else {
|
||||
setError(data.error || 'Failed to join exam')
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error.code === 4001) {
|
||||
setError('Transaction was cancelled by user')
|
||||
} else {
|
||||
setError('Failed to sign message or join exam')
|
||||
}
|
||||
} finally {
|
||||
setIsJoining(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-900 via-purple-900 to-pink-900 flex items-center justify-center p-4">
|
||||
<div className="bg-white rounded-xl shadow-2xl p-8 w-full max-w-lg">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="w-16 h-16 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Wallet className="h-8 w-8 text-white" />
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">Join with Wallet</h1>
|
||||
<p className="text-gray-600">Connect your wallet to join the blockchain-verified coding exam</p>
|
||||
</div>
|
||||
|
||||
{/* Step Indicator */}
|
||||
<div className="flex items-center justify-center mb-8">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center ${
|
||||
step === 'connect' ? 'bg-blue-600 text-white' :
|
||||
walletAddress ? 'bg-green-600 text-white' : 'bg-gray-300 text-gray-600'
|
||||
}`}>
|
||||
1
|
||||
</div>
|
||||
<div className="w-12 h-1 bg-gray-300"></div>
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center ${
|
||||
step === 'auth' ? 'bg-blue-600 text-white' :
|
||||
authMessage ? 'bg-green-600 text-white' : 'bg-gray-300 text-gray-600'
|
||||
}`}>
|
||||
2
|
||||
</div>
|
||||
<div className="w-12 h-1 bg-gray-300"></div>
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center ${
|
||||
step === 'join' ? 'bg-blue-600 text-white' : 'bg-gray-300 text-gray-600'
|
||||
}`}>
|
||||
3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 1: Connect Wallet */}
|
||||
{step === 'connect' && (
|
||||
<div className="space-y-6">
|
||||
<div className="text-center">
|
||||
<Shield className="h-12 w-12 text-blue-600 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-bold mb-2">Connect Your Wallet</h2>
|
||||
<p className="text-gray-600 mb-6">Connect MetaMask to verify your identity on the blockchain</p>
|
||||
</div>
|
||||
|
||||
{walletAddress ? (
|
||||
<div className="bg-green-50 border border-green-200 p-4 rounded-lg">
|
||||
<div className="flex items-center">
|
||||
<CheckCircle className="h-5 w-5 text-green-600 mr-2" />
|
||||
<span className="font-medium text-green-800">Wallet Connected</span>
|
||||
</div>
|
||||
<p className="text-sm text-green-700 mt-1 font-mono">
|
||||
{walletAddress.slice(0, 6)}...{walletAddress.slice(-4)}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setStep('auth')}
|
||||
className="mt-3 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={connectWallet}
|
||||
disabled={isConnecting}
|
||||
className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold py-3 px-4 rounded-lg disabled:opacity-50"
|
||||
>
|
||||
{isConnecting ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent mr-2"></div>
|
||||
Connecting...
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Wallet className="inline h-5 w-5 mr-2" />
|
||||
Connect MetaMask
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 2: Get Auth Message */}
|
||||
{step === 'auth' && (
|
||||
<div className="space-y-6">
|
||||
<div className="text-center">
|
||||
<Code className="h-12 w-12 text-purple-600 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-bold mb-2">Enter Exam Code</h2>
|
||||
<p className="text-gray-600 mb-6">Enter the exam code provided by your instructor</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Exam Code
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={examCode}
|
||||
onChange={(e) => setExamCode(e.target.value.toUpperCase())}
|
||||
placeholder="Enter 6-character code"
|
||||
maxLength={6}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-center text-lg font-mono tracking-widest uppercase"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={getAuthMessage}
|
||||
disabled={!examCode.trim()}
|
||||
className="w-full bg-purple-600 hover:bg-purple-700 disabled:bg-gray-400 text-white font-semibold py-3 px-4 rounded-lg"
|
||||
>
|
||||
Get Authentication Message
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 3: Sign and Join */}
|
||||
{step === 'join' && (
|
||||
<div className="space-y-6">
|
||||
<div className="text-center">
|
||||
<Shield className="h-12 w-12 text-green-600 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-bold mb-2">Sign & Join Exam</h2>
|
||||
<p className="text-gray-600 mb-6">Enter your name and sign the message to join</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Your Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={studentName}
|
||||
onChange={(e) => setStudentName(e.target.value)}
|
||||
placeholder="Enter your full name"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{authMessage && (
|
||||
<div className="bg-gray-50 border border-gray-200 p-4 rounded-lg">
|
||||
<p className="text-sm text-gray-600 mb-2">You will sign this message:</p>
|
||||
<div className="bg-white p-3 rounded border text-xs font-mono text-gray-800 max-h-32 overflow-y-auto">
|
||||
{authMessage}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={signAndJoinExam}
|
||||
disabled={isJoining || !studentName.trim()}
|
||||
className="w-full bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white font-semibold py-3 px-4 rounded-lg disabled:opacity-50"
|
||||
>
|
||||
{isJoining ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent mr-2"></div>
|
||||
Signing & Joining...
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Shield className="inline h-5 w-5 mr-2" />
|
||||
Sign & Join Exam
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<div className="mt-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm flex items-start">
|
||||
<AlertCircle className="h-4 w-4 mr-2 mt-0.5 flex-shrink-0" />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Features */}
|
||||
<div className="mt-8 pt-6 border-t border-gray-200">
|
||||
<h3 className="text-sm font-medium text-gray-700 mb-3">Blockchain Benefits:</h3>
|
||||
<div className="space-y-2 text-sm text-gray-600">
|
||||
<div className="flex items-center">
|
||||
<Shield className="h-4 w-4 text-green-500 mr-2" />
|
||||
Tamper-proof identity verification
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Wallet className="h-4 w-4 text-blue-500 mr-2" />
|
||||
Wallet-based authentication
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Code className="h-4 w-4 text-purple-500 mr-2" />
|
||||
Permanent participation records
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
'use client'
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
export default function JoinExam() {
|
||||
const [examCode, setExamCode] = useState('')
|
||||
const [studentName, setStudentName] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [result, setResult] = useState('')
|
||||
const router = useRouter()
|
||||
|
||||
const join = async () => {
|
||||
if (!examCode || !studentName) {
|
||||
setResult('❌ Please fill both fields')
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
setResult('⏳ Joining exam...')
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
exam_code: examCode.trim().toUpperCase(),
|
||||
student_name: studentName.trim()
|
||||
}
|
||||
|
||||
console.log('🚀 Sending:', payload)
|
||||
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/join-exam', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
console.log('📦 Response:', data)
|
||||
|
||||
if (data.success) {
|
||||
// ✅ ENHANCED SUCCESS DISPLAY
|
||||
const successMessage = `✅ Successfully joined: ${data.exam_info.title}
|
||||
|
||||
📋 Exam Details:
|
||||
• Status: ${data.exam_info.status}
|
||||
• Duration: ${data.exam_info.duration_minutes} minutes
|
||||
• Participants: ${data.exam_info.participants_count}/${data.exam_info.max_participants}
|
||||
• Languages: ${data.exam_info.languages.join(', ')}
|
||||
• Problem: ${data.exam_info.problem_title}
|
||||
|
||||
🎯 You're now registered for the exam!
|
||||
⏳ Wait for the host to start the exam.`
|
||||
|
||||
setResult(successMessage)
|
||||
|
||||
// Store session data
|
||||
localStorage.setItem('exam_session', JSON.stringify({
|
||||
exam_code: examCode.toUpperCase(),
|
||||
student_name: studentName,
|
||||
exam_info: data.exam_info,
|
||||
joined_at: new Date().toISOString()
|
||||
}))
|
||||
|
||||
// Show success alert
|
||||
alert(`🎉 Welcome to the exam!
|
||||
|
||||
📝 Exam: ${data.exam_info.title}
|
||||
👤 Joined as: ${studentName}
|
||||
📊 You are participant #${data.exam_info.participants_count}
|
||||
|
||||
✅ Successfully registered!`)
|
||||
|
||||
// Redirect to exam waiting page after 2 seconds
|
||||
setTimeout(() => {
|
||||
router.push('/coding/exam')
|
||||
}, 2000)
|
||||
|
||||
} else {
|
||||
setResult(`❌ Error: ${data.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ Error:', error)
|
||||
setResult('❌ Network error: Could not connect to server')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ padding: '50px', background: '#1a1a1a', color: 'white', minHeight: '100vh', fontFamily: 'monospace' }}>
|
||||
<h1>🚀 Join Coding Exam</h1>
|
||||
|
||||
<div style={{ maxWidth: '500px', marginTop: '30px' }}>
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '5px', color: '#4CAF50' }}>
|
||||
Exam Code:
|
||||
</label>
|
||||
<input
|
||||
value={examCode}
|
||||
onChange={e => setExamCode(e.target.value)}
|
||||
placeholder="0C3LQ8"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px',
|
||||
background: '#333',
|
||||
color: 'white',
|
||||
border: '2px solid #4CAF50',
|
||||
borderRadius: '4px',
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '16px',
|
||||
textTransform: 'uppercase'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '5px', color: '#4CAF50' }}>
|
||||
Your Name:
|
||||
</label>
|
||||
<input
|
||||
value={studentName}
|
||||
onChange={e => setStudentName(e.target.value)}
|
||||
placeholder="Your name"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px',
|
||||
background: '#333',
|
||||
color: 'white',
|
||||
border: '2px solid #4CAF50',
|
||||
borderRadius: '4px',
|
||||
fontSize: '16px'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={join}
|
||||
disabled={loading}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '15px',
|
||||
background: loading ? '#666' : '#4CAF50',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
fontSize: '18px',
|
||||
cursor: loading ? 'not-allowed' : 'pointer',
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
>
|
||||
{loading ? '⏳ Joining Exam...' : '🚀 Join Exam'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ENHANCED RESULT DISPLAY */}
|
||||
{result && (
|
||||
<div style={{
|
||||
marginTop: '30px',
|
||||
padding: '20px',
|
||||
background: result.includes('✅') ? '#1a4a1a' : '#4a1a1a',
|
||||
border: result.includes('✅') ? '2px solid #4CAF50' : '2px solid #f44336',
|
||||
borderRadius: '8px',
|
||||
whiteSpace: 'pre-line',
|
||||
fontSize: '14px',
|
||||
lineHeight: '1.6'
|
||||
}}>
|
||||
{result}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{
|
||||
marginTop: '30px',
|
||||
padding: '15px',
|
||||
background: '#333',
|
||||
borderRadius: '4px',
|
||||
border: '2px solid #4CAF50'
|
||||
}}>
|
||||
<h3 style={{ color: '#4CAF50' }}>🔧 Debug Info:</h3>
|
||||
<p>Exam Code: "{examCode}"</p>
|
||||
<p>Student Name: "{studentName}"</p>
|
||||
<p style={{ color: '#4CAF50' }}>✅ Backend working correctly</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,454 @@
|
||||
import { CodingProblemList } from "@/components/coding-problem-list"
|
||||
'use client'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { Play, Lock, Shield, AlertTriangle, Users, Trophy, Clock } from 'lucide-react'
|
||||
|
||||
export default function CodingPage() {
|
||||
return <CodingProblemList />
|
||||
type UserRole = 'selector' | 'host' | 'participant'
|
||||
type ExamStatus = 'waiting' | 'active' | 'completed'
|
||||
|
||||
interface Participant {
|
||||
name: string
|
||||
score: number
|
||||
completed: boolean
|
||||
submitted_at?: string
|
||||
}
|
||||
|
||||
export default function CodingExamPlatform() {
|
||||
const [userRole, setUserRole] = useState<UserRole>('selector')
|
||||
const [examId, setExamId] = useState('')
|
||||
const [participantName, setParticipantName] = useState('')
|
||||
const [examInfo, setExamInfo] = useState<any>(null)
|
||||
const [systemChecked, setSystemChecked] = useState(false)
|
||||
const [isSecureMode, setIsSecureMode] = useState(false)
|
||||
const [leaderboard, setLeaderboard] = useState<Participant[]>([])
|
||||
const [timeRemaining, setTimeRemaining] = useState(0)
|
||||
|
||||
// Coding states
|
||||
const [code, setCode] = useState('')
|
||||
const [output, setOutput] = useState('')
|
||||
const [isExecuting, setIsExecuting] = useState(false)
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// System Requirements Check
|
||||
const checkSystemRequirements = () => {
|
||||
const checks = {
|
||||
fullscreenSupported: document.fullscreenEnabled,
|
||||
webGLSupported: !!document.createElement('canvas').getContext('webgl'),
|
||||
localStorageSupported: typeof Storage !== 'undefined',
|
||||
cookiesEnabled: navigator.cookieEnabled
|
||||
}
|
||||
|
||||
const allPassed = Object.values(checks).every(check => check)
|
||||
|
||||
if (allPassed) {
|
||||
setSystemChecked(true)
|
||||
alert('System requirements check passed! ✅')
|
||||
} else {
|
||||
alert('System requirements not met. Please use a modern browser.')
|
||||
}
|
||||
|
||||
return allPassed
|
||||
}
|
||||
|
||||
const acceptSystemRequirements = () => {
|
||||
if (checkSystemRequirements()) {
|
||||
enableSecureMode()
|
||||
}
|
||||
}
|
||||
|
||||
const enableSecureMode = () => {
|
||||
// Enter fullscreen
|
||||
document.documentElement.requestFullscreen().then(() => {
|
||||
setIsSecureMode(true)
|
||||
disableBrowserFeatures()
|
||||
detectVirtualEnvironment()
|
||||
|
||||
// Start exam timer if in active exam
|
||||
if (examInfo?.status === 'active') {
|
||||
startExamTimer()
|
||||
}
|
||||
}).catch(() => {
|
||||
alert('Fullscreen mode is required for secure coding')
|
||||
})
|
||||
}
|
||||
|
||||
const disableBrowserFeatures = () => {
|
||||
// Disable right-click, copy/paste, dev tools
|
||||
const blockActions = (e: KeyboardEvent) => {
|
||||
if (e.ctrlKey && ['c', 'v', 'x', 'a'].includes(e.key)) {
|
||||
e.preventDefault()
|
||||
alert('Copy/paste is disabled in exam mode')
|
||||
}
|
||||
if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && ['I', 'C'].includes(e.key))) {
|
||||
e.preventDefault()
|
||||
alert('Developer tools are disabled')
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', blockActions)
|
||||
document.addEventListener('contextmenu', e => e.preventDefault())
|
||||
document.addEventListener('selectstart', e => e.preventDefault())
|
||||
}
|
||||
|
||||
const detectVirtualEnvironment = () => {
|
||||
const canvas = document.createElement('canvas')
|
||||
const gl = canvas.getContext('webgl')
|
||||
|
||||
if (gl) {
|
||||
const renderer = gl.getParameter(gl.RENDERER)
|
||||
if (renderer.includes('VMware') || renderer.includes('VirtualBox')) {
|
||||
alert('Virtual environment detected. Exam will be terminated.')
|
||||
window.location.href = '/'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const createExam = async () => {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/create-exam', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
title: 'String Capitalizer Challenge',
|
||||
problem_id: 'string-capitalizer',
|
||||
duration_minutes: 30,
|
||||
host_name: participantName
|
||||
})
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
setExamId(data.exam_code)
|
||||
setExamInfo({ title: 'String Capitalizer Challenge', status: 'waiting' })
|
||||
alert(`Exam created! Share this code with participants: ${data.exam_code}`)
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Failed to create exam')
|
||||
}
|
||||
}
|
||||
|
||||
const joinExam = async () => {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/join-exam', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
exam_id: examId,
|
||||
name: participantName
|
||||
})
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
setExamInfo(data.exam_info)
|
||||
alert('Successfully joined the exam!')
|
||||
} else {
|
||||
alert(data.error)
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Failed to join exam')
|
||||
}
|
||||
}
|
||||
|
||||
const startExam = async () => {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/start-exam', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ exam_id: examId })
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
setExamInfo(prev => ({ ...prev, status: 'active' }))
|
||||
alert('Exam started! Participants can now begin coding.')
|
||||
startExamTimer()
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Failed to start exam')
|
||||
}
|
||||
}
|
||||
|
||||
const startExamTimer = () => {
|
||||
const duration = 30 * 60 // 30 minutes in seconds
|
||||
setTimeRemaining(duration)
|
||||
|
||||
const timer = setInterval(() => {
|
||||
setTimeRemaining(prev => {
|
||||
if (prev <= 1) {
|
||||
clearInterval(timer)
|
||||
alert('Time is up!')
|
||||
return 0
|
||||
}
|
||||
return prev - 1
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const submitSolution = async () => {
|
||||
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 })
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
alert(`Solution submitted! Your score: ${data.score}%`)
|
||||
fetchLeaderboard()
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Failed to submit solution')
|
||||
}
|
||||
}
|
||||
|
||||
const fetchLeaderboard = async () => {
|
||||
try {
|
||||
const response = await fetch(`http://127.0.0.1:5000/api/exam/leaderboard/${examId}`)
|
||||
const data = await response.json()
|
||||
setLeaderboard(data.leaderboard)
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch leaderboard')
|
||||
}
|
||||
}
|
||||
|
||||
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')}`
|
||||
}
|
||||
|
||||
// Role Selection Screen
|
||||
if (userRole === 'selector') {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-900 to-purple-900 flex items-center justify-center">
|
||||
<div className="bg-white rounded-lg shadow-xl p-8 max-w-md w-full">
|
||||
<h1 className="text-2xl font-bold text-center mb-8">OpenLearnX Coding Exam</h1>
|
||||
|
||||
<div className="space-y-4">
|
||||
<button
|
||||
onClick={() => setUserRole('host')}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg flex items-center justify-center space-x-2"
|
||||
>
|
||||
<Users className="h-5 w-5" />
|
||||
<span>Host an Exam</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setUserRole('participant')}
|
||||
className="w-full bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-lg flex items-center justify-center space-x-2"
|
||||
>
|
||||
<Play className="h-5 w-5" />
|
||||
<span>Join an Exam</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Host Setup Screen
|
||||
if (userRole === 'host' && !examId) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-900 to-purple-900 flex items-center justify-center">
|
||||
<div className="bg-white rounded-lg shadow-xl p-8 max-w-md w-full">
|
||||
<h1 className="text-2xl font-bold text-center mb-8">Host Coding Exam</h1>
|
||||
|
||||
<div className="space-y-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter your name"
|
||||
value={participantName}
|
||||
onChange={(e) => setParticipantName(e.target.value)}
|
||||
className="w-full p-3 border border-gray-300 rounded-lg"
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={createExam}
|
||||
disabled={!participantName}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white py-3 px-4 rounded-lg"
|
||||
>
|
||||
Create Exam
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Join Exam Screen
|
||||
if (userRole === 'participant' && !examInfo) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-green-900 to-blue-900 flex items-center justify-center">
|
||||
<div className="bg-white rounded-lg shadow-xl p-8 max-w-md w-full">
|
||||
<h1 className="text-2xl font-bold text-center mb-8">Join Coding Exam</h1>
|
||||
|
||||
<div className="space-y-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter exam code"
|
||||
value={examId}
|
||||
onChange={(e) => setExamId(e.target.value.toUpperCase())}
|
||||
className="w-full p-3 border border-gray-300 rounded-lg"
|
||||
/>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter your name"
|
||||
value={participantName}
|
||||
onChange={(e) => setParticipantName(e.target.value)}
|
||||
className="w-full p-3 border border-gray-300 rounded-lg"
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={joinExam}
|
||||
disabled={!examId || !participantName}
|
||||
className="w-full bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white py-3 px-4 rounded-lg"
|
||||
>
|
||||
Join Exam
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// System Requirements Check
|
||||
if (!systemChecked) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
|
||||
<div className="bg-gray-800 rounded-lg p-8 max-w-lg w-full">
|
||||
<h1 className="text-2xl font-bold mb-6">System Requirements Check</h1>
|
||||
|
||||
<div className="space-y-4 mb-6">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Shield className="h-5 w-5 text-green-400" />
|
||||
<span>Fullscreen mode support</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Lock className="h-5 w-5 text-yellow-400" />
|
||||
<span>Copy/paste will be disabled</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<AlertTriangle className="h-5 w-5 text-red-400" />
|
||||
<span>Virtual environments will be detected</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={acceptSystemRequirements}
|
||||
className="w-full bg-red-600 hover:bg-red-700 text-white py-3 px-4 rounded-lg"
|
||||
>
|
||||
Accept & Enter Secure Mode
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Main Exam Interface
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-white">
|
||||
{/* Security Status Bar */}
|
||||
<div className="bg-red-900 text-white p-2 flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Shield className="h-4 w-4" />
|
||||
<span className="text-sm font-medium">SECURE MODE ACTIVE</span>
|
||||
<Lock className="h-4 w-4" />
|
||||
<span className="text-sm">Copy/Paste Disabled</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
{timeRemaining > 0 && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Clock className="h-4 w-4" />
|
||||
<span className="font-mono">{formatTime(timeRemaining)}</span>
|
||||
</div>
|
||||
)}
|
||||
<span>Exam: {examId}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex h-screen">
|
||||
{/* Main Coding Area */}
|
||||
<div className="flex-1 p-6">
|
||||
{/* Problem Description */}
|
||||
<div className="bg-gray-800 rounded-lg p-6 mb-6">
|
||||
<h2 className="text-xl font-bold mb-4">Problem: String Capitalizer</h2>
|
||||
<p className="mb-4">Write a function that converts a string to uppercase.</p>
|
||||
<div className="bg-gray-900 p-4 rounded">
|
||||
<code>
|
||||
{`def capitalize_string(text):
|
||||
# Your code here
|
||||
pass
|
||||
|
||||
# Test: capitalize_string("hello") should return "HELLO"`}
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Code Editor */}
|
||||
<div className="bg-gray-800 rounded-lg p-4">
|
||||
<h3 className="text-lg font-bold mb-4">Code Editor</h3>
|
||||
<textarea
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
placeholder="def capitalize_string(text):\n # Your code here\n pass"
|
||||
className="w-full h-64 bg-gray-900 text-green-400 font-mono p-4 rounded border border-gray-600 resize-none"
|
||||
style={{ userSelect: 'none', WebkitUserSelect: 'none' }}
|
||||
/>
|
||||
|
||||
<div className="flex space-x-4 mt-4">
|
||||
<button
|
||||
onClick={submitSolution}
|
||||
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>Submit Solution</span>
|
||||
</button>
|
||||
|
||||
{userRole === 'host' && examInfo?.status === 'waiting' && (
|
||||
<button
|
||||
onClick={startExam}
|
||||
className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded"
|
||||
>
|
||||
Start Exam
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Leaderboard Sidebar */}
|
||||
<div className="w-80 bg-gray-800 p-6">
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
<Trophy className="h-6 w-6 text-yellow-400" />
|
||||
<h3 className="text-xl font-bold">Leaderboard</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{leaderboard.map((participant, index) => (
|
||||
<div key={index} className={`p-3 rounded ${index === 0 ? 'bg-yellow-900' : index === 1 ? 'bg-gray-700' : index === 2 ? 'bg-orange-900' : 'bg-gray-700'}`}>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="font-medium">
|
||||
{index + 1}. {participant.name}
|
||||
</span>
|
||||
<span className="font-bold">{participant.score}%</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={fetchLeaderboard}
|
||||
className="w-full mt-4 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm"
|
||||
>
|
||||
Refresh Leaderboard
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,416 @@
|
||||
'use client'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Play, Square, Download, Upload, Settings, Clock, MemoryStick, Cpu } from 'lucide-react'
|
||||
|
||||
interface ExecutionResult {
|
||||
success: boolean
|
||||
execution_id: string
|
||||
output: string
|
||||
error: string
|
||||
execution_time: number
|
||||
memory_used: number
|
||||
exit_code: number
|
||||
language: string
|
||||
timestamp: string
|
||||
}
|
||||
|
||||
interface Language {
|
||||
id: string
|
||||
name: string
|
||||
extension: string
|
||||
timeout: number
|
||||
memory_limit: string
|
||||
}
|
||||
|
||||
export default function RealCompilerInterface() {
|
||||
const [code, setCode] = useState('')
|
||||
const [input, setInput] = useState('')
|
||||
const [output, setOutput] = useState('')
|
||||
const [selectedLanguage, setSelectedLanguage] = useState('python')
|
||||
const [languages, setLanguages] = useState<Language[]>([])
|
||||
const [isExecuting, setIsExecuting] = useState(false)
|
||||
const [executionResult, setExecutionResult] = useState<ExecutionResult | null>(null)
|
||||
const [executionHistory, setExecutionHistory] = useState<ExecutionResult[]>([])
|
||||
|
||||
const languageTemplates: { [key: string]: string } = {
|
||||
python: `# Python Code
|
||||
print("Hello World!")
|
||||
name = input("Enter your name: ")
|
||||
print(f"Hello, {name}!")`,
|
||||
|
||||
java: `public class Main {
|
||||
public static void main(String[] args) {
|
||||
System.out.println("Hello World!");
|
||||
// Your code here
|
||||
}
|
||||
}`,
|
||||
|
||||
cpp: `#include <iostream>
|
||||
#include <string>
|
||||
using namespace std;
|
||||
|
||||
int main() {
|
||||
cout << "Hello World!" << endl;
|
||||
string name;
|
||||
cout << "Enter your name: ";
|
||||
getline(cin, name);
|
||||
cout << "Hello, " << name << "!" << endl;
|
||||
return 0;
|
||||
}`,
|
||||
|
||||
c: `#include <stdio.h>
|
||||
int main() {
|
||||
printf("Hello World!\\n");
|
||||
char name[100];
|
||||
printf("Enter your name: ");
|
||||
fgets(name, sizeof(name), stdin);
|
||||
printf("Hello, %s", name);
|
||||
return 0;
|
||||
}`,
|
||||
|
||||
javascript: `// JavaScript Code
|
||||
console.log("Hello World!");
|
||||
const readline = require('readline');
|
||||
const rl = readline.createInterface({
|
||||
input: process.stdin,
|
||||
output: process.stdout
|
||||
});
|
||||
|
||||
rl.question('Enter your name: ', (name) => {
|
||||
console.log(\`Hello, \${name}!\`);
|
||||
rl.close();
|
||||
});`,
|
||||
|
||||
go: `package main
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"bufio"
|
||||
"os"
|
||||
)
|
||||
|
||||
func main() {
|
||||
fmt.Println("Hello World!")
|
||||
reader := bufio.NewReader(os.Stdin)
|
||||
fmt.Print("Enter your name: ")
|
||||
name, _ := reader.ReadString('\\n')
|
||||
fmt.Printf("Hello, %s", name)
|
||||
}`,
|
||||
|
||||
rust: `use std::io;
|
||||
|
||||
fn main() {
|
||||
println!("Hello World!");
|
||||
println!("Enter your name: ");
|
||||
let mut name = String::new();
|
||||
io::stdin().read_line(&mut name).expect("Failed to read line");
|
||||
println!("Hello, {}!", name.trim());
|
||||
}`
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchSupportedLanguages()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedLanguage && languageTemplates[selectedLanguage] && !code) {
|
||||
setCode(languageTemplates[selectedLanguage])
|
||||
}
|
||||
}, [selectedLanguage])
|
||||
|
||||
const fetchSupportedLanguages = async () => {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/compiler/languages')
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
setLanguages(data.languages)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch languages:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const executeCode = async () => {
|
||||
if (!code.trim()) {
|
||||
alert('Please write some code first!')
|
||||
return
|
||||
}
|
||||
|
||||
setIsExecuting(true)
|
||||
setOutput('')
|
||||
setExecutionResult(null)
|
||||
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/compiler/execute', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
code,
|
||||
language: selectedLanguage,
|
||||
input: input
|
||||
})
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (result.success) {
|
||||
setOutput(result.output || result.error || 'No output')
|
||||
setExecutionResult(result)
|
||||
|
||||
// Add to history
|
||||
setExecutionHistory(prev => [result, ...prev.slice(0, 9)]) // Keep last 10
|
||||
} else {
|
||||
setOutput(`Error: ${result.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
setOutput(`Execution failed: ${(error as Error).message}`)
|
||||
} finally {
|
||||
setIsExecuting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const testCompiler = async () => {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5000/api/compiler/test', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ language: selectedLanguage })
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (result.success) {
|
||||
setOutput(result.output)
|
||||
alert('Compiler test successful!')
|
||||
} else {
|
||||
setOutput(`Test failed: ${result.error}`)
|
||||
}
|
||||
} catch (error) {
|
||||
setOutput(`Test failed: ${(error as Error).message}`)
|
||||
}
|
||||
}
|
||||
|
||||
const downloadCode = () => {
|
||||
const language = languages.find(l => l.id === selectedLanguage)
|
||||
const extension = language?.extension || '.txt'
|
||||
const blob = new Blob([code], { type: 'text/plain' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `code${extension}`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
const loadCodeFile = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0]
|
||||
if (file) {
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
const content = e.target?.result as string
|
||||
setCode(content)
|
||||
}
|
||||
reader.readAsText(file)
|
||||
}
|
||||
}
|
||||
|
||||
const clearAll = () => {
|
||||
setCode('')
|
||||
setInput('')
|
||||
setOutput('')
|
||||
setExecutionResult(null)
|
||||
}
|
||||
|
||||
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-7xl mx-auto">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">OpenLearnX Real Compiler</h1>
|
||||
<p className="text-gray-400">Execute code in multiple programming languages with real output</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<button
|
||||
onClick={testCompiler}
|
||||
className="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded flex items-center space-x-2"
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
<span>Test Compiler</span>
|
||||
</button>
|
||||
|
||||
<div className="text-sm text-gray-400">
|
||||
{languages.length} languages supported
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto p-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Code Editor */}
|
||||
<div className="space-y-4">
|
||||
{/* Language Selector & Controls */}
|
||||
<div className="bg-gray-800 rounded-lg p-4">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-lg font-bold">Code Editor</h2>
|
||||
<div className="flex items-center space-x-2">
|
||||
<select
|
||||
value={selectedLanguage}
|
||||
onChange={(e) => setSelectedLanguage(e.target.value)}
|
||||
className="bg-gray-700 text-white px-3 py-1 rounded border border-gray-600"
|
||||
>
|
||||
{languages.map(lang => (
|
||||
<option key={lang.id} value={lang.id}>
|
||||
{lang.name} ({lang.extension})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
accept=".py,.java,.cpp,.c,.js,.go,.rs,.sh"
|
||||
onChange={loadCodeFile}
|
||||
className="hidden"
|
||||
id="file-upload"
|
||||
/>
|
||||
<label
|
||||
htmlFor="file-upload"
|
||||
className="bg-gray-600 hover:bg-gray-700 px-3 py-1 rounded cursor-pointer"
|
||||
>
|
||||
<Upload className="h-4 w-4" />
|
||||
</label>
|
||||
|
||||
<button
|
||||
onClick={downloadCode}
|
||||
className="bg-gray-600 hover:bg-gray-700 px-3 py-1 rounded"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
placeholder="Write your code here..."
|
||||
className="w-full h-80 bg-gray-900 text-green-400 font-mono p-4 rounded border border-gray-600 resize-none focus:ring-2 focus:ring-blue-500"
|
||||
spellCheck={false}
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-between mt-4">
|
||||
<div className="text-sm text-gray-400">
|
||||
Language: {languages.find(l => l.id === selectedLanguage)?.name}
|
||||
{executionResult && (
|
||||
<span className="ml-4">
|
||||
Last execution: {executionResult.execution_time}s
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-2">
|
||||
<button
|
||||
onClick={clearAll}
|
||||
className="bg-gray-600 hover:bg-gray-700 px-4 py-2 rounded text-sm"
|
||||
>
|
||||
Clear All
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={executeCode}
|
||||
disabled={isExecuting}
|
||||
className="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-6 py-2 rounded flex items-center space-x-2"
|
||||
>
|
||||
<Play className="h-4 w-4" />
|
||||
<span>{isExecuting ? 'Executing...' : 'Run Code'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Input Section */}
|
||||
<div className="bg-gray-800 rounded-lg p-4">
|
||||
<h3 className="text-lg font-bold mb-2">Input Data</h3>
|
||||
<textarea
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="Enter input data for your program (if needed)..."
|
||||
className="w-full h-24 bg-gray-900 text-white font-mono p-3 rounded border border-gray-600 resize-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Output & Results */}
|
||||
<div className="space-y-4">
|
||||
{/* Output */}
|
||||
<div className="bg-gray-800 rounded-lg p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-bold">Output</h3>
|
||||
{executionResult && (
|
||||
<div className="flex items-center space-x-4 text-sm text-gray-400">
|
||||
<div className="flex items-center space-x-1">
|
||||
<Clock className="h-4 w-4" />
|
||||
<span>{executionResult.execution_time}s</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-1">
|
||||
<MemoryStick className="h-4 w-4" />
|
||||
<span>{Math.round(executionResult.memory_used / 1024)}KB</span>
|
||||
</div>
|
||||
<div className={`px-2 py-1 rounded text-xs ${
|
||||
executionResult.exit_code === 0 ? 'bg-green-900 text-green-200' : 'bg-red-900 text-red-200'
|
||||
}`}>
|
||||
Exit: {executionResult.exit_code}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-black p-4 rounded h-80 overflow-y-auto">
|
||||
<pre className="text-green-400 font-mono whitespace-pre-wrap text-sm">
|
||||
{output || 'No output yet. Run your code to see results here.'}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Execution History */}
|
||||
{executionHistory.length > 0 && (
|
||||
<div className="bg-gray-800 rounded-lg p-4">
|
||||
<h3 className="text-lg font-bold mb-4">Execution History</h3>
|
||||
<div className="space-y-2 max-h-40 overflow-y-auto">
|
||||
{executionHistory.map((result, index) => (
|
||||
<div
|
||||
key={result.execution_id}
|
||||
className="flex items-center justify-between p-2 bg-gray-700 rounded text-sm cursor-pointer hover:bg-gray-600"
|
||||
onClick={() => {
|
||||
setOutput(result.output || result.error)
|
||||
setExecutionResult(result)
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<span className="font-medium">{result.language}</span>
|
||||
<span className="text-gray-400 ml-2">
|
||||
{new Date(result.timestamp).toLocaleTimeString()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span>{result.execution_time}s</span>
|
||||
<div className={`w-2 h-2 rounded-full ${
|
||||
result.exit_code === 0 ? 'bg-green-400' : 'bg-red-400'
|
||||
}`}></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
'use client'
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function JoinTestPage() {
|
||||
const [examCode, setExamCode] = useState('')
|
||||
const [studentName, setStudentName] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const handleJoin = async () => {
|
||||
if (!examCode || !studentName) {
|
||||
alert('Fill both fields')
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
exam_code: examCode.trim(), // CORRECT field name
|
||||
student_name: studentName.trim() // CORRECT field name
|
||||
}
|
||||
|
||||
console.log('🚀 Sending:', payload)
|
||||
|
||||
const response = await fetch('http://127.0.0.1:5000/api/exam/join-exam', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
console.log('📦 Response:', data)
|
||||
|
||||
if (data.success) {
|
||||
alert('✅ SUCCESS: ' + data.exam_info.title)
|
||||
} else {
|
||||
alert('❌ ERROR: ' + data.error)
|
||||
}
|
||||
} catch (error) {
|
||||
alert('❌ Network error')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ padding: '50px', background: '#000', color: 'white', minHeight: '100vh' }}>
|
||||
<h1>🧪 TEST JOIN PAGE - BYPASS CACHE</h1>
|
||||
|
||||
<div style={{ maxWidth: '400px', marginTop: '30px' }}>
|
||||
<input
|
||||
value={examCode}
|
||||
onChange={e => setExamCode(e.target.value)}
|
||||
placeholder="6884F82A7300F2AD9CFC974A"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '10px',
|
||||
margin: '10px 0',
|
||||
background: '#333',
|
||||
color: 'white',
|
||||
fontFamily: 'monospace'
|
||||
}}
|
||||
/>
|
||||
|
||||
<input
|
||||
value={studentName}
|
||||
onChange={e => setStudentName(e.target.value)}
|
||||
placeholder="Your name"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '10px',
|
||||
margin: '10px 0',
|
||||
background: '#333',
|
||||
color: 'white'
|
||||
}}
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={handleJoin}
|
||||
disabled={loading}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '15px',
|
||||
background: loading ? '#666' : '#00ff00',
|
||||
color: 'black',
|
||||
border: 'none',
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
>
|
||||
{loading ? 'JOINING...' : 'TEST JOIN'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: '20px', background: '#333', padding: '10px' }}>
|
||||
<p>Will send: exam_code="{examCode}" student_name="{studentName}"</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user