>DOCTYPE html!<
>"html lang="en<
>head<
>/ "meta charset="UTF-8<
>/ "meta name="viewport" content="width=device-width, initial-scale=1.0<
>title>Quiz App</title<
>/ "link rel="stylesheet" href="main.css<
>head/<
>body<
>"div class="quiz-app<
>"div class="quiz-info<
>div class="category">Category: <span>HTML</span></div<
>div class="count">Questions Count: <span></span></div<
>div/<
>div class="quiz-area"></div<
>div class="answers-area"></div<
>button class="submit-button">Submit Answer</button<
>"div class="bullets<
>div class="spans"></div<
>div class="countdown"></div<
>div/<
>div class="results"></div<
>div/<
>script src="main.js"></script<
>body/<
>html/<
>DOCTYPE html!<
>"html lang="en<
>head<
>/ "meta charset="UTF-8<
>/ "meta name="viewport" content="width=device-width, initial-scale=1.0<
>title>Quiz App</title<
>/ "link rel="stylesheet" href="main.css<
>head/<
>body<
>"div class="quiz-app<
>"div class="quiz-info<
>div class="category">Category: <span>HTML</span></div<
>div class="count">Questions Count: <span></span></div<
>div/<
>div class="quiz-area"></div<
>div class="answers-area"></div<
>button class="submit-button">Submit Answer</button<
>"div class="bullets<
>div class="spans"></div<
>div class="countdown"></div<
>div/<
>div class="results"></div<
>div/<
>script src="main.js"></script<
>body/<
>html/<
Select Elements //
;Let countSpan = document.querySelector(".count span")
;Let bullets = document.querySelector(".bullets")
;Let bulletsSpanContainer = document.querySelector(".bullets .spans")
;Let quizArea = document.querySelector(".quiz-area")
;Let answersArea = document.querySelector(".answers-area")
;Let submitButton = document.querySelector(".submit-button")
;Let resultsContainer = document.querySelector(".results")
;Let countdownElement = document.querySelector(".countdown")
Set Options //
;Let currentIndex = 0
;Let rightAnswers = 0
;Let countdownInterval















{ )(Function getQuestions
;)(Let myRequest = new XMLHttpRequest
{ )( myRequest.onreadystatechange = function
{ If (this.readyState === 4 && this.status === 200)
;Let questionsObject = JSON.parse(this.responseText)
;Let qCount = questionsObject.length
Create Bullets + Set Questions Count //
;createBullets(qCount)
Add Question Data //
;addQuestionData(questionsObject[currentIndex], qCount)
Start CountDown //
;Countdown(3, qCount)
Click On Submit //
{ >= )( = submitButton.onclick
Get Right Answer //
;Let theRightAnswer = questionsObject[currentIndex].right_answer
Increase Index //
;++currentIndex
Check The Answer //
;checkAnswer(theRightAnswer, qCount)
Remove Previous Question //
;"" = quizArea.innerHTML
;"" = answersArea.innerHTML
Add Question Data //
;addQuestionData(questionsObject[currentIndex], qCount)
Handle Bullets Class //
;)(handleBullets
Start CountDown //
;clearInterval(countdownInterval)
;Countdown(3, qCount)
Show Results //
;showResults(qCount)
;}














































}
;}
;myRequest.open("GET", "html_questions.json", true)
;)(myRequest.send
}
;)(getQuestions
{ Function createBullets(num)
;countSpan.innerHTML = num
Create Spans //
{ For (let I = 0; I < num; i++)
Create Bullet //
;Let theBullet = document.createElement("span")
Check If Its First Span //
{ If (I === 0)
;"theBullet.className = "on
}
Append Bullets To Main Bullet Container //
;bulletsSpanContainer.appendChild(theBullet)
}
}
{ Function addQuestionData(obj, count)
{ If (currentIndex < count)
Create H2 Question Title //
;Let questionTitle = document.createElement("h2")
Create Question Text //
;Let questionText = document.createTextNode(obj["title"])
Append Text To H2 //
;questionTitle.appendChild(questionText)
Append The H2 To The Quiz Area //
;quizArea.appendChild(questionTitle)
Create The Answers //
{ For (let I = 1; I <= 4; i++)
Create Main Answer Div //
;Let mainDiv = document.createElement("div")














































Add Class To Main Div //
;"mainDiv.className = "answer
Create Radio Input //
;Let radioInput = document.createElement("input")
Add Type + Name + Id + Data-Attribute //
;"radioInput.name = "question
;"radioInput.type = "radio
;`radioInput.id = `answer_${i}
;radioInput.dataset.answer = obj[`answer_${I}`]
Make First Option Selected //
{ If (I === 1)
;radioInput.checked = true
}
Create Label //
;Let theLabel = document.createElement("label")
Add For Attribute //
;`theLabel.htmlFor = `answer_${i}
Create Label Text //
;Let theLabelText = document.createTextNode(obj[`answer_${I}`])
Add The Text To Label //
;theLabel.appendChild(theLabelText)
Add Input + Label To Main Div //
;mainDiv.appendChild(radioInput)
;mainDiv.appendChild(theLabel)
Append All Divs To Answers Area //
;answersArea.appendChild(mainDiv)
}
}
}
{ Function checkAnswer(rAnswer, count)
;Let answers = document.getElementsByName("question")
;Let theChoosenAnswer
{ For (let I = 0; I < answers.length; i++)
{ If (answers[i].checked)
;theChoosenAnswer = answers[i].dataset.answer














































}
}
{ If (rAnswer === theChoosenAnswer)
;++rightAnswers
}
}
{ )(Function handleBullets
;Let bulletsSpans = document.querySelectorAll(".bullets .spans span")
;Let arrayOfSpans = Array.from(bulletsSpans)
{ >= arrayOfSpans.forEach((span, index)
{ If (currentIndex === Index)
;"Span.className = "on
}
;)}
}
{ Function showResults(count)
;Let theResults
{ If (currentIndex === count)
;)(quizArea.remove
;)(answersArea.remove
;)(submitButton.remove
;)(Bullets.remove
{ If (rightAnswers > count / 2 && rightAnswers < count)
theResults = `<span class="good">Good</span>, ${rightAnswers} From
;`${count}
{ else if (rightAnswers === count) }
;`theResults = `<span class="perfect">Perfect</span>, All Answers Is Good
{ else }
;`theResults = `<span class="bad">Bad</span>, ${rightAnswers} From ${count}
}
;resultsContainer.innerHTML = theResults
;"resultsContainer.style.padding = "10px
;"resultsContainer.style.backgroundColor = "white
;"resultsContainer.style.marginTop = "10px
}
}
{ Function countdown(duration, count)
{ If (currentIndex < count)
;Let minutes, seconds
{ )( countdownInterval = setInterval(function













































;Minutes = parseInt(duration / 60)
;Seconds = parseInt(duration % 60)
;Minutes = minutes < 10 ? `0${minutes}` : minutes
;Seconds = seconds < 10 ? `0${seconds}` : seconds
;`countdownElement.innerHTML = `${minutes}:${seconds}
{ If (--duration < 0)
;clearInterval(countdownInterval)
;)(submitButton.click
}
;)1000 ,}
}
}
[
{
,"title": "Why We Use <br> Element"
,"answer_1": "To Make Text Bold"
,"answer_2": "To Make Text Italic"
,"answer_3": "To Add Breakline"
,"answer_4": "To Create Horizontal Line"
"right_answer": "To Add Breakline"
,}
{
,"title": "Is <img> Element Has Attribute href"
,"answer_1": "Yes"
,">answer_2": "No Its For Anchor Tag <a"
,"answer_3": "All Elements Has This Attribute"
,"answer_4": "Answer 1 And 3 Is Right"
">right_answer": "No Its For Anchor Tag <a"
,}
{
,"title": "How Can We Make Element Text Bold"
,"answer_1": "Putting It Inside <b> Tag"
,"answer_2": "Putting It Inside <strong> Tag"
,"answer_3": "Customizing It With Font-Weight Property In CSS"
,"answer_4": "All Answers Is Right"
"right_answer": "All Answers Is Right"
,}
{
,"title": "What Is The Right Hierarchy For Creating Part Of Page"
answer_1": "<h2> Then <p> Then <h1> Then <p> Then <h3> Then <p> Then "
,"><img
answer_2": "<h1> Then <p> Then <h3> Then <p> Then <h2> Then <p> Then "
,"><img












































answer_3": "<h2> Then <p> Then <h3> Then <p> Then <h1> Then <p> Then "
,"><img
,"answer_4": "All Solutions Is Wrong"
"right_answer": "All Solutions Is Wrong"
,}
{
,"title": "How Can We Include External Page Inside Our HTML Page"
,"answer_1": "By Using Include in HTML"
,"answer_2": "By Using Load In HTML"
,"answer_3": "By Using iFrame Tag"
,"answer_4": "All Solutions Is Wrong"
"right_answer": "By Using iFrame Tag"
,}
{
,"title": "What Is The Tag That Not Exists In HTML"
,">answer_1": "<object"
,">answer_2": "<basefont"
,">answer_3": "<abbr"
,"answer_4": "All Tags Is Exists in HTML"
"right_answer": "All Tags Is Exists in HTML"
,}
{
,"title": "How We Specify Document Type Of HTML5 Page"
,">answer_1": "<DOCTYPE html"
,">answer_2": "<DOCTYPE html5"
,">answer_3": "<!DOCTYPE html5"
,">answer_4": "<!DOCTYPE html"
">right_answer": "<!DOCTYPE html"
,}
{
,"title": "What Is The Element That’s Not Exists In HTML5 Semantics"
,">answer_1": "<article"
,">answer_2": "<section"
,">answer_3": "<blockquote"
,">answer_4": "<aside"
">right_answer": "<blockquote"
,}
{
,"title": "In HTML Can We Use This Way To Add Attributes"
,"> answer_1": "<div class= class-name"
,">answer_2": "<div class=class-name"
,">"\answer_3": "<div class=\"class-name"
,"answer_4": "All Is Right"
"right_answer": "All Is Right"
}













































{]

;Box-sizing: border-box
}
{ Body
;Font-family: Tahoma, Arial
}
{ quiz-app.
;Margin: 20px auto
;Width: 800px
;Background-color: #f8f8f8
;Padding: 15px
}
{ quiz-app .quiz-info.
;Display: flex
;Background-color: #fff
;Padding: 20px
}
{ quiz-app .quiz-info .category.
;Flex: 1
}
{ quiz-app .quiz-info .count.
;Flex: 1
;Text-align: right
}
{ quiz-app .quiz-area.
;Background-color: #fff
;Padding: 20px
;Margin-top: 15px
}
{ quiz-app .quiz-area h2.
;Margin: 0
}
{ quiz-app .answers-area.
;Background-color: #fff
;Padding: 0 20px 20px
}
{ quiz-app .answers-area .answer.
;Background-color: #f9f9f9
;Padding: 15px
}
{ quiz-app .answers-area .answer:not(:last-child).
;Border-bottom: 1px solid #dfdfdf
}
{ quiz-app .answers-area .answer input[type="Radio"]:checked + label.
;Color: #0075ff
}
{ quiz-app .answers-area .answer label.
;Cursor: pointer
;Font-weight: bold
;Color: #777
;Font-size: 14px
;Margin-left: 5px
;Position: relative
;Top: -1px
}
{ quiz-app .submit-button.
;Background-color: #0075ff
;Display: block
;Width: 100%
;Padding: 15px
;Border: none
;Color: #fff
;Font-weight: bold
;Font-size: 18px
;Cursor: pointer
;Border-radius: 6px
;Margin: 20px auto
}
{ quiz-app .submit-button:focus.
;Outline: none
}
{ quiz-app .bullets.
;Border-top: 1px solid #dfdfdf
;Background-color: #fff
;Display: flex
;Padding: 20px
}
{ quiz-app .bullets .spans.
;Flex: 1
;Display: flex
}
{ quiz-app .bullets .spans span.
;Width: 20px
;Height: 20px
;Background-color: #ddd
;Margin-right: 5px
;Border-radius: 50%
}
{ quiz-app .bullets .spans span.on.
;Background-color: #0075ff
}
{ quiz-app .results span.
;Font-weight: bold
}
{ quiz-app .results span.bad.
;Color: #dc0a0a
}
{ quiz-app .results span.good.
;Color: #009688
}
{ quiz-app .results span.perfect.
;Color: #0075ff
}