{"id":97,"date":"2020-04-02T08:58:36","date_gmt":"2020-04-02T08:58:36","guid":{"rendered":"https:\/\/www.kindsonthegenius.com\/javascript\/?p=97"},"modified":"2020-08-06T06:03:06","modified_gmt":"2020-08-06T06:03:06","slug":"build-a-quiz-app-store-data-in-client-side-indexeddb","status":"publish","type":"post","link":"https:\/\/www.kindsonthegenius.com\/javascript\/build-a-quiz-app-store-data-in-client-side-indexeddb\/","title":{"rendered":"Build a Quiz App – Store Data in Client-Side IndexedDB"},"content":{"rendered":"

In the previous tutorials, I explained how to build a quiz application. You can review them here.<\/p>\n

First Quiz App\u00a0<\/a><\/p>\n

Second Quiz App – with more features<\/a><\/p>\n

 <\/p>\n

We would then cover the following:<\/p>\n

    \n
  1. Creating the index.html and Stylesheet<\/a><\/li>\n
  2. Building the QuestionManager.js Script<\/a><\/li>\n<\/ol>\n

     <\/p>\n

    1. Create the index.html File and the Stylesheet<\/strong><\/h5>\n

    These have been explained in the previous part. So I would not spend time here. Meanwhile here are the two files:<\/p>\n

    index.html<\/a>: You can create the html file and paste the content\u00a0 of this file<\/p>\n

    styles.css<\/a>: Do same<\/p>\n

    scripts.js<\/a>: this is the script that controls the quiz. It’s explained in Part 1<\/a><\/p>\n

    Now you can preview the index.html page<\/p>\n

     <\/p>\n

    The Question Manager HTML<\/strong><\/p>\n

    This is where we would be able to add and delete a quiz from the database. As mentioned, the database would be IndexedDB, which is a client-side database embedded in the browsers.<\/p>\n

    First create a html page, QuizManager.html.<\/p>\n

    Here is the content of the body section below:<\/p>\n

    <div<\/span> class=<\/span>\"header\"<\/span>><\/span>\r\n    <a<\/span> href=<\/span>\"start.html\"<\/span>><\/span> Home<\/a><\/span> |\r\n    <a<\/span> href=<\/span>\"game.html\"<\/span>><\/span> Game<\/a><\/span> |\r\n    <a<\/span> href=<\/span>\"index.html\"<\/span>><\/span> Quiz<\/a><\/span> |\r\n    <a<\/span> href=<\/span>\"questionsManager.html\"<\/span>><\/span> Questions Manager<\/a><\/span>\r\n<\/div><\/span>    \r\n<center><h4><\/span>Available Questions<\/h4><\/center><\/span>\r\n<div<\/span> id=<\/span>\"questionBox\"<\/span> class=<\/span>\"questionList\"<\/span>><\/span>\r\n<\/div><\/span>\r\n<div<\/span> class=<\/span>\"ui form entryForm\"<\/span>><\/span>\r\n    <center><h4><\/span>Add New Question<\/h4><\/center><\/span>\r\n    <div<\/span> class=<\/span>\"field\"<\/span>><\/span>\r\n      <input<\/span> type=<\/span>\"text\"<\/span> id=<\/span>\"addQuestion\"<\/span> placeholder=<\/span>\"Question\"<\/span>><\/span>\r\n    <\/div><\/span>\r\n    <hr<\/span> \/><\/span>\r\n    <div<\/span> class=<\/span>\"field\"<\/span>><\/span>\r\n      <input<\/span> type=<\/span>\"text\"<\/span> id=<\/span>\"addOption1\"<\/span> placeholder=<\/span>\"Option 1\"<\/span>><\/span>\r\n    <\/div><\/span>\r\n    <div<\/span> class=<\/span>\"field\"<\/span>><\/span>\r\n        <input<\/span> type=<\/span>\"text\"<\/span> id=<\/span>\"addOption2\"<\/span> placeholder=<\/span>\"Option 2\"<\/span>><\/span>\r\n      <\/div><\/span>        \r\n      <div<\/span> class=<\/span>\"field\"<\/span>><\/span>\r\n        <input<\/span> type=<\/span>\"text\"<\/span> id=<\/span>\"addOption3\"<\/span> placeholder=<\/span>\"Option 3\"<\/span>><\/span>\r\n      <\/div><\/span>        \r\n      <div<\/span> class=<\/span>\"field\"<\/span>><\/span>\r\n        <input<\/span> type=<\/span>\"text\"<\/span> id=<\/span>\"addOption4\"<\/span> placeholder=<\/span>\"Option 4\"<\/span>><\/span>\r\n      <\/div><\/span>\r\n      <hr<\/span> \/><\/span>\r\n      <div<\/span> class=<\/span>\"field\"<\/span>><\/span>\r\n        <input<\/span> type=<\/span>\"text\"<\/span> id=<\/span>\"addAnswer\"<\/span> placeholder=<\/span>\"Answer\"<\/span>><\/span>\r\n      <\/div><\/span>\r\n    <hr<\/span> \/><\/span>\r\n    <button<\/span> onclick=<\/span>\"addQuestionHandler()\"<\/span> class=<\/span>\"ui button\"<\/span> ><\/span>Add Question<\/button><\/span>\r\n<\/div><\/span>\r\n<script <\/span>src=<\/span>\"questionsManager.js\"<\/span>><\/script><\/span>\r\n<\/pre>\n
    Go ahead to preview the html page.<\/p>\n
     <\/p>\n
    Link the Stylesheet<\/strong><\/p>\n
    Next, you need to add the link to the styles.css file to the header section. I also added the semantic ui cdn link as well. We use the sematic ui, for some styling.<\/p>\n
    <link<\/span> rel=<\/span>\"stylesheet\"<\/span> \r\nhref=<\/span>\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/semantic-ui\/2.4.1\/semantic.min.css\"<\/span> \r\nintegrity=<\/span>\"sha256-9mbkOfVho3ZPXfM7W8sV2SndrGDuh7wuyLjtsWeTI1Q=\"<\/span> \r\ncrossorigin=<\/span>\"anonymous\"<\/span> \/><\/span>\r\n<link<\/span> rel=<\/span>\"stylesheet\"<\/span> href=<\/span>\"styles.css\"<\/span> \/><\/span>\r\n<\/pre>\n
     <\/p>\n
     <\/p>\n
    2. The Question Manager JavaScript File<\/strong><\/h5>\n
    Here is where we would write the logic to manipulate the database. So we would open the database, read the content and load it into the ui. Also, we would have a function to insert a new question.<\/p>\n
    You need to pay attention to this part. However, I have simplified it by breaking the code down into nine sections.<\/p>\n
     <\/p>\n
    1. Open Request<\/strong><\/p>\n
    The first step is to create a request object to open the database. We also declare a variable db to hold the response. If the database does not exist, it is created.<\/p>\n
    <\/p>\n
    \/\/1. Request to open the database, <\/span>\r\nvar<\/span> request =<\/span> window<\/span>.indexedDB.open(\"questionsDB\"<\/span>, 1<\/span>) \r\nvar<\/span> db;\r\n<\/pre>\n
     <\/p>\n
    2. Open Succeeded<\/strong><\/p>\n
    Specify what happens if the open request succeeded. In this case, we just read the question from the database and display them.
    \n<\/p>\n
    \/\/2. The database is opened normally<\/span>\r\nrequest.onsuccess =<\/span> function<\/span>(event) {\r\n    db =<\/span> event.target.result\r\n    loadQuestion(db)\r\n}\r\n<\/pre>\n
     <\/p>\n
    3. Schema Changed<\/strong><\/p>\n
    We also need to do this. This is in case, the database if being opened for the firs time. So we create an objectStore named questions
    \n<\/p>\n
    \/\/3. The schema is changing or this is the firs time<\/span>\r\nrequest.onupgradeneeded =<\/span> function<\/span>(event){\r\n    db =<\/span> event.target.result;\r\n    db.createObjectStore(\"questions\"<\/span>, { keyPath :<\/span> \"id\"<\/span> });    \r\n}\r\n<\/pre>\n
     <\/p>\n
    4. Declare Elements<\/strong><\/p>\n
    These are just the ui elements where we’ll display the question details as well as the options.
    \n<\/p>\n
    \/\/4. Declare the elements for the question and options<\/span>\r\n\/\/questionText, opt1, opt2, opt3, opt4, answer<\/span>\r\nvar<\/span> questionText =<\/span> document<\/span>.getElementById(\"addQuestion\"<\/span>)\r\nvar<\/span> opt1 =<\/span> document<\/span>.getElementById('addOption1'<\/span>)\r\nvar<\/span> opt2 =<\/span> document<\/span>.getElementById('addOption2'<\/span>)\r\nvar<\/span> opt3 =<\/span> document<\/span>.getElementById('addOption3'<\/span>)\r\nvar<\/span> opt4 =<\/span> document<\/span>.getElementById('addOption4'<\/span>)\r\nvar<\/span> answer =<\/span> document<\/span>.getElementById('addAnswer'<\/span>)\r\n<\/pre>\n
     <\/p>\n
    5. QuestionBank<\/strong><\/p>\n
    An array to hold the list of questions.
    \n<\/p>\n
    \/\/5. questionBank: Declare variable to hold the list of questions<\/span>\r\nvar<\/span> questionBank\r\n<\/pre>\n
     <\/p>\n
    6. addQuestionHandler<\/strong><\/p>\n
    This is the handler function for the click event of the add button.
    \n<\/p>\n
    \/\/6. addQuestionHandler(): Create a new question and call addQuestion()<\/span>\r\nfunction<\/span> addQuestionHandler(){\r\n    vQuestion =<\/span> {\r\n        id:<\/span>(questionText.value).replace(\/\\s\/g<\/span>,''<\/span>),\r\n        q:<\/span>questionText.value,\r\n        options:<\/span> [opt1.value, opt2.value, opt3.value, opt4.value],\r\n        answer:<\/span>answer.value\r\n    }\r\n    addQuestion(vQuestion)\r\n    location.reload()\r\n}\r\n<\/pre>\n
     <\/p>\n
    7. addQuestion() function<\/strong><\/p>\n
    This function does the transaction to add a single question
    \n<\/p>\n
    \/\/7. addQuestion: Actually perform the insert options<\/span>\r\nfunction<\/span> addQuestion(question){\r\n    var<\/span> request =<\/span> db\r\n    .transaction(['questions'<\/span>], 'readwrite'<\/span>)\r\n    .objectStore('questions'<\/span>)\r\n    .add(question)\r\n}\r\n<\/pre>\n
     <\/p>\n
    8. deleteQuestion() function<\/strong><\/p>\n
    This function deleted a question using the id
    \n<\/p>\n
    \/\/8. deleteQuestion: Performs the actual delete operation<\/span>\r\nfunction<\/span> deleteQuestion(){\r\n    var<\/span> request =<\/span> db\r\n    .transaction(['questions'<\/span>], 'readwrite'<\/span>)\r\n    .objectStore('questions'<\/span>)\r\n    .delete<\/span>(event.target.id)\r\n    location.reload();\r\n}\r\n<\/pre>\n
     <\/p>\n
    9. loadQuestion() function<\/strong><\/p>\n
    Perform a read operation to retrieve all the questions. Load them onto the UI. Note the delete button, the onclick() attribute and the id attribute.
    \n<\/p>\n
    \/\/9. loadQuestion(): loads all the question onto the UI<\/span>\r\nfunction<\/span> loadQuestion(db){        \r\n    var<\/span> transaction =<\/span> db.transaction([\"questions\"<\/span>]);\r\n    var<\/span> objectStore =<\/span> transaction.objectStore(\"questions\"<\/span>);\r\n\r\n    objectStore.getAll().onsuccess =<\/span> function<\/span>(event) {\r\n        var<\/span> str =<\/span> ''<\/span>\r\n        event.target.result.forEach(element =><\/span> {\r\n          var<\/span> btnid =<\/span> \"id = \"<\/span> +<\/span> element.id;\r\n          str +=<\/span> '<p class=\"singleQuestion\"><strong> '<\/span> \r\n          +<\/span> element.q +<\/span> '<\/strong> <button '<\/span> \r\n          +<\/span> btnid +<\/span> ' onclick=\"deleteQuestion()\">Delete<\/button> <br \/>'<\/span>\r\n          +<\/span> 'A. '<\/span> +<\/span> element.options[0<\/span>] \r\n          +<\/span> '  B. '<\/span> +<\/span> element.options[1<\/span>] \r\n          +<\/span> '  C. '<\/span> +<\/span> element.options[2<\/span>] \r\n          +<\/span> '  D. '<\/span> +<\/span> element.options[3<\/span>] \r\n          +<\/span> '<\/p>'<\/span>\r\n        });       \r\n        document<\/span>.getElementById(\"questionBox\"<\/span>).innerHTML =<\/span> str;\r\n    };\r\n}\r\n<\/pre>\n
     <\/p>\n
    Complete Quiz Application<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    In the previous tutorials, I explained how to build a quiz application. You can review them here. First Quiz App\u00a0 Second Quiz App – with … <\/p>\n","protected":false},"author":395,"featured_media":100,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,15],"tags":[16],"class_list":["post-97","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-tutorials","category-quiz-applications","tag-indexeddb"],"yoast_head":"\nBuild a Quiz App - Store Data in Client-Side IndexedDB - 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\/build-a-quiz-app-store-data-in-client-side-indexeddb\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build a Quiz App - Store Data in Client-Side IndexedDB - JavaScript Tutorial\" \/>\n<meta property=\"og:description\" content=\"In the previous tutorials, I explained how to build a quiz application. You can review them here. First Quiz App\u00a0 Second Quiz App – with …\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kindsonthegenius.com\/javascript\/build-a-quiz-app-store-data-in-client-side-indexeddb\/\" \/>\n<meta property=\"og:site_name\" content=\"JavaScript Tutorial\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-02T08:58:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-06T06:03:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/04\/Quiz-App-Using-IndexedDB.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"963\" \/>\n\t<meta property=\"og:image:height\" content=\"353\" \/>\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\\\/build-a-quiz-app-store-data-in-client-side-indexeddb\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/build-a-quiz-app-store-data-in-client-side-indexeddb\\\/\"},\"author\":{\"name\":\"kindsonthegenius\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/#\\\/schema\\\/person\\\/63a68934672db675ff0cd80d066510c2\"},\"headline\":\"Build a Quiz App – Store Data in Client-Side IndexedDB\",\"datePublished\":\"2020-04-02T08:58:36+00:00\",\"dateModified\":\"2020-08-06T06:03:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/build-a-quiz-app-store-data-in-client-side-indexeddb\\\/\"},\"wordCount\":482,\"commentCount\":1,\"image\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/build-a-quiz-app-store-data-in-client-side-indexeddb\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2020\\\/04\\\/Quiz-App-Using-IndexedDB.jpg\",\"keywords\":[\"IndexedDB\"],\"articleSection\":[\"JavaScript Tutorials\",\"Quiz Applications\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/build-a-quiz-app-store-data-in-client-side-indexeddb\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/build-a-quiz-app-store-data-in-client-side-indexeddb\\\/\",\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/build-a-quiz-app-store-data-in-client-side-indexeddb\\\/\",\"name\":\"Build a Quiz App - Store Data in Client-Side IndexedDB - JavaScript Tutorial\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/build-a-quiz-app-store-data-in-client-side-indexeddb\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/build-a-quiz-app-store-data-in-client-side-indexeddb\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2020\\\/04\\\/Quiz-App-Using-IndexedDB.jpg\",\"datePublished\":\"2020-04-02T08:58:36+00:00\",\"dateModified\":\"2020-08-06T06:03:06+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/#\\\/schema\\\/person\\\/63a68934672db675ff0cd80d066510c2\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/build-a-quiz-app-store-data-in-client-side-indexeddb\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/build-a-quiz-app-store-data-in-client-side-indexeddb\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/build-a-quiz-app-store-data-in-client-side-indexeddb\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2020\\\/04\\\/Quiz-App-Using-IndexedDB.jpg\",\"contentUrl\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2020\\\/04\\\/Quiz-App-Using-IndexedDB.jpg\",\"width\":963,\"height\":353,\"caption\":\"Quiz App Using IndexedDB\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/build-a-quiz-app-store-data-in-client-side-indexeddb\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build a Quiz App – Store Data in Client-Side IndexedDB\"}]},{\"@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":"Build a Quiz App - Store Data in Client-Side IndexedDB - 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\/build-a-quiz-app-store-data-in-client-side-indexeddb\/","og_locale":"en_US","og_type":"article","og_title":"Build a Quiz App - Store Data in Client-Side IndexedDB - JavaScript Tutorial","og_description":"In the previous tutorials, I explained how to build a quiz application. You can review them here. First Quiz App\u00a0 Second Quiz App – with …","og_url":"https:\/\/www.kindsonthegenius.com\/javascript\/build-a-quiz-app-store-data-in-client-side-indexeddb\/","og_site_name":"JavaScript Tutorial","article_published_time":"2020-04-02T08:58:36+00:00","article_modified_time":"2020-08-06T06:03:06+00:00","og_image":[{"width":963,"height":353,"url":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/04\/Quiz-App-Using-IndexedDB.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\/build-a-quiz-app-store-data-in-client-side-indexeddb\/#article","isPartOf":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/build-a-quiz-app-store-data-in-client-side-indexeddb\/"},"author":{"name":"kindsonthegenius","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/#\/schema\/person\/63a68934672db675ff0cd80d066510c2"},"headline":"Build a Quiz App – Store Data in Client-Side IndexedDB","datePublished":"2020-04-02T08:58:36+00:00","dateModified":"2020-08-06T06:03:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/build-a-quiz-app-store-data-in-client-side-indexeddb\/"},"wordCount":482,"commentCount":1,"image":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/build-a-quiz-app-store-data-in-client-side-indexeddb\/#primaryimage"},"thumbnailUrl":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/04\/Quiz-App-Using-IndexedDB.jpg","keywords":["IndexedDB"],"articleSection":["JavaScript Tutorials","Quiz Applications"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.kindsonthegenius.com\/javascript\/build-a-quiz-app-store-data-in-client-side-indexeddb\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/build-a-quiz-app-store-data-in-client-side-indexeddb\/","url":"https:\/\/www.kindsonthegenius.com\/javascript\/build-a-quiz-app-store-data-in-client-side-indexeddb\/","name":"Build a Quiz App - Store Data in Client-Side IndexedDB - JavaScript Tutorial","isPartOf":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/build-a-quiz-app-store-data-in-client-side-indexeddb\/#primaryimage"},"image":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/build-a-quiz-app-store-data-in-client-side-indexeddb\/#primaryimage"},"thumbnailUrl":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/04\/Quiz-App-Using-IndexedDB.jpg","datePublished":"2020-04-02T08:58:36+00:00","dateModified":"2020-08-06T06:03:06+00:00","author":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/#\/schema\/person\/63a68934672db675ff0cd80d066510c2"},"breadcrumb":{"@id":"https:\/\/www.kindsonthegenius.com\/javascript\/build-a-quiz-app-store-data-in-client-side-indexeddb\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kindsonthegenius.com\/javascript\/build-a-quiz-app-store-data-in-client-side-indexeddb\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/build-a-quiz-app-store-data-in-client-side-indexeddb\/#primaryimage","url":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/04\/Quiz-App-Using-IndexedDB.jpg","contentUrl":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-content\/uploads\/sites\/6\/2020\/04\/Quiz-App-Using-IndexedDB.jpg","width":963,"height":353,"caption":"Quiz App Using IndexedDB"},{"@type":"BreadcrumbList","@id":"https:\/\/www.kindsonthegenius.com\/javascript\/build-a-quiz-app-store-data-in-client-side-indexeddb\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kindsonthegenius.com\/javascript\/"},{"@type":"ListItem","position":2,"name":"Build a Quiz App – Store Data in Client-Side IndexedDB"}]},{"@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\/97","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=97"}],"version-history":[{"count":5,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/97\/revisions"}],"predecessor-version":[{"id":116,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/posts\/97\/revisions\/116"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/media\/100"}],"wp:attachment":[{"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/media?parent=97"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/categories?post=97"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/javascript\/wp-json\/wp\/v2\/tags?post=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}