Skip to content

Commit

Permalink
Quiz Ui Redesign (#70)
Browse files Browse the repository at this point in the history 
* Improve Quize UI

* Improve
  • Loading branch information
@KrishChothani
KrishChothani authored Oct 12, 2024
1 parent c104317 commit 6890c93
Showing 1 changed file with 119 additions and 86 deletions.
205 changes: 119 additions & 86 deletions frontend/src/appComponents/QuizPage.tsx
View file
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>

);
}

0 comments on commit 6890c93

Please sign in to comment.