@import url(‘https://fonts.googleapis.com/css?family=Montserrat:400,500,700,800&display=swap’);
@import url(‘https://fonts.googleapis.com/css?family=Concert+One&display=swap’);

body{
margin:0px;

font-family: ‘Times new roman’;
}
{
box-sizing: border-box;

}
.custom-box{
max-width: 800px;
background-color: #FFFFFF;
margin:30px auto;
padding: 50px 40px;
border-radius: 10px;
border-style: solid;
border-color: #000080;
}
.quiz-home-box{
text-align:center;
display: none;
}
.quiz-home-box.show{
display: block;
animation: fadeInRight 1s ease;
}
.quiz-home-box h4{
font-size: 40px;
font-weight: 800;
color:#444444;
margin: 0 0 30px;
border-style: ridge;
}
.btn{
background-color: #000080;
border: 2px solid #ffff00;
padding: 14px 40px;
color: #ffffff;
font-size: 20px;
border-radius: 30px;
font-family: ‘times’, sans-serif;
cursor: pointer;
white-space: nowrap;
margin: 0 10px;
}
.btn:focus{
outline:none;
}
.quiz-box{
background-color: #000000;
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;
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:#000080;
border: 2px solid #000080;
font-weight: 800;
line-height: 56px;
text-align: center;
border-radius: 50%;
display:none;
}
.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: #ffff80;
padding: 10px 10px;
margin-top: 10px;
border-radius: 10px;
font-size: 30px;
border: 2px solid #000080;
position: relative;
}
.quiz-box .question-box .current-question-num{
height: 70px;
width: 70px;
background-color: #000080;
border:2px solid #ffff00;
font-size: 20px;
font-weight: 800;
color:#ffffff;
border-radius: 50%;
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: ‘times’, sans-serif;
color:#000000;
text-align: left;
padding:7px;
}
.quiz-box .option-box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
size: relative;

}
.quiz-box .option-box .option{
background-color: #005ce6;
flex-basis: calc(50% – 20px);
max-width: calc(50% – 20px);
margin-top: 30px;
padding: 7px 7px;
text-align: center;
font-size: 20px;
color:#ffffff;
border:2px solid #000080;
border-radius: 30px;
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: #0ea454;
border-color:#0ea454;
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: #cc3300;
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: inline-block;
animation: fadeInRight 1s ease;
}

.quiz-box .next-question{
margin-top: 20px;
text-align: center;

}
.see-result-btn,.next-question-btn{
display: inline-block;
}

}
.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: ‘Times’, 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: #cbe1e0;
}
.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: #d5deee;
}
.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: #000080;
border: 2px solid #0000080;
}
.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;
}
}

const questionText=document.querySelector(“.question-text”);
const optionBox=document.querySelector(“.option-box”);
const currentQuestionNum=document.querySelector(“.current-question-num”);
const answerDescription=document.querySelector(“.answer-description”);
const nextQuestionBtn=document.querySelector(“.next-question-btn”);
const correctAnswers=document.querySelector(“.correct-answer”);
const seeResultBtn=document.querySelector(“.see-result-btn”);
const remainingTime=document.querySelector(“.remaining-time”);
const timeUpText=document.querySelector(“.time-up-text”);
const quizHomeBox=document.querySelector(“.quiz-home-box”);
const quizBox=document.querySelector(“.quiz-box”);
const quizOverBox=document.querySelector(“.quiz-over-box”);
const startAgainQuizBtn=document.querySelector(“.start-again-quiz-btn”);
const AnswerKeyBtn=document.querySelector(“.answer-key-btn”);
const goHomeBtn=document.querySelector(“.go-home-btn”);
const startQuizBtn=document.querySelector(“.start-quiz-btn”);
let attempt=0;
let questionIndex=0;
let score=0;
let number=0;
let myArray=[];
let interval;

myApp=[
{
question:’Spot the error:
Rahul was ready for accept any job, even a part-time one:’,
options:[‘(a)    Rahul was ready’,
‘(b)    Even a part-time job’,
‘(c)    Any job’,'(d)   For accept’],
answer:3,
},
{
question:’Spot the error:
Fate smiled above him in all his business venture:’,
options:[
‘(a)    No error’,
‘(b)    In all his’,
‘(c)    Business venture’,
‘(d)   Fate smiled above him’
],
answer:3,
},

{
question:’Spot the error:
The growth of population had been controlled earlier, mankind wouldn’t live in a polluted world.’,
options:[
‘(a)    In a polluted world ‘,
‘(b)    Mankind wouldn’t live’,
‘(c)    If the growth of population’,
‘(d)   Had been controlled earlier ‘
],
answer:1,
},

{
question:’Fill in the blank with the appropriate word from the alternatives:
Keep away from bad company ______ you should regret later.’,
options:[
‘(a)    whether ‘,
‘(b)    unless ‘,
‘(c)    although ‘,
‘(d)   lest ‘
],
answer:3,
},

{
question:’Fill in the blank with the appropriate word from the alternatives:
You must apologise ______ the punishment.’,
options:[
‘(a)    To escape ‘,
‘(b)    Escaping ‘,
‘(c)    Escape ‘,
‘(d)   Escapes ‘
],
answer:0,
},

{
question:’Fill in the blank with the appropriate word from the alternatives:
Janki burns her boat with her supervisor by ______ him in public. ‘,
options:[
‘(a)    Flaunting ‘,
‘(b)    Criticising ‘,
‘(c)    Applauding ‘,
‘(d)   Appreciating ‘
],
answer:1,
},

{
question:’Select the synonym of the word given:
Lax:’,
options:[
‘(a)    Needy ‘,
‘(b)    Negligent’,
‘(c)    Careful ‘,
‘(d)   Deprived ‘
],
answer:1,
},

{
question:’Select the synonym of the word given:
Wane:’,
options:[
‘(a)    Increase ‘,
‘(b)    Rise ‘,
‘(c)    Decline ‘,
‘(d)   Drown ‘
],
answer:2,
},

{
question:’Select the synonym of the word given:
Ramification:’,
options:[
‘(a)    Inception ‘,
‘(b)    Satisfaction’,
‘(c)    Source ‘,
‘(d)   Consequence ‘
],
answer:3,
},

{
question:’Select the synonym of the word given:
Sumptuous:’,
options:[
‘(a)    Bereft ‘,
‘(b)    Stingy ‘,
‘(c)    Meagre ‘,
‘(d)   Opulent ‘
],
answer:3,
},

{
question:’Select the antonym of the word given:
Indignant:’,
options:[
‘(a)    Annoyed ‘,
‘(b)    Pleased ‘,
‘(c)    Upset ‘,
‘(d)   Peeved ‘
],
answer:1,
},

{
question:’Select the antonym of the word given:
Lament:’,
options:[
‘(a)    Bemoan ‘,
‘(b)    Bleed ‘,
‘(c)    Appeal ‘,
‘(d)   Celebrate ‘
],
answer:3,
},

{
question:’Select the antonym of the word given:
Abominable:’,
options:[
‘(a)    Colourful ‘,
‘(b)    Hateful ‘,
‘(c)    Delightful ‘,
‘(d)   Distasteful ‘
],
answer:2,
},

{
question:’Select the appropriate meaning of the given idiom:
Pipe dream:’,
options:[
‘(a) A dream or idea that is loudly proclaimed ‘,
‘(b) A dream or idea that is nearly accomplished ‘,
‘(c) A dream or idea that is unlikely to happen ‘,
‘(d) A dream or idea that keeps getting Repeated ‘
],
answer:2,
},

{
question:’Select the appropriate meaning of the given idiom:
Out of the blue:’,
options:[
‘(a) Beat someone black and blue ‘,
‘(b) Loves to wear only blue coloured clothes ‘,
‘(c) Completely honestly ‘,
‘(d) Completely unexpectedly ‘
],
answer:3,
},

{
question:’Select the appropriate meaning of the given idiom:
Thick as thieves ‘,
options:[
‘(a) Having a close friendship ‘,
‘(b) Being very dishonest ‘,
‘(c) Never helping anyone ‘,
‘(d) Telling lies all the time ‘
],
answer:0,
},

{
question:’Sentences of a paragraph given below are in jumbled order. Arrange the sentences in the correct order to form a meaningful coherent paragraph:

P. Shalini was crawling down the phone screen while waiting for her friend.

Q. Her friend brought a bouquet for shalini from the market place.

R. When her friend arrived, they went to the market place.

S. The market place was thronging with people.’,
options:[
‘(a)    QPRS ‘,
‘(b)    SPRQ ‘,
‘(c)    QSRP ‘,
‘(d)   PRSQ ‘
],
answer:3,
},

{
question:’Sentences of a paragraph given below are in jumbled order. Arrange the sentences in the correct order to form a meaningful coherent paragraph:

P. I had my own crib in the bedroom next to our parents’ room.

Q. Annie woke hungry at 2:30 a.m. each morning.

R. When Annie would cry out, I would climb out of my crib and come running into our parents’ room to check on her.

S. For the first few months, Annie slept in a crib by our parents’ bed’,
options:[
‘(a)    PRSQ ‘,
‘(b)    RPQS ‘,
‘(c)    QRSP ‘,
‘(d)   SPQR ‘
],
answer:3,
},

{
question:’Select the incorrectly spelt word:‘,
options:[
‘(a)    Texture ‘,
‘(b)    Slege ‘,
‘(c)    Savoury ‘,
‘(d)   Tamper ‘
],
answer:1,
},

{
question:’Identify the spelling error in the given sentence and select the option that rectifies the error:‘,
options:[
‘(a) There is a statutory warning on every packets of cigerettes.’,
‘(b) There is a statutory warning on every packets of cigarettes. ‘,
‘(c)    There is a statuary warning on every packets of cigarettes.’,
‘(d)   There is a statutory warning on every packets of cigaretes.’
],
answer:1,
},

{
question:’Select the option that expresses the verb in the given sentence in the passive voice :
Preety invited Ritu for a party.’,
options:[
‘(a) Ritu is invited for a party by Preeti. ‘,
‘(b) Ritu was invited for a party by Preeti. ‘,
‘(c) Preeti has been invited for a party by Ritu.’,
‘(d) Preeti was invited for a party by Ritu.’
],
answer:1,
},

{
question:’Fill in the blank with appropriate word from the options:
She refused to back ______, so she was fired:’,
options:[
‘(a)    down ‘,
‘(b)    over’,
‘(c)    upon’,
‘(d)   into’
],
answer:0,
},

{
question:’Fill in the blank with appropriate word from the options:
Two people were ______ to death when a bike hit a truck:’,
options:[
‘(a)    crushed’,
‘(b)    fell’,
‘(c)    brushed’,
‘(d)   rushed’
],
answer:0,
},

{
question:’Select the correct direct speech:
She suggested that we should distribute food among the needy:’,
options:[
‘(a) She said, “Let us distribute food among the needy.” ‘,
‘(b) She said, “We could distribute food among the needy.” ‘,
‘(c) She said, “Let them distribute food among the needy.” ‘,
‘(d)   She ordered, “Distribute food among the needy.” ‘
],
answer:0,
},

{
question:’Select the option that can be used as a one-word substitute for the given group of words:
One who dies for a noble cause.’,
options:[
‘(a)    Martyr ‘,
‘(b)    Heretic ‘,
‘(c)    Butcher ‘,
‘(d)   Narcissist ‘
],
answer:0,
},

]

function load(){
number++;
questionText.innerHTML=myApp[questionIndex].question;
creatOptions();
scoreBoard();
currentQuestionNum.innerHTML=number + ” / ” +myApp.length;
}
function creatOptions(){
optionBox.innerHTML=””;
let animationDelay=0.2;
for(let i=0; i<myApp[questionIndex].options.length; i++){
const option=document.createElement("div");
option.innerHTML=myApp[questionIndex].options[i];
option.classList.add("option");
option.id=i;
option.style.animationDelay=animationDelay + "s";
animationDelay=animationDelay+0.2;
option.setAttribute("onclick","check(this)");
optionBox.appendChild(option);

}
}

function generateRandomQuestion(){
const randomNumber=Math.floor(Math.random() * myApp.length);
let hitDuplicate=0;
if(myArray.length == 0){
questionIndex=randomNumber;
}
else{
for(let i=0; i<myArray.length; i++){
if(randomNumber == myArray[i]){
//if duplicate found
hitDuplicate=1;

}
}
if(hitDuplicate == 1){
generateRandomQuestion();
return;
}
else{
questionIndex=randomNumber;
}
}

myArray.push(randomNumber);
console.log(myArray)
load();
}

function check(ele){
const id=ele.id;
if(id==myApp[questionIndex].answer){
ele.classList.add("correct");
score++;
scoreBoard();
}
else{
ele.classList.add("wrong");
//show correct option when clicked answer is wrong
for(let i=0; i<optionBox.children.length; i++){
if(optionBox.children[i].id==myApp[questionIndex].answer){
optionBox.children[i].classList.add("show-correct");
}
}
}
attempt++;
disableOptions()
showAnswerDescription();
showNextQuestionBtn();
stopTimer();

if(number == myApp.length){
quizOver();
}
}
function timeIsUp(){
showTimeUpText();
//when time is up Show Correct Answer
for(let i=0; i{
timeLimit–;
if(timeLimit < 10){
timeLimit="0"+timeLimit;

}
if(timeLimit < 6){
remainingTime.classList.add("less-time");
}
remainingTime.innerHTML=timeLimit;
if(timeLimit == 0){
clearInterval(interval);
timeIsUp();
}
},1000)
}
function stopTimer(){
clearInterval(interval);
}
function disableOptions(){
for(let i=0; i{
quizBox.classList.remove(“show”);
seeResultBtn.classList.remove(“show”);
quizOverBox.classList.add(“show”);
quizResult();
})

startAgainQuizBtn.addEventListener(“click”, ()=>{
quizBox.classList.add(“show”);
quizOverBox.classList.remove(“show”);
resetQuiz();
nextQuestion();
})

goHomeBtn.addEventListener(“click”, ()=>{
quizOverBox.classList.remove(“show”);
quizHomeBox.classList.add(“show”)
resetQuiz();
})

startQuizBtn.addEventListener(“click”, ()=>{
quizHomeBox.classList.remove(“show”);
quizBox.classList.add(“show”);
nextQuestion();
})

//window.onload=()=>{

//}