Hello dosto swagat hai ap sabhi ka hamare bolg par aaj ke is article me ham batane wale hai ki aap apne blog ke liye ek sundar or responsive Quiz kaise bana sakte hai to dosto quiz develop karne ke liye aapko diye gaye code ko copy karna hoga or video ko dekhkar samajhna hoga to
Code …
[wpsm_codebox style=”2″]
<!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”>Quiz for all Exams </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 Quiz</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:’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
}
]
// 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>
[/wpsm_codebox]
Post a Comment