Untitled
unknown
plain_text
4 months ago
6.5 kB
1
Indexable
import React, { useState, useEffect } from 'react'; import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'; import { LineChart, Line, XAxis, YAxis, Tooltip, ReferenceLine } from 'recharts'; export default function GrowthCalculator() { const [scores, setScores] = useState({ test1: '', test2: '', test3: '' }); const [grades, setGrades] = useState({ baseline: '', growth1: '', final: '' }); const [growthData, setGrowthData] = useState([]); // Calculate grade based on scale score const getBaselineGrade = (score) => { if (score >= 271) return 'A'; if (score >= 258) return 'B'; if (score >= 230) return 'C'; return 'C'; // Minimum grade is C }; // Calculate growth adjustments const calculateGrowthGrade = (baselineScore, currentScore, isTest3) => { const baselineGrade = getBaselineGrade(baselineScore); const growth = currentScore - baselineScore; const gradeValues = { 'A': 4, 'B': 3, 'C': 2 }; let gradeValue = gradeValues[baselineGrade]; // Adjust for scores below 240 const growthThreshold = baselineScore < 240 ? 3 : 5; if (isTest3) { // Test 3 criteria if (growth >= 10) gradeValue += 2; else if (growth >= growthThreshold) gradeValue += 1; else if (growth <= -10) gradeValue -= 2; else if (growth <= -growthThreshold) gradeValue -= 1; } else { // Test 2 criteria if (growth >= growthThreshold) gradeValue += 1; else if (growth <= -10) gradeValue -= 2; else if (growth <= -growthThreshold) gradeValue -= 1; } // Convert back to letter grade if (gradeValue >= 4) return 'A'; if (gradeValue === 3) return 'B'; return 'C'; // Minimum grade }; useEffect(() => { if (scores.test1) { const baselineGrade = getBaselineGrade(Number(scores.test1)); setGrades(prev => ({ ...prev, baseline: baselineGrade })); if (scores.test2) { const growth1Grade = calculateGrowthGrade(Number(scores.test1), Number(scores.test2), false); setGrades(prev => ({ ...prev, growth1: growth1Grade })); } if (scores.test3) { const finalGrade = calculateGrowthGrade(Number(scores.test1), Number(scores.test3), true); setGrades(prev => ({ ...prev, final: finalGrade })); } } // Update chart data const chartData = []; if (scores.test1) chartData.push({ name: 'Test 1', score: Number(scores.test1) }); if (scores.test2) chartData.push({ name: 'Test 2', score: Number(scores.test2) }); if (scores.test3) chartData.push({ name: 'Test 3', score: Number(scores.test3) }); setGrowthData(chartData); }, [scores]); return ( <Card className="w-full max-w-4xl mx-auto"> <CardHeader> <CardTitle>ELA Reading Growth Calculator</CardTitle> </CardHeader> <CardContent> <div className="grid grid-cols-3 gap-4 mb-6"> {/* Test 1 Input */} <div className="border p-4 rounded"> <h3 className="font-bold mb-2">Test 1 (Baseline)</h3> <input type="number" className="border p-2 w-full mb-2" placeholder="Enter score" value={scores.test1} onChange={(e) => setScores(prev => ({ ...prev, test1: e.target.value }))} /> <p className="font-bold">Grade: {grades.baseline}</p> </div> {/* Test 2 Input */} <div className="border p-4 rounded"> <h3 className="font-bold mb-2">Test 2</h3> <input type="number" className="border p-2 w-full mb-2" placeholder="Enter score" value={scores.test2} onChange={(e) => setScores(prev => ({ ...prev, test2: e.target.value }))} /> <p className="font-bold">Grade: {grades.growth1}</p> {scores.test1 && scores.test2 && ( <p className="text-sm"> Growth: {(Number(scores.test2) - Number(scores.test1)).toFixed(1)} points </p> )} </div> {/* Test 3 Input */} <div className="border p-4 rounded bg-blue-50"> <h3 className="font-bold mb-2">Test 3 (Final)</h3> <input type="number" className="border p-2 w-full mb-2" placeholder="Enter score" value={scores.test3} onChange={(e) => setScores(prev => ({ ...prev, test3: e.target.value }))} /> <p className="font-bold">Final Grade: {grades.final}</p> {scores.test1 && scores.test3 && ( <p className="text-sm"> Total Growth: {(Number(scores.test3) - Number(scores.test1)).toFixed(1)} points </p> )} </div> </div> {/* Growth Chart */} <div className="mt-6 border p-4 rounded"> <h3 className="font-bold mb-4">Growth Trajectory</h3> <div className="h-64"> <LineChart data={growthData} width={600} height={250} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}> <Line type="monotone" dataKey="score" stroke="#2563eb" strokeWidth={2} /> <XAxis dataKey="name" /> <YAxis domain={[179, 308]} /> <Tooltip /> <ReferenceLine y={271} label="A (271)" stroke="#22c55e" strokeDasharray="3 3" /> <ReferenceLine y={258} label="B (258)" stroke="#eab308" strokeDasharray="3 3" /> <ReferenceLine y={230} label="C (230)" stroke="#ef4444" strokeDasharray="3 3" /> </LineChart> </div> </div> {/* Grade Guide */} <div className="mt-6 grid grid-cols-2 gap-4 text-sm"> <div className="border p-4 rounded bg-gray-50"> <h4 className="font-bold">Grade Bands</h4> <ul className="list-disc ml-4"> <li>A: 271-308</li> <li>B: 258-270</li> <li>C: 230-257</li> </ul> </div> <div className="border p-4 rounded bg-blue-50"> <h4 className="font-bold">Growth Adjustments</h4> <ul className="list-disc ml-4"> <li>Below 240: +3 points for growth</li> <li>Above 240: +5 points for growth</li> </ul> </div> </div> </CardContent> </Card> ); }
Editor is loading...
Leave a Comment