Interactive Tutorial Guide for course presentation?

stopbit's picture

Hi,

I would like to create an interactive style tutorial for H5P (course presentations specifically).

This is essentially a 'how to / walk through' tour of how to use the course presentation (for H5P.org purposes) and a 'how to' providing instructions for my learners on how to complete questions and navigate within the activity. This could be applied to other activities also.

I have been considering using something along the lines of what is demonstrated in these examples:

  1. http://github.hubspot.com/shepherd/docs/welcome using http://tether.io  <--- My Personal favourite so far fro mthe demos.
  2. http://introjs.com or from github here: https://github.com/usablica/intro.js/releases
  3. http://bootstraptour.com
  4. http://zurb.com/playground/jquery-joyride-feature-tour-plugin
  5. http://blog.tommoor.com/crumble

It would be wonderful for H5P activities to have something like this feature built-in. Does anyone else thing this is a great idea too?

I will likely be working on something with this type of intro-tour feature for my eLearning website. I really think a walk-through tour would be appreciated by my students. There may also be some scope for my primary advertising site www.sheilds.org

I think the 1st option is my faviourite. Using tether.io can take hours off the amount of coding time by auto-detecting the position of elements, rather than having to custom code each page or activity to contain the right elements etc.

I appreciate any feedback!

 

falcon's picture

Hi stopbit!

It is a great idea. Would love for this to be added to CoursePresentation. Are you imagining something like that in Interactive Video? Interactive Video has this built in so that the first time a user uses Interactive Video he will get a tutorial. I think it uses the first option, shepherd and tether. Our experience with implementing using that combo was good.

stopbit's picture

Hi Falcon,

Thanks for your feedback, by sheer coincidence it seems both myself and the H5P team ended up with the same conclusion :-D

When I have some time, I'll take a look at the Interactive video activity to see how you guys acheived this. If you've already got this working in one activity I'm sure it will make the rest of them a little easier to fathom.

Do you have any hints on where to make a start with coding?

I am really interested in creating a tour for students from the 'view' perspective, rather than the editing perspective. I know H5P is already very intuitive by design, however some students don't always notice some of the useful functionality immediately and I'll like to be able to provide a guide.

Cheers

falcon's picture

Indeed it seems we did land on the same conclusion :)

I haven't been involved in coding this, but it seems this is at the core of it. Let me know if you need anything else. I'll make sure the guys who worked on it answers.

Cheers