just edit json data in below script
Add description as optional for quiz.
You can change design for layout .showing true and false options 

It counts number of quiz questions of json.

Ok. Then add new blog post and add below code in html insert.

// Code is here
<!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;
}
{
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 show">
 <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">
<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 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:'hai',
    options:['परमवीर चक्र','परमवीर चक्र व महावीर चक्र','परमवीर चक्र व वीर चक्र ','अशोक चक्र व महावीर चक्र'],
    answer:0,
    description:"....."
   },
   {
    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>