{"id":635,"date":"2015-07-31T23:52:38","date_gmt":"2015-08-01T06:52:38","guid":{"rendered":"https:\/\/blogs.ubc.ca\/parm27\/?p=635"},"modified":"2016-07-23T10:43:36","modified_gmt":"2016-07-23T17:43:36","slug":"interactive-timeline","status":"publish","type":"post","link":"https:\/\/blogs.ubc.ca\/parm27\/interactive-timeline\/","title":{"rendered":"Interactive Timeline"},"content":{"rendered":"<p>Creating an interactive timeline using <a href=\"http:\/\/timeline3.knightlab.com\" target=\"_blank\">TimelineJS 3,<\/a> is straightforward, yet there is still enough flexibility to customize some\u00a0formatting, and to add content to the timeline using HTML code.<\/p>\n<p>As indicated on the\u00a0<a href=\"http:\/\/timeline3.knightlab.com\" target=\"_blank\">TimelineJS 3 website,<\/a>\u00a0there are only four\u00a0steps to create the timeline:<\/p>\n<ol>\n<li>Download the timeline google spreadsheet template document provided on the<a href=\"http:\/\/timeline3.knightlab.com\" target=\"_blank\">TimelineJS 3 website<\/a>\u00a0and follow the instructions to populate it.<\/li>\n<li>Publish the Google spreadsheet.<\/li>\n<li>Paste the published Google spreadsheets url into the Timeline JS generator and select formatting options.<\/li>\n<li>Embed the code into your website, or blog.<\/li>\n<\/ol>\n<p>Here is a sample of a timeline I created for a project in the\u00a0<strong>ETEC 540: Text Technology: The Changing Spaces of Reading and Writing<\/strong> course.<\/p>\n<p><iframe loading=\"lazy\" src=\"\/\/cdn.knightlab.com\/libs\/timeline3\/latest\/embed\/index.html?source=14aex1rGjAHut8oY20BbaDyEUlU3WMEbQ_CSRssB2fGg&amp;font=Default&amp;lang=en&amp;height=675\" width=\"100%\" height=\"675\" frameborder=\"0\"><\/iframe><\/p>\n<p>The drawback with creating\u00a0interactive timelines using this tool, is that links can be broken as content is removed or moved online. But that is a common issue when referencing online content and resources.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating an interactive timeline using TimelineJS 3, is straightforward, yet there is still enough flexibility to customize some\u00a0formatting, and to add content to the timeline using HTML code. As indicated on the\u00a0TimelineJS 3 website,\u00a0there are only four\u00a0steps to create the timeline: Download the timeline google spreadsheet template document provided on theTimelineJS 3 website\u00a0and follow the [&hellip;]<\/p>\n","protected":false},"author":27629,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[60,806661,5648,1160],"tags":[1078562,7744,1078561,5353],"class_list":["post-635","post","type-post","status-publish","format-standard","hentry","category-blog","category-educational-technology-2","category-etec-540","category-tools","tag-interactive-timelines","tag-interactivity","tag-timelinejs-3","tag-tool"],"_links":{"self":[{"href":"https:\/\/blogs.ubc.ca\/parm27\/wp-json\/wp\/v2\/posts\/635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ubc.ca\/parm27\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ubc.ca\/parm27\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/parm27\/wp-json\/wp\/v2\/users\/27629"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/parm27\/wp-json\/wp\/v2\/comments?post=635"}],"version-history":[{"count":12,"href":"https:\/\/blogs.ubc.ca\/parm27\/wp-json\/wp\/v2\/posts\/635\/revisions"}],"predecessor-version":[{"id":649,"href":"https:\/\/blogs.ubc.ca\/parm27\/wp-json\/wp\/v2\/posts\/635\/revisions\/649"}],"wp:attachment":[{"href":"https:\/\/blogs.ubc.ca\/parm27\/wp-json\/wp\/v2\/media?parent=635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/parm27\/wp-json\/wp\/v2\/categories?post=635"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/parm27\/wp-json\/wp\/v2\/tags?post=635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}