Implementing learning paths?

Submitted by ksmith6827 on Mon, 07/22/2019 - 19:18

Forums:

I am currently using H5P to add activities as part of my curriculum library on Wordpress, but I am hitting a roadblock in a "progression".

What I want to do is implement a progression from one task to another. For example, start with an image hotspot, user clicks a button to progress to a matching game. When user finishes matching game with 100%, enters a "find a hotspot" game. When completed, user progresses to another matching game.

Currently the "branching scenarios" tool only allows a couple of content types (and not the ones I need). I'm trying to find a work around that does not require a ton of custom coding. Some routes I have explored (but seemed to lead to dead ends) were:

Use CSS to hide the next "steps" of the progression, and use JS to "show" the next step once the previous is completed (can't identify the event JS should be using as the trigger)
Same idea, but redirect the page after completion each step (so each activity would be its own post/page), but still not possible without having an event to listen for
In the "Feedback", put a link to the next step (feedback input doesn't seem to allow links)
Use the Branching Scenarios (only works with multiple choice quizzes)

I'm not trying to save any user progress (so I don't really want to mess around with xAPI and storing data anywhere), just have a system where a user smoothly goes from one activity after completing another, then finishes on a specified endpoint.

Any ideas?

otacke

Wed, 07/24/2019 - 07:38

Permalink

Hi!Core team member Pål

Hi!

Core team member Pål Jørgensen is working on "Mini Course" in his spare time, but I have no idea when he will find some time to finish it.

Best,

Oliver

otacke

Wed, 07/24/2019 - 08:45

Permalink

Hi ksmith!You _should_ use

Hi ksmith!

You _should_ use xAPI events to check the progress. There's no need to store the results, but listening to the xAPI events will tell you when an exercise has been completed.

Best,

Oliver

ksmith6827

Wed, 07/24/2019 - 17:16

Permalink

How do I use these? I looked

How do I use these? I looked here:

https://h5p.org/documentation/x-api

but including

<code><script>H5P.externalDispatcher.on('xAPI', function (event) {

console.log(event.data.statement);

});</script></code>

just returns "Uncaught ReferenceError: H5P is not defined" in the console

otacke

Wed, 07/24/2019 - 19:28

Permalink

Where are you entering this?

Where are you entering this? You're use of the code tag suggests you're entering it into an editor of some form? It's used to display code in a particular style, but not for allowing JavaScript code to be executed.

otacke

Wed, 07/24/2019 - 20:43

Permalink

Sorry, now I get it :-) You

Sorry, now I get it :-) You were trying to use the code tag for this very post ... Doh!

H5P content is running in an iframe, so in order to reference the H5P object from within the console, you will have to set the right context first.

Best,

Oliver

ksmith6827

Fri, 07/26/2019 - 22:07

Permalink

Sorry, but I'm not familiar

Sorry, but I'm not familiar with how this is done - I am only familiar with extremely basic JS. What I tried is below, but it definitely has a syntax error. I'm not sure why this is generating in an iframe to begin with, apparently it is default behavior in wordpress.

<script>document.getElementById('h5p-iframe-2').onload = function() {
var form = document.getElementById('h5p-iframe-2');
var form.H5P.externalDispatcher.on('xAPI', function (event) {

  console.log(event.data.statement);

});</script>

otacke

Mon, 07/29/2019 - 18:28

Permalink

Hi ksmith6827!Well, I can't

Hi ksmith6827!

Well, I can't give JavaScript tutorials here unfortunately, but you should count your curly brackets (quite language independent :-P), and you only require the var keyword to define a variable, not when using it.

If you want to have it all in one function, I assume that this is what you're looking for - and you might want to have a look at the alter script hook.

<script>
  // Wait for the DOM to have loaded, otherwise the may not be present
  document.onreadystatechange = function() {
    if (document.readyState === 'interactive') {
      /*
       * Start the xAPI-listener when the H5P iframe has loaded
       * Note that looking for the hardcoded ID is well, hardcoding
       * with all its cons.
       */
      document.getElementById('h5p-iframe-2').addEventListener('load', function() {
        H5P.externalDispatcher.on('xAPI', function (event) {
          console.log(event.data.statement);
        });
      });
    }
  }
</script>

The iframe is created by H5P by the way to shield the content from stylesheets from the host system.

Cheers,
Oliver

ksmith6827

Mon, 07/29/2019 - 20:13

Permalink

Perfect, thanks. One last

Perfect, thanks. One last question - is it possible to redirect the page when I get a result where score max = score raw (or whatever else I would usse to determine 100%?)? Again, it looks like this should be easy based on the output, I just can't figure out the right commands.

I am trying to knock this out as basically a tech demo for our team. H5P has about 80% of the features and functionality we are looking for, so I'm just identifying what currently exists and what can be extended based on documentation and what I can hack together myself. I can read code a lot better than write it for that part.

Ideally once we have a handle on things, our dev team would look at extending it to cover the other 20% of what we want to do. I believe most of what we are looking at would be applicable to other users, so the new stuff hopefully will appear in the pull requests in the near future.