Notes

import React, { useState } from 'react';
import axios from 'axios';
import NavBar from './NavBar';

export default function QuizUI() {
const [formData, setFormData] = useState({
subject: '',
language: '',
difficulty: '',
number: '',
pdf_file: null
});

const mystyle = {
color: 'red',
};

const btnStyle = {
backgroundColor: '#FF683B',
color: 'white',
};

const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData({
...formData,
[name]: value
});
};

const handleFileChange = (e) => {
setFormData({
...formData,
pdf_file: e.target.files[0]
});
};

const handleSubmit = async (e) => {
e.preventDefault();
const { subject, language, difficulty, number, pdf_file } = formData;
if (!subject || !language || !difficulty || !number || !pdf_file) {
alert('Please fill in all required fields.');
} else {
try {
const url = `http://127.0.0.1:5000/generate_quiz?subject=${subject}&language=${language}&difficulty=${difficulty}&number=${number}&pdf_file=${pdf_file}`;
const response = await axios.post(url);

// Handle successful API response
console.log('API Response:', response.data);
// Display success message or update UI as needed

} catch (error) {
// Handle API error
console.error('API Error:', error);
// Display error message or update UI to show error state
alert('An error occurred while processing your request. Please try again later.');
}
}
};


const handleReset = () => {
document.getElementById('pdf_file').value = ''; // Reset the file input field
setFormData({
subject: '',
language: '',
difficulty: '',
number: '',
pdf_file: null
});
};

return (
<>
<NavBar />
<div className="container">
<div className="row justify-content-center mt-4">
<div className="col-md-5 border border-4 rounded-3 pt-4 pb-3 ps-5 pe-5 shadow p-3 bg-body rounded">
<form onSubmit={handleSubmit}>
<h4 className="text-center mb-3">Custom Quiz Generator</h4>
<div className="mb-2">
<label htmlFor="subject" className="form-label">
Subjects <span style={mystyle}>*</span>
</label>
<input
type="text"
className="form-control form-control-sm mb-2"
id="subject"
placeholder='Enter Subjects'
name="subject"
value={formData.subject}
onChange={handleInputChange}
/>
<label htmlFor="language" className="form-label">
Language <span style={mystyle}>*</span>
</label>
<select
className="form-select form-select-sm mb-2"
id="language"
name="language"
value={formData.language}
onChange={handleInputChange}
>
<option value="">Choose Language</option>
<option value="english">English</option>
<option value="spanish">Spanish</option>
<option value="thai">Thailand</option>
</select>
<label htmlFor="difficulty" className="form-label">
Difficulty <span style={mystyle}>*</span>
</label>
<select
className="form-select form-select-sm mb-2"
id="difficulty"
name="difficulty"
value={formData.difficulty}
onChange={handleInputChange}
>
<option value="">Choose Difficulty</option>
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</select>
<label htmlFor="number" className="form-label">
Number of Questions <span style={mystyle}>*</span>
</label>
<input
type="number"
className="form-control form-control-sm mb-2"
placeholder='Enter Number of Questions'
id="number"
name="number"
value={formData.number}
onChange={handleInputChange}
/>
<label htmlFor="pdf_file" className="form-label">
File Upload <span style={mystyle}>*</span>
</label>
<input
type="file"
className="form-control form-control-sm mb-2"
id="pdf_file"
name="pdf_file"

onChange={handleFileChange}
/>
</div>
<div className="d-flex justify-content-between mt-3">
<button
type="submit"
className="btn btn-sm"
style={btnStyle}
>
Generate <i className="fa-solid fa-arrow-right"></i>
</button>
<button
type="button"
className="btn btn-sm"
style={btnStyle}
onClick={handleReset}
>
Cancel
</button>
</div>
</form>
</div>
</div>
</div>
</>
);
}