Glama
Gauntlet-Incept MCP

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; 