Lisa Leiva
Lisa is Head of Instructional Design and has over 15 years of experience working with UCSF faculty to enhance learning experiences.

Create Interactive Content on the CLE with H5P

The CLE was recently upgraded to Moodle 3.9 and we want to share some details on an exciting new feature. The upgraded CLE comes with the integration of H5P that will help you create interactive content in your courses.

What is H5P?

H5P is a content authoring tool that has been integrated with the CLE. It lets you easily create and share rich, interactive content, such as videos, quizzes, games, and presentations – for learning activities, enrichment, and recall testing.

How Does it Work?

The best part is that you can create, edit, and embed learning objects right in the CLE. Content is created in the Content Bank, and can be added to your course as an H5P activity or can be embedded into any activity or resource.

Content bank location in the CLE
Content bank location in the CLE

Whether you are looking to freshen up your course materials using the Course Presentation or Timeline content types, or you want to inject some fun and engaging activities into your courses using Flashcards or Branching Scenarios. There are also no technical skills required and all content can be reused, shared, and adapted.

Once made, all H5P content is fully responsive and mobile-friendly — allowing learners to access interactive resources on any type of device at any time.


Let’s take a look at some of the learning objects you can design with H5P:

Drag and Drop

Create Drag and drop questions using both text and images as draggable alternatives. H5P Drag and drop questions support multiple draggable to drop zone combinations; one-to-one, one-to-many, many-to-one, and many-to-many.

animation of drag-and-drop feature
Animation of drag-and-drop feature

Hot Spots

Image hotspots make it possible to create an image with interactive hotspots. When the user presses a hotspot, a popup containing a header and text or video is displayed.

hotspot 800
Hot spot feature

Virtual Tour 360

360 (equirectangular) and normal images may be enriched with interactivities like explanations, videos, sounds, and interactive questions. This content type may be used to give a feeling of exploring and learning within a realistic environment.

Animation of Virtual Tour 360 feature
Animation of virtual tour 360 feature

There are several others that you can use — visit the Library Help Center to view documentation on how to use H5P or enroll in our CLE H5P showcase site to get inspiration and to explore all the possibilities!

Ready to learn more?

Whether you are developing a new course or seeking enhancements to an existing one, you’re never alone. Instructional Designers are here to help you execute your vision in a way that works effectively in your teaching and learning environment.