Skip to content

Commit

Permalink
updated Quiz Page
Browse files Browse the repository at this point in the history
  • Loading branch information
@DebdeepKundu002
DebdeepKundu002 committed Sep 18, 2024
1 parent 6837443 commit dd41fc7
Show file tree
Hide file tree
Showing 3 changed files with 201 additions and 123 deletions.
43 changes: 43 additions & 0 deletions src/Pages/Data.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
export const Data = [
{
q:"What is JavaScript ?",
a:"JS is Programming language",
b:"JS is Framework",
c:"None",
d:"Typed Langauge",
ans:"JS is Programming language"
},
{
q:"What is ReactJS ?",
a:"Library",
b:"React is a JavaScript Library",
c:"Framework",
d:"Lnaguage",
ans:"React is a JavaScript Library"
},
{
q:"Full Form of JS ?",
a:"JavaSell",
b:"JavaSpring",
c:"JavaScript",
d:"JavaSplit",
ans:"JavaScript"
},
{
q:"Who Develope JS ?",
a:"Brendon ",
b:"Brendon Mac",
c:"Bretly",
d:"Brendon Eich",
ans:"Brendon Eich"
},
{
q:"Who Develope ReactJS?",
a:"Jordan Walk",
b:"Jordan ",
c:"Jordan King",
d:"Jordan sen",
ans:"Jordan Walk"

},
]
78 changes: 78 additions & 0 deletions src/Pages/Question.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
/* General Styling */
.Section {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #7cf3cb;
padding: 20px; /* Added padding for better spacing */
min-height: 100vh; /* Ensure full viewport height */
display: flex;
justify-content: center;
align-items: center;
}

.container {
background-color:#c6efd8;
width: 450px;
padding: 33px;
margin-top: 22px;
border-radius: 11px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Added shadow for depth */
}

h1 {
color: rgb(1, 1, 46); /* Match the button color */
font-size: 24px;
}

.option {
display: flex;
align-items: center;
margin-bottom: 10px; /* Space between options */
}

.option input {
margin-right: 10px; /* Space between input and label */
}

.option p {
font-size: 20px;
margin: 0;
}

.btns {
text-align: center;
display: flex;
justify-content: center;
gap: 11px;
margin-top: 20px;
}

.btns button {
width: 140px;
height: 38px;
border: none;
font-size: 22px;
background-color: rgb(1, 1, 46);
color: white;
cursor: pointer;
border-radius: 5px; /* Rounded corners for buttons */
transition: background-color 0.3s; /* Smooth transition on hover */
}

.btns button:hover {
background-color: rgb(0, 0, 30); /* Darker background on hover */
}

.score {
text-align: center;
margin-top: 20px;
}

.score p {
font-size: 37px;
color: rgb(1, 1, 46); /* Match the quiz question color */
margin: 0;
}
203 changes: 80 additions & 123 deletions src/Pages/Quiz.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,135 +1,92 @@
import { useState } from 'react';
import React, { 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 Quiz = () => {
const questions = [
{
question: "What does HTML stand for?",
options: ["Hyper Text Markup Language", "Hyperlinks and Text Markup Language", "High-Level Text Markup Language", "Hyper Text Multi Language"],
answer: "Hyper Text Markup Language"
},
{
question: "Which of the following is a JavaScript data type?",
options: ["String", "Integer", "Character", "Float"],
answer: "String"
},
{
question: "In Python, which of the following is used to define a function?",
options: ["func", "def", "function", "define"],
answer: "def"
},
{
question: "Which CSS property is used to change the background color?",
options: ["color", "bgcolor", "background-color", "bg-color"],
answer: "background-color"
},
{
question: "What is the output of the following code: console.log(typeof null);?",
options: ["null", "object", "undefined", "boolean"],
answer: "object"
},
{
question: "Which of the following is not a valid HTML element?",
options: ["<div>", "<span>", "<section>", "<data>"],
answer: "<data>"
},
{
question: "In which language is the Android operating system primarily written?",
options: ["Java", "C++", "Python", "Swift"],
answer: "Java"
},
{
question: "What does SQL stand for?",
options: ["Structured Query Language", "Standard Query Language", "Simple Query Language", "Sequential Query Language"],
answer: "Structured Query Language"
},
{
question: "In Git, what command is used to clone a repository?",
options: ["git copy", "git clone", "git fetch", "git pull"],
answer: "git clone"
},
{
question: "What is the purpose of the `this` keyword in JavaScript?",
options: ["It refers to the global object.", "It refers to the current function.", "It refers to the current object in context.", "It has no specific purpose."],
answer: "It refers to the current object in context."
}
];
const Question = () => {
const [data, setData] = useState(Data);
const [index, setIndex] = useState(0);
const [score, setScore] = useState(0);
const navigate = useNavigate(); // Initialize useNavigate hook

const [userAnswers, setUserAnswers] = useState(Array(questions.length).fill(''));
const [score, setScore] = useState(null);
// Function to move to the next question or show finish/play again buttons
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 = "";

const handleOptionChange = (questionIndex, selectedOption) => {
const newAnswers = [...userAnswers];
newAnswers[questionIndex] = selectedOption;
setUserAnswers(newAnswers);
};
let nextBtn = document.querySelector("#next");
nextBtn.innerHTML = "Play Again";
nextBtn.classList.add("reset");
const reset = document.querySelector(".reset");
reset.addEventListener("click", () => {
window.location.reload();
});

const handleSubmit = (e) => {
e.preventDefault();
let totalScore = 0;
// Add finish button
const finishBtn = document.createElement("button");
finishBtn.innerHTML = "Finish";
finishBtn.classList.add("finish");
finishBtn.addEventListener("click", finishQuiz);
document.querySelector(".btns").appendChild(finishBtn);
}

questions.forEach((question, index) => {
if (userAnswers[index] === question.answer) {
totalScore += 1;
}
});
const checked = document.querySelectorAll(".checkedValue");
checked.forEach((curVal) => {
curVal.checked = false;
});
};

setScore(totalScore);
};
// Function to navigate to home page
const finishQuiz = () => {
navigate('/'); // Navigate to the home page
};

const handleClear = () => {
setUserAnswers(Array(questions.length).fill(''));
setScore(null);
};
// Handle radio input change
const handleInput = (event) => {
let chooseVal = event.target.value;
if (chooseVal === data[index].ans) {
setScore(score + 1);
}
};

return (
<div className="flex justify-center items-center pt-10">
<div className=" p-6 rounded-lg shadow-lg w-full max-w-md">
<h1 className="text-2xl font-bold mb-4 text-center text-blue-700">Basic Quiz</h1>
<form onSubmit={handleSubmit}>
{questions.map((question, index) => (
<div key={index} className="mb-4">
<h3 className="font-semibold mb-2">{question.question}</h3>
{question.options.map((option) => (
<div key={option} className="flex items-center mb-2">
<input
type="radio"
id={option}
name={`question-${index}`}
value={option}
checked={userAnswers[index] === option}
onChange={() => handleOptionChange(index, option)}
className="mr-2"
/>
<label htmlFor={option} className="ml-2 border border-black rounded-lg p-2 cursor-pointer">
{option}
</label>
return (
<div className='Section'>
<div className='container'>
<div className='quiz'>
<div>
<h1>Q : {data[index].q}</h1>
</div>
<div className='option'>
<input name='select' type='radio' onChange={handleInput} className='checkedValue' value={data[index].a} />
<p>A : {data[index].a}</p>
</div>

<div className='option'>
<input name='select' type='radio' onChange={handleInput} className='checkedValue' value={data[index].b} />
<p>B : {data[index].b}</p>
</div>

<div className='option'>
<input name='select' type='radio' onChange={handleInput} className='checkedValue' value={data[index].c} />
<p>C : {data[index].c}</p>
</div>

<div className='option'>
<input name='select' type='radio' onChange={handleInput} className='checkedValue' value={data[index].d} />
<p>D : {data[index].d}</p>
</div>
</div>
))}
</div>
))}
<div className="flex justify-between mt-4">
<button
type="submit"
className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-700 w-full mr-2">
Submit
</button>
<button
type="button"
onClick={handleClear}
className="bg-gray-300 text-black px-4 py-2 rounded-lg hover:bg-gray-400 w-full">
Clear
</button>
</div>
</form>

{score !== null && (
<div className="mt-6 text-center">
<h2 className="text-lg font-bold">Your Score: {score} out of {questions.length}</h2>
</div>
)}
</div>
</div>
);
<div className='score'></div>
<div className='btns'>
<button id='next' onClick={next}>Next</button>
</div>
</div>
</div>
);
};

export default Quiz;
export default Question;

0 comments on commit dd41fc7

Please sign in to comment.