Introducing volleyball referee signals – an application of fluid boxes
March 10, 2018
jpro69 Follow
Introducing volleyball referee signals – an application of fluid boxes
March 10, 2018
jpro69
Newbie 5 posts
Followers: 9 people
Follow
jpro69 Follow
4

One of my passions is playing volleyball. Volleyball referees use a number of different hand signals, the meaning of which is not obvious in every case. Just for fun I thought I would turn a bland PDF document that explains these hand signals into an interactive and fully responsive experience, exploring the fluid box functionality a bit further.

Please try out the module here. It takes only a couple of minutes to get through, whether or not you’re interested in volleyball.
I spent quite some time thinking about and drafting a fluid box design that was simple and would allow me to include the functionality I wanted. I created two master slides, one for simply presenting the content, and one for the knowledge check the user could take after going through the content.
I then added all the images and text to the respective fluid boxes. I like using the multi-state objects for creating custom feedback. The buttons originate from Fontawesome. Having such a vast array of easily scaleable images available makes the creation of custom navigation so much easier. By the way, I prefer to build my own custom navigation, mainly for aesthetic reasons.
The tricky bit was making the custom-built quiz work just the way I wanted to. Despite my initial planning I still went through a lot of trial and error, and I ended up with quite complex conditional advanced actions.

One of my passions is playing volleyball. Volleyball referees use a number of different hand signals, the meaning of which is not obvious in every case. Just for fun I thought I would turn a bland PDF document that explains these hand signals into an interactive and fully responsive experience, exploring the fluid box functionality a bit further.

Please try out the module here. It takes only a couple of minutes to get through, whether or not you’re interested in volleyball.
I spent quite some time thinking about and drafting a fluid box design that was simple and would allow me to include the functionality I wanted. I created two master slides, one for simply presenting the content, and one for the knowledge check the user could take after going through the content.
I then added all the images and text to the respective fluid boxes. I like using the multi-state objects for creating custom feedback. The buttons originate from Fontawesome. Having such a vast array of easily scaleable images available makes the creation of custom navigation so much easier. By the way, I prefer to build my own custom navigation, mainly for aesthetic reasons.
The tricky bit was making the custom-built quiz work just the way I wanted to. Despite my initial planning I still went through a lot of trial and error, and I ended up with quite complex conditional advanced actions.
Comments
(4)
Share
jpro69
Newbie 5 posts
Followers: 9 people
Follow
jpro69 Follow
Comments
(4)
Share
All Comments
Sort by:  Most Recent
  • Most Recent
  • Most Relevant
chandresh shah
Feb 9, 2019
Feb 9, 2019

Why in a mobile preview, both navigation buttons, and the home icon comes one below other?? they are small enough to come in one horizontal raw.

Like
(1)
Reply
Suresh Kumar DN
Jun 1, 2018
Jun 1, 2018

Jorg, nice example and fluid boxes are used well.

Like
()
Reply
Drushh
Apr 18, 2018
Apr 18, 2018

Hi, Jorg. Thanks for sharing this example – I like your design and example of using fluid boxes.
Could you please advice – is it possible to see this exampkle from inside to learn how to do the same?)

Like
(1)
Reply