Notes

import React, { useState } from 'react';
import NavBar from './NavBar';
import { FaArrowRight } from "react-icons/fa";

export default function WorkBook() {
const [selectedQuestionType, setSelectedQuestionType] = useState('');
const [subOptions, setSubOptions] = useState([]);

const subjects = [
{ value: "", label: "Choose Subject" },
{ value: "english", label: "English" },
{ value: "math", label: "Math" },
{ value: "science", label: "Science" },
{ value: "social_studies", label: "Social Studies" },
{ value: "reading", label: "Reading" },
{ value: "writing", label: "Writing" },
{ value: "art", label: "Art" },
{ value: "music", label: "Music" },
{ value: "physical_education", label: "Physical Education" },
{ value: "health", label: "Health" },
{ value: "technology", label: "Technology" },
{ value: "library", label: "Library" },
{ value: "foreign_language", label: "Foreign Language" }
];

const grades = [
{ value: "", label: "Choose Grade" },
{ value: "k", label: "Kindergarten" },
{ value: "1", label: "1st Grade" },
{ value: "2", label: "2nd Grade" },
{ value: "3", label: "3rd Grade" },
{ value: "4", label: "4th Grade" },
{ value: "5", label: "5th Grade" },
{ value: "6", label: "6th Grade" },
{ value: "7", label: "7th Grade" },
{ value: "8", label: "8th Grade" },
{ value: "9", label: "9th Grade" },
{ value: "10", label: "10th Grade" },
{ value: "11", label: "11th Grade" },
{ value: "12", label: "12th Grade" }
];

const numbers = [
{ value: "", label: "Choose Number of Questions" },
{ value: "5", label: "5" },
{ value: "10", label: "10" },
{ value: "15", label: "15" },
{ value: "20", label: "20" }
];

const questionTypes = [
{ value: "", label: "Choose Question Type" },
{ value: "MCQ", label: "MCQ" },
{ value: "TF_Simple", label: "True and False Statments" },
{ value: "Fill-in-the-Blanks", label: "Fill in the blanks" },
{ value: "Match_Term_Def", label: "Matching term and definition" },
{ value: "Q&A", label: "Question and Answer" },
{ value: "Sequencing", label: "Sequencing" },
{ value: "Problem_Solving", label: "Problem Solving" },
];

const subQuestionTypes = {
MCQ: [
{ value: "", label: "Choose Sub Question Type" },
{ value: "MCQ_Single", label: "Single Correct Answer" },
{ value: "MCQ_Multiple", label: "Multiple Correct Answer" }
],
"Fill-in-the-Blanks": [
{ value: "", label: "Choose Sub Question Type" },
{ value: "FIB_Single", label: "Single Blank" },
{ value: "FIB_Multiple", label: "Multiple Blank" },
{ value: "Cloze_Context", label: "Cloze Tests Contextual Blanks" }
],
"Q&A": [
{ value: "", label: "Choose Sub Question Type" },
{ value: "Short_Answer_List", label: "Short Answer List" },
{ value: "Long_Answer_List", label: "Long Answer List" },
{ value: "Short_Answer_Explain", label: "Short Answer Brief Explanation" },
{ value: "Long_Answer_Explain", label: "Long Answer Brief Explanation" },
],

Sequencing: [
{ value: "", label: "Choose Sub Question Type" },
{ value: "Seq_Events", label: "Sequencing Order Events" },
{ value: "Seq_Chron_Order", label: "Sequencing Chronological Order" }
],
Problem_Solving: [
{ value: "", label: "Choose Sub Question Type" },
{ value: "PS_Math", label: "Mathematical Problems" }
]
};

const handleQuestionTypeChange = (e) => {
const selectedType = e.target.value;
setSelectedQuestionType(selectedType);
setSubOptions(subQuestionTypes[selectedType] || []);
};

const mystyle = {
color: 'red'
};

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


return (
<>
<NavBar />
<div className="container">
<div className="row justify-content-center mt-3">
<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>
<h4 className="text-center mb-3">WorkSheet Generator</h4>
<div className="mb-2">
<label htmlFor="subject" className="form-label">
Subject <span style={mystyle}>*</span>
</label>
<select
className="form-select form-select-sm mb-3"
id="subject"
name="subject"
>
{subjects.map((element, index) => (
<option key={index} value={element.value}>
{element.label}
</option>
))}
</select>

<label htmlFor="grade" className="form-label">
Grade <span style={mystyle}>*</span>
</label>
<select
className="form-select form-select-sm mb-3"
id="grade"
name="grade"
>
{grades.map((grade, index) => (
<option key={index} value={grade.value}>
{grade.label}
</option>
))}
</select>

<label htmlFor="number" className="form-label">
Number of Question <span style={mystyle}>*</span>
</label>
<select
className="form-select form-select-sm mb-3"
id="number"
name="number"
>
{numbers.map((number, index) => (
<option key={index} value={number.value}>
{number.label}
</option>
))}
</select>

<label htmlFor="question-type" className="form-label">
Question Type<span style={mystyle}>*</span>
</label>
<select
className="form-select form-select-sm mb-3"
id="question-type"
name="question-type"
onChange={handleQuestionTypeChange}
>
{questionTypes.map((element, index) => (
<option key={index} value={element.value}>
{element.label}
</option>
))}
</select>

{subOptions.length > 0 && (
<>
<label htmlFor="sub-question-type" className="form-label">
Sub Question Type<span style={mystyle}>*</span>
</label>
<select
className="form-select form-select-sm mb-3"
id="sub-question-type"
name="sub-question-type"
>
{subOptions.map((element, index) => (
<option key={index} value={element.value}>
{element.label}
</option>
))}
</select>
</>
)}

<label htmlFor="textarea" className="form-label">
Your Topic <span style={mystyle}>*</span>
</label>
<textarea
type="text"
className="form-control form-control-sm mb-2"
placeholder="Eg. Arthimetic , History or Lesson number 2"
id="textarea"
name="textarea"
/>

<label htmlFor="pdf_file" className="form-label">
File Upload <span style={{ color: 'red' }}>*</span>
</label>
<input
type="file"
className="form-control form-control-sm mb-2"
id="pdf_file"
name="pdf_file"
accept="application/pdf"
/>
<p className='text-center' style={{ fontSize: '14px' }}><span className='fw-bold' style={{ color: 'red' }}>Note: *</span> For better result please upload <label style={{ color: 'red' }}>WorkBook</label> pdf.</p>
</div>

<div className="d-flex justify-content-between mt-3">
<button
type="submit"
className="btn btn-sm"
style={btnStyle}>
Generate <FaArrowRight />
</button>
<button
type="button"
className="btn btn-sm"
style={btnStyle}
>
Reset
</button>
</div>
</form>
</div>
</div>
</div>
</>
);
}