Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Quiz Ui Redesign #70

Merged
merged 2 commits into from
Oct 12, 2024
Merged

Quiz Ui Redesign #70

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
34ab441
Improve Quize UI
KrishChothani Oct 11, 2024
5729d95
Improve
KrishChothani Oct 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
205 changes: 119 additions & 86 deletions frontend/src/appComponents/QuizPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,10 @@ export default function QuizPage() {
const { id } = useParams<{ id: string }>();

const navigate = useNavigate();

useEffect(() => {
if (userId && secretCode != "") {
fetchQuiz();
} else {
console.log("userId", userId);
console.log("secretCode", secretCode);
}
}, [userId]);

Expand All @@ -43,8 +41,6 @@ export default function QuizPage() {
},
);
const data = response.data;
console.log("data");
console.log(data);
setQuiz(data);
setUserAnswers({});
} catch (error) {
Expand Down Expand Up @@ -81,7 +77,9 @@ export default function QuizPage() {
correctAnswers++;
}
});
const finalScore = quiz ? (correctAnswers / quiz.questions.length) * 100 : 0;
const finalScore = quiz
? (correctAnswers / quiz.questions.length) * 100
: 0;
setScore(finalScore);

axios
Expand All @@ -97,7 +95,8 @@ export default function QuizPage() {
"Content-Type": "application/json",
},
},
).then(() => {
)
.then(() => {
alert("Quiz submitted successfully");
navigate("/");
})
Expand All @@ -108,100 +107,134 @@ export default function QuizPage() {

if (!userId) {
return (
<div className="container mx-auto p-4">
<h1 className="text-2xl font-bold mb-4">Enter Your Information</h1>
<form onSubmit={handleUserInfoSubmit} className="space-y-4">
<input
type="text"
value={userInfo.name}
onChange={(e) => setUserInfo({ ...userInfo, name: e.target.value })}
placeholder="Name"
className="w-full p-2 border rounded"
required
/>
<div className="container mx-auto p-6 min-h-screen flex flex-col items-center justify-center">
<div className="bg-white shadow-lg rounded-lg p-8 w-full max-w-lg">
<h1 className="text-3xl font-extrabold text-center text-gray-800 mb-6">
Enter Your Information
</h1>
<form onSubmit={handleUserInfoSubmit} className="space-y-6">
<input
type="text"
value={userInfo.name}
onChange={(e) =>
setUserInfo({ ...userInfo, name: e.target.value })
}
placeholder="Name"
className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
<input
type="text"
value={userInfo.rollNo}
onChange={(e) =>
setUserInfo({ ...userInfo, rollNo: e.target.value })
}
placeholder="Roll No"
className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
<input
type="number"
value={userInfo.year}
onChange={(e) =>
setUserInfo({ ...userInfo, year: e.target.value })
}
placeholder="Year"
className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
<button
type="submit"
className="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg font-semibold shadow-lg transition-all duration-300"
>
Start Quiz
</button>
</form>
</div>
</div>
);
}

if (!quiz) {
return (
<div className="container mx-auto p-6 min-h-screen flex flex-col items-center justify-center ">
<div className="bg-white shadow-lg rounded-lg p-8 w-full max-w-lg">
<h1 className="text-3xl font-extrabold text-center text-gray-800 mb-6">
Enter Secret Code
</h1>
<input
type="text"
value={userInfo.rollNo}
onChange={(e) =>
setUserInfo({ ...userInfo, rollNo: e.target.value })
}
placeholder="Roll No"
className="w-full p-2 border rounded"
required
/>
<input
type="number"
value={userInfo.year}
onChange={(e) => setUserInfo({ ...userInfo, year: e.target.value })}
placeholder="Year"
className="w-full p-2 border rounded"
required
value={secretCode}
onChange={(e) => setSecretCode(e.target.value)}
placeholder="Secret Code"
className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-6"
/>
<button
type="submit"
className="bg-blue-500 text-white px-4 py-2 rounded"
onClick={fetchQuiz}
className="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg font-semibold shadow-lg transition-all duration-300"
>
Start Quiz
</button>
</form>
</div>
);
}

if (!quiz) {
return (
<div className="container mx-auto p-4">
<h1 className="text-2xl font-bold mb-4">Enter Secret Code</h1>
<input
type="text"
value={secretCode}
onChange={(e) => setSecretCode(e.target.value)}
placeholder="Secret Code"
className="w-full p-2 border rounded mb-4"
/>
<button
onClick={fetchQuiz}
className="bg-blue-500 text-white px-4 py-2 rounded"
>
Start Quiz
</button>
</div>
</div>
);
}

return (
<div className="container mx-auto p-4">
<h1 className="text-2xl font-bold mb-4">{quiz.title}</h1>
<form onSubmit={handleSubmit} className="space-y-4">
{quiz.questions.map((question) => (
<div key={question.id} className="space-y-2">
<p className="font-semibold">{question.question}</p>
{question.options.split(",").map((option, index) => (
<label key={index} className="block">
<input
type="radio"
name={`question-${question.id}`}
value={option}
onChange={() => handleAnswerChange(question.id, option)}
className="mr-2"
/>
{option}
</label>
<div className="container mx-auto p-6 min-h-screen flex flex-col items-center justify-center bg-gray-100">
<div className="bg-white shadow-lg rounded-lg p-8 max-w-3xl w-full mx-auto">
{quiz ? (
<>
<h1 className="text-4xl font-extrabold text-center text-gray-800 mb-8">
{quiz.title || "Quiz Title"}
</h1>
<form onSubmit={handleSubmit} className="space-y-6">
{quiz.questions.map((question) => (
<div key={question.id} className="space-y-4">
<p className="text-xl font-semibold text-gray-800">
{question.question || "Untitled Question"}
</p>
<div className="space-y-2">
{question.options.split(",").map((option, index) => (
<label key={index} className="block">
<input
type="radio"
name={`question-${question.id}`}
value={option}
onChange={() =>
handleAnswerChange(question.id, option)
}
className="mr-2 accent-blue-500"
required
/>
{option}
</label>
))}
</div>
</div>
))}
</div>
))}
<button
type="submit"
className="bg-green-500 text-white px-4 py-2 rounded"
>
Submit Answers
</button>
</form>
{score !== null && (
<div className="mt-4">
<h2 className="text-xl font-bold">Your Score: {score.toFixed(2)}%</h2>
<button
type="submit"
className="w-full bg-green-500 hover:bg-green-600 text-white py-3 rounded-lg font-semibold shadow-lg transition-all duration-300"
>
Submit Answers
</button>
</form>
{score !== null && (
<div className="mt-8 text-center">
<h2 className="text-2xl font-bold text-gray-800">
Your Score: {score.toFixed(2)}%
</h2>
</div>
)}
</>
) : (
<div className="text-center">
<h2 className="text-3xl font-bold text-gray-700">Loading Quiz...</h2>
</div>
)}
</div>
</div>

);
}
Loading