body {
margin: 0;
background-image: url(img/bg.jpg);
background-attachment: fixed;
font-family: 'Montserrat', sans-serif;
box-sizing: border-box;
}
.custom-box {
max-width: 800px;
background-color: #FFFFFF;
margin: 30px auto;
padding: 50px 40px;
}
.quiz-home-box {
text-align: center;
display: none;
}
.quiz-home-box.show {
display: block;
animation: fadeInRight 1s ease;
}
.quiz-home-box h5 {
font-size: 30px;
font-weight: 500;
color: #444444;
margin: 0 0 30px;
border-style: none;
}
.btn {
background-color: #10CB60;
border: none;
padding: 14px 40px;
color: #ffffff;
font-size: 25px;
border-radius: 5px;
font-family: 'Montserrat', sans-serif;
cursor: pointer;
white-space: nowrap;
margin: 0 20px;
}
.btn:focus {
outline: none;
}
.quiz-box {
background-color: #ffffff;
display: none;
}
.quiz-box.show {
display: block;
animation: fadeInRight 1s ease;
}
.quiz-box .stats {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
font-size: 30px;
text-transform: uppercase;
color: #000000;
}
.quiz-box .stats .quiz-time {
flex-basis: calc(50% - 20px);
max-width: calc(50% - 20px);
/*background: red;*/
text-align: left;
}
.quiz-box .stats .time-up-text {
/* display: inline-block;*/
color: #f40404;
font-weight: 500;
display: none;
}
.quiz-box .stats .time-up-text.show {
display: inline-block;
animation: fadeInOut 1s linear infinite;
}
@keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 2;
}
100% {
opacity: 0;
}
}
.quiz-box .stats .quiz-time .remaining-time {
height: 60px;
width: 60px;
color: #096b36;
border: 2px solid #096b36;
font-weight: 800;
line-height: 56px;
text-align: center;
border-radius: 10%;
display: inline-block;
}
.quiz-box .stats .quiz-time .remaining-time.less-time {
color: #b5200d;
border-color: #b5200d;
}
.quiz-box .stats .score-board {
flex-basis: calc(50% - 20px);
max-width: calc(50% - 20px);
/*background: blue;*/
text-align: right;
}
.quiz-box .stats .score-board .correct-answer {
font-weight: 800;
}
.quiz-box .question-box {
background-color: #ffffff;
padding: 40px 30px;
margin-top: 40px;
border-radius: 10px;
font-size: 28px;
border: 2px solid #4d330a;
text-align: left;
position: relative;
}
.quiz-box .question-box .current-question-num {
height: 70px;
width: 70px;
background-color: #ffffff;
border: 2px solid #4d3106;
font-size: 20px;
font-weight: 800;
color: #1411e3;
border-radius: 10%;
line-height: 68px;
text-align: center;
position: absolute;
top: -35px;
left: 50%;
margin-left: -35px;
z-index: 1;
}
.quiz-box .question-box .question-text {
font-size: 26px;
font-family: sans-serif;
color: #ac1313;
margin-left: 20px;
}
.quiz-box .option-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.quiz-box .option-box .option {
background-color: #FFFFFF;
flex-basis: calc(100% - 20px);
max-width: calc(100% - 20px);
margin-top: 30px;
padding: 7px 7px;
text-align: left;
font-size: 20px;
font-weight: 500;
color: #231803;
border: 1px solid #000000;
border-radius: 5px;
cursor: pointer;
position: relative;
animation: zoomIn .3s linear forwards;
opacity: 0;
}
@keyframes zoomIn {
0% {
transform: scale(0.8);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.quiz-box .option-box .option.already-answered {
pointer-events: none;
}
.quiz-box .option-box .option.show-correct {
background-color: #096b36;
border-color: #096b36;
color: #ffffff;
transition: all .3s ease;
}
.quiz-box .option-box .option.correct {
background-color: #096b36;
border-color: #096b36;
color: #ffffff;
opacity: 1;
animation: pulse 1s linear;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.quiz-box .option-box .option.correct::before {
content: '';
position: absolute;
height: 30px;
width: 30px;
right: 15px;
top: 7px;
background-image: url("img/correct.png");
background-size: 20px;
background-position: center;
background-repeat: no-repeat;
animation: fadeInRight .5s ease;
}
.quiz-box .option-box .option.wrong {
background-color: #a22312;
border-color: #a22312;
color: #ffffff;
opacity: 1;
animation: shake 1s linear;
}
.quiz-box .option-box .option.wrong::before {
content: '';
position: absolute;
height: 30px;
width: 30px;
right: 15px;
top: 7px;
background-image: url("img/wrong.png");
background-size: 20px;
background-position: center;
background-repeat: no-repeat;
animation: fadeInRight .5s ease;
}
@keyframes shake {
0%,30%,50% {
transform: translateX(10px);
}
20%,40% {
transform: translateX(-10px);
}
60% {
transform: translateX(-7px);
}
70% {
transform: translateX(7px);
}
80% {
transform: translateX(-4px);
}
90% {
transform: translateX(4px);
}
100% {
transform: translateX(0px);
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(40px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
}
.quiz-box .answer-description {
background-color: #ffffff;
border: 2px solid #c2af91;
margin-top: 20px;
padding: 15px;
border-radius: 10px;
color: #555555;
display: none;
}
.quiz-box .answer-description.show {
display: block;
animation: fadeInRight 1s ease;
}
.quiz-box .next-question {
margin-top: 20px;
text-align: center;
}
.see-result-btn,.next-question-btn {
display: none;
}
.see-result-btn.show, .next-question-btn.show {
display: inline-block;
animation: fadeInRight 1s ease;
}
.quiz-over-box {
text-align: center;
display: none;
}
.quiz-over-box.show {
display: block;
animation: fadeInRight 1s ease;
}
.quiz-over-box h1 {
font-size: 50px;
font-family: 'Concert One', cursive;
color: #f85943;
margin: 0px 3 20px;
}
.quiz-over-box h4 {
font-size: 25px;
font-weight: normal;
color: #444444;
margin: 15px 0 20px;
}
.quiz-over-box h4 span {
font-weight: 800;
color: #111111;
}
.start-again-quiz-btn, .go-home-btn {
margin-top: 15px;
}
/*responsive*/
@media (max-width: 767px) {
.custom-box {
background-color: #FFFFFF;
}
.quiz-home-box h4 {
font-size: 16px;
}
.btn {
padding: 7px 20px;
font-size: 15px;
}
.quiz-box .question-box {
padding: 40px 0px;
}
.quiz-box .question-box .question-text {
font-size: 17px;
font-family: sans-serif;
color: #1d1b19;
}
.custom-box {
padding: 30px 10px 50px 10px;
background-color: #FFFFFF;
}
.quiz-box .stat {
font-size: 20px;
}
.quiz-box .stats .quiz-time {
flex-basis: calc(60% - 10px);
max-width: calc(60% - 10px);
font-size: 18px;
}
.quiz-box .stats .score-board {
flex-basis: calc(40% - 10px);
max-width: calc(40% - 10px);
font-size: 16px;
}
.quiz-box .stats .quiz-time .remaining-time {
height: 50px;
width: 50px;
line-height: 46px;
color: #045e2e;
border: 2px solid #045e2e;
}
.quiz-box .question-box .current-question-num {
height: 60px;
width: 60px;
line-height: 58px;
top: -30px;
margin-left: -30px;
font-size: 16px;
}
.quiz-box .option-box .option {
flex-basis: 100%;
max-width: 100%;
font-size: 16px;
margin-top: 15px;
}
.quiz-over-box h1 {
font-size: 30px;
}
.quiz-over-box h4 {
font-size: 20px;
margin: 10px 0 15px;
}
}
ऑनलाइन टेस्ट शुरू करने के लिए यहां नीचे दिए गए बटन पर क्लिक करें!
Start Test
अगला प्रश्न
अपना परिणाम देखें!
आपका परिणाम। (Result)
कुल प्रश्न (Total Questions):
प्रयास (Attempt):
सही जवाब (Correct):
गलत जवाब (Wrong):
प्रतिशत (Percentage):
फिर से शुरू करें!
वापस जाएं
