Css

//*{
margin:0;
padding:0;
font-family: 'Scheherazade New', serif;
}
body {
background-color: #f1f1f1;
}
.MyQuizApp {
width: 320px;
height: 580px;
position: absolute;
top: 50%;
left: 50%;
background-color: #fff;
box-shadow: rgb(0 0 0 / 10%) 0px 10px 50px;
transform: translate(-50%, -50%);
border-radius: 48px;

}
.img img {
width: 100%;
}
.text1 {
width: 90%;
margin:auto;
}
.text1 h3 {
margin-top: 20px;
}

.MyBtn {
width: 60%;
margin-top: -17px;
margin-left:187px !important ;
}
.MyBtn button {
font-size: 20px;
font-weight: 600;
background-color: tomato;
border:none;
outline: none;
color: #fff;
padding:6px 25px;
cursor: pointer;
border-radius: 57px 0px 51px 0px;
transition: 0.2s ease-in-out;
}
.MyBtn button:hover {
background-color: rgb(29, 194, 194);
}

.RulesBox.activeInfo {
opacity: 1;
z-index: 5;
pointer-events: auto;
 transform: translate(-50%, -50%) scale(1);
}

.RulesBox {
width: 320px;
height: 580px;
position: absolute;
top: 50%;
left: 50%;
background-color: #fff;
box-shadow: rgb(0 0 0 / 10%) 0px 10px 50px;
transform: translate(-50%, -50%);
border-radius: 48px;
opacity: 0;
pointer-events: none;

}
.RulesTitle {
text-align: center;
font-size: 20px;
font-weight: 600;
border-bottom: 1px solid lightgray;
padding:5px;
}
.RulesList {
width: 80%;
margin:auto;
}
ol li {
font-size: 17px;
font-weight: 500;
padding:10px 25px
}
.Buttons button {
font-size: 20px;
font-weight: 600;
background-color: tomato;
border:none;
outline: none;
color: #fff;
padding:6px 25px;
cursor: pointer;
transition: 0.2s ease-in-out;
margin-top: 26px;
}
.ExitButton {
border-radius: 0px 47px 0px 46px;
}
.ExitButton:hover {
background-color: red;
}
.ContinueButton {
border-radius: 57px 0px 46px 0px;
margin-left: 65px;
}
.ContinueButton:hover {
 background-color: rgb(29, 194, 194);
}
.Questions.activeQuiz {
opacity: 1;
z-index: 5;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}

.Questions {
width: 320px;
height: 580px;
position: absolute;
top: 50%;
left: 50%;
background-color: #fff;
box-shadow: rgb(0 0 0 / 10%) 0px 10px 50px;
transform: translate(-50%, -50%);
border-radius: 48px;
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%) scale(1);

.QuestionsHeader {
position: relative;
z-index: 2;
height: 70px;
padding: 0 30px;
border-radius: 45px;
display: flex;
align-items: center;
justify-content: space-between;
}

.QuestionsHeader .title {
font-size: 15px;
font-weight: 600;
}
.TimeCount {
color: #004085;
background: #cce5ff;
border: 1px solid #b8daff;
height: 25px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-between;
width: 120px;
}
.Seconds {
font-size: 18px;
font-weight: 500;
height: 26px;
width: 45px;
color: #fff;
border-radius: 5px;
 line-height: 26px;
text-align: center;
background: #343a40;
border: 1px solid #343a40;
user-select: none;
}

.section{
padding: 25px 30px 20px 30px;
}
.text {
font-size: 25px;
font-weight: 600;
}
.MyOptions {
padding: 20px 0px;
display: block;
}

.options {
background: aliceblue;
border: 1px solid #84c5fe;
border-radius: 5px;
padding: 8px 15px;
font-size: 17px;
margin-bottom: 12px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
}
.options:hover {
color: #004085;
background: #cce5ff;
border: 1px solid #b8daff;
}
footer{
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid lightgrey;

.total_que {
padding-bottom: 10px;
padding-left: 30px;
}

footer button{
font-size: 20px;
font-weight: 600;
padding: 6px 25px;
outline: none;
border: none;
 border-radius: 57px 0px 51px 0px;
box-shadow: rgb(0 0 0 / 10%) 0px 10px 50px;
background: tomato;
cursor: pointer;
color: #f1f1f1;
transition: all 0.3s ease;
margin-top: 11px;
display: none;

}
footer .nextBtn:hover{
background-color: rgb(29, 194, 194);

}
.options.correct{
color:#155724;
background: #d4edda;
border: 1px solid #c3e6cb;
}
.options.incorrect{
color: #721c24;
background: #f8d7da;
border: 1px solid #f5c6cb;
}

.options.disabled{
pointer-events: none;
}

.Questions header .time_lines {

position: absolute;
bottom: 0px;
left: 0px;
height: 3px;
background: #007bff;
}

.reslut_box {
width: 320px;
height: 580px;
position:absolute;
top: 50%;
left:50%;
display: flex;
background-color: #fff;
border-radius: 45px;
align-items: center;
flex-direction: column;
justify-content: center;
transform: translate(-50%, -50%) scale(0.9);
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.ResultImg img {
width: 100%;
height: 170px;
margin-bottom: 180px;
}
.complete_text {
font-size: 20px;
font-weight: 500;
}
.score_text span {
display: flex;
margin:10px 0;
font-size: 18px;
font-weight: 500;
}

.score_text span p {
padding:0 4px;
font-weight: 600;
}

.reslut_box .buttons {
display: flex;
margin: 20px 0px;
}

.reslut_box .buttons button {

margin: 0 10px;
height: 45px;
padding: 0 20px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
border: none;
outline: none;
border-radius: 25px;
transition: all 0.3s ease;
}

.restart1{
background-color: tomato;
color: #fff;
}
.restart1:hover{
background-color: rgb(29, 194, 194);
}

.quit{
background-color: tomato;
color: #fff;
}
.quit:hover {
background-color: red;
}

.reslut_box.activeResult{
z-index: 5;
opacity: 1;
transform: translate(-50%, -50%) scale(1);
 pointer-events: auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Awesome Quiz App With Fixed Time || Hablu Programmer</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Scheherazade+New:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>

</head>
<body>

<div class="MyQuizApp">
<div class="img">
<img src="img/Question.svg" alt="">
</div>
<div class="text1">
<h3>Quiz App With Fixed Time</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi
aperiam, numquam minima rem deserunt dolores consectetur veritatis illo iure
incidunt sint nihil!</p>
<h3>Quiz App With Fixed Time</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio,
in.</p>
</div>
<div class="MyBtn">
<button>Start Quiz</button>
</div>
</div>

<div class="RulesBox">
<div class="RulesTitle">Some Rules of this Quiz</div>
<div class="RulesList">
<ol>
<li>You will have only <span style="color: #007bff;">15 seconds</span>
per each question.</li>
<li>Once you select your answer, it can't be undone.</li>
<li>You can't select any option once time goes off.</li>
<li> You can't exit from the Quiz while you're playing.</li>
<li>You'll get points on the basis of your correct answers.</li>

</ol>
</div>
 <div class="Buttons">
<button class="ExitButton">Exit Quiz</button>
<button class="ContinueButton">Continue</button>
</div>
</div>

<div class="Questions">

<header class="QuestionsHeader">
<div class="title">Start Exam</div>

<div class="TimeCount">
<div class="TimeLeft">Time Left</div>
<div class="Seconds">15</div>
</div>

<div class="time_lines"></div>
</header>

<div class="section">

<div class="text">
<!-- <span>1. What Does HTML Stand For?</span> -->

</div>

<div class="MyOptions">

</div>

</div>

<footer>
<div class="total_que">
<!-- <p>1 of 5 Questions</p> -->
</div>
<button class="nextBtn">Next Que</button>
</footer>

</div>

<div class="reslut_box">
<div class="ResultImg">
<img src="img/winner.svg" alt="">
</div>
<div class="complete_text">You Have Finished This Exam </div>
<div class="score_text">
<span>Carry On👍 You Got <p>0</p> Out Of <p>5</p></span>
</div>
<div class="buttons">
<button class="restart1">Replay</button>
<button class="quit">Quit Quiz</button>
</div>
</div>

<script src="js/script.js"></script>
<script src="js/question.js"></script>
</body>
</html>

const MyBtn = document.querySelector(".MyBtn button");

const RulesBox = document.querySelector(".RulesBox");
const exitButton = document.querySelector(".Buttons .ExitButton");
const ContinueButton = document.querySelector(".Buttons .ContinueButton");
const Questions = document.querySelector(".Questions")
const option_list = document.querySelector(".MyOptions");
const timeCount = document.querySelector(".TimeCount .Seconds");
const timeLine = document.querySelector(".QuestionsHeader .time_lines");
const timeOff = document.querySelector(".QuestionsHeader .TimeLeft");

MyBtn.onclick = ()=>{
RulesBox.classList.add("activeInfo");
}

exitButton.onclick = ()=>{
RulesBox.classList.remove("activeInfo");
}

ContinueButton.onclick = ()=>{
RulesBox.classList.remove("activeInfo");
Questions.classList.add("activeQuiz");
showQuestions(0);
startTimer(15)

startTimerLine(0);

const nextBtn = document.querySelector(".nextBtn");

const reslut_box = document.querySelector(".reslut_box");

const restart_quiz = document.querySelector(".buttons .restart1");
const quit_quiz = document.querySelector(".buttons .quit");

restart_quiz.onclick = ()=>{
Questions.classList.add("activeQuiz");
reslut_box.classList.remove("activeResult");
let que_count = 0;
let timeValue = 15;

let widthValue = 0;
let userScore =0;
showQuestions(que_count);
clearInterval(counter);
startTimer(timeValue)
clearInterval(counterLine);
startTimerLine(widthValue);
 nextBtn.style.display = "none";
timeOff.textContent = "Time Left";

quit_quiz.onclick = ()=>{
window.location.reload();
}

let que_count = 0;
let counter;
let timeValue = 15;

let counterLine;
let widthValue = 0;
let userScore =0;

nextBtn.onclick = ()=> {
if(que_count <questions.length - 1 ){
que_count ++
showQuestions(que_count);
clearInterval(counter);
startTimer(timeValue)

clearInterval(counterLine);
startTimerLine(widthValue);
nextBtn.style.display = "none";
timeOff.textContent = "Time Left";

}else{
clearInterval(counter);
clearInterval(counterLine);
console.log("You Have Completd Your Task 🥰");
showResultBox()

}
}

function showQuestions(index) {
const que_text = document.querySelector('.text');

let option_tag = '<div class="options"><span>' + questions[index].options[0]

+'</span></div>'
+ '<div class="options"><span>' + questions[index].options[1]
+'</span></div>'
+ '<div class="options"><span>' + questions[index].options[2]
+'</span></div>'
+ '<div class="options"><span>' + questions[index].options[3]
+'</span></div>'

let que_tag = "<span>" + questions[index].numb+ "." + questions[index].question +

" </span>";
que_text.innerHTML = que_tag;
option_list.innerHTML = option_tag;
const total_que = document.querySelector(".total_que");
let total_queTag = '<p>' + questions[index].numb + ' Of 5 </p>'
total_que.innerHTML = total_queTag;
const option = option_list.querySelectorAll(".options");
for(let i=0; i<option.length; i++){
option[i].setAttribute("onclick", "optionSelected(this)");
}

let tickIcon ='<div class="tick icon"><i class="fas fa-check"></i></div>';

let crossIcon = '<div class="cross icon"><i class="fas fa-times"></i></div>';

function optionSelected(answer){
clearInterval(counter);
clearInterval(counterLine);
let userAns = answer.textContent;
let correctAns = questions[que_count].answer;
let alloptions = option_list.children.length;

if(userAns == correctAns){
userScore +=1 ;
console.log(userScore);
answer.classList.add("correct")
console.log("Answer Is Correct");
answer.insertAdjacentHTML("beforeend", tickIcon);
}else{
answer.classList.add("incorrect")
console.log("Answer Is Wrong ");
answer.insertAdjacentHTML("beforeend", crossIcon);

for(let i =0; i<alloptions; i++){

if(option_list.children[i].textContent == correctAns ){
option_list.children[i].setAttribute("class", "options correct");
option_list.children[i].insertAdjacentHTML("beforeend", tickIcon);
}
}
}

for(let i=0; i<alloptions; i++){

option_list.children[i].classList.add("disabled");
}

nextBtn.style.display = "block";

function showResultBox(){
RulesBox.classList.remove("activeInfo");
Questions.classList.remove("activeQuiz");
reslut_box.classList.add("activeResult");

const scoreText = document.querySelector(".score_text");

 if(userScore > 3){
let scoreTag = '<span>Congratulations You Got <p>'+ userScore +'</p> Out Of
<p>'+questions.length +'</p></span>';
scoreText.innerHTML = scoreTag;
}
else if(userScore > 1){
let scoreTag = '<span>Carry On 👌 You Got <p>'+ userScore +'</p> Out Of
<p>'+questions.length +'</p></span>';
scoreText.innerHTML = scoreTag;
}
else{
let scoreTag ='<span> I Am Sorry You Got <p>'+ userScore +'</p> Out Of
<p>'+ questions.length +'</p></span>';

scoreText.innerHTML = scoreTag;
}

function startTimer(time){
counter = setInterval(timer, 1000 );
function timer(){
timeCount.textContent = time;
time--;

if(time <9){
let addZero = timeCount.textContent;
timeCount.textContent = "0" + addZero
}
if(time <0){
clearInterval(counter)
timeCount.textContent ="00";
timeOff.textContent = "Time Off";
let correctAns = questions[que_count].answer;
let alloptions = option_list.children.length;
for(let i =0; i<alloptions; i++){
if(option_list.children[i].textContent == correctAns ){
option_list.children[i].setAttribute("class", "options correct");
option_list.children[i].insertAdjacentHTML("beforeend", tickIcon);
}
}

for(let i=0; i<alloptions; i++){

option_list.children[i].classList.add("disabled");
}

nextBtn.style.display = "block";

function startTimerLine(time){
counterLine = setInterval(timer, 50);
 function timer(){
time += 1 ;
timeLine.style.width = time + "px";
if(time > 319){
clearInterval(counterLine);
}
}
}

let questions = [
{
numb:1,
question:'What Does HTML Stand For?',
answer:'Hyper Text Markup Language',
options:[
"Hyper Text Preprocessor",
"Hyper Text Markup Language",
"Hyper Text Multiple Language",
"Hyper Tool Multi Language"
]
},
{
numb: 2,
question: "What Does CSS Stand For?",
answer: "Cascading Style Sheet",
options: [
"Common Style Sheet",
"Colorful Style Sheet",
"Computer Style Sheet",
"Cascading Style Sheet"
]
},
{
numb: 3,
question: "What Does PHP Stand For?",
answer: "Hypertext Preprocessor",
options: [
"Hypertext Preprocessor",
"Hypertext Programming",
"Hypertext Preprogramming",
"Hometext Preprocessor"
]
},

{
numb: 4,
question: "What does SQL stand for?",
answer: "Structured Query Language",
options: [
"Stylish Question Language",
"Stylesheet Query Language",
"Statement Question Language",
"Structured Query Language"
]
},
 {
numb: 5,
question: "What does XML stand for?",
answer: "eXtensible Markup Language",
options: [
"eXtensible Markup Language",
"eXecutable Multiple Language",
"eXTra Multi-Program Language",
"eXamine Multiple Language"
]
},
]