generated from muhtadeetaron/nextjs-template
initial commit
This commit is contained in:
shafin-r
233
examjam-admin/components/ExamBuilder.tsx
Normal file
233
examjam-admin/components/ExamBuilder.tsx
Normal file
@ -0,0 +1,233 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
const ExamBuilder = () => {
|
||||
const [paper, setPaper] = useState({
|
||||
id: "",
|
||||
title: "",
|
||||
data: {
|
||||
metadata: {
|
||||
type: "single",
|
||||
marking: "",
|
||||
duration: 0,
|
||||
quantity: 0,
|
||||
},
|
||||
questions: [
|
||||
{
|
||||
id: 1,
|
||||
type: "single",
|
||||
options: {
|
||||
a: "",
|
||||
b: "",
|
||||
c: "",
|
||||
d: "",
|
||||
},
|
||||
question: "",
|
||||
solution: "",
|
||||
correctAnswer: "",
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setPaper((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleMetadataChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setPaper((prev) => ({
|
||||
...prev,
|
||||
data: {
|
||||
...prev.data,
|
||||
metadata: {
|
||||
...prev.data.metadata,
|
||||
[name]: value,
|
||||
},
|
||||
},
|
||||
}));
|
||||
};
|
||||
|
||||
const handleQuestionChange = (index, field, value) => {
|
||||
const updatedQuestions = paper.data.questions.map((q, i) =>
|
||||
i === index ? { ...q, [field]: value } : q
|
||||
);
|
||||
setPaper((prev) => ({
|
||||
...prev,
|
||||
data: { ...prev.data, questions: updatedQuestions },
|
||||
}));
|
||||
};
|
||||
|
||||
const handleOptionChange = (index, optionKey, value) => {
|
||||
const updatedQuestions = paper.data.questions.map((q, i) =>
|
||||
i === index ? { ...q, options: { ...q.options, [optionKey]: value } } : q
|
||||
);
|
||||
setPaper((prev) => ({
|
||||
...prev,
|
||||
data: { ...prev.data, questions: updatedQuestions },
|
||||
}));
|
||||
};
|
||||
|
||||
const addQuestion = () => {
|
||||
setPaper((prev) => ({
|
||||
...prev,
|
||||
data: {
|
||||
...prev.data,
|
||||
questions: [
|
||||
...prev.data.questions,
|
||||
{
|
||||
id: prev.data.questions.length + 1,
|
||||
type: "single",
|
||||
options: { a: "", b: "", c: "", d: "" },
|
||||
question: "",
|
||||
solution: "",
|
||||
correctAnswer: "",
|
||||
},
|
||||
],
|
||||
},
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
console.log("Exam Paper Submitted: ", paper);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="flex w-3/4 gap-10 h-fit">
|
||||
<section className="border-1 border-blue-100 rounded-2xl mt-5 py-10 px-10 max-h-[70vh] w-1/2">
|
||||
<h1 className="text-white text-3xl font-bold text-center mb-6">
|
||||
Exam Builder
|
||||
</h1>
|
||||
<form className="flex flex-col gap-4" onSubmit={handleSubmit}>
|
||||
<h2 className="text-white text-2xl">General Information</h2>
|
||||
<input
|
||||
type="text"
|
||||
name="title"
|
||||
value={paper.title}
|
||||
onChange={handleChange}
|
||||
placeholder="Exam Title"
|
||||
className="bg-white w-full rounded-full py-3 px-6"
|
||||
/>
|
||||
|
||||
<h2 className="text-white text-2xl">Metadata</h2>
|
||||
<select
|
||||
name="type"
|
||||
value={paper.data.metadata.type}
|
||||
onChange={handleMetadataChange}
|
||||
className="bg-white p-4 rounded-full"
|
||||
>
|
||||
<option value="single">Multiple Choice Questions (Single)</option>
|
||||
<option value="multiple">
|
||||
Multiple Choice Questions (Multiple)
|
||||
</option>
|
||||
</select>
|
||||
<input
|
||||
type="text"
|
||||
name="marking"
|
||||
value={paper.data.metadata.marking}
|
||||
onChange={handleMetadataChange}
|
||||
placeholder="Marking"
|
||||
className="bg-white w-full rounded-full py-3 px-6"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
name="duration"
|
||||
value={paper.data.metadata.duration}
|
||||
onChange={handleMetadataChange}
|
||||
placeholder="Duration"
|
||||
className="bg-white w-full rounded-full py-3 px-6"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
name="quantity"
|
||||
value={paper.data.metadata.quantity}
|
||||
onChange={handleMetadataChange}
|
||||
placeholder="How many questions?"
|
||||
className="bg-white w-full rounded-full py-3 px-6"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-blue-500 text-white p-3 rounded-full mt-4"
|
||||
>
|
||||
Submit Exam
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
<section className="border-1 border-blue-100 rounded-2xl mt-5 py-10 px-10 w-1/2">
|
||||
<h1 className="text-white text-3xl font-bold text-center mb-6">
|
||||
Questions
|
||||
</h1>
|
||||
{paper.data.questions.map((question, index) => (
|
||||
<div key={index} className="rounded-lg">
|
||||
<h2 className="text-white text-xl mb-4">Question {index + 1}</h2>
|
||||
<input
|
||||
type="text"
|
||||
value={question.question}
|
||||
onChange={(e) =>
|
||||
handleQuestionChange(index, "question", e.target.value)
|
||||
}
|
||||
placeholder="Question"
|
||||
className="bg-white w-full rounded-full py-3 px-6 mb-2"
|
||||
/>
|
||||
<div className="">
|
||||
{Object.keys(question.options).map((key) => (
|
||||
<div key={key} className="flex items-center gap-2 mb-2">
|
||||
<h3 className="text-white uppercase py-3 px-5 rounded-full bg-blue-600">
|
||||
{key}
|
||||
</h3>
|
||||
<input
|
||||
type="text"
|
||||
value={question.options[key]}
|
||||
onChange={(e) =>
|
||||
handleOptionChange(index, key, e.target.value)
|
||||
}
|
||||
placeholder={`Option ${key.toUpperCase()}`}
|
||||
className="bg-white w-full rounded-full py-3 px-6"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
value={question.correctAnswer.toLowerCase()}
|
||||
onChange={(e) =>
|
||||
handleQuestionChange(index, "correctAnswer", e.target.value)
|
||||
}
|
||||
placeholder="Correct answer (a, b, c, d)"
|
||||
className="bg-white w-full rounded-full py-3 px-6 mt-2"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={question.solution}
|
||||
onChange={(e) =>
|
||||
handleQuestionChange(index, "solution", e.target.value)
|
||||
}
|
||||
placeholder="Solution"
|
||||
className="bg-white w-full rounded-full py-3 px-6 mt-2"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={addQuestion}
|
||||
className="bg-green-500 text-white p-3 rounded-full mt-2"
|
||||
>
|
||||
Add Question
|
||||
</button>
|
||||
</section>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExamBuilder;
|
||||
|
||||
{
|
||||
/* */
|
||||
}
|
||||
Reference in New Issue
Block a user