Interactive Infographics with Column and Course Presentation
Submitted by david.lohner on Thu, 05/21/2020 - 23:14
Forums:
Hello, everyone,
I want to share an infographic about geophysics, which is designed with the content types "Column" and "Course Presentation". Behind it there is basically only one big image, which was cut into appropriate parts to function as background in the course presentations. It is important to "hide" these cuts. Furthermore there are some animated GIFs in the presentations to keep the page more dynamic.
Here's the link: https://s.kit.edu/geophysics (you can download the .h5p there)
And a teaser image:
otacke
Fri, 05/22/2020 - 00:18
Permalink
This is fantastic!
This is fantastic!
david.lohner
Wed, 07/15/2020 - 08:43
Permalink
thanks man! keep using and
thanks man! keep using and sharing it as best-practice ;-)
otacke
Wed, 07/15/2020 - 10:38
Permalink
Already did :-)
Already did :-)
BV52
Fri, 05/22/2020 - 18:39
Permalink
Hi David,This looks awesome!
Hi David,
This looks awesome!
-BV
tgrenier
Sun, 07/12/2020 - 14:56
Permalink
Waow, this is stunning, well
Waow, this is stunning, well done and thank you so much for sharing.
drcjsnider
Tue, 07/14/2020 - 18:23
Permalink
This is one of the coolest things I've seen
Pretty darn amazing.
jmccarthy
Mon, 11/09/2020 - 20:56
Permalink
Inspirational!
Thanks for your hard work developing (and sharing) the h5p file.
RufJay
Wed, 02/10/2021 - 10:52
Permalink
Inspiring
Thanks for sharing
lindah5p
Mon, 03/20/2023 - 11:15
Permalink
Thank you for sharing!
It's an amazing example how to create infographics in H5P. Thank's for publishing it with CC BY ! I will recommend it in my OER workshops.
IDea_cat43
Wed, 03/27/2024 - 13:51
Permalink
Spaces between content
I'm curious how you got the infographic to be so seemless. I have white spaces between each course presentation. What seetings did you use to get the seemless look?
david.lohner
Wed, 03/27/2024 - 17:11
Permalink
There are three "main
There are three "main ingredients" to achieve this effect:
1.) a background graphic, that you can slice in multiple files (16:9 aspect ratio, I guess)
2.) stack multiple interactive course presentations on top of each other into one H5P column content type.
3.) enable the "active surface mode" in the H5P course presentation content type. That way, you get rid of the interface items at the bottom, so there should be no gap between the different presentation content types.
There is a "behind the scenes walkthrough" in this video I shared.: https://www.youtube.com/watch?v=QhhrQqsoLj0&t=1393s. It's in German, but I guess you'll get the point. I created this background image using Affinity Designer, which allows easy slicing of graphics.