Gauntlet-Incept MCP
by Birdsmith
import React, { useState } from 'react';
import axios from 'axios';
function QuestionPage() {
const [formData, setFormData] = useState({
subject: 'math',
grade: '6',
standard: '',
lesson: '',
difficulty: '2',
exampleQuestion: ''
});
const [generatedQuestion, setGeneratedQuestion] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({
...formData,
[name]: value
});
};
const handleSubmit = async (e) => {
e.preventDefault();
setLoading(true);
setError(null);
try {
// Prepare request data
const requestData = {
tags: {
subject: formData.subject,
grade: formData.grade,
standard: formData.standard,
lesson: formData.lesson,
difficulty: parseInt(formData.difficulty)
}
};
if (formData.exampleQuestion) {
requestData.exampleQuestion = formData.exampleQuestion;
}
// Make API request
const response = await axios.post('http://localhost:3000/api/question/generate', requestData);
setGeneratedQuestion(response.data.data);
} catch (err) {
setError(err.response?.data?.error || 'An error occurred while generating the question');
} finally {
setLoading(false);
}
};
return (
<div className="question-page">
<h1>Generate Educational Questions</h1>
<div className="form-container">
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="subject">Subject:</label>
<select
id="subject"
name="subject"
value={formData.subject}
onChange={handleChange}
required
>
<option value="math">Math</option>
<option value="language">Language</option>
<option value="science">Science</option>
<option value="social_studies">Social Studies</option>
</select>
</div>
<div className="form-group">
<label htmlFor="grade">Grade Level:</label>
<select
id="grade"
name="grade"
value={formData.grade}
onChange={handleChange}
required
>
{[...Array(9).keys()].map(i => (
<option key={i} value={i === 0 ? 'K' : i.toString()}>
{i === 0 ? 'Kindergarten' : `Grade ${i}`}
</option>
))}
</select>
</div>
<div className="form-group">
<label htmlFor="standard">Standard:</label>
<input
type="text"
id="standard"
name="standard"
value={formData.standard}
onChange={handleChange}
placeholder="e.g., CCSS.Math.6.NS.1"
/>
</div>
<div className="form-group">
<label htmlFor="lesson">Lesson:</label>
<input
type="text"
id="lesson"
name="lesson"
value={formData.lesson}
onChange={handleChange}
placeholder="e.g., Division of Fractions"
/>
</div>
<div className="form-group">
<label htmlFor="difficulty">Difficulty Level:</label>
<select
id="difficulty"
name="difficulty"
value={formData.difficulty}
onChange={handleChange}
required
>
<option value="1">Easy</option>
<option value="2">Medium</option>
<option value="3">Hard</option>
</select>
</div>
<div className="form-group">
<label htmlFor="exampleQuestion">Example Question (Optional):</label>
<textarea
id="exampleQuestion"
name="exampleQuestion"
value={formData.exampleQuestion}
onChange={handleChange}
placeholder="Paste an example question here to generate a similar one"
rows="5"
></textarea>
</div>
<button type="submit" className="btn btn-primary" disabled={loading}>
{loading ? 'Generating...' : 'Generate Question'}
</button>
</form>
</div>
{error && (
<div className="error-message">
<p>{error}</p>
</div>
)}
{generatedQuestion && (
<div className="result-container">
<h2>Generated Question</h2>
<div className="question-content">
<pre>{generatedQuestion.question}</pre>
</div>
<div className="question-metadata">
<h3>Metadata</h3>
<ul>
<li><strong>Subject:</strong> {generatedQuestion.tags.subject}</li>
<li><strong>Grade:</strong> {generatedQuestion.tags.grade}</li>
<li><strong>Standard:</strong> {generatedQuestion.tags.standard}</li>
<li><strong>Lesson:</strong> {generatedQuestion.tags.lesson}</li>
<li><strong>Difficulty:</strong> {generatedQuestion.tags.difficulty}</li>
</ul>
</div>
<div className="question-quality">
<h3>Quality Assessment</h3>
<p><strong>Overall:</strong> {generatedQuestion.gradeResult.pass ? 'Passed' : 'Failed'}</p>
<div className="scorecard">
{Object.entries(generatedQuestion.gradeResult.scorecard).map(([criterion, passed]) => (
<div key={criterion} className={`criterion ${passed ? 'passed' : 'failed'}`}>
<span className="criterion-name">{criterion}</span>
<span className="criterion-result">{passed ? '✓' : '✗'}</span>
</div>
))}
</div>
<div className="feedback">
<h4>Feedback</h4>
<p>{generatedQuestion.gradeResult.feedback}</p>
</div>
</div>
</div>
)}
</div>
);
}
export default QuestionPage;