Skip to content

Commit

Permalink
vishalverma9572#79 [FEATURE] UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@om9090
om9090 committed Oct 18, 2024
1 parent 44889b3 commit 999462c
Show file tree
Hide file tree
Showing 4 changed files with 164 additions and 81 deletions.
2 changes: 1 addition & 1 deletion backend/package-lock.json
View file

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

107 changes: 67 additions & 40 deletions quiz-maker/src/Components/CreateTest.css
View file
Original file line number Diff line number Diff line change
@@ -1,145 +1,172 @@
/* Container styling */
.create-quiz {
background-color: #2d3b45;
color: #fff;
padding: 20px;
background-color: #ffffff;
color: #fafafa;
padding: 30px; /* Added extra padding for breathing space */
border-radius: 10px;
width: 100%;
max-width: 800px;
margin: 0 auto;
margin: 30px auto; /* Centered the form with a margin from the top */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Added subtle shadow for depth */
}

/* Title Styling */
.create-quiz h2 {
margin-bottom: 20px;
margin-bottom: 25px;
font-family: "Wittgenstein", serif;
padding-bottom: 10px;
font-size: 2rem;
text-align: center; /* Centered title */
border-bottom: 2px solid #fff;
}

/* Form Group Styling */
.create-quiz .form-group {
margin-bottom: 15px;

margin-bottom: 20px; /* More space between fields */
display: flex;
flex-direction: column;
}


.create-quiz .form-group label {
display: block;
margin-bottom: 5px;
margin-bottom: 8px; /* Increased margin for breathing room */
font-weight: bold;
padding-right: 10px;
padding-top: 5px;

}


.create-quiz .form-group input[type="text"],
/* Input Fields */
.create-quiz .form-group input[type="number"] {
width: 100%;
padding: 10px;
border: none;
background-color: #f9f9f9; /* Lighter background for better contrast */
color: #333; /* Darker text color for readability */
border: 1px solid #ccc; /* Light gray border */
padding: 10px 15px; /* Increased padding for comfort */
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, border-color 0.3s ease; /* Transition for smooth effects */
}


/* Option Group */
.create-quiz .option-group {
display: flex;
align-items: center;
gap: 10px; /* Better spacing between option buttons and input */
margin-bottom: 10px;
}

.create-quiz .option-group button {
background-color: #1a2a33;
background-color: #ffffff;
color: #fff;
border: none;
padding: 5px 10px;
padding: 5px 15px; /* Increased padding for a more clickable button */
border-radius: 5px;
cursor: pointer;
margin-left: 10px;
transition: background-color 0.3s ease;
}

.create-quiz .option-group button:hover {
background-color: #13212c;
background-color: #ffffff;
}

.create-quiz .option-group input[type="radio"] {
margin-left: 10px;
transform: scale(1.2); /* Enlarged radio button for easier clicking */
}

/* Question Card */
.create-quiz .question-card {
background-color: #fff;
color: #2d3b45;
/* color: #2d3b45; */
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
margin-bottom: 25px; /* Spaced out question cards */
/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
position: relative;
}

/* Remove Button */
.create-quiz .remove-button {
background-color: #ff4c4c;
color: #fff;
border: none;
padding: 5px 10px;
padding: 6px 12px;
border-radius: 5px;
cursor: pointer;
margin-left: 10px;
position: absolute;
right: 10px;
top: 10px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.create-quiz .remove-button:hover {
background-color: #ff1a1a;

color: white;
border-color: #000;
transform: scale(1.05);
transform: scale(1.1);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* Add Button */
.Add-button {
padding: 10px 20px;
padding: 12px 20px; /* More padding for larger buttons */
font-size: 16px;
color: #fff;
margin-right: 15px;
border-radius: 8px;
cursor: pointer;
background-color: #4caf50; /* Green color for Add buttons */
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.Add-button:hover {
background-color: #212c34;
color: white;
border-color: #000;
background-color: #388e3c;
transform: scale(1.05);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* Add Option Button */
.Add-option {
padding: 8px;
padding: 10px 15px;
font-size: 16px;
color: #fff;
margin-right: 10px;
border-radius: 8px;
cursor: pointer;
background-color: #1a2a33;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.Add-option:hover {
background-color: #13212c;
}

/* Submit Button */
.create-quiz .button {
background-color: #1a2a33;
/* background-color: #1a2a33; */
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
padding: 12px 20px;
border-radius: 8px;
cursor: pointer;
margin-top: 10px;
margin-top: 20px; /* Added space before submit button */
transition: background-color 0.3s ease, transform 0.2s ease;
}

.create-quiz .button:hover {
background-color: #13212c;
/* background-color: #13212c; */
transform: scale(1.05);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* Error Styling */
.create-quiz .error {
color: #ff4c4c;
font-weight: bold;
margin-top: 10px;
}

/* Removes the up down arrow from input type=number */
/* For Chrome, Safari, and Edge */
/* Number Input Customization */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
Expand All @@ -149,4 +176,4 @@ input[type="number"]::-webkit-outer-spin-button {
/* For Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
}
121 changes: 86 additions & 35 deletions quiz-maker/src/Components/CreateTest.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@ import React, { useState } from "react";
import "./CreateTest.css";
import { useNavigate } from "react-router-dom";
import { Typography, styled } from "@mui/material";

import DeleteRoundedIcon from "@mui/icons-material/DeleteRounded";
const CreateQuiz = () => {
const navigate = useNavigate();

//check user is logged in or not
if (
!localStorage.getItem("token") ||
localStorage.getItem("token") === null
) {
navigate("/login");
}
// if (
// !localStorage.getItem("token") ||
// localStorage.getItem("token") === null
// ) {
// navigate("/login");
// }
const [title, setTitle] = useState("");
const [timeLimit, setTimeLimit] = useState("");
const [questions, setQuestions] = useState([
Expand All @@ -38,7 +38,8 @@ const CreateQuiz = () => {

const handleCorrectAnswerChange = (questionIndex, optionIndex) => {
const newQuestions = [...questions];
newQuestions[questionIndex].correctAnswer = newQuestions[questionIndex].options[optionIndex];
newQuestions[questionIndex].correctAnswer =
newQuestions[questionIndex].options[optionIndex];
setQuestions(newQuestions);
};

Expand Down Expand Up @@ -158,45 +159,95 @@ const CreateQuiz = () => {
</button>
</div>
{q.options.map((option, oIndex) => (
<div key={oIndex} className="form-group option-group">
<label htmlFor={`option-${qIndex}-${oIndex}`}>
<div
key={oIndex}
style={{
display: "flex",
flexDirection: "column",
marginBottom: "15px",
}}
>
<label
htmlFor={`option-${qIndex}-${oIndex}`}
style={{ marginBottom: "5px", fontWeight: "bold" }}
>
Option {oIndex + 1}
</label>
<input
type="text"
id={`option-${qIndex}-${oIndex}`}
value={option}
onChange={(e) => handleOptionChange(qIndex, oIndex, e)}
required
/>
<button
type="button" className="Add-option "
onClick={() => removeOption(qIndex, oIndex)}
<div
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "10px",
marginBottom: "10px",
}}
>
Remove
</button>
<input
type="radio"
id={`correctAnswer-${qIndex}-${oIndex}`}
name={`correctAnswer-${qIndex}`}
checked={q.correctAnswer === option}
onChange={() => handleCorrectAnswerChange(qIndex, oIndex)}
/>
<label htmlFor={`correctAnswer-${qIndex}-${oIndex}`}>
Correct
</label>
<input
type="text"
id={`option-${qIndex}-${oIndex}`}
value={option}
onChange={(e) => handleOptionChange(qIndex, oIndex, e)}
required
style={{
padding: "8px",
borderRadius: "5px",
border: "1px solid #ccc",
flexGrow: 1, // Makes the input expand to take available space
marginRight: "10px",
}}
/>

<button
type="button"
onClick={() => removeOption(qIndex, oIndex)}
style={{
backgroundColor: "#ff4c4c",
color: "#fff",
border: "none",
padding: "8px",
borderRadius: "5px",
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<DeleteRoundedIcon />
</button>

<input
type="radio"
id={`correctAnswer-${qIndex}-${oIndex}`}
name={`correctAnswer-${qIndex}`}
checked={q.correctAnswer === option}
onChange={() => handleCorrectAnswerChange(qIndex, oIndex)}
style={{
marginLeft: "10px",
}}
/>
</div>
</div>
))}
<button type="button" className="Add-option " onClick={() => addOption(qIndex)}>
<button
type="button"
className="Add-option "
onClick={() => addOption(qIndex)}
>
Add Option
</button>
</div>
))}
{error && <p className="error">{error}</p>}
<button type="button " className="Add-button Add-button:hover " onClick={addQuestion}>
<button
type="button "
className="Add-button Add-button:hover "
onClick={addQuestion}
>
Add Question
</button>
<button type="submit" className="Add-button Add-button:hover ">Create Quiz</button>
<button type="submit" className="Add-button Add-button:hover ">
Create Quiz
</button>
</form>
</div>
</div>
Expand Down
Loading

0 comments on commit 999462c

Please sign in to comment.