{"id":89,"date":"2020-03-27T20:17:43","date_gmt":"2020-03-27T20:17:43","guid":{"rendered":"https:\/\/www.kindsonthegenius.com\/javascript\/?p=89"},"modified":"2020-08-06T06:02:53","modified_gmt":"2020-08-06T06:02:53","slug":"quiz-application-in-javascript-with-validation-step-by-step","status":"publish","type":"post","link":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-application-in-javascript-with-validation-step-by-step\/","title":{"rendered":"Quiz Application in JavaScript with Validation (Step by Step)"},"content":{"rendered":"

In an earlier tutorial,<\/a> I explained how to build a basic quiz application in JavaScript.<\/p>\n

Now, in this tutorial, we would address some issued we raised. For instance, how do we randomize the questions. Also, how do we allow the user to restart the quiz.\u00a0 So let’s get started!<\/p>\n

I would also recommend you watch the video for more explanation<\/p>\n

    \n
  1. The HTML File<\/a><\/li>\n
  2. CSS Classes<\/a><\/li>\n
  3. The JavaScript<\/a><\/li>\n
  4. The randomNumber() Function<\/a><\/li>\n
  5. The check() Function<\/a><\/li>\n<\/ol>\n

     <\/p>\n

    Before you begin:<\/strong><\/p>\n

    Create a folder where you’ll place all your files.<\/p>\n

    Inside this file, create a another folder called img. This folder will hold the images.<\/p>\n

     <\/p>\n

    1. The HTML File<\/strong><\/h5>\n

    So I’ll provide you the html file. For simplicity, I have provided only the content of the body section of the file.<\/p>\n

    <div<\/span> class=<\/span>\"quiz-container\"<\/span>><\/span>\r\n    <div<\/span> class=<\/span>\"question-number\"<\/span>><\/span>\r\n        <h3><\/span>Question <span<\/span> class=<\/span>\"question-num-value\"<\/span>><\/span><\/span> of \r\n            <span<\/span> class=<\/span>\"total-questions\"<\/span>><\/span><\/span>\r\n        <\/h3><\/span>\r\n    <\/div><\/span>\r\n    <div<\/span> class=<\/span>\"question\"<\/span>><\/span>\r\n        How do you declare a Javascript variable?\r\n    <\/div><\/span>\r\n    <div<\/span> class=<\/span>\"options\"<\/span>><\/span>\r\n        <div<\/span> id=<\/span>\"0\"<\/span> class=<\/span>\"option1\"<\/span> onclick=<\/span>\"check(this)\"<\/span>><\/div><\/span>\r\n        <div<\/span> id=<\/span>\"1\"<\/span> class=<\/span>\"option2\"<\/span> onclick=<\/span>\"check(this)\"<\/span>><\/div><\/span>\r\n        <div<\/span> id=<\/span>\"2\"<\/span> class=<\/span>\"option3\"<\/span> onclick=<\/span>\"check(this)\"<\/span>><\/div><\/span>\r\n        <div<\/span> id=<\/span>\"3\"<\/span> class=<\/span>\"option4\"<\/span> onclick=<\/span>\"check(this)\"<\/span>><\/div><\/span>\r\n    <\/div><\/span>\r\n    <div<\/span> class=<\/span>\"button btn\"<\/span>><\/span>\r\n        <button<\/span> type=<\/span>\"button\"<\/span> onclick=<\/span>\"next()\"<\/span> class=<\/span>\"btn\"<\/span>><\/span>Next<\/button><\/span>\r\n    <\/div><\/span>\r\n    <div<\/span> class=<\/span>\"answers-tracker\"<\/span>><\/span>\r\n\r\n    <\/div><\/span>\r\n<\/div><\/span>\r\n<div<\/span> class=<\/span>\"quiz-over\"<\/span>><\/span>\r\n    <div<\/span> class=<\/span>\"box\"<\/span>><\/span>\r\n        <h1><\/span>Good Job! <br<\/span> \/><\/span>\r\n            You got <span<\/span> class=<\/span>\"correct-answers\"<\/span>><\/span><\/span> out of \r\n            <span<\/span> class=<\/span>\"total-questions2\"<\/span>><\/span><\/span> answers correct. \r\n            That is <span<\/span> class=<\/span>\"percentage\"<\/span>><\/span><\/span>\r\n            Try Again\r\n        <\/h1><\/span>\r\n        <button<\/span> type=<\/span>\"button\"<\/span> onclick=<\/span>\"tryAgain()\"<\/span>><\/span>Try Again!<\/button><\/span>\r\n    <\/div><\/span>\r\n<\/div><\/span>\r\n<\/pre>\n
    What I want you to do is to take some time to understand the classes and ids in the html file. This is because, our JavaScript file would rely heavily on these elements.<\/p>\n
     <\/p>\n
    2. The Classes and Styles<\/strong><\/h5>\n
    All the classes you see in the html file are defined in the styles.css file. You can get the complete file here<\/a>. You can now add the stylesheet to your html page. Do this by adding this line to the head section.<\/p>\n
    <link<\/span> rel=<\/span>\"stylesheet\"<\/span> href=<\/span>\"styles.css\"<\/span> \/><\/span>\r\n<\/pre>\n
    After applying the style, you can preview your page, this is what you’ll see (but without the text)<\/p>\n
    \"Quiz<\/a><\/p>\n
     <\/p>\n
    3. The JavaScript File<\/strong><\/h5>\n
    I have actually written the script file in a very simple way. You’ll see that it is made up of functions and variables. Now I have added comments to the file to help you clearly understand it.<\/p>\n
    Also take note of the array of questions. Feel free to add more questions if you want.<\/p>\n
    Here is the link to the script file.<\/a><\/p>\n
    However, I would explain part of the code here to make sure you understand the logic.<\/p>\n
     <\/p>\n
    4. The randomQuestion() Function<\/strong><\/h5>\n
    This function is responsible for selecting a random question from the array of questions. It also ensures that duplicate questions are not selected.
    \n<\/p>\n\n\n\n
    \n
     1\r\n 2\r\n 3\r\n 4\r\n 5\r\n 6\r\n 7\r\n 8\r\n 9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24<\/pre>\n<\/td>\n
    		\n
    \/\/Function to select a random question<\/span>\r\nfunction<\/span> randomQuestion(){\r\n    let<\/span> randomNumber =<\/span> Math<\/span>.floor(Math<\/span>.random()*<\/span>questions.length);\r\n    if<\/span>(index ==<\/span> questions.length){\r\n        quizOver();\r\n    }\r\n    else<\/span>{\r\n        if<\/span>(answeredQuestions.length ><\/span> 0<\/span>){\r\n            if<\/span>(answeredQuestions.includes(randomNumber)){\r\n                randomQuestion();\r\n            }\r\n            else<\/span> {\r\n                currentIndex =<\/span> randomNumber;\r\n                load();\r\n            }\r\n        }\r\n        if<\/span>(answeredQuestions.length ==<\/span> 0<\/span>){\r\n            currentIndex =<\/span> randomNumber\r\n            load()\r\n        }\r\n        \/\/add the question to list of answered questions<\/span>\r\n        answeredQuestions.push(randomNumber)\r\n    }\r\n}\r\n<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
     <\/p>\n
    How it works<\/strong><\/p>\n
    I have added line numbers to be able to explain how it works<\/p>\n
    Line 1<\/strong>: a random number between 1 and the total questions is returned. The Math.random() returns a floating point number between 0 and 1. Then it is multiplied by the total questions. Finally, it is rounded off to the next integer value. For example, if Math.random() returns 0.3 and the total questions is 5. Then we would have 1.5. It is then rounded off to 2. And so on.<\/p>\n
    Lines 4 to 6<\/strong>: if the index is up to the total questions, then the quiz ends. Note that the index is incremented every time\u00a0 a question is loaded.<\/p>\n
    Line 9 to 11:<\/strong> if the random number is found in list of answered questions, then we select another random number<\/p>\n
    Line 13, 14<\/strong>: set the random number to current index and load the question at the current index<\/p>\n
    Lines 8, 17 to 20<\/strong>: this lines checks that for the very first question (answeredQuestion = 0 that is, no question have been answered), just load the question using the current index without checking for any duplicate.<\/p>\n
    Line 22:<\/strong> any answered question is added to an array of answered questions<\/p>\n
     <\/p>\n
    5. The check() Function<\/strong><\/h5>\n
    This function check if an option selected by the user is the correct option. Take a look at the code below and then we’ll discuss it.<\/p>\n\n\n\n
    \n
     1\r\n 2\r\n 3\r\n 4\r\n 5\r\n 6\r\n 7\r\n 8\r\n 9\r\n10\r\n11\r\n12\r\n13<\/pre>\n<\/td>\n
    		\n
    \/\/Check if selected answer is correct or wrong<\/span>\r\nfunction<\/span> check(element){\r\n    if<\/span>(element.id ==<\/span> questions[currentIndex].answer){\r\n        element.className=<\/span>\"correct\"<\/span>\r\n        updateAnswersTracker(\"correct\"<\/span>)\r\n        score++<\/span>\r\n    }\r\n    else<\/span> {\r\n        element.className=<\/span>\"wrong\"<\/span>\r\n        updateAnswersTracker(\"wrong\"<\/span>)\r\n    }\r\n    disableClick();\r\n}\r\n<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    How it works<\/strong><\/p>\n
    First, the ids of the elements are numbers 1 to 4. Similarly, the answers to the questions are numbered 1 to 4.<\/p>\n
    So if the id of the clicked element equals the answer to the current question, then do three things:<\/p>\n
      \n
    • add the ‘correct’ style to the class<\/li>\n
    • update the answersTracker<\/li>\n
    • updates the score<\/li>\n<\/ul>\n
      However, if the answer is wrong, we add the ‘wrong’ style and update the answersTracker<\/p>\n
      Regardless, we just disable click for other buttons.<\/p>\n
       <\/p>\n
      Other functions I would like you to review by yourself includes:<\/p>\n
        \n
      • validate()<\/li>\n
      • disableClick()<\/li>\n
      • quizOver()<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
        In an earlier tutorial, I explained how to build a basic quiz application in JavaScript. Now, in this tutorial, we would address some issued we … <\/p>\n","protected":false},"author":395,"featured_media":91,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[],"class_list":["post-89","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-quiz-applications"],"yoast_head":"\nQuiz Application in JavaScript with Validation (Step by Step) - 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-application-in-javascript-with-validation-step-by-step\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Quiz Application in JavaScript with Validation (Step by Step) - JavaScript Tutorial\" \/>\n<meta property=\"og:description\" content=\"In an earlier tutorial, I explained how to build a basic quiz application in JavaScript. Now, in this tutorial, we would address some issued we …\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-application-in-javascript-with-validation-step-by-step\/\" \/>\n<meta property=\"og:site_name\" content=\"JavaScript Tutorial\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-27T20:17:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-06T06:02:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/03\/How-to-Build-a-Quiz-Application-in-JavaScript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1001\" \/>\n\t<meta property=\"og:image:height\" content=\"343\" \/>\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-application-in-javascript-with-validation-step-by-step\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-application-in-javascript-with-validation-step-by-step\\\/\"},\"author\":{\"name\":\"kindsonthegenius\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/#\\\/schema\\\/person\\\/63a68934672db675ff0cd80d066510c2\"},\"headline\":\"Quiz Application in JavaScript with Validation (Step by Step)\",\"datePublished\":\"2020-03-27T20:17:43+00:00\",\"dateModified\":\"2020-08-06T06:02:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-application-in-javascript-with-validation-step-by-step\\\/\"},\"wordCount\":657,\"commentCount\":2,\"image\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-application-in-javascript-with-validation-step-by-step\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2020\\\/03\\\/How-to-Build-a-Quiz-Application-in-JavaScript.jpg\",\"articleSection\":[\"Quiz Applications\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-application-in-javascript-with-validation-step-by-step\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-application-in-javascript-with-validation-step-by-step\\\/\",\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-application-in-javascript-with-validation-step-by-step\\\/\",\"name\":\"Quiz Application in JavaScript with Validation (Step by Step) - JavaScript Tutorial\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-application-in-javascript-with-validation-step-by-step\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-application-in-javascript-with-validation-step-by-step\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2020\\\/03\\\/How-to-Build-a-Quiz-Application-in-JavaScript.jpg\",\"datePublished\":\"2020-03-27T20:17:43+00:00\",\"dateModified\":\"2020-08-06T06:02:53+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/#\\\/schema\\\/person\\\/63a68934672db675ff0cd80d066510c2\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-application-in-javascript-with-validation-step-by-step\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-application-in-javascript-with-validation-step-by-step\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-application-in-javascript-with-validation-step-by-step\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2020\\\/03\\\/How-to-Build-a-Quiz-Application-in-JavaScript.jpg\",\"contentUrl\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2020\\\/03\\\/How-to-Build-a-Quiz-Application-in-JavaScript.jpg\",\"width\":1001,\"height\":343},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/quiz-application-in-javascript-with-validation-step-by-step\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Quiz Application in JavaScript with Validation (Step by Step)\"}]},{\"@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 Application in JavaScript with Validation (Step by Step) - 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-application-in-javascript-with-validation-step-by-step\/","og_locale":"en_US","og_type":"article","og_title":"Quiz Application in JavaScript with Validation (Step by Step) - JavaScript Tutorial","og_description":"In an earlier tutorial, I explained how to build a basic quiz application in JavaScript. Now, in this tutorial, we would address some issued we …","og_url":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-application-in-javascript-with-validation-step-by-step\/","og_site_name":"JavaScript Tutorial","article_published_time":"2020-03-27T20:17:43+00:00","article_modified_time":"2020-08-06T06:02:53+00:00","og_image":[{"width":1001,"height":343,"url":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/03\/How-to-Build-a-Quiz-Application-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-application-in-javascript-with-validation-step-by-step\/#article","isPartOf":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-application-in-javascript-with-validation-step-by-step\/"},"author":{"name":"kindsonthegenius","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/#\/schema\/person\/63a68934672db675ff0cd80d066510c2"},"headline":"Quiz Application in JavaScript with Validation (Step by Step)","datePublished":"2020-03-27T20:17:43+00:00","dateModified":"2020-08-06T06:02:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-application-in-javascript-with-validation-step-by-step\/"},"wordCount":657,"commentCount":2,"image":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-application-in-javascript-with-validation-step-by-step\/#primaryimage"},"thumbnailUrl":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/03\/How-to-Build-a-Quiz-Application-in-JavaScript.jpg","articleSection":["Quiz Applications"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.kindsonthegenius.com\/javascript\/quiz-application-in-javascript-with-validation-step-by-step\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-application-in-javascript-with-validation-step-by-step\/","url":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-application-in-javascript-with-validation-step-by-step\/","name":"Quiz Application in JavaScript with Validation (Step by Step) - JavaScript Tutorial","isPartOf":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-application-in-javascript-with-validation-step-by-step\/#primaryimage"},"image":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-application-in-javascript-with-validation-step-by-step\/#primaryimage"},"thumbnailUrl":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/03\/How-to-Build-a-Quiz-Application-in-JavaScript.jpg","datePublished":"2020-03-27T20:17:43+00:00","dateModified":"2020-08-06T06:02:53+00:00","author":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/#\/schema\/person\/63a68934672db675ff0cd80d066510c2"},"breadcrumb":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-application-in-javascript-with-validation-step-by-step\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kindsonthegenius.com\/javascript\/quiz-application-in-javascript-with-validation-step-by-step\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-application-in-javascript-with-validation-step-by-step\/#primaryimage","url":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/03\/How-to-Build-a-Quiz-Application-in-JavaScript.jpg","contentUrl":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/03\/How-to-Build-a-Quiz-Application-in-JavaScript.jpg","width":1001,"height":343},{"@type":"BreadcrumbList","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/quiz-application-in-javascript-with-validation-step-by-step\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kindsonthegenius.com\/javascript\/"},{"@type":"ListItem","position":2,"name":"Quiz Application in JavaScript with Validation (Step by Step)"}]},{"@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\/89","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=89"}],"version-history":[{"count":4,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/89\/revisions"}],"predecessor-version":[{"id":114,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/89\/revisions\/114"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/media\/91"}],"wp:attachment":[{"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/media?parent=89"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/categories?post=89"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/tags?post=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}