VisualNEO Web

Execute H5P content within your apps.

V: 1.0

Sample app:
https://visualneo.com/tutorials/neoh5p

Description

The neoH5P plugin for VisualNEO Web enables integration of H5P interactive content within web applications. This plugin is ideal for embedding various interactive media, such as quizzes, interactive videos, and presentations, enriching the user experience with highly engaging and educational content. Here’s a breakdown of the main functionalities and practical applications of the neoH5P plugin:

Interactive Content Integration: Using the neoH5PStart command, developers can easily embed H5P content into an app. By unzipping and linking the H5P files, content such as quizzes, videos, or presentations can be displayed seamlessly within a VisualNEO Web container, providing a flexible and dynamic learning environment.

Score Tracking and Custom Callbacks: The plugin supports capturing scores through variables, which allows tracking of user interactions and performance on interactive content. This feature is essential for applications that require assessments, such as educational platforms or e-learning apps, where user progress and scores are important.

Secure Context Execution: The neoH5P plugin requires a secure context (such as HTTPS) for execution. This is achievable by running the app on a secure server, making it compatible with both local and online deployments where security is a priority, particularly when handling sensitive user information.

Flexible API Configuration: Users can specify the target container for the H5P content and configure custom callback routines to respond to user interactions, allowing for tailored responses and enhanced functionality. For example, a quiz app could trigger feedback based on the user’s score once they complete an interactive session.

Usage Steps

• Prepare H5P Content:
• Rename your .h5p file to .zip, unzip it, and include the extracted folder in your project under Project > Properties > Libraries / Files.
• Initialize Content with neoH5PStart:
• Syntax: neoH5PStart "containerName" "folderName" [maxScore] [userScore] "callbackSubroutine"
• Parameters:
• containerName: The ID of the container where H5P content will display.
• folderName: The name of the unzipped H5P folder.
• maxScore: (Optional) Variable to store the maximum achievable score.
• userScore: (Optional) Variable to store the user’s score.
• callbackSubroutine: (Optional) Subroutine to execute upon user interaction.
• Compile and Run: Once configured, compile and run the app in a secure context, such as with neoPhp Server, for proper functionality.

This approach enables seamless use of H5P content, making it a powerful choice for any app that benefits from interactive, multimedia-rich learning content​​.

neoH5PStart

Created with the Personal Edition of HelpNDoc: Effortlessly Create High-Quality Documentation with a Help Authoring Tool