<!DOCTYPE html> <html> <head> <title>quiz in Javascript </title> <link rel="stylesheet" href="style.css"> <style> body{ margin:0; background-color:#d9cdcd; font-family: sans-serif; } *{ box-sizing: border-box; } .quiz-container{ max-width: 700px; min-height:500px; background-color: #ffffff; margin:40px auto; border-radius:10px; padding:30px; } .quiz-container::after,.quiz-container::before{ content: ''; clear: both; display: table; } .question-number, .question, .options, .button, .answers-tracker{ float: left; width: 100%; } .question-number h3{ color:#009688; border-bottom: 1px solid #ccc; margin:0; padding-bottom:10px; } .question { font-size:22px; color:000000; padding:20px 0; } .options div{ background-color: #cccccc; font-size:16px; color:000000; margin-bottom:10px; border-radius:5px; padding:15px; position: relative; overflow:hidden; cursor: pointer; } .options div.disabled{ pointer-events: none; } .options div.correct{ z-index: 1; color: #fff; } .options div.correct::before{ content: ''; position: absolute; left:0; top:0; width: 100%; height: 100%; background-color: green; z-index: -1; animation: animateBackground 1s ease; animation-fill-mode: forwards; } @keyframes animateBackground{ 0%{ transform: translateX(-100%); } 100%{ transform: translateX(0%); } } .options div.wrong{ z-index: 1; color: #fff; } .options div.wrong::before{ content: ''; position: absolute; left:0; top:0; width: 100%; height: 100%; background-color:red; z-index: -1; animation: animateBackground 1s ease; animation-fill-mode: forwards; } @keyframes animateBackground{ 0%{ transform: translateX(-100%); } 100%{ transform: translateX(0%); } } .button .btn{ padding:15px 50px; border-radius:5px; cursor: pointer; background-color:#009688; font-size:16px; color:#ffffff; border: none; display: inline-block; margin:15px 0 20px; } .answers-tracker{ border-top:1px solid #ccc; padding-top: 15px; } .answers-tracker div{ height: 40px; width: 40px; background-color: #cccccc; display: inline-block; border-radius: 50%; margin-right:5px; } .answers-tracker div.correct{ background-color: green; background-image:url('img/correct.png'); background-position: center; background-repeat: no-repeat; background-size: 50%; } .answers-tracker div.wrong{ background-color: red; background-image:url('img/wrong.png'); background-position: center; background-repeat: no-repeat; background-size: 50%; } .quiz-over{ position: fixed; left:0; top:0; width: 100%; height: 100%; background-color:rgba(0,0,0,0.9); z-index: 10; display: none; align-items: center; justify-content: center; } .quiz-over.show{ display: flex; } .quiz-over .box{ background-color: #009688; padding:30px; border-radius:10px; text-align: center; flex-basis: 700px; max-width:700px; color:#ffffff; } .quiz-over .box h1{ font-size:36px; margin:0 0 20px; } .quiz-over .box button{ padding:15px 50px; border:none; background-color:#FF9800; border-radius:5px; font-size:16px; margin:15px 0 20px; color:#ffffff; } </style> </head> <body> <div class="quizContainer container-fluid well well-lg"> <div id="quiz1" class="text-center"> <h3 style="color:#d14040;position:center;left:80%;top:0%;" align="Center" ><span id="Modern History Of India Quiz part 01 for all Exams">C Programming Quiz </span><br/><span id='Modern History Of India Quiz part 01 for all Exams' style="font-size:25px;"></span></h3> <h2 Style="color:#ff000;position:center;left:80%;top0%;" align="center" "font-size:25px;"><samp id="Sub heading"> Test Exams</samp></h2> </div> <div class="quiz-container"> <div class="question-number"> <h3>Question <span class="question-num-value"></span> of <span class="total-question"></span></h3> </div> <div class="question"> </div> <div class="options"> <div id="1" class="option1" onclick="check(this)"></div> <div id="2" class="option2" onclick="check(this)"></div> <div id="3" class="option3" onclick="check(this)"></div> <div id="4" class="option4" onclick="check(this)"></div> </div> <div class="button"> <button type="button" class="btn" onclick="next()">Next</button> </div> <div class="answers-tracker"> </div> </div> <div class="quiz-over"> <div class="box"> <h1> Good Try!<br> You Got <span class="correct-answers"></span> out of <span class="total-question2"></span> answers correct! <br> That's <span class="percentage"></span> </h1> <button type="button" onclick="tryAgain()">TryAgain</button> </div> </div> <script src="script.js"></script> <script> const options=document.querySelector(".options").children; const answerTrackerContainer=document.querySelector(".answers-tracker"); const questionNumberSpan=document.querySelector(".question-num-value"); const totalQuestionSpan=document.querySelector(".total-question"); const correctAnswerSpan=document.querySelector(".correct-answers"); const totalQuestionSpan2=document.querySelector(".total-question2"); const percentage=document.querySelector(".percentage"); const question=document.querySelector(".question"); const op1=document.querySelector(".option1"); const op2=document.querySelector(".option2"); const op3=document.querySelector(".option3"); const op4=document.querySelector(".option4"); let questionIndex; let index=0; let myArray=[]; let myArr=[]; let score=0; // questions and options and answers const questions=[ { q:'What are the different types of real data type in C ?', options:['float, double','short int, double, long int','float, double, long double','double, long int, float'], answer:3 }, { q:'The keyword used to transfer control from a function back to the calling function is', options:['switch','goto','go back','return'], answer:4 }, { q:'where is the capital of India', options:['New Delhi','Kolkatta','Varanashi','Agra'], answer:1 }, { q:'Who is the Prime Minister of India', options:['Amit Shah','Narendra Modi','Rahul Gandhi','None of the above'], answer:2 }, { q:'where is the capital of India', options:['New Delhi','Kolkatta','Varanashi','Agra'], answer:1 }, { q:'Who is the Prime Minister of India', options:['Amit Shah','Narendra Modi','Rahul Gandhi','None of the above'], answer:2 }, { q:'where is the capital of India', options:['New Delhi','Kolkatta','Varanashi','Agra'], answer:1 }, { q:'Who is the Prime Minister of India', options:['Amit Shah','Narendra Modi','Rahul Gandhi','None of the above'], answer:2 }, { q:'where is the capital of India', options:['New Delhi','Kolkatta','Varanashi','Agra'], answer:1 }, { q:'Who is the Prime Minister of India', options:['Amit Shah','Narendra Modi','Rahul Gandhi','None of the above'], answer:2 }, { q:'where is the capital of India', options:['New Delhi','Kolkatta','Varanashi','Agra'], answer:1 }, { q:'Who is the Prime Minister of India', options:['Amit Shah','Narendra Modi','Rahul Gandhi','None of the above'], answer:2 }, { q:'where is the capital of India', options:['New Delhi','Kolkatta','Varanashi','Agra'], answer:1 }, { q:'Who is the Prime Minister of India', options:['Amit Shah','Narendra Modi','Rahul Gandhi','None of the above'], answer:2 }, { q:'where is the capital of India', options:['New Delhi','Kolkatta','Varanashi','Agra'], answer:1 }, { q:'Who is the Prime Minister of India', options:['Amit Shah','Narendra Modi','Rahul Gandhi','None of the above'], answer:2 }, { q:'where is the capital of India', options:['New Delhi','Kolkatta','Varanashi','Agra'], answer:1 }, { q:'Who is the Prime Minister of India', options:['Amit Shah','Narendra Modi','Rahul Gandhi','None of the above'], answer:2 }, { q:'where is the capital of India', options:['New Delhi','Kolkatta','Varanashi','Agra'], answer:1 }, { q:'Who is the Prime Minister of India', options:['Amit Shah','Narendra Modi','Rahul Gandhi','None of the above'], answer:2 }, { q:'where is the capital of India', options:['New Delhi','Kolkatta','Varanashi','Agra'], answer:1 }, { q:'Who is the Prime Minister of India', options:['Amit Shah','Narendra Modi','Rahul Gandhi','None of the above'], answer:2 }, { q:'where is the capital of India', options:['New Delhi','Kolkatta','Varanashi','Agra'], answer:1 }, { q:'Who is the Prime Minister of India', options:['Amit Shah','Narendra Modi','Rahul Gandhi','None of the above'], answer:2 }, { q:'where is the capital of India', options:['New Delhi','Kolkatta','Varanashi','Agra'], answer:1 } ] // set questions and options and question number totalQuestionSpan.innerHTML=questions.length; function load(){ questionNumberSpan.innerHTML=index+1; question.innerHTML=questions[questionIndex].q; op1.innerHTML=questions[questionIndex].options[0]; op2.innerHTML=questions[questionIndex].options[1]; op3.innerHTML=questions[questionIndex].options[2]; op4.innerHTML=questions[questionIndex].options[3]; index++; } function check(element){ if(element.id==questions[questionIndex].answer){ element.classList.add("correct"); updateAnswerTracker("correct") score++; console.log("score:"+score) } else{ element.classList.add("wrong"); updateAnswerTracker("wrong") } disabledOptions() } function disabledOptions(){ for(let i=0; i<options.length; i++) { options[i].classList.add("disabled"); if(options[i].id==questions[questionIndex].answer){ options[i].classList.add("correct"); } } } function enableOptions(){ for(let i=0; i<options.length; i++) { options[i].classList.remove("disabled","correct","wrong"); } } function validate(){ if(!options[0].classList.contains("disabled")){ alert("Please Selecto one option") } else{ enableOptions(); randomQuestion(); } } function next(){ validate(); } function randomQuestion(){ let randomNumber=Math.floor(Math.random()*questions.length); let hitDuplicate=0; if(index==questions.length){ quizOver(); } else{ if(myArray.length>0){ for(let i=0; i<myArray.length; i++){ if(myArray[i]==randomNumber){ hitDuplicate=1; break; } } if(hitDuplicate==1){ randomQuestion(); } else{ questionIndex=randomNumber; load(); myArr.push(questionIndex); } } if(myArray.length==0){ questionIndex=randomNumber; load(); myArr.push(questionIndex); } myArray.push(randomNumber); } } function answerTrakcer(){ for(let i=0; i<questions.length; i++){ const div=document.createElement("div") answerTrackerContainer.appendChild(div); } } function updateAnswerTracker(classNam){ answerTrackerContainer.children[index-1].classList.add(classNam); } function quizOver(){ document.querySelector(".quiz-over").classList.add("show"); correctAnswerSpan.innerHTML=score; totalQuestionSpan2.innerHTML=questions.length; percentage.innerHTML=(score/questions.length)*100 + "%"; } function tryAgain(){ window.location.reload(); } window.onload=function(){ randomQuestion(); answerTrakcer(); } </script> </body> </html>
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন