Interactive Infographics with Column and Course Presentation

david.lohner's picture
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's picture

This is fantastic!

david.lohner's picture

thanks man! keep using and sharing it as best-practice ;-)

otacke's picture

Already did :-) 

BV52's picture

Hi David,

This looks awesome!

-BV

Waow, this is stunning, well done and thank you so much for sharing.

Pretty darn amazing.

Thanks for your hard work developing (and sharing) the h5p file.

Thanks for sharing

lindah5p's picture

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.

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's picture

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.