Interactive Infographics with Column and Course Presentation

Submitted by david.lohner on Thu, 05/21/2020 - 23:14
david.lohner's picture
Forums: 
Showcases

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:

H5P file: 
Binary Data basic-geophysics-a-visual-excerpt-121.h5p
otacke's picture

otacke

Fri, 05/22/2020 - 00:18

This is fantastic!

david.lohner's picture

david.lohner

Wed, 07/15/2020 - 08:43

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

otacke's picture

otacke

Wed, 07/15/2020 - 10:38

Already did :-) 

BV52's picture

BV52

Fri, 05/22/2020 - 18:39

Hi David,

This looks awesome!

-BV

tgrenier

Sun, 07/12/2020 - 14:56

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

drcjsnider

Tue, 07/14/2020 - 18:23

Pretty darn amazing.

jmccarthy

Mon, 11/09/2020 - 20:56

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

RufJay

Wed, 02/10/2021 - 10:52

Thanks for sharing

lindah5p's picture

lindah5p

Mon, 03/20/2023 - 11:15

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

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

david.lohner

Wed, 03/27/2024 - 17:11

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.