<!DOCTYPE html>
<!-- saved from url=(0408)https://mojocommerce-digital-files-production.s3.amazonaws.com/migrate_files/9af134/digital_files/N66z0QuqRxyEThUuBsnQ_blogger%20%281%29.html?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA47TQ2B56F36XREC6%2F20210809%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20210809T013442Z&X-Amz-Expires=600&X-Amz-SignedHeaders=host&X-Amz-Signature=03938159145032df765a97b16edfbad021d1810f6480c86f6a8529e5ac8c34e2 -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<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;
}
{
box-sizing: border-box;
}
.custom-box{
max-width: 800px;
background-color: #ddd6e1;
margin:30px auto;
padding: 50px 40px;
border-radius: 10px;
border-style: solid;
border-color: blueviolet;
}
.quiz-home-box{
text-align:center;
display: none;
}
.quiz-home-box.show{
display: block;
animation: fadeInRight 1s ease;
}
.quiz-home-box h4{
font-size: 30px;
font-weight: 500;
color:#444444;
margin: 0 0 30px;
border-style: ridge;
}
.btn{
background-color: #4413ac;
border: 2px solid #422c11;
padding: 14px 40px;
color: #ffffff;
font-size: 20px;
border-radius: 30px;
font-family: 'Montserrat', sans-serif;
cursor: pointer;
white-space: nowrap;
margin: 0 10px;
}
.btn:focus{
outline:none;
}
.quiz-box{
background-color: #bad3df;
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: 50%;
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: center;
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: 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: sans-serif;
color:#ac1313;
}
.quiz-box .option-box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.quiz-box .option-box .option{
background-color: #958f8f;
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:#231803;
border:2px solid #5e5a53;
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: #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: #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: #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;
}
}
</style>
</head>
<body>
<div class="quiz-home-box custom-box">
<h4>you'll have 15 second to answer each question.</h4>
<button type="button" class="start-quiz-btn btn">Start The Quiz</button>
</div>
<div class="quiz-box custom-box show">
<div class="stats">
<div class="quiz-time">
<div class="remaining-time less-time">00</div>
<span class="time-up-text show">Time's Up</span>
</div>
<div class="score-board">
<span class="score-text">score:</span>
<span class="correct-answer">0</span>
</div>
</div>
<div class="question-box">
<div class="current-question-num">1 / 12</div>
<div class="question-text">किस अà¤à¤¿à¤¨à¥‡à¤¤à¥à¤°à¥€/ अà¤à¤¿à¤¨à¥‡à¤¤à¤¾ का पहला दादा साहेब फालà¥à¤•à¥‡ पà¥à¤°à¤¸à¥à¤•à¤¾à¤° मिला?</div>
</div>
<div class="option-box"><div class="option already-answered" id="0" onclick="check(this)" style="animation-delay: 0.2s;">दिलीप कà¥à¤®à¤¾à¤°</div><div class="option already-answered" id="1" onclick="check(this)" style="animation-delay: 0.4s;">राजकपूर</div><div class="option show-correct already-answered" id="2" onclick="check(this)" style="animation-delay: 0.6s;">देविका रानी</div><div class="option already-answered" id="3" onclick="check(this)" style="animation-delay: 0.8s;">लता मंगेशकर</div></div>
<div class="answer-description"></div>
<div class="next-question">
<button type="button" class="next-question-btn btn show">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 startQuizBtn=document.querySelector(".start-quiz-btn");
let attempt=0;
let questionIndex=0;
let score=0;
let number=0;
let myArray=[];
let interval;
// You can put Questions Here
// answer id 1-0, 2-1, 3-2, 4-3,
myApp=[
{
question:'à¤à¤¾à¤°à¤¤ में 2 सरà¥à¤µà¥‹à¤šà¥à¤š शौरà¥à¤¯ पà¥à¤°à¤¸à¥à¤•à¤¾à¤° है',
options:['परमवीर चकà¥à¤°','परमवीर चकà¥à¤° व महावीर चकà¥à¤°','परमवीर चकà¥à¤° व वीर चकà¥à¤° ','अशोक चकà¥à¤° व महावीर चकà¥à¤°'],
answer:0,
description:"hgygugftdbjkjjhfdccgcvgcg"
},
{
question:'किस वरà¥à¤· में अमरà¥à¤¤à¥à¤¯ सेन ने अरà¥à¤¥à¤¶à¤¾à¤¸à¥à¤¤à¥à¤° में नोबेल पà¥à¤°à¤¸à¥à¤•à¤¾à¤° जीता?',
options:['1999','1998','2000','1997'],
answer:1,
description: " You Can Write Discription Here......"
},
{
question:'जà¥à¤žà¤¾à¤¨à¤ªà¥€à¤ पà¥à¤°à¤¸à¥à¤•à¤¾à¤° पà¥à¤°à¤¾à¤ªà¥à¤¤ करने वाला पà¥à¤°à¤¥à¤® वà¥à¤¯à¤•à¥à¤¤à¤¿ कौन है ?',
options:['जी. शंकर कà¥à¤°à¥à¤ª ','महादेवी वरà¥à¤®à¤¾','रामधारी सिंह दिनकर ','महाशà¥à¤µà¥‡à¤¤à¤¾ देवी'],
answer:0
},
{
question:'नोबेल पà¥à¤°à¤¸à¥à¤•à¤¾à¤° कितने कà¥à¤·à¥‡à¤¤à¥à¤°à¥‹à¤‚ में दिये जाते हैं ?',
options:['5','6','7','4'],
answer:3
},
{
question:'अपने जीवन में किसने सरà¥à¤µà¤¾à¤§à¤¿à¤• आसà¥à¤•à¤° जीते हैं ?',
options:['चारà¥à¤²à¥€ चैपलिन','वालà¥à¤Ÿ डिजà¥à¤¨à¥€','सतà¥à¤¯à¤œà¥€à¤¤ रे','डेविड लीन'],
answer:1,
description: " You Can Write Discription Here......"
},
{
question:'किस राजà¥à¤¯ सरकार दà¥à¤µà¤¾à¤°à¤¾ लता मंगेशकर पà¥à¤°à¤¸à¥à¤•à¤¾à¤° दिया जाता है ?',
options:['महाराषà¥à¤Ÿà¥à¤°','गोवा','मधà¥à¤¯ पà¥à¤°à¤¦à¥‡à¤¶','गà¥à¤œà¤°à¤¾à¤¤'],
answer:2
},
{
question:'नोबेल शांति पà¥à¤°à¤¸à¥à¤•à¤¾à¤° किस शहर में पà¥à¤°à¤¦à¤¾à¤¨ किया जाता है ?',
options:['बà¥à¤°à¥à¤¸à¥‡à¤²à¥à¤¸','जिनेवा','ओसà¥à¤²à¥‹','सà¥à¤Ÿà¥‰à¤•à¤¹à¥‹à¤®'],
answer:3
},
{
question:'किस अà¤à¤¿à¤¨à¥‡à¤¤à¥à¤°à¥€/ अà¤à¤¿à¤¨à¥‡à¤¤à¤¾ का पहला दादा साहेब फालà¥à¤•à¥‡ पà¥à¤°à¤¸à¥à¤•à¤¾à¤° मिला?',
options:['दिलीप कà¥à¤®à¤¾à¤°','राजकपूर','देविका रानी','लता मंगेशकर'],
answer:2
},
{
question:'किस अà¤à¤¿à¤¨à¥‡à¤¤à¥à¤°à¥€/ अà¤à¤¿à¤¨à¥‡à¤¤à¤¾ का पहला दादा साहेब फालà¥à¤•à¥‡ पà¥à¤°à¤¸à¥à¤•à¤¾à¤° मिला?',
options:['दिलीप कà¥à¤®à¤¾à¤°','राजकपूर','देविका रानी','लता मंगेशकर'],
answer:2
},
{
question:'नोबेल शांति पà¥à¤°à¤¸à¥à¤•à¤¾à¤° किस शहर में पà¥à¤°à¤¦à¤¾à¤¨ किया जाता है ?',
options:['बà¥à¤°à¥à¤¸à¥‡à¤²à¥à¤¸','जिनेवा','ओसà¥à¤²à¥‹','सà¥à¤Ÿà¥‰à¤•à¤¹à¥‹à¤®'],
answer:3
},
{
question:'किस अà¤à¤¿à¤¨à¥‡à¤¤à¥à¤°à¥€/ अà¤à¤¿à¤¨à¥‡à¤¤à¤¾ का पहला दादा साहेब फालà¥à¤•à¥‡ पà¥à¤°à¤¸à¥à¤•à¤¾à¤° मिला?',
options:['दिलीप कà¥à¤®à¤¾à¤°','राजकपूर','देविका रानी','लता मंगेशकर'],
answer:2
},
{
question:'किस अà¤à¤¿à¤¨à¥‡à¤¤à¥à¤°à¥€/ अà¤à¤¿à¤¨à¥‡à¤¤à¤¾ का पहला दादा साहेब फालà¥à¤•à¥‡ पà¥à¤°à¤¸à¥à¤•à¤¾à¤° मिला?',
options:['दिलीप कà¥à¤®à¤¾à¤°','राजकपूर','देविका रानी','लता मंगेशकर'],
answer:2
}
]
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<optionBox.children.length; i++){
if(optionBox.children[i].id==myApp[questionIndex].answer){
optionBox.children[i].classList.add("show-correct");
}
}
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[questionIndex].description !== 'undefined'){
answerDescription.classList.add("show");
answerDescription.innerHTML=myApp[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.length;
document.querySelector(".total-attempt").innerHTML=attempt;
document.querySelector(".total-correct").innerHTML=score;
document.querySelector(".total-wrong").innerHTML=attempt-score;
const percentage=(score/myApp.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=()=>{
//}
</script>
</body></html>
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন