{"id":523,"date":"2020-11-06T00:16:39","date_gmt":"2020-11-05T22:16:39","guid":{"rendered":"https:\/\/www.olivertacke.de\/labs\/?p=523"},"modified":"2022-12-05T16:30:40","modified_gmt":"2022-12-05T14:30:40","slug":"ho-ho-ho-now-i-have-an-advent-calendar","status":"publish","type":"post","link":"https:\/\/www.olivertacke.de\/labs\/2020\/11\/06\/ho-ho-ho-now-i-have-an-advent-calendar\/","title":{"rendered":"Ho-ho-ho! Now I have an advent calendar!"},"content":{"rendered":"<p><iframe loading=\"lazy\" title=\"Quick demo: Advent Calendar for H5P\" width=\"525\" height=\"295\" src=\"https:\/\/www.youtube.com\/embed\/9RxXymGCmtY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>An H5P advent calendar. I wanted to do something like this for quite some time. Then <a href=\"https:\/\/twitter.com\/joerglohrer\/status\/1323627228882706433\" target=\"_blank\" rel=\"noopener noreferrer\">I was asked on Twitter<\/a> if I happened to know something like this for <a href=\"https:\/\/h5p.org\" target=\"_blank\" rel=\"noopener noreferrer\">H5P<\/a>. Then I watched the US election the day before yesterday (which as of writing these lines is still not over) and decided: Why not do something alongside?<\/p>\n<p>Well, here&#8217;s my preliminary result. It&#8217;s not yet accessible, it may still have bugs, it&#8217;s not responsive, it may not run on every browser and the code is still messy due to simply hacking everything in there &#8230;<\/p>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-97\" class=\"h5p-iframe\" data-content-id=\"97\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"Advent Calendar (level 1)\"><\/iframe><\/div>\n<p>That&#8217;s a little ugly right? And it doesn&#8217;t contain any nice goodies, just numbers. Not good enough you say? Then let&#8217;s make this a little nicer. Let&#8217;s add a background image to the calendar, remove the door knobs, put something inside and randomize the order of the doors &#8211; but then keep that order if you have the <em>save content state<\/em> feature of H5P activated.<\/p>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-98\" class=\"h5p-iframe\" data-content-id=\"98\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"Advent Calendar (level 2)\"><\/iframe><\/div>\n<p>Nice! But let&#8217;s do some more shenanigans. Let&#8217;s add a custom door image to every door. Let&#8217;s remove the vertical door frame. Oh, and I know, some music that can autoplay &#8211; as long as the browser policy allows it. Yes. And snow. Let&#8217;s add snow! And H5P content that can appear like texts, images, audios, videos or links to other sites. That&#8217;d be something &#8230;<\/p>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-99\" class=\"h5p-iframe\" data-content-id=\"99\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"Advent Calendar (level 3)\"><\/iframe><\/div>\n<p>To install, download one of the contents and upload them at your place at your own risk (still beta) \ud83d\ude09 Oh, and if you get some &#8220;missing libraries&#8221; message: You lack sufficient rights to install H5P libraries. Please ask your admin to do that.<\/p>\n<p><a href=\"https:\/\/github.com\/otacke\/h5p-advent-calendar\" target=\"_blank\" rel=\"noopener noreferrer\">Find the source code on github if you would like to take a look at it.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>An H5P advent calendar. I wanted to do something like this for quite some time. Then I was asked on Twitter if I happened to know something like this for H5P. Then I watched the US election the day before yesterday (which as of writing these lines is still not over) and decided: Why not &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.olivertacke.de\/labs\/2020\/11\/06\/ho-ho-ho-now-i-have-an-advent-calendar\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Ho-ho-ho! Now I have an advent calendar!&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[5,16,50],"class_list":["post-523","post","type-post","status-publish","format-standard","hentry","category-h5p","tag-content-type","tag-h5p","tag-x-mas"],"_links":{"self":[{"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/posts\/523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/comments?post=523"}],"version-history":[{"count":0,"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/posts\/523\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/media?parent=523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/categories?post=523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.olivertacke.de\/labs\/wp-json\/wp\/v2\/tags?post=523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}