Ho-ho-ho! Now I have an advent calendar!

Aktivieren Sie JavaScript um das Video zu sehen.
https://youtu.be/9RxXymGCmtY

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 do something alongside?

Well, here’s my preliminary result. It’s not yet accessible, it may still have bugs, it’s not responsive, it may not run on every browser and the code is still messy due to simply hacking everything in there …

That’s a little ugly right? And it doesn’t contain any nice goodies, just numbers. Not good enough you say? Then let’s make this a little nicer. Let’s add a background image to the calendar, remove the door knobs, put something inside and randomize the order of the doors – but then keep that order if you have the save content state feature of H5P activated.

Nice! But let’s do some more shenanigans. Let’s add a custom door image to every door. Let’s remove the vertical door frame. Oh, and I know, some music that can autoplay – as long as the browser policy allows it. Yes. And snow. Let’s add snow! And H5P content that can appear like texts, images, audios, videos or links to other sites. That’d be something …

To install, download one of the contents and upload them at your place at your own risk (still beta) 😉 Oh, and if you get some “missing libraries” message: You lack sufficient rights to install H5P libraries. Please ask your admin to do that.

Find the source code on github if you would like to take a look at it.

34 Replies to “Ho-ho-ho! Now I have an advent calendar!”

  1. Thank you so much for this wonderful and early christmas gift : my students will loooove it ! I send you a million of virtual chocolate candies 🙂
    Isabelle

  2. Moin Oliver,
    passt wieder mal wie Faust auf Klodeckel.
    Die letzten Tage auf der Suche nach einem wp-plugin gewesen und nicht fündig geworden und dann kommst du;-)
    Fantastisch und vielen lieben Dank für deine Arbeit.
    Ich hoffe dein, in diesem Jahr entwickelter Frust über Egomanen hat sich etwas gelegt.
    Liebe Grüße
    Josef

    1. Gern geschehen! Der Frust wird leider immer wieder befeuert: Statt das Heft selbst in der einen oder anderen Art die Hand zu nehmen, lieber das von anderen fordern.

      1. Re Oliver,
        wäre es eine Möglichkeit, mit meinen bescheidenen Mittel, eine Art Spiegel zum Austesten auf meiner webseite zu machen damit h5p entlastet wird?
        Oder wäre finanzielle Unterstützung lieber gesehen? Ohne h5p und diese tollen Innovationen wüsste ich teils gar nicht, wie ich sinnvoll Inhalte an meine Schüler bekäme und es sollte doch kein Problem sein. Das auf eigenem Webspace anzuleiern.
        Liebe Grüße
        josef

        1. Für den deutschsprachigen Raum gibt es zum Ausprobiern bereits https://einstiegh5p.de und zum offenen Produktivgebrauch https://apps.zum.de. Du darfst gerne mal bei der ZUM anfragen, wie viel Ärger sie hatten, weil Leute sich nicht um das Urheberrecht gekümmert haben. Die aktuelle Entwicklung rund um drohende Uploadfilterpflicht ist da noch gar nicht eingerechnet. Wenn du das machen möchtest … Leute hätten natürlich aber viel lieber eine nicht-offene Plattform für ihre Inhalte. Performant und mit viel Speicher natürlich, damit Videos da auch gut gelagert werden können! Und am besten mit klarem Datenverarbeitungsauftrag von dir unterzeichnet für die DSGVO-Sorgen. Kostenlos versteht sich. Deine Entscheidung.

  3. Hallo!
    Wie kann man das Hintergrundbild bzw. irgendein Bild in den gesamten (!) Vordergrund stellen, wie bei dir im 3. Beispiel?
    Finde nur die Bebilderung einzelner Türchen, bin mir aber sicher, dass es eine andere Möglichkeit gibt, als das große Bild an 24 Stellen kleinzuschneiden und die Bildausschnitte einzeln einzusetzen.
    Danke für die hilfreiche Erklärung oben!
    LG

    1. Mit einem Zeichenprogramm wie GIMP 😉 Die Türchen sind nunmal einzelne Bilder. Man kann so etwas auch automatisieren, indem man dafür ein extra Editor-Widget schreibt, aber dafür hatte ich keine Zeit – eigentlich nicht mal für den Inhaltstyp an sich …

  4. I think the use of this great tool should not be confined to a certain period of the year. If there were an option to select the deadline, it would be available for many other purposes as well – like, giving students a small daily tip each day before an examination date.

    1. Hi!

      This content type with snow, background music, no (!) exercises and the design is tailored to be an advent calendar. Period.

      But I agree. There’s potential for a more general content type that may use the same principle. Or the Mini Course content type could be amended to use dates as trigger for allowing progress. Hope someone will find the time to create something like this.

      Cheers,
      Oliver

  5. Hi Oliver,
    ein Super-Tool, nur ich verzweifele etwas am Zerschneiden meines großen Bildes.
    Kannst Du mir sagen, welche Abstände die Türen vom Rand und untereinander haben und welche Hintergrundbildgröße Du empfiehlst (ich in kein großer Coder…)?
    Danke Dir – Good Job!

    1. Moin!

      Kalender ohne Türenbilder erstellen, Screenshot machen und dann die Pixel zählen. Müsste ich auch machen, um die Frage zu beantworten, weil das Sache der Browser ist. Wenn ich Zeit habe, baue ich eine Version, die die Türenbilder automatisch ausschneidet. Wahrscheinlich aber nicht mehr rechtzeitig für Kalender in diesem Jahr … Zu viel zu tun.

      Viele Grüße
      Oliver

      1. Alles gut – habe es hinbekommen – mit Screenshot und dann Auswahlwerkzeug und Umkehrung, dann ging es recht schnell.

  6. Hi Oliver, habe es hinbekommen – passt. Das Einzige, was jetzt noch ist: Kann ich die Zahlen formatieren, also dass sie nicht so fett sind? – Die Mobildarstellung ist irgendwie nicht ganz so optimal.

    1. Da nicht für! Ich hoffe, für das nächste Jahr dann auch die Muße zu finden, die blöden Einschränkungen auszubauen (Türchenbilder müssen einzeln hochgeladen werden, festes Seitenverhältnis, noch nicht barrierefrei …)

  7. Your advent calendar is absolutely amazing, thank you so much for sharing!!! Unfortunately, I’m not able to use the file. H5P tells me “Missing required library
    A mandatory library is missing from your package” What can I do?

    Thank you so much

    1. That happens if you do not have the sufficient rights to install new H5P libraries on your platform. You’ll have to ask your admin to upload the file once in order to install the libraries.

  8. Hi, I am trying to upload this. However, I’m getting the following error.
    Validating h5p package failed.
    Missing main library H5P.AdventCalendar 0.3

    Do you have any suggestions?
    Thanks for this I can not wait to use this as a revision tool

Leave a Reply to Falk von Boehn Cancel reply

Your email address will not be published. Required fields are marked *