<!DOCTYPE html>
<html>
<head>
<style>
</style>
<title> Quiz Application </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@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:0;
background-image: url(img/bg.jpg);
background-attachment: fixed;
font-family: 'Montserrat', sans-serif;
padding: 15px;
}
{
box-sizing: border-box;
}
.custom-box{
max-width: 800px;
background-color: #d1e3f1;
margin:30px auto;
padding: 30px 40px 50px 40px;
border-radius: 10px;
}
.quiz-home-box{
text-align:center;
display: none;
}
.quiz-home-box .category-box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.quiz-home-box .category-box div{
background-color: #4d2da4;
border: 2px solid #28235a;
padding: 25px 25px;
text-transform: capitalize;
border-radius: 10px;
cursor: pointer;
font-size:18px;
font-weight: 500;
color: #f7f7f7;
margin-top:30px;
flex-basis: calc(50% - 30px);
max-width: calc(50% - 30px);
}
.quiz-home-box h1{
font-size:50px;
font-family: 'Concert One', cursive;
color: #f85943;
margin:0 0 10px;
}
.quiz-home-box.show{
display: block;
animation: fadeInRight 1s ease;
}
.quiz-home-box h4{
font-size: 24px;
font-weight: 500;
color:#db160c;
margin: 0 0 30px;
border-bottom: 2px solid #c61010;
padding-bottom: 12px;
}
.btn{
background-color: #2c11d8;
border: 2px solid #0d116a;
padding: 14px 40px;
color: #ffffff;
font-size: 20px;
border-radius: 30px;
font-family: 'Montserrat', sans-serif;
cursor: pointer;
white-space: nowrap;
margin: 10px 10px;
}
.btn:focus{
outline:none;
}
.quiz-box{
background-color: #d1e3f1;
display: none;
}
.quiz-box h1{
margin: 0 0 15px;
text-align: center;
font-size: 31px;
color: #341b9a;
font-weight: 800;
text-decoration: underline;
}
.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:#d23723;
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: 1;
}
100%{
opacity: 0;
}
}
.quiz-box .stats .quiz-time .remaining-time{
height: 60px;
width: 60px;
color:#059e4c;
border: 2px solid #059e4c;
font-weight: 800;
line-height: 56px;
text-align: center;
border-radius: 50%;
display:inline-block;
}
.quiz-box .stats .quiz-time .remaining-time.less-time{
color:#d23723;
border-color:#d23723;
}
.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 #56380a;
text-align: center;
position: relative;
}
.quiz-box .question-box .current-question-num{
height: 70px;
width: 70px;
background-color: #ffffff;
border:2px solid #56380a;
font-size: 20px;
font-weight: 800;
color:#ac0d0d;
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: 22px;
font-family: sans-serif;
color: #6d0bd8;
}
.quiz-box .option-box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.quiz-box .option-box .option{
background-color: #b0a8a8;
flex-basis: calc(50% - 20px);
max-width: calc(50% - 20px);
margin-top: 30px;
padding: 7px 7px;
text-align: center;
font-size: 20px;
text-transform: uppercase;
font-weight: 500;
color:#231802;
border:2px solid #605e5b;
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: #086a37;
border-color:#086a37;
color: #ffffff;
transition: all .3s ease;
}
.quiz-box .option-box .option.correct{
background-color: #086a37;
border-color:#086a37;
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: #c6220c;
border-color:#c6220c;
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 0 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){
.quiz-home-btn h4{
font-size:20px;
padding: 25px 10px;
}
.quiz-home-box h1{
font-size:30px;
margin:0;
color: #180eaa;
font-family: sans-serif;
padding: 25px 10px;
}
.quiz-home-box h4{
font-size: 15px;
border-bottom: 1.5px solid #ad0c0c;
color: #000000
}
.quiz-home-box .category-box div{
flex-basis: 100%;
max-width: 100%;
margin-top: 20px;
font-size:16px;
background-color: #7a2e1f;
border: 2px solid #2c335c;
color: #ffffff;
padding: 25px 10px;
}
.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: #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;
}
.btn{
font-size: 16px;
padding: 10px 12px;
}
.quiz-over-box h1{
font-size: 30px;
}
.quiz-over-box h4{
font-size: 20px;
margin: 10px 0 15px;
}
}
</style>
</head>
<body>
<div class="quiz-home-box custom-box show">
<h4>you'll have 60 second to answer each question.</h4>
<!--<button type="button" class="start-quiz-btn btn">Start The Quiz</button>-->
<div class="category-box">
</div>
</div>
<div class="quiz-box custom-box">
<h1 class="category-text"></h1>
<div class="stats">
<div class="quiz-time">
<div class="remaining-time"></div>
<span class="time-up-text">Time's Up</span>
</div>
<div class="score-board">
<span class="score-text">score:</span>
<span class="correct-answer"></span>
</div>
</div>
<div class="question-box">
<div class="current-question-num">
</div>
<div class="question-text">
</div>
</div>
<div class="option-box">
</div>
<div class="answer-description">
</div>
<div class="next-question">
<button type="button" class="next-question-btn btn">Next question</button>
<button type="button" class="see-result-btn btn">See Your Result</button>
</div>
</div>
<div class="quiz-over-box custom-box">
<h1>Quiz Result</h1>
<h4>Total Questions: <span class="total-questions"></span></h4>
<h4>Attempt: <span class="total-attempt"></span></h4>
<h4>Correct: <span class="total-correct"></span></h4>
<h4>Wrong: <span class="total-wrong"></span></h4>
<h4>Percentage: <span class="percentage"></span></h4>
<button type="button" class="start-again-quiz-btn btn">Start Again</button>
<button type="button" class="go-home-btn btn">Go To Home</button>
</div>
<script>
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 goHomeBtn=document.querySelector(".go-home-btn");
const categoryBox=document.querySelector(".category-box");
const categoryText=document.querySelector(".category-text");
//const startQuizBtn=document.querySelector(".start-quiz-btn");
let attempt=0;
let questionIndex=0;
let score=0;
let number=0;
let myArray=[];
let interval;
let categoryIndex;
//you can add your category and questions
myApp=[
{
category:"Open Quiz",
quizWrap:[
{
question:'1.ब्रेन चेंबर की अवधारणा निम्नलिखित में से किससे संबंधित है: ?',
options:['(a)ज्ञान जगत,'(B) पुस्तकालय वर्गीकरण','(C) पुस्तकालय सूचीकरण ','(D) अनुक्रमणी'],
answer:1
},{question:'2. ब्रेन चेंबर की अवधारणा निम्नलिखित में किसके द्वारा प्रदान किया गया था:?',
options:['(A) मेल्विल डेवी','(B) फ्रांसिस बेकन','(C) एस आर रंगनाथन ','(D) डब्ल्यूबीसी शेयर्स'],
answer:2
},
{
question:'पैराडाइज लॉस्ट के लेखक कौन हैं ?',
options:['सोफोक्लीज','दांते','होमर','मिल्टन'],
answer:3
},
{
question:'द जनरल थ्यौरी ऑफ एंप्लॉयमेंट, इंटरेस्ट एंड मनी के लेखक कौन थे?',
options:['एडम स्मिथ','जोन रॉबिन्सन','जॉन मेनार्ड कीन्स','जे० के० गैलब्रेथ'],
answer:2
},
{
question:'मेरी इक्यावन कविताएँ के रचयिता निम्न में से कौन हैं ?',
options:['नरसिंहा राव','अटल बिहारी वाजपेयी','विश्वनाथ प्रताप सिंह ','इनमें से कोई नहीं'],
answer:1,
description:"You Can Add Some Description"
},
{
question:'हर्बर्ट हर्बर्ट कौन-सी पुस्तक का मुख्य पात्र है ?',
options:['लोलिता','लेडी चैलेंज लवर','वॉर ऑफ द रोजेज ','फेयरवेल टू आर्स'],
answer:0
},
{
question:'हर्बर्ट हर्बर्ट कौन-सी पुस्तक का मुख्य पात्र है ?',
options:['लोलिता','लेडी चैलेंज लवर','वॉर ऑफ द रोजेज ','फेयरवेल टू आर्स'],
answer:0
},
{
question:'हर्बर्ट हर्बर्ट कौन-सी पुस्तक का मुख्य पात्र है ?',
options:['लोलिता','लेडी चैलेंज लवर','वॉर ऑफ द रोजेज ','फेयरवेल टू आर्स'],
answer:0
},
]
}
]
function createCategory(){
//console.log(myApp[1].category);
for(let i=0; i<myApp.length; i++){
categoryList=document.createElement("div");
categoryList.innerHTML=myApp[i].category;
categoryList.setAttribute("data-id",i);
categoryList.setAttribute("onclick","selectCategory(this)");
categoryBox.appendChild(categoryList)
}
}
function selectCategory(ele){
categoryIndex=ele.getAttribute("data-id");
//console.log(categoryIndex)
categoryText.innerHTML=myApp[categoryIndex].category;
quizHomeBox.classList.remove("show");
quizBox.classList.add("show");
nextQuestion();
}
function load(){
number++;
questionText.innerHTML=myApp[categoryIndex].quizWrap[questionIndex].question;
creatOptions();
scoreBoard();
currentQuestionNum.innerHTML=number + " / " +myApp[categoryIndex].quizWrap.length;
}
function creatOptions(){
optionBox.innerHTML="";
let animationDelay=0.2;
for(let i=0; i<myApp[categoryIndex].quizWrap[questionIndex].options.length; i++){
const option=document.createElement("div");
option.innerHTML=myApp[categoryIndex].quizWrap[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[categoryIndex].quizWrap.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[categoryIndex].quizWrap[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[categoryIndex].quizWrap[questionIndex].answer){
optionBox.children[i].classList.add("show-correct");
}
}
}
attempt++;
disableOptions()
showAnswerDescription();
showNextQuestionBtn();
stopTimer();
if(number == myApp[categoryIndex].quizWrap.length){
quizOver();
}
}
function timeIsUp(){
showTimeUpText();
//when time is up Show Correct Answer
for(let i=0; i<optionBox.children.length; i++){
if(optionBox.children[i].id==myApp[categoryIndex].quizWrap[questionIndex].answer){
optionBox.children[i].classList.add("show-correct");
if(number == myApp[categoryIndex].quizWrap.length){
quizOver();
}
}
}
disableOptions()
showAnswerDescription();
showNextQuestionBtn();
if(number == myApp.length){
quizOver();
}
}
function startTimer(){
let timeLimit=15;
remainingTime.innerHTML=timeLimit;
remainingTime.classList.remove("less-time");
interval=setInterval(()=>{
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<optionBox.children.length; i++){
optionBox.children[i].classList.add("already-answered")
}
}
function showAnswerDescription(){
if(typeof myApp[categoryIndex].quizWrap[questionIndex].description !== 'undefined'){
answerDescription.classList.add("show");
answerDescription.innerHTML=myApp[categoryIndex].quizWrap[questionIndex].description;
}
}
function hideAnswerDescription(){
answerDescription.classList.remove("show");
answerDescription.innerHTML="";
}
function showNextQuestionBtn(){
nextQuestionBtn.classList.add("show");
}
function hideNextQuestionBtn(){
nextQuestionBtn.classList.remove("show");
}
function showTimeUpText(){
timeUpText.classList.add("show");
}
function hideTimeUpText(){
timeUpText.classList.remove("show");
}
function scoreBoard(){
correctAnswers.innerHTML=score;
}
nextQuestionBtn.addEventListener("click",nextQuestion);
function nextQuestion(){
generateRandomQuestion();
hideNextQuestionBtn();
hideAnswerDescription();
hideTimeUpText();
startTimer();
}
function quizResult(){
document.querySelector(".total-questions").innerHTML=myApp[categoryIndex].quizWrap.length;
document.querySelector(".total-attempt").innerHTML=attempt;
document.querySelector(".total-correct").innerHTML=score;
document.querySelector(".total-wrong").innerHTML=attempt-score;
const percentage=(score/myApp[categoryIndex].quizWrap.length)*100;
document.querySelector(".percentage").innerHTML=percentage.toFixed(2) +"%";
}
function resetQuiz(){
attempt=0;
//questionIndex=0;
score=0;
number=0;
myArray=[];
}
function quizOver(){
nextQuestionBtn.classList.remove("show");
seeResultBtn.classList.add("show");
}
seeResultBtn.addEventListener("click", ()=>{
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=()=>{
createCategory();
}
</script>
</body>
</html>
