initial
This commit is contained in:
nm1
commit
74ae93a96e
1 changed files with 94691 additions and 0 deletions
|
|
@ -0,0 +1,240 @@
|
|||
Questions with answers ui
|
||||
|
||||
```html
|
||||
<div className="ShowQuizMain">
|
||||
<div className="ShowQuizSection">
|
||||
<div className="extraButtonsSection">
|
||||
<div className="expandAll">
|
||||
<button>Expand All</button>
|
||||
</div>
|
||||
<div className="collapseAll">
|
||||
<button>Collapse All</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="QuestionBox">
|
||||
<div className="headerSection">
|
||||
<div className="col1">
|
||||
<h4 className="technologyText"> Technology : Java</h4>
|
||||
</div>
|
||||
<div className="col2">
|
||||
<div className="update">
|
||||
<button title="edit">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="delete">
|
||||
<button title="delete">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="QuestionBox_Question">
|
||||
<div className="QuestionBox_Question_Text">
|
||||
1. What is Java? What is Java? What is Java? What is Java? What is
|
||||
Java? What is Java? What is Java? What is Java? What is Java? What
|
||||
is Java? What is Java? What is Java? What is Java?
|
||||
</div>
|
||||
<button className="toggleAnsBtn">
|
||||
<i className="arrow up"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="QuestionBox_Options_Container">
|
||||
<div className="QuestionBox_Options visible">
|
||||
<div className="QuestionBox_Options_Option">
|
||||
a. Java is object oriented language
|
||||
</div>
|
||||
<div className="QuestionBox_Options_Option correct">
|
||||
b. Java is not an object oriented language
|
||||
</div>
|
||||
|
||||
<div className="QuestionBox_Options_Option">
|
||||
c. Java is annoying
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```scss
|
||||
@import "../config";
|
||||
|
||||
@import "./Arrows";
|
||||
.ShowQuizMain {
|
||||
padding-top: 20px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: $dimwhite;
|
||||
min-height: 500px;
|
||||
|
||||
.ShowQuizSection {
|
||||
width: 70%;
|
||||
padding: 0 0.5rem;
|
||||
min-width: 500px;
|
||||
background-color: white;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // Added subtle shadow
|
||||
|
||||
.extraButtonsSection {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.expandAll,
|
||||
.collapseAll {
|
||||
margin: 0 1rem;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // Added subtle shadow
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border: 1px solid black;
|
||||
border-radius: 3px;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: $dimwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ShowQuizSection .QuestionBox {
|
||||
// overflow: hidden;
|
||||
margin: 1rem auto;
|
||||
// padding-top: 2rem;
|
||||
width: 70%;
|
||||
|
||||
.headerSection {
|
||||
display: flex;
|
||||
border-top: 1px solid black;
|
||||
background-color: whitesmoke;
|
||||
|
||||
.technologyText {
|
||||
padding: 0.1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.update button,
|
||||
.delete button {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.3rem;
|
||||
font-size: 1rem;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.delete button:hover {
|
||||
background-color: $delete-btn-hover;
|
||||
}
|
||||
|
||||
.update button:hover {
|
||||
background-color: $edit-btn-hover;
|
||||
}
|
||||
|
||||
.update {
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
.col1,
|
||||
.col2 {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.col2 {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&_Question {
|
||||
position: relative;
|
||||
// background-color: $navColor;
|
||||
border: 1px solid $dimwhite;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
padding: 0.5rem 1rem;
|
||||
padding-right: 2rem;
|
||||
// color: white;
|
||||
color: black;
|
||||
line-height: 1.5rem;
|
||||
|
||||
.toggleAnsBtn {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 15px;
|
||||
|
||||
transform: scale(1.2);
|
||||
|
||||
padding: 0 4px;
|
||||
|
||||
// color: white;
|
||||
color: black;
|
||||
border: none;
|
||||
// background-color: rgba($color: white, $alpha: 0.1);
|
||||
background-color: rgba($color: black, $alpha: 0.1);
|
||||
// background-color: transparent;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&_Options_Container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&_Options {
|
||||
// width: 99%;
|
||||
margin: 0 auto;
|
||||
// box-sizing: border-box;
|
||||
transform: translateY(-100%);
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
padding: 0.5rem 0rem;
|
||||
// color: white;
|
||||
color: black;
|
||||
// background-color: $dimwhite;
|
||||
background-color: $options-bg-color;
|
||||
|
||||
&_Option {
|
||||
background-color: $wrong-ans-color;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem;
|
||||
border-radius: 5px;
|
||||
|
||||
&.correct {
|
||||
background-color: $correct-ans-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.visible {
|
||||
transform: translateY(0%);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// config.scss
|
||||
$navColor: rgba(20, 20, 20, 0.9);
|
||||
$dimwhite: rgb(220, 220, 220);
|
||||
$wrong-ans-color: rgba(#ba0021, 0.3);
|
||||
$correct-ans-color: rgba(green, 0.3);
|
||||
$options-bg-color: rgba(
|
||||
$color: grey,
|
||||
$alpha: 0.2,
|
||||
);
|
||||
|
||||
$delete-btn-hover: rgba(red, 0.3);
|
||||
$edit-btn-hover: rgba(blue, 0.3);
|
||||
|
||||
```
|
||||
Loading…
Reference in a new issue