{"id":84,"date":"2020-03-27T16:55:51","date_gmt":"2020-03-27T16:55:51","guid":{"rendered":"https:\/\/www.kindsonthegenius.com\/javascript\/?p=84"},"modified":"2020-03-27T16:55:51","modified_gmt":"2020-03-27T16:55:51","slug":"quiz-app-in-javascript-step-by-step-with-all-codes","status":"publish","type":"post","link":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-app-in-javascript-step-by-step-with-all-codes\/","title":{"rendered":"Quiz App in JavaScript &#8211; Step by Step with all Codes"},"content":{"rendered":"<p>In this tutorial, i would teach you how to build a complete Quiz Application in JavaScript. This would be a step-by-step.<\/p>\n<p>You&#8217;ll have all the source codes you need and it&#8217;s really gonna be fun.<\/p>\n<p>In this tutorial, you&#8217;ll learn<\/p>\n<ul>\n<li>HTML and CSS<\/li>\n<li>JavaScript<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>Content<\/strong><\/p>\n<ol>\n<li><a href=\"#t1\">The html Page<\/a><\/li>\n<li><a href=\"#t2\">Understand the Styles<\/a><\/li>\n<li><a href=\"#t3\">The styles.css File<\/a><\/li>\n<li><a href=\"#t4\">The script File<\/a><\/li>\n<li><a href=\"#t5\">The First Part (Getting Elements by Ids)<\/a><\/li>\n<li><a href=\"#t6\">The app Object<\/a><\/li>\n<li><a href=\"#t7\">Three Event Listeners<\/a><\/li>\n<li><a href=\"#t8\">Next Steps<\/a><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h5><strong id=\"t1\">1. The HTML Page<\/strong><\/h5>\n<p>This is a very simple page that would display a single question at a time. I have provided the content of the body for simplicity. So just write this code in the body section of your html page.<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"quiz-wrapper\"<\/span><span style=\"color: #007700;\">&gt;<\/span>       \r\n    <span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"questionBox\"<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"question\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n        Sample Question\r\n    <span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n    <span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"options\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n        <span style=\"color: #007700;\">&lt;ul<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"ul\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n            <span style=\"color: #007700;\">&lt;li<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"opt1\"<\/span> <span style=\"color: #0000cc;\">onclick=<\/span><span style=\"background-color: #fff0f0;\">\"button(this)\"<\/span><span style=\"color: #007700;\">&gt;&lt;\/li&gt;<\/span>\r\n            <span style=\"color: #007700;\">&lt;li<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"opt2\"<\/span> <span style=\"color: #0000cc;\">onclick=<\/span><span style=\"background-color: #fff0f0;\">\"button(this)\"<\/span><span style=\"color: #007700;\">&gt;&lt;\/li&gt;<\/span>\r\n            <span style=\"color: #007700;\">&lt;li<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"opt3\"<\/span> <span style=\"color: #0000cc;\">onclick=<\/span><span style=\"background-color: #fff0f0;\">\"button(this)\"<\/span><span style=\"color: #007700;\">&gt;&lt;\/li&gt;<\/span>\r\n            <span style=\"color: #007700;\">&lt;li<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"opt4\"<\/span> <span style=\"color: #0000cc;\">onclick=<\/span><span style=\"background-color: #fff0f0;\">\"button(this)\"<\/span><span style=\"color: #007700;\">&gt;&lt;\/li&gt;<\/span>\r\n        <span style=\"color: #007700;\">&lt;\/ul&gt;<\/span>\r\n    <span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n    <span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"score\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n        <span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"next\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n            <span style=\"color: #007700;\">&lt;button<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"btnNext\"<\/span> <span style=\"color: #0000cc;\">type=<\/span><span style=\"background-color: #fff0f0;\">\"button\"<\/span> <span style=\"color: #0000cc;\">onclick=<\/span><span style=\"background-color: #fff0f0;\">\"next()\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n              Next\r\n            <span style=\"color: #007700;\">&lt;\/button&gt;<\/span>\r\n        <span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n        <span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"score-card\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n            SCORE: <span style=\"color: #007700;\">&lt;span<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"scoreCard\"<\/span><span style=\"color: #007700;\">&gt;<\/span>0<span style=\"color: #007700;\">&lt;\/span&gt;<\/span>\r\n        <span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n    <span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h5><strong id=\"t2\">2. Understand the Styles<\/strong><\/h5>\n<p>You already know that elements in a html page can have attributes like id, class, type etc. Now, let me briefly explain the classes to you.<\/p>\n<ul>\n<li><strong>quiz-wrapper<\/strong>: this class specifies the styles that are applied to the entire quiz box<\/li>\n<li><strong>question<\/strong>: this contains that styles applied to the question<\/li>\n<li><strong>options<\/strong>: the four options for each question<\/li>\n<li><strong>score<\/strong>: styles for the next button and the score-card<\/li>\n<li><strong>next<\/strong>: applies to the next button<\/li>\n<li><strong>score-card<\/strong>: applies to the score-card<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h5><strong id=\"t3\">3. The styles.css File<\/strong><\/h5>\n<p>You need to create a file, styles.css. Place it in the same folder as your html file(index.html).<\/p>\n<p>Since this file contains many styles, I would like you to get it <a href=\"https:\/\/drive.google.com\/open?id=15t9t5P_Gfpo5ClJ3A1OS5vGWYZfLPY45\" target=\"_blank\" rel=\"noopener noreferrer\">from here<\/a>. However, I recommend you write the classes yourself. See the Video<\/p>\n<p>Then add the link to the style.css in you html page. So in the head section of your html page, add this line:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;link<\/span> <span style=\"color: #0000cc;\">rel=<\/span><span style=\"background-color: #fff0f0;\">\"stylesheet\"<\/span>  <span style=\"color: #0000cc;\">href=<\/span><span style=\"background-color: #fff0f0;\">\"styles.css\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n<\/pre>\n<p>At this point, you can view the html page on a web browser. This is what you&#8217;ll see (but without the text)<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.kindsonthegenius.com\/javascript\/?attachment_id=86#main\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-86 size-large\" src=\"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/03\/Quiz-Application-in-JavaScript-1024x604.jpg\" alt=\"Quiz Application in JavaScript\" width=\"640\" height=\"378\" srcset=\"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/03\/Quiz-Application-in-JavaScript-1024x604.jpg 1024w, https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/03\/Quiz-Application-in-JavaScript-300x177.jpg 300w, https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/03\/Quiz-Application-in-JavaScript-768x453.jpg 768w, https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/03\/Quiz-Application-in-JavaScript.jpg 1375w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h5><strong id=\"t4\">4. The Script File<\/strong><\/h5>\n<p>This is where we have to do much of the work. So I really need you to pay attention to this part. Also watch the video if you for more detailed explanation. Although you can get the file <a href=\"https:\/\/drive.google.com\/open?id=1l7TwYZon4Z4nE7PBNHkie2z2r5yMwWgS\" target=\"_blank\" rel=\"noopener noreferrer\">from here<\/a>, I would suggest you build up the script piece by piece.<\/p>\n<p>Now, this is how we would structure the script:<\/p>\n<p><strong>First<\/strong> we would have get UI elements by their id<\/p>\n<p><strong>Then<\/strong> we define <strong>the app object<\/strong> which would contain both functions and properties: the functions include load(), next(), check(), preventClic(), allowClick() and scorCard. The attribute include: index and score.<\/p>\n<p><strong>Finally<\/strong>, we have three event listeners:<\/p>\n<ul>\n<li>function to reload the page for a new quiz<\/li>\n<li>function the executes when user clicks an option<\/li>\n<li>then function to execute when the next button in clicked<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h5><strong id=\"t5\">5. The First Part (Getting Elements by Ids)<\/strong><\/h5>\n<p>The code is given below. I&#8217;m sure you can easily understand it. Otherwise, see the video for explanation<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #008800; font-weight: bold;\">var<\/span> ul <span style=\"color: #333333;\">=<\/span> <span style=\"color: #007020;\">document<\/span>.getElementById(<span style=\"background-color: #fff0f0;\">'ul'<\/span>)\r\n<span style=\"color: #008800; font-weight: bold;\">var<\/span> nextButton <span style=\"color: #333333;\">=<\/span> <span style=\"color: #007020;\">document<\/span>.getElementById(<span style=\"background-color: #fff0f0;\">'btnNext'<\/span>);\r\n<span style=\"color: #008800; font-weight: bold;\">var<\/span> quizbox <span style=\"color: #333333;\">=<\/span> <span style=\"color: #007020;\">document<\/span>.getElementById(<span style=\"background-color: #fff0f0;\">'questionBox'<\/span>)\r\n<span style=\"color: #008800; font-weight: bold;\">var<\/span> opt1 <span style=\"color: #333333;\">=<\/span> <span style=\"color: #007020;\">document<\/span>.getElementById(<span style=\"background-color: #fff0f0;\">'opt1'<\/span>)\r\n<span style=\"color: #008800; font-weight: bold;\">var<\/span> opt2 <span style=\"color: #333333;\">=<\/span> <span style=\"color: #007020;\">document<\/span>.getElementById(<span style=\"background-color: #fff0f0;\">'opt2'<\/span>)\r\n<span style=\"color: #008800; font-weight: bold;\">var<\/span> opt3 <span style=\"color: #333333;\">=<\/span> <span style=\"color: #007020;\">document<\/span>.getElementById(<span style=\"background-color: #fff0f0;\">'opt3'<\/span>)\r\n<span style=\"color: #008800; font-weight: bold;\">var<\/span> opt4 <span style=\"color: #333333;\">=<\/span> <span style=\"color: #007020;\">document<\/span>.getElementById(<span style=\"background-color: #fff0f0;\">'opt4'<\/span>)\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h5><strong id=\"t6\">6. The app object<\/strong><\/h5>\n<p>You can find below the code for the app object. I have added only two questions,\u00a0 but you can add as many questions as you want.<\/p>\n<p>Take some time to understand how each of the function works.<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #008800; font-weight: bold;\">var<\/span> app<span style=\"color: #333333;\">=<\/span>{\r\n        questions<span style=\"color: #333333;\">:<\/span>[\r\n            {\r\n                q<span style=\"color: #333333;\">:<\/span><span style=\"background-color: #fff0f0;\">'What is the name of the river'<\/span>,\r\n                options<span style=\"color: #333333;\">:<\/span> [<span style=\"background-color: #fff0f0;\">'Danube'<\/span>, <span style=\"background-color: #fff0f0;\">'Niger'<\/span>, <span style=\"background-color: #fff0f0;\">'Congo'<\/span>, <span style=\"background-color: #fff0f0;\">'Limpopo'<\/span>],\r\n                answer<span style=\"color: #333333;\">:<\/span><span style=\"color: #0000dd; font-weight: bold;\">1<\/span>\r\n            },\r\n            {\r\n                q<span style=\"color: #333333;\">:<\/span><span style=\"background-color: #fff0f0;\">'What is the name of the Deadly virus'<\/span>,\r\n                options<span style=\"color: #333333;\">:<\/span> [<span style=\"background-color: #fff0f0;\">'Antrax'<\/span>, <span style=\"background-color: #fff0f0;\">'Killvi'<\/span>, <span style=\"background-color: #fff0f0;\">'Corona'<\/span>, <span style=\"background-color: #fff0f0;\">'Wuhanvi'<\/span>],\r\n                answer<span style=\"color: #333333;\">:<\/span><span style=\"color: #0000dd; font-weight: bold;\">2<\/span>\r\n            }            \r\n        ],\r\n        index<span style=\"color: #333333;\">:<\/span><span style=\"color: #0000dd; font-weight: bold;\">0<\/span>,\r\n        <span style=\"color: #888888;\">\/\/Load a question using the index<\/span>\r\n        load<span style=\"color: #333333;\">:<\/span><span style=\"color: #008800; font-weight: bold;\">function<\/span>(){\r\n            <span style=\"color: #008800; font-weight: bold;\">if<\/span>(<span style=\"color: #008800; font-weight: bold;\">this<\/span>.index<span style=\"color: #333333;\">&lt;=<\/span><span style=\"color: #008800; font-weight: bold;\">this<\/span>.questions.length<span style=\"color: #333333;\">-<\/span><span style=\"color: #0000dd; font-weight: bold;\">1<\/span>){\r\n                quizbox.innerHTML<span style=\"color: #333333;\">=<\/span><span style=\"color: #008800; font-weight: bold;\">this<\/span>.index<span style=\"color: #333333;\">+<\/span><span style=\"color: #0000dd; font-weight: bold;\">1<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"background-color: #fff0f0;\">\". \"<\/span> <span style=\"color: #333333;\">+<\/span><span style=\"color: #008800; font-weight: bold;\">this<\/span>.questions[<span style=\"color: #008800; font-weight: bold;\">this<\/span>.index].q;\r\n                opt1.innerHTML<span style=\"color: #333333;\">=<\/span><span style=\"color: #008800; font-weight: bold;\">this<\/span>.questions[<span style=\"color: #008800; font-weight: bold;\">this<\/span>.index].options[<span style=\"color: #0000dd; font-weight: bold;\">0<\/span>];\r\n                opt2.innerHTML<span style=\"color: #333333;\">=<\/span><span style=\"color: #008800; font-weight: bold;\">this<\/span>.questions[<span style=\"color: #008800; font-weight: bold;\">this<\/span>.index].options[<span style=\"color: #0000dd; font-weight: bold;\">1<\/span>];\r\n                opt3.innerHTML<span style=\"color: #333333;\">=<\/span><span style=\"color: #008800; font-weight: bold;\">this<\/span>.questions[<span style=\"color: #008800; font-weight: bold;\">this<\/span>.index].options[<span style=\"color: #0000dd; font-weight: bold;\">2<\/span>];\r\n                opt4.innerHTML<span style=\"color: #333333;\">=<\/span><span style=\"color: #008800; font-weight: bold;\">this<\/span>.questions[<span style=\"color: #008800; font-weight: bold;\">this<\/span>.index].options[<span style=\"color: #0000dd; font-weight: bold;\">3<\/span>];\r\n            }\r\n            <span style=\"color: #008800; font-weight: bold;\">else<\/span> {\r\n                <span style=\"color: #888888;\">\/\/Show the end screen<\/span>\r\n                quizbox.innerHTML<span style=\"color: #333333;\">=<\/span><span style=\"background-color: #fff0f0;\">\"Quiz Completed!\"<\/span>;\r\n                ul.style.display<span style=\"color: #333333;\">=<\/span><span style=\"background-color: #fff0f0;\">\"none\"<\/span>;\r\n                nextButton.style.display<span style=\"color: #333333;\">=<\/span><span style=\"background-color: #fff0f0;\">\"none\"<\/span>;\r\n            }\r\n        },\r\n        next<span style=\"color: #333333;\">:<\/span> <span style=\"color: #008800; font-weight: bold;\">function<\/span>(){\r\n            <span style=\"color: #008800; font-weight: bold;\">this<\/span>.index<span style=\"color: #333333;\">++<\/span>;\r\n            <span style=\"color: #008800; font-weight: bold;\">this<\/span>.load();\r\n        },\r\n        <span style=\"color: #888888;\">\/\/Check if answer is correct or not<\/span>\r\n        check<span style=\"color: #333333;\">:<\/span> <span style=\"color: #008800; font-weight: bold;\">function<\/span>(ele){\r\n            <span style=\"color: #008800; font-weight: bold;\">var<\/span> id<span style=\"color: #333333;\">=<\/span>ele.id.split(<span style=\"background-color: #fff0f0;\">''<\/span>);\r\n            <span style=\"color: #008800; font-weight: bold;\">if<\/span>(id[id.length<span style=\"color: #333333;\">-<\/span><span style=\"color: #0000dd; font-weight: bold;\">1<\/span>]<span style=\"color: #333333;\">==<\/span><span style=\"color: #008800; font-weight: bold;\">this<\/span>.questions[<span style=\"color: #008800; font-weight: bold;\">this<\/span>.index].answer){\r\n                <span style=\"color: #008800; font-weight: bold;\">this<\/span>.score<span style=\"color: #333333;\">++<\/span>;\r\n                ele.className<span style=\"color: #333333;\">=<\/span><span style=\"background-color: #fff0f0;\">\"correct\"<\/span>;\r\n                <span style=\"color: #008800; font-weight: bold;\">this<\/span>.scoreCard();\r\n            }\r\n            <span style=\"color: #008800; font-weight: bold;\">else<\/span>{\r\n                ele.className<span style=\"color: #333333;\">=<\/span><span style=\"background-color: #fff0f0;\">\"wrong\"<\/span>;\r\n            }\r\n        },\r\n        <span style=\"color: #888888;\">\/\/disable options once user selects on option<\/span>\r\n        preventClick<span style=\"color: #333333;\">:<\/span><span style=\"color: #008800; font-weight: bold;\">function<\/span>(){\r\n            <span style=\"color: #008800; font-weight: bold;\">for<\/span>(<span style=\"color: #008800; font-weight: bold;\">let<\/span> i<span style=\"color: #333333;\">=<\/span><span style=\"color: #0000dd; font-weight: bold;\">0<\/span>; i<span style=\"color: #333333;\">&lt;<\/span>ul.children.length; i<span style=\"color: #333333;\">++<\/span>){\r\n                ul.children[i].style.pointerEvents<span style=\"color: #333333;\">=<\/span><span style=\"background-color: #fff0f0;\">\"none\"<\/span>;\r\n            }\r\n        },\r\n        allowClick<span style=\"color: #333333;\">:<\/span><span style=\"color: #008800; font-weight: bold;\">function<\/span>(){\r\n            <span style=\"color: #008800; font-weight: bold;\">for<\/span>(<span style=\"color: #008800; font-weight: bold;\">let<\/span> i<span style=\"color: #333333;\">=<\/span><span style=\"color: #0000dd; font-weight: bold;\">0<\/span>; i<span style=\"color: #333333;\">&lt;<\/span>ul.children.length; i<span style=\"color: #333333;\">++<\/span>){\r\n                ul.children[i].style.pointerEvents<span style=\"color: #333333;\">=<\/span><span style=\"background-color: #fff0f0;\">\"auto\"<\/span>;\r\n                ul.children[i].className<span style=\"color: #333333;\">=<\/span><span style=\"background-color: #fff0f0;\">''<\/span>\r\n            }\r\n        },\r\n        score<span style=\"color: #333333;\">:<\/span><span style=\"color: #0000dd; font-weight: bold;\">0<\/span>,\r\n        scoreCard<span style=\"color: #333333;\">:<\/span><span style=\"color: #008800; font-weight: bold;\">function<\/span>(){\r\n            scoreCard.innerHTML<span style=\"color: #333333;\">=<\/span><span style=\"color: #008800; font-weight: bold;\">this<\/span>.questions.length <span style=\"color: #333333;\">+<\/span> <span style=\"background-color: #fff0f0;\">\"\/\"<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"color: #008800; font-weight: bold;\">this<\/span>.score;\r\n        }\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h5><strong id=\"t7\">7. The Three Event Listeners<\/strong><\/h5>\n<p>These event listeners, would listen to page reload event, button click event (for options selection) and next button clicked events respectively.<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007020;\">window<\/span>.load<span style=\"color: #333333;\">=<\/span>app.load();\r\n\r\n<span style=\"color: #008800; font-weight: bold;\">function<\/span> button(ele){\r\n    app.check(ele);\r\n    app.preventClick();\r\n}\r\n\r\n<span style=\"color: #008800; font-weight: bold;\">function<\/span> next(){\r\n    app.next();\r\n    app.allowClick();\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h5><strong id=\"t8\">8. Next Steps<\/strong><\/h5>\n<p>If you sucessfully completed this tutorial, then congrats!<\/p>\n<p>However, there are a number of improvement that need to be made:<\/p>\n<ul>\n<li>give the user option to replay<\/li>\n<li>ensure that that questions are selected at random<\/li>\n<li>read the question from a file<\/li>\n<\/ul>\n<p>We would address these issues in the next tutorial.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, i would teach you how to build a complete Quiz Application in JavaScript. This would be a step-by-step. You&#8217;ll have all the &hellip; <\/p>\n","protected":false},"author":395,"featured_media":87,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[],"class_list":["post-84","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-quiz-applications"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Quiz App in JavaScript - Step by Step with all Codes - JavaScript Tutorial<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-app-in-javascript-step-by-step-with-all-codes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Quiz App in JavaScript - Step by Step with all Codes - JavaScript Tutorial\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, i would teach you how to build a complete Quiz Application in JavaScript. This would be a step-by-step. You&#8217;ll have all the &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-app-in-javascript-step-by-step-with-all-codes\/\" \/>\n<meta property=\"og:site_name\" content=\"JavaScript Tutorial\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-27T16:55:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/03\/Build-a-Quiz-App-in-JavaScript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"957\" \/>\n\t<meta property=\"og:image:height\" content=\"349\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"kindsonthegenius\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"kindsonthegenius\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-app-in-javascript-step-by-step-with-all-codes\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-app-in-javascript-step-by-step-with-all-codes\\\/\"},\"author\":{\"name\":\"kindsonthegenius\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/#\\\/schema\\\/person\\\/63a68934672db675ff0cd80d066510c2\"},\"headline\":\"Quiz App in JavaScript &#8211; Step by Step with all Codes\",\"datePublished\":\"2020-03-27T16:55:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-app-in-javascript-step-by-step-with-all-codes\\\/\"},\"wordCount\":591,\"commentCount\":3,\"image\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-app-in-javascript-step-by-step-with-all-codes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2020\\\/03\\\/Build-a-Quiz-App-in-JavaScript.jpg\",\"articleSection\":[\"Quiz Applications\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-app-in-javascript-step-by-step-with-all-codes\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-app-in-javascript-step-by-step-with-all-codes\\\/\",\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-app-in-javascript-step-by-step-with-all-codes\\\/\",\"name\":\"Quiz App in JavaScript - Step by Step with all Codes - JavaScript Tutorial\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-app-in-javascript-step-by-step-with-all-codes\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-app-in-javascript-step-by-step-with-all-codes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2020\\\/03\\\/Build-a-Quiz-App-in-JavaScript.jpg\",\"datePublished\":\"2020-03-27T16:55:51+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/#\\\/schema\\\/person\\\/63a68934672db675ff0cd80d066510c2\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-app-in-javascript-step-by-step-with-all-codes\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-app-in-javascript-step-by-step-with-all-codes\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-app-in-javascript-step-by-step-with-all-codes\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2020\\\/03\\\/Build-a-Quiz-App-in-JavaScript.jpg\",\"contentUrl\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2020\\\/03\\\/Build-a-Quiz-App-in-JavaScript.jpg\",\"width\":957,\"height\":349},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-app-in-javascript-step-by-step-with-all-codes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Quiz App in JavaScript &#8211; Step by Step with all Codes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/#website\",\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/\",\"name\":\"JavaScript Tutorial\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/#\\\/schema\\\/person\\\/63a68934672db675ff0cd80d066510c2\",\"name\":\"kindsonthegenius\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3079a7f663b02e801d03cd075852a037af36bd179b5fbcd0603bae3dd7833a9b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3079a7f663b02e801d03cd075852a037af36bd179b5fbcd0603bae3dd7833a9b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3079a7f663b02e801d03cd075852a037af36bd179b5fbcd0603bae3dd7833a9b?s=96&d=mm&r=g\",\"caption\":\"kindsonthegenius\"},\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/author\\\/kindsonthegenius-2\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Quiz App in JavaScript - Step by Step with all Codes - JavaScript Tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-app-in-javascript-step-by-step-with-all-codes\/","og_locale":"en_US","og_type":"article","og_title":"Quiz App in JavaScript - Step by Step with all Codes - JavaScript Tutorial","og_description":"In this tutorial, i would teach you how to build a complete Quiz Application in JavaScript. This would be a step-by-step. You&#8217;ll have all the &hellip;","og_url":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-app-in-javascript-step-by-step-with-all-codes\/","og_site_name":"JavaScript Tutorial","article_published_time":"2020-03-27T16:55:51+00:00","og_image":[{"width":957,"height":349,"url":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/03\/Build-a-Quiz-App-in-JavaScript.jpg","type":"image\/jpeg"}],"author":"kindsonthegenius","twitter_card":"summary_large_image","twitter_misc":{"Written by":"kindsonthegenius","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-app-in-javascript-step-by-step-with-all-codes\/#article","isPartOf":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-app-in-javascript-step-by-step-with-all-codes\/"},"author":{"name":"kindsonthegenius","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/#\/schema\/person\/63a68934672db675ff0cd80d066510c2"},"headline":"Quiz App in JavaScript &#8211; Step by Step with all Codes","datePublished":"2020-03-27T16:55:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-app-in-javascript-step-by-step-with-all-codes\/"},"wordCount":591,"commentCount":3,"image":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-app-in-javascript-step-by-step-with-all-codes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/03\/Build-a-Quiz-App-in-JavaScript.jpg","articleSection":["Quiz Applications"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.kindsonthegenius.com\/javascript\/quiz-app-in-javascript-step-by-step-with-all-codes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-app-in-javascript-step-by-step-with-all-codes\/","url":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-app-in-javascript-step-by-step-with-all-codes\/","name":"Quiz App in JavaScript - Step by Step with all Codes - JavaScript Tutorial","isPartOf":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-app-in-javascript-step-by-step-with-all-codes\/#primaryimage"},"image":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-app-in-javascript-step-by-step-with-all-codes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/03\/Build-a-Quiz-App-in-JavaScript.jpg","datePublished":"2020-03-27T16:55:51+00:00","author":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/#\/schema\/person\/63a68934672db675ff0cd80d066510c2"},"breadcrumb":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-app-in-javascript-step-by-step-with-all-codes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kindsonthegenius.com\/javascript\/quiz-app-in-javascript-step-by-step-with-all-codes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-app-in-javascript-step-by-step-with-all-codes\/#primaryimage","url":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/03\/Build-a-Quiz-App-in-JavaScript.jpg","contentUrl":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/03\/Build-a-Quiz-App-in-JavaScript.jpg","width":957,"height":349},{"@type":"BreadcrumbList","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-app-in-javascript-step-by-step-with-all-codes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kindsonthegenius.com\/javascript\/"},{"@type":"ListItem","position":2,"name":"Quiz App in JavaScript &#8211; Step by Step with all Codes"}]},{"@type":"WebSite","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/#website","url":"https:\/\/www.kindsonthegenius.com\/javascript\/","name":"JavaScript Tutorial","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kindsonthegenius.com\/javascript\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/#\/schema\/person\/63a68934672db675ff0cd80d066510c2","name":"kindsonthegenius","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3079a7f663b02e801d03cd075852a037af36bd179b5fbcd0603bae3dd7833a9b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3079a7f663b02e801d03cd075852a037af36bd179b5fbcd0603bae3dd7833a9b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3079a7f663b02e801d03cd075852a037af36bd179b5fbcd0603bae3dd7833a9b?s=96&d=mm&r=g","caption":"kindsonthegenius"},"url":"https:\/\/www.kindsonthegenius.com\/javascript\/author\/kindsonthegenius-2\/"}]}},"_links":{"self":[{"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/84","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/users\/395"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":3,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/84\/revisions"}],"predecessor-version":[{"id":93,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/84\/revisions\/93"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/media\/87"}],"wp:attachment":[{"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/media?parent=84"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/categories?post=84"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/tags?post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}