{"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:\/\/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:\/\/kindsonthegenius.com\/javascript\/?attachment_id=86#main\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-86 size-large\" src=\"https:\/\/kindsonthegenius.com\/javascript\/wp-content\/uploads\/2020\/03\/Quiz-Application-in-JavaScript-1024x604.jpg\" alt=\"Quiz Application in JavaScript\" width=\"640\" height=\"378\" srcset=\"https:\/\/kindsonthegenius.com\/javascript\/wp-content\/uploads\/2020\/03\/Quiz-Application-in-JavaScript-1024x604.jpg 1024w, https:\/\/kindsonthegenius.com\/javascript\/wp-content\/uploads\/2020\/03\/Quiz-Application-in-JavaScript-300x177.jpg 300w, https:\/\/kindsonthegenius.com\/javascript\/wp-content\/uploads\/2020\/03\/Quiz-Application-in-JavaScript-768x453.jpg 768w, https:\/\/kindsonthegenius.com\/javascript\/wp-content\/uploads\/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":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[15],"tags":[],"class_list":["post-84","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-quiz-applications"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/84","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/users\/395"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":3,"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/84\/revisions"}],"predecessor-version":[{"id":93,"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/84\/revisions\/93"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/media\/87"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/media?parent=84"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/categories?post=84"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/tags?post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}