Adding a H5P activity like a Label or Embedding using Atto

[bradnielsen2981]

Hi, this is an Enhancement suggestion. It would be cool if you could simply choose, create and embed a H5P activity using a single button in the Atto editor. That way it could easily be added to Books, or Course pages etc.

At the moment, the H5P activity is its own page.

[alanpt]

We have h5p's automatically embed in the pages. We don't have easy access to building filters or PHP, so we use Javascript. If its really important that its embedded in a label or page we put them in a hidden section and grab the embed code.

This is the code we use for the decaf theme (it obviously needs to be tweeked)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$("body").ready(function() {
    if(!$("body").hasClass("editing")){
    $(".hvp .activityinstance a").each(function() {
        // Exit quickly if this is the wrong type of URL
        if (this.protocol !== "http:" && this.protocol !== "https:") {
            return;
        }
        // Find the ID of the h5p video
        var id, matches;
        if (this.hostname === "LMS.ac.nz") {
            // match the id
            matches = this.search.match(/[?&]id=([^&]*)/);
            id = matches && matches[1];
        }
        // get all the links inside the .activeinstance elements

        // Check that the ID only has alphanumeric characters, to make sure that
        // we don't introduce any XSS vulnerabilities.
        var validatedID;
        if (id && id.match(/^[a-zA-Z0-9]*$/)) {
            validatedID = id;
        }
        if (validatedID) {var h5pembed = $(
                                        '<iframe style="width:100% !important"  src="https://LMS.ac.nz/moodle/mod/hvp/embed.php?id=' +
                                        validatedID +
                                        '" frameborder="0" allowfullscreen="allowfullscreen" data-iframe-srcvideo="0"></iframe>'
                                    );
                                    $(this).replaceWith(h5pembed);
                                }
    });
    }
});

</script>
<script src="https://LMS.ac.nz/moodle/mod/hvp/library/js/h5p-resizer.js" type="text/javascript"></script>

<script>
   var css = document.createElement("style");
   css.type = "text/css";
   css.innerHTML = ".section li.modtype_hvp .activityinstance{ width:700px; border: none; }";
   document.body.appendChild(css); 
</script>