{"id":7932,"date":"2025-10-10T12:51:59","date_gmt":"2025-10-10T12:51:59","guid":{"rendered":"https:\/\/ioninteractive.com\/ionacademy\/?p=7932"},"modified":"2025-10-10T12:52:00","modified_gmt":"2025-10-10T12:52:00","slug":"timeline-quiz-template","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/timeline-quiz-template\/","title":{"rendered":"Timeline Quiz template"},"content":{"rendered":"\n<p class=\"\">The Timeline Quiz is an interactive experience that challenges users to identify the correct order or timing of events along a visual timeline. It presents 5 questions, each designed to test the user\u2019s sense of sequence and knowledge of time-based facts. The experience combines engaging visuals with an intuitive interaction flow, encouraging participation and completion.<\/p>\n\n\n\n<p class=\"\">Here\u2019s how to set it up and customize it for your content:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is the Timeline Quiz Template?<\/h2>\n\n\n\n<p class=\"\">The Timeline Quiz template is an engaging, interactive experience that invites users to test their knowledge by identifying the correct order or timing of events along a visual timeline.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Guided Question Flow: Users progress through 5 questions, each featuring an event and multiple possible answers related to its chronological placement or date.<\/li>\n\n\n\n<li class=\"\">Dynamic Feedback and Scoring: After each question, users receive immediate feedback indicating whether their choice was correct, with the score updating in real time as they advance through the quiz.<\/li>\n\n\n\n<li class=\"\">Visual Timeline Layout: A central timeline line connects all interactions, visually reinforcing the sense of time and sequence. Its height and positioning can be easily adjusted to ensure alignment across different viewports.<\/li>\n\n\n\n<li class=\"\">Flexible Customization Options: Update all copy through Rules variables for streamlined management, and personalize styles, colors, and animations to match your brand or campaign theme.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Step-by-Step Guide to Using the Template<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Adding your copy<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">On the landing page, under the top right tab, Page rules, you\u2019ll see these rules applied:<br><img decoding=\"async\" loading=\"lazy\" width=\"1915\" height=\"655\" src=\"blob:https:\/\/ioninteractive.com\/5e2c2cf2-f873-4185-a18a-5812492b0500\"><br><\/li>\n\n\n\n<li class=\"\">Click on any of them and start replacing with your own content, we recommend around 25 words or less depending on your text size. Note that with the variables way you <strong>can\u2019t<\/strong> add text styles to <strong>parts of the conten<\/strong>t such as italics or bold.<br><img decoding=\"async\" loading=\"lazy\" width=\"1451\" height=\"820\" src=\"blob:https:\/\/ioninteractive.com\/af642879-ba3f-454e-abcf-58249ba75dd2\"><br><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Adjusting the timeline line<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">After adding all copy, using the Preview feature, check if the timeline line fits well.<br><img decoding=\"async\" loading=\"lazy\" width=\"1906\" height=\"852\" src=\"blob:https:\/\/ioninteractive.com\/1f839478-f32b-4bf9-a72c-e1c21e502ad8\"><\/li>\n\n\n\n<li class=\"\">If it\u2019s too short or long, back in the Creative Studio, select the line. In case you can\u2019t click on it, on the left side panel, click on \u201cLayers\u201d and find the element \u201cTIMELINE LINE\u201d.<br><img decoding=\"async\" loading=\"lazy\" width=\"1100\" height=\"562\" src=\"blob:https:\/\/ioninteractive.com\/14342634-6dd4-4e44-9384-a7aa1d0fbe91\"><\/li>\n\n\n\n<li class=\"\">Once selected, hover over to the right side panel, scroll down to the Styles section and open the Layout accordion. There you can adjust the height of your line. Don\u2019t forget to check if it works on all different viewports.<br><img decoding=\"async\" loading=\"lazy\" width=\"351\" height=\"579\" src=\"blob:https:\/\/ioninteractive.com\/114e7f24-2e78-44c3-bf08-07c828c2d113\"><br><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Changing the correct answer<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Each question has the same base, only increasing the number of flow steps.\n<ul class=\"wp-block-list\">\n<li class=\"\">First flow step: all the first fact, facts already answered (if applicable) and buttons to place the current fact.<\/li>\n\n\n\n<li class=\"\">Second and following flow steps: the current fact in a specific position.<br><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"\">To set up the position you desire to be the correct one, go to the flow step with the position, click on the \u201cConfirm\u201d button, and under the Settings tab do the following<img decoding=\"async\" loading=\"lazy\" width=\"1248\" height=\"735\" src=\"blob:https:\/\/ioninteractive.com\/bb1f9ceb-3447-4e0d-8177-0b32a26c3709\"><\/li>\n\n\n\n<li class=\"\">Add the action to go to the next question and the responded tag<br><img decoding=\"async\" loading=\"lazy\" width=\"1248\" height=\"735\" src=\"blob:https:\/\/ioninteractive.com\/425fcb89-adfc-4ab1-a20b-dd71ea6d2981\"><br><\/li>\n\n\n\n<li class=\"\">And the following rules:\n<ul class=\"wp-block-list\">\n<li class=\"\">Save computed data: Correct = Correct+1<\/li>\n\n\n\n<li class=\"\">Save computed data: Points = Points+3<\/li>\n\n\n\n<li class=\"\">Save data: ShowQ3 = true<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"548\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/image-1-1024x548.png\" alt=\"\" class=\"wp-image-7935\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/image-1-1024x548.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/image-1-300x160.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/image-1-768x411.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/image-1.png 1107w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Find the old button with the same settings one the page and remove <strong>only the rules<\/strong>:<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"472\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/image-2-1024x472.png\" alt=\"\" class=\"wp-image-7936\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/image-2-1024x472.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/image-2-300x138.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/image-2-768x354.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/image-2.png 1241w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Test and Publish<\/h3>\n\n\n\n<p class=\"\">Before going live, preview your Timeline Quiz on all devices to ensure the experience works as intended. Go through all 5 questions to confirm that the feedback and score update correctly after each step, and verify that the total score adds up accurately at the end. Check that the timeline layout and height are consistent across viewports, and that all text, markers, and buttons display properly. Once everything is validated, publish your quiz as a standalone page or embed it on your website \u2014 ready to engage users and encourage repeat interaction.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Timeline Quiz is an interactive experience that challenges users to identify the correct order or timing of events along a visual timeline. It presents 5 questions, each designed to test the user\u2019s sense [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[2107,39],"tags":[],"class_list":["post-7932","post","type-post","status-publish","format-standard","hentry","category-ion-templates","category-the-templates-gallery"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/7932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=7932"}],"version-history":[{"count":1,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/7932\/revisions"}],"predecessor-version":[{"id":7937,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/7932\/revisions\/7937"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=7932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=7932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=7932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}