Skip to content

Commit

Permalink
Merge pull request #17 from DebdeepKundu002/main
Browse files Browse the repository at this point in the history 
Updated Quiz Page
  • Loading branch information
@CODECHAMPS7
CODECHAMPS7 authored Sep 20, 2024
2 parents 4637dbf + 9590e1f commit ba79f25
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 93 deletions.
8 changes: 4 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,6 @@
"globals": "^15.9.0",
"postcss": "^8.4.47",
"tailwindcss": "^3.4.11",
"vite": "^5.4.1"
"vite": "^5.4.6"
}
}
176 changes: 88 additions & 88 deletions src/Pages/Quiz.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,116 +1,96 @@
import { useState } from "react";
import { useNavigate } from "react-router-dom"; // Import useNavigate for navigation
import { Data } from "./Data"; // Import your data
// import './Question.css'; // Import your CSS file

const Question = () => {
const Quiz = () => {
const [data, setData] = useState(Data);
const [index, setIndex] = useState(0);
const [score, setScore] = useState(0);
const [selectedAnswers, setSelectedAnswers] = useState(Array(data.length).fill(null)); // State for selected answers
const navigate = useNavigate(); // Initialize useNavigate hook

// Function to move to the next question or show finish/play again buttons
// Function to move to the next question or finish the quiz
const next = () => {
if (index < data.length - 1) {
setIndex(index + 1);
} else {
document.querySelector(
".score"
).innerHTML = `<p>Your Score : ${score}/5</p>`;
document.querySelector(".quiz").innerHTML = "";

let nextBtn = document.querySelector("#next");
nextBtn.innerHTML = "Play Again";
nextBtn.classList.add("reset");
const reset = document.querySelector(".reset");
reset.addEventListener("click", () => {
window.location.reload();
});

// Add finish button
const finishBtn = document.createElement("button");
finishBtn.innerHTML = "Finish";
finishBtn.classList.add("finish");
finishBtn.addEventListener("click", finishQuiz);
document.querySelector(".btns").appendChild(finishBtn);
finishQuiz(); // Call finishQuiz if it's the last question
}

const checked = document.querySelectorAll(".checkedValue");
checked.forEach((curVal) => {
curVal.checked = false;
});
};

// Function to navigate to home page
// Function to finish the quiz
const finishQuiz = () => {
navigate("/"); // Navigate to the home page
// Display score and handle submission logic
document.querySelector(".score").innerHTML = `<p>Your Score: ${score}/${data.length}</p>`;
document.querySelector(".quiz").style.display = "none";
// document.getElementById('next').style.display = 'none';
document.getElementById('submit').style.display = 'none';
document.getElementById('previous').style.display = 'none';

// Add finish button
const finishBtn = document.createElement("button");
finishBtn.innerHTML = "Finish";
finishBtn.classList.add(
"finish",
"bg-red-500",
"text-white",
"px-6",
"py-2",
"rounded-lg",
"hover:bg-red-700",
"transition",
"duration-300",
"ml-4" // Add margin-left to the "Finish" button
);
finishBtn.addEventListener("click", () => navigate("/")); // Navigate to home page
document.querySelector(".btns").appendChild(finishBtn);
};

// Function to move to the previous question
const previous = () => {
if (index > 0) {
setIndex(index - 1);
}
};

// Handle radio input change
const handleInput = (event) => {
let chooseVal = event.target.value;
const chooseVal = event.target.value;
const newSelectedAnswers = [...selectedAnswers];
newSelectedAnswers[index] = chooseVal; // Save selected answer

if (chooseVal === data[index].ans) {
setScore(score + 1);
}

setSelectedAnswers(newSelectedAnswers); // Update state
};

return (
<div className="section py-10 bg-gray-100">
<div className="container mx-auto max-w-lg p-6 bg-white shadow-lg rounded-lg">
<div className="section flex justify-center items-center bg-[#5a87a6]" style={{ minHeight: '75.9vh' }}>
<div className="container mx-auto max-w-lg p-6 bg-[#e2e8f0] shadow-lg rounded-lg">
<div className="quiz">
<div className="mb-6">
<h1 className="text-2xl font-bold text-gray-800 mb-4">
Q : {data[index].q}
Q{index + 1}: {data[index].q}
</h1>
<p className="text-gray-600">Question {index + 1} of {data.length}</p>
</div>

{/* Option A */}
<div className="option mb-4 flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer">
<input
name="select"
type="radio"
onChange={handleInput}
className="checkedValue mr-3"
value={data[index].a}
/>
<p className="text-gray-700">A : {data[index].a}</p>
</div>

{/* Option B */}
<div className="option mb-4 flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer">
<input
name="select"
type="radio"
onChange={handleInput}
className="checkedValue mr-3"
value={data[index].b}
/>
<p className="text-gray-700">B : {data[index].b}</p>
</div>

{/* Option C */}
<div className="option mb-4 flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer">
<input
name="select"
type="radio"
onChange={handleInput}
className="checkedValue mr-3"
value={data[index].c}
/>
<p className="text-gray-700">C : {data[index].c}</p>
</div>

{/* Option D */}
<div className="option mb-4 flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer">
<input
name="select"
type="radio"
onChange={handleInput}
className="checkedValue mr-3"
value={data[index].d}
/>
<p className="text-gray-700">D : {data[index].d}</p>
</div>
{/* Options */}
{['a', 'b', 'c', 'd'].map((option) => (
<div key={option} className="option mb-4 flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer">
<input
name="select"
type="radio"
onChange={handleInput}
className="checkedValue mr-3"
value={data[index][option]}
checked={selectedAnswers[index] === data[index][option]} // Check if this is the selected answer
/>
<p className="text-gray-700">{option.toUpperCase()}: {data[index][option]}</p>
</div>
))}
</div>

{/* Score display */}
Expand All @@ -120,17 +100,37 @@ const Question = () => {

{/* Navigation buttons */}
<div className="btns flex justify-center mt-8">
<button
id="next"
onClick={next}
className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-300"
>
Next
</button>
{/* Conditionally render the Previous button */}
{index > 0 && (
<button
id="previous"
onClick={previous}
className="px-6 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition duration-300 mr-4"
>
Previous
</button>
)}
{index < data.length - 1 ? (
<button
id="next"
onClick={next}
className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-300"
>
Next
</button>
) : (
<button
id="submit"
onClick={finishQuiz}
className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition duration-300"
>
Submit
</button>
)}
</div>
</div>
</div>
);
};

export default Question;
export default Quiz;

0 comments on commit ba79f25

Please sign in to comment.