{/* Progress Bar */}
{/* Step Circles */}
= 1
? 'bg-teal-500 text-white shadow-md'
: 'bg-white text-gray-400 border-2 border-gray-200'
}`}
>
1
= 1 ? 'text-teal-600' : 'text-gray-400'}`}>Upload
= 2
? 'bg-teal-500 text-white shadow-md'
: 'bg-white text-gray-400 border-2 border-gray-200'
}`}
>
2
= 2 ? 'text-teal-600' : 'text-gray-400'}`}>Select Student
= 3
? 'bg-teal-500 text-white shadow-md'
: 'bg-white text-gray-400 border-2 border-gray-200'
}`}
>
3
= 3 ? 'text-teal-600' : 'text-gray-400'}`}>Choose Comments
= 4
? 'bg-teal-500 text-white shadow-md'
: 'bg-white text-gray-400 border-2 border-gray-200'
}`}
>
4
= 4 ? 'text-teal-600' : 'text-gray-400'}`}>Review
{/* Card Header */}
{/* Card Content */}
{getStepTitle()}
{step > 0 && step !== 1.5 && ( )} {step === 1.5 && ( )}
{/* Error Message */}
{error && (
)}
{/* Step 0: Landing Page */}
{step === 0 && (
)}
{/* Step 1: File Upload */}
{step === 1 && (
)}
{/* Step 1.5: Class Selection (Aspire) */}
{step === 1.5 && (
)}
{/* Step 2: Student Selection */}
{step === 2 && (
{error}
Choose Your Data Source
Select how you want to access student data for generating comments. You can either connect to the Aspire database or upload your own student list.
{/* Aspire Database Option */}
setShowLoginModal(true)}
>
{/* Upload Own Data Option */}
Aspire Database
Connect to the Aspire school database to access your student records directly.
setStep(1)}
>
Upload Student List
Upload your own Excel file with student names and class information.
About This Tool
The Student Comment Generator helps teachers create personalized, well-structured comments for student reports. Select from pre-written comment banks and let AI combine them into natural-sounding feedback that follows the sandwich approach (positive-improvement-positive). All comments are between 350-450 characters.
Upload an Excel file containing student names and class information. The file should have columns for "Name" and "Class".
Drag and drop your Excel file here, or
Sample Format:
| Name | Class |
|---|---|
| John Smith | 9A |
| Emma Johnson | 9A |
| Michael Brown | 12B |
Select a class to view its students. You can then select a student to generate comments.
{aspireClasses.map((className, index) => (
handleAspireClassSelect(className)}
>
))}
{className}
{aspireStudentData[className] ? `${aspireStudentData[className].length} students` : "No students"}
{/* Class Filter - Only show if not from Aspire database */}
{!aspireClasses.includes(selectedClass) && (
)}
{/* Class Title */}
{/* Student List */}
)}
{/* Step 3: Comment Selection */}
{step === 3 && selectedStudent && (
{selectedClass} Students
Student List {students.length} students
{students.map((student, index) => (
)}
handleStudentSelect(student)}
>
))}
{students.length === 0 && (
{student.name}
{student.arabicName && ({student.arabicName}
)}
ID: {student.id || "N/A"}
{student.class || student.grade || ""}
No students found in this class
Try selecting a different class or upload a new file
Select comments from each category below. You can choose multiple comments in each section.
{/* Positive Comments */}
✅ Positive Comments (Strengths & Praise) {positiveComments.length} selected
import { useState, useEffect } from 'react';
import * as XLSX from 'xlsx';
export default function EnhancedCommentGenerator() {
// State management
const [students, setStudents] = useState([]);
const [classes, setClasses] = useState([]);
const [selectedClass, setSelectedClass] = useState('');
const [selectedStudent, setSelectedStudent] = useState(null);
const [positiveComments, setPositiveComments] = useState([]);
const [developmentComments, setDevelopmentComments] = useState([]);
const [behaviorComments, setBehaviorComments] = useState([]);
const [improvementComments, setImprovementComments] = useState([]);
const [customNotes, setCustomNotes] = useState('');
const [generatedComment, setGeneratedComment] = useState('');
const [isGenerating, setIsGenerating] = useState(false);
const [characterCount, setCharacterCount] = useState(0);
const [step, setStep] = useState(0); // Start at landing page (step 0)
const [isUploading, setIsUploading] = useState(false);
const [error, setError] = useState('');
const [generationAttempts, setGenerationAttempts] = useState(0);
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [loginError, setLoginError] = useState('');
const [showLoginModal, setShowLoginModal] = useState(false);
// API key is hardcoded
const apiKey = "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";
// Sample student data for Aspire database
const aspireStudents = [
{ name: "Ahmed Al-Mansour", class: "9A" },
{ name: "Fatima Al-Qasimi", class: "9A" },
{ name: "Mohammed Al-Farsi", class: "9A" },
{ name: "Aisha Al-Balushi", class: "9A" },
{ name: "Omar Al-Hashimi", class: "9A" },
{ name: "Layla Al-Mazrouei", class: "9B" },
{ name: "Khalid Al-Suwaidi", class: "9B" },
{ name: "Noura Al-Shamsi", class: "9B" },
{ name: "Saeed Al-Zaabi", class: "9B" },
{ name: "Maryam Al-Nuaimi", class: "9B" },
{ name: "Ali Al-Dhaheri", class: "10A" },
{ name: "Sara Al-Mansoori", class: "10A" },
{ name: "Hamad Al-Ketbi", class: "10A" },
{ name: "Hessa Al-Falasi", class: "10A" },
{ name: "Rashid Al-Maktoum", class: "10A" },
{ name: "Amna Al-Muhairi", class: "10B" },
{ name: "Yousef Al-Naqbi", class: "10B" },
{ name: "Maitha Al-Kaabi", class: "10B" },
{ name: "Ibrahim Al-Marri", class: "10B" },
{ name: "Shamma Al-Ameri", class: "10B" }
];
// Comment banks
const positiveCommentsBank = [
"Completes work independently and shows consistent improvement.",
"Demonstrates strong reading comprehension.",
"Has good writing skills and creativity.",
"Polite and well-mannered in class.",
"Actively participates and engages in discussions.",
"Shows dedication and effort in learning.",
"Demonstrates confidence and is gaining independence.",
"Talented and quick to grasp new language skills.",
"Takes studies more seriously and shows maturity.",
"Friendly and supportive to peers.",
"Consistently improving both in reading and writing.",
"Completes assignments with little or no guidance.",
"Willingness to learn is evident.",
"Shows steady progress over time.",
"Attempts tasks without hesitation."
];
const developmentCommentsBank = [
"Improve writing mechanics (punctuation, spelling, grammar).",
"Practice time management and task completion.",
"Develop more consistent motivation across lessons.",
"Strengthen ability to remain engaged throughout full class periods.",
"Express ideas more clearly in writing.",
"Improve tone when speaking to teachers or peers.",
"Develop confidence to speak more often in class.",
"Enhance note-taking and question-asking habits.",
"Strengthen focus despite distractions around.",
"Continue practicing on platforms like Write&Improve.",
"Improve prioritization of tasks during class.",
"Build stronger self-monitoring and self-discipline.",
"Learn to transition between tasks more efficiently.",
"Expand vocabulary to support academic writing.",
"Apply learned concepts more consistently in assessments."
];
const behaviorCommentsBank = [
"Easily distracted and distracts others.",
"Falls asleep during class.",
"Watches shows or misuses tablet during lessons.",
"Frequently side-tracks into unrelated conversations.",
"Struggles to complete work due to lack of focus.",
"Unmotivated attitude toward learning.",
"Rarely participates in class activities.",
"Lacks engagement, especially in critical moments.",
"Constantly pulls peers into conversations.",
"Can appear rude in tone, unintentionally.",
"Only works when they feel like it.",
"Distracts others by trying to entertain.",
"Avoids tasks without teacher prompting.",
"Slow to follow through on assigned tasks.",
"Repeatedly asks for things without respecting boundaries."
];
const improvementCommentsBank = [
"Focus more during lessons to reduce distractions.",
"Review lessons at home via platforms like Blackboard.",
"Practice writing regularly to improve spelling and grammar.",
"Stay engaged for the full lesson duration.",
"Participate more actively in class discussions.",
"Complete tasks within the given time.",
"Be more consistent in submitting work.",
"Minimize off-task behavior (e.g., chatting, daydreaming).",
"Take learning seriously—this is a crucial year.",
"Improve classroom behavior to support peers' focus.",
"Take responsibility for personal academic progress.",
"Be respectful in speech and actions toward others.",
"Sleep well and stay energized for lessons.",
"Practice using tone and expression appropriately.",
"Set goals for each lesson to stay motivated."
];
// Handle Aspire database login
const handleAspireLogin = (e) => {
e.preventDefault();
if (username === 'Teacher2024' && password === 'Aspire123') {
// Load the Aspire database
setStudents(aspireStudents);
// Extract unique classes
const uniqueClasses = [...new Set(aspireStudents.map(student => student.class))];
setClasses(uniqueClasses);
setSelectedClass(uniqueClasses[0] || '');
// Move to student selection step
setStep(2);
setShowLoginModal(false);
setLoginError('');
} else {
setLoginError('Invalid username or password. Please try again.');
}
};
// Handle file upload
const handleFileUpload = (e) => {
const file = e.target.files[0];
setIsUploading(true);
if (file) {
const reader = new FileReader();
reader.onload = (evt) => {
try {
const data = evt.target.result;
const workbook = XLSX.read(data, { type: 'binary' });
const firstSheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[firstSheetName];
const jsonData = XLSX.utils.sheet_to_json(worksheet);
// Process student data
const processedStudents = jsonData.map(row => ({
name: row.Name || row.name || '',
class: row.Class || row.class || ''
})).filter(student => student.name && student.class);
// Extract unique classes
const uniqueClasses = [...new Set(processedStudents.map(student => student.class))];
setStudents(processedStudents);
setClasses(uniqueClasses);
setSelectedClass(uniqueClasses[0] || '');
setStep(2);
setIsUploading(false);
} catch (error) {
console.error("Error processing file:", error);
alert("Error processing file. Please ensure it's a valid Excel file.");
setIsUploading(false);
}
};
reader.onerror = () => {
alert("Error reading file");
setIsUploading(false);
};
reader.readAsBinaryString(file);
}
};
// Select a student
const handleStudentSelect = (student) => {
setSelectedStudent(student);
setPositiveComments([]);
setDevelopmentComments([]);
setBehaviorComments([]);
setImprovementComments([]);
setCustomNotes('');
setGeneratedComment('');
setError('');
setStep(3);
};
// Toggle comment selection
const toggleComment = (comment, type) => {
switch (type) {
case 'positive':
setPositiveComments(prev =>
prev.includes(comment)
? prev.filter(c => c !== comment)
: [...prev, comment]
);
break;
case 'development':
setDevelopmentComments(prev =>
prev.includes(comment)
? prev.filter(c => c !== comment)
: [...prev, comment]
);
break;
case 'behavior':
setBehaviorComments(prev =>
prev.includes(comment)
? prev.filter(c => c !== comment)
: [...prev, comment]
);
break;
case 'improvement':
setImprovementComments(prev =>
prev.includes(comment)
? prev.filter(c => c !== comment)
: [...prev, comment]
);
break;
default:
break;
}
};
// Generate a fallback comment if API fails
const generateFallbackComment = () => {
const positive = positiveComments.length > 0
? positiveComments[Math.floor(Math.random() * positiveComments.length)]
: "shows good progress";
const development = developmentComments.length > 0
? developmentComments[Math.floor(Math.random() * developmentComments.length)]
: "needs to develop skills";
const behavior = behaviorComments.length > 0
? behaviorComments[Math.floor(Math.random() * behaviorComments.length)]
: "";
const improvement = improvementComments.length > 0
? improvementComments[Math.floor(Math.random() * improvementComments.length)]
: "should focus on improving";
const fallbackComment = `${selectedStudent.name} ${positive} ${behavior ? 'However, ' + behavior : ''} ${development} ${improvement}`;
return fallbackComment;
};
// Generate comment using OpenAI API
const generateComment = async () => {
if (!positiveComments.length || (!developmentComments.length && !behaviorComments.length && !improvementComments.length)) {
setError("Please select at least one positive comment and one comment from any other category");
return;
}
setIsGenerating(true);
setError('');
setGenerationAttempts(prev => prev + 1);
try {
// Prepare the prompt for OpenAI
const prompt = `Write a personalized comment for ${selectedStudent.name} using these elements:
Positive aspects: ${positiveComments.join(', ')}
${developmentComments.length > 0 ? `Areas for development: ${developmentComments.join(', ')}` : ''}
${behaviorComments.length > 0 ? `Behavior characteristics: ${behaviorComments.join(', ')}` : ''}
${improvementComments.length > 0 ? `Improvement suggestions: ${improvementComments.join(', ')}` : ''}
${customNotes ? `Additional notes: ${customNotes}` : ''}
Follow these rules strictly:
1. Use a sandwich approach (positive-improvement-positive/encouragement)
2. Keep it EXACTLY between 350-450 characters including spaces (this is critical)
3. Make it sound natural and personalized, like a real teacher would write
4. Use the student's name
5. Don't simply list the comments, integrate them naturally
6. Vary sentence structure
7. Use simple, clear language at A2-B1 level (intermediate English)
8. Avoid complex vocabulary and sentence structures
9. Do not exceed 450 characters under any circumstances
10. Do NOT include a character count in your response`;
// Call OpenAI API
const response = await fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify({
model: "gpt-3.5-turbo",
messages: [
{
role: "system",
content: "You are an experienced English teacher writing student comments. Write in a warm, supportive tone using simple language (A2-B1 level). Your comments must be EXACTLY between 350-450 characters including spaces."
},
{
role: "user",
content: prompt
}
],
temperature: 0.7,
max_tokens: 300
}),
});
const data = await response.json();
if (data.error) {
throw new Error(data.error.message || "Error calling OpenAI API");
}
let generatedText = data.choices[0].message.content.trim();
const charCount = generatedText.length;
// Check if the comment is within the character limit
if (charCount < 350 || charCount > 450) {
// Try again if outside the limit
if (generationAttempts < 3) {
setIsGenerating(false);
return generateComment();
}
}
setGeneratedComment(generatedText);
setCharacterCount(charCount);
setStep(4);
} catch (error) {
console.error("Error generating comment:", error);
// Use fallback if API fails
if (generationAttempts > 2) {
const fallbackComment = generateFallbackComment();
const charCount = fallbackComment.length;
setGeneratedComment(fallbackComment);
setCharacterCount(charCount);
setStep(4);
setError("API connection failed. Using simplified comment generation.");
} else {
setError(`Error: ${error.message}. Please try again.`);
}
} finally {
setIsGenerating(false);
}
};
// Reset to start over
const resetApp = () => {
setSelectedStudent(null);
setPositiveComments([]);
setDevelopmentComments([]);
setBehaviorComments([]);
setImprovementComments([]);
setCustomNotes('');
setGeneratedComment('');
setError('');
setGenerationAttempts(0);
setStep(2);
};
// Back to student selection
const backToStudents = () => {
setSelectedStudent(null);
setPositiveComments([]);
setDevelopmentComments([]);
setBehaviorComments([]);
setImprovementComments([]);
setCustomNotes('');
setGeneratedComment('');
setError('');
setGenerationAttempts(0);
setStep(2);
};
// Back to comment selection
const backToComments = () => {
setGeneratedComment('');
setError('');
setGenerationAttempts(0);
setStep(3);
};
// Get step title
const getStepTitle = () => {
switch (step) {
case 0: return "Welcome to Student Comment Generator";
case 1: return "Upload Student Data";
case 2: return "Select a Student";
case 3: return selectedStudent ? `Select Comments for ${selectedStudent.name}` : "Select Comments";
case 4: return selectedStudent ? `Review Comment for ${selectedStudent.name}` : "Review Comment";
default: return "";
}
};
// Copy comment to clipboard
const copyComment = () => {
navigator.clipboard.writeText(generatedComment);
alert("Comment copied to clipboard!");
};
// Check if the character count is within the required range
const isCharCountValid = () => {
return characterCount >= 350 && characterCount <= 450;
};
// Render login modal
const renderLoginModal = () => {
if (!showLoginModal) return null;
return (
)}
);
};
return (
Aspire Database Login
{loginError && ({loginError}
{/* Header */}
{/* Main Content */}
{/* Progress Steps - Only show for steps 1-4 */}
{step > 0 && (
)}
{/* Content Card */}
{/* Footer */}
{/* Login Modal */}
{renderLoginModal()}
);
}Student Comment Generator
Streamline your feedback process with AI-powered comments
{/* Progress Bar */}
{/* Step Circles */}
= 1
? 'bg-teal-500 text-white shadow-md'
: 'bg-white text-gray-400 border-2 border-gray-200'
}`}
>
1
= 1 ? 'text-teal-600' : 'text-gray-400'}`}>Upload
= 2
? 'bg-teal-500 text-white shadow-md'
: 'bg-white text-gray-400 border-2 border-gray-200'
}`}
>
2
= 2 ? 'text-teal-600' : 'text-gray-400'}`}>Select Student
= 3
? 'bg-teal-500 text-white shadow-md'
: 'bg-white text-gray-400 border-2 border-gray-200'
}`}
>
3
= 3 ? 'text-teal-600' : 'text-gray-400'}`}>Choose Comments
= 4
? 'bg-teal-500 text-white shadow-md'
: 'bg-white text-gray-400 border-2 border-gray-200'
}`}
>
4
= 4 ? 'text-teal-600' : 'text-gray-400'}`}>Review
{/* Card Header */}
{/* Card Content */}
{getStepTitle()}
{step > 1 && ( )}
{/* Error Message */}
{error && (
)}
{/* Step 0: Landing Page */}
{step === 0 && (
)}
{/* Step 1: File Upload */}
{step === 1 && (
)}
{/* Step 2: Student Selection */}
{step === 2 && (
)}
{/* Step 4: Review Generated Comment */}
{step === 4 && generatedComment && (
)}
{error}
Choose Your Data Source
Select how you want to access student data for generating comments. You can either connect to the Aspire database or upload your own student list.
{/* Aspire Database Option */}
setShowLoginModal(true)}
>
{/* Upload Own Data Option */}
Aspire Database
Connect to the Aspire school database to access your student records directly.
setStep(1)}
>
Upload Student List
Upload your own Excel file with student names and class information.
About This Tool
The Student Comment Generator helps teachers create personalized, well-structured comments for student reports. Select from pre-written comment banks and let AI combine them into natural-sounding feedback that follows the sandwich approach (positive-improvement-positive). All comments are between 350-450 characters.
Upload an Excel file containing student names and class information. The file should have columns for "Name" and "Class".
Drag and drop your Excel file here, or
Sample Format:
| Name | Class |
|---|---|
| John Smith | 9A |
| Emma Johnson | 9A |
| Michael Brown | 12B |
{/* Class Filter */}
{/* Student List */}
)}
{/* Step 3: Comment Selection */}
{step === 3 && selectedStudent && (
{selectedClass ? `Students in ${selectedClass}` : 'All Students'} {students.filter(student => !selectedClass || student.class === selectedClass).length} students
{students
.filter(student => !selectedClass || student.class === selectedClass)
.map((student, index) => (
)}
handleStudentSelect(student)}
>
))}
{students.filter(student => !selectedClass || student.class === selectedClass).length === 0 && (
{student.name}
Class: {student.class}
No students found in this class
Try selecting a different class or upload a new file
Select comments from each category below. You can choose multiple comments in each section.
{/* Positive Comments */}
{/* Development Comments */}
{/* Behavior Comments */}
{/* Improvement Comments */}
{/* Custom Notes */}
✅ Positive Comments (Strengths & Praise) {positiveComments.length} selected
{positiveCommentsBank.map((comment, index) => (
toggleComment(comment, 'positive')}
>
))}
{positiveComments.includes(comment) && (
)}
{comment}
📘 Areas of Development (Skills to Build) {developmentComments.length} selected
{developmentCommentsBank.map((comment, index) => (
toggleComment(comment, 'development')}
>
))}
{developmentComments.includes(comment) && (
)}
{comment}
⚠️ Behaviour Issues or Characteristics {behaviorComments.length} selected
{behaviorCommentsBank.map((comment, index) => (
toggleComment(comment, 'behavior')}
>
))}
{behaviorComments.includes(comment) && (
)}
{comment}
🔧 Areas of Improvement (Targets & Suggestions) {improvementComments.length} selected
{improvementCommentsBank.map((comment, index) => (
toggleComment(comment, 'improvement')}
>
))}
{improvementComments.includes(comment) && (
)}
{comment}
Additional Notes (Optional)
{generatedComment}
450 ? 'text-red-600' : characterCount < 350 ? 'text-amber-600' : 'text-green-600'
}`}>
{characterCount} characters
{characterCount > 450
? ' (too long)'
: characterCount < 350
? ' (too short)'
: ' (perfect!)'}