H5P + LTI Advantage (1.3+): blank LMS page in Nutmeg?

[PatM]

Hi
(I’m not a developer, so sorry if I have omitted any other useful info).

I’m trying to set up H5P to use LTI Advantage to send scores to the OpenEdX Gradebook (in Nutmeg).
What I get is an LMS page with a blank area where the H5P exercise should appear.

I’ve looked through various bits of online guidance (see below), none of which seem to align completely (seemingly for LTI v1.1, or using different terms/steps/contexts).

What I have done is:

1. In Studio > Course > Advanced settings to include “LTI Consumer” in Advanced Modules List

2. Configured H5P > Manage Organisation > Connection settings (LTI v1.3)
   to get Public key, Login url, Launch url
   and deployed that setting.

3. Configured the various settings for “Studio > Course > Content > Unit > Xblock > Edit”

(A) The unit is published
(B) I am viewing the course as a learner
(C) In Studio > xblock > Edit: “Deep linking” is enabled

When I use browser-inspect I see this in the header:

<div	class="xblock xblock-student_view xblock-student_view-lti_consumer xblock-initialized" 
	data-course-id="course-v1:[" 
	data-init="LtiConsumerXBlock" 
	data-runtime-class="LmsRuntime" 
	data-runtime-version="1" 
	data-block-type="lti_consumer" 
	data-usage-id="block-v1:[MY-COURSE-KEY]+type@lti_consumer+block@[MY-BLOCK-ID]" 
	data-request-token="bbaef0ee398811edba754266968fad13" 
	data-graded="True" data-has-score="True">


  <h2 class="problem-header">
    LTI Consumer (External resource)
  </h2>

<div class="problem-progress">
            (6.0 points possible)
    </div>

<div	id="[MY-BLOCK-ID]" 
	class="lti_consumer lit-consumer-container" 
	data-ask-to-send-username="False" 
	data-ask-to-send-email="False">

        <div style="height:800px;">
            
<iframe 
	title="LTI Consumer" 
	class="ltiLaunchFrame" 
	name="ltiFrame-[MY-xBLOCKID]" 
	src="https://[MY-PREFIX].h5p.com/lti/login?
		iss=http://[MY-OPEN-EDX-DOMAIN]&
		client_id=[MY-H5P-CLIENT-ID]&
		lti_deployment_id=1&
		target_link_uri=https://[MY-PREFIX].h5p.com/lti/launch&
		login_hint=block-v1/[MY-COURSE-NUMBER+MY-COURSE-RUN]+type@lti_consumer+block@[MY-xBLOCKID]&
		lti_message_hint=

Any suggestions gratefully appreciated as to what to try next.

I have seen:

• ReadTheDocs 10.21.5
• This OpenEdX community reply in 2019
• H5P guidance
• Appsembler guidance
• OpenCraft guidance
• Edly H5P-xblock, but that is for self-hosted H5P and I wanted to try just the default LTI-setup initially (using exercises from my H5P.com account)

Thanks in anticipation
Pat
(Hi to anybody I met in Lisbon at the OpenEdX conference)

[noman.shafi (Noman)]

@PatM Can you please share the settings of the LTI Xblock that you added in a particular unit? Did you want to connect the Consumer(EDX) and Tool/Content Provider(h5p.com] specifically using LTI v1.3 or do you want the configuration with any of the LTI versions (LTI v1.1/LTI v1.2)?

[PatM]

Hi Noman - thanks for the reply.
LTI version: I do want to use LTI v1.3 - the key requirement is to be able to pass scores from H5P back to the EdX gradebook. As I understand it, that should be more straightforward with LTI v1.3.

I’ll check/collate my LTI xblock settings and add them.
If you know of somewhere there is an example set that I could check against, do let me know.

There is some disparity between the setting-field labels in H5P Connection Settings and the LTI xblock that I think may be the source of my confusion!

(I appreciate that H5P are providing details for their largest users Blackboard/Moodle/Canvas/Sakai and OpenEdX is LTI-generic/tool-agnostic, but I can’t be the only non-technical person failing to work my way through the maze of H5P-OpenEdX LTI 1.3 settings.)

Pat

[PatM]

I’ve included other steps/settings too for Studio & H5P (as that might be useful to others in future my position)

As you know, the second set of settings (for the LTI xblock) is a long list - I almost ran out of letters for suffixes (4a, 4b, … 4z !)

(For urls/domains, I’ve removed the parts specific to our H5P account so that for anyone searching for similar info in future, this list might be (I hope) more straightforward for them to use for their own H5P account.)

1. OpenEdX > Studio > Course > Settings > Advanced settings

1a) (First field) Advanced module list >

[
    "lti_consumer"
]

1b) LTI Passports > Details for “id:client_key:client_secret”

---

2. In H5P > Manage organisation > Connect LMS > Add LMS connection

2a) Add LMS Connection > Other
2b) Add connection name > (=Label: free-text)
2c) LTI Version > LTI v1.3

---

3. In OpenEdX Studio > Course > … > Unit > xblock > LTI consumer > Edit >

3a) Display Name > LTI Consumer (default)
3b) LTI Application Information > GCA-H5P-functionality
(= Label: free-text)

3c) LTI Version > LTI 1.3
3d) Tool launch url (redirect url) >
https://[MY-H5P-DOMAIN]/lti/launch

3e) Tool Initiate Login URL ( = OIDC Authorization) >
https://[MY-H5P-DOMAIN]/lti/login

3f) Tool’s “Public Key” mode > Public key (default)

3g) Tool’s “Keyset url” (From H5P) >
https://[MY-H5P-DOMAIN]/lti/jwks/1291752285539551477.json

3h) Tool’s “Public Key” >
(Left blank as .json url from (3g) above seems to be all that is required; pasting the .json url here causes errors as does pasting all/parts of what opens at the json url)

3i) Enable LTI NRPS > True

3j) Deep linking > False (default)
I have tried both True/False - if set to “True” the link to the Deep Linking tool in the Xblock opens with an error
“Unauthorized: Students don’t have permissions to configure …”

3k) Deep Linking Launch URL >
https://[MY-H5P-DOMAIN]/content/[H5P-EXERCISE-ID]
(for when I do set the previous field to “True”)

3l) LTI Assignment and Grades Service >
Allow tool to submit grades only (Declarative) (default)

3m) Custom Parameters > [ ]
3n) LTI Launch Target > Inline (default)
3o) Button text > (blank) (default)
3p) Inline Height > 800
3q) Modal height > 80 (default)
3r) Modal width > 80 (default)
3s) Scored > True
3t) Weight > 6.0
3u) Hide external tool > False (default)
3v) Accept grades if late > True (default)
3w) Request username > False (default)
3x) Request user’s email > False (default)
3y) Send extra parameters > True
(suggested in Appsembler guide)

3z) Save & Publish

The xblock then displays the

• Client ID
• Deployment ID
• Keyset url
• Access token url
• Login url

---

4. In H5P > Manage organisation > Connect LMS > Connection settings

4a) Add from above the Client ID, Keyset url, Access token url, launch url

4b) Select “New deployment” and add “Deployment ID”

---

5. View unit/exercise in LMS in incognito window using a learner login

---

I’m in danger of changing too many things and losing track of what makes things better/worse, or changing something that doesn’t have any impact until I change another setting later.

Thanks for taking a look.
Much appreciated.

One other point, I can make the H5P exercise appear if I re-configure all the settings for LTI v1.1 (but it does not transfer scores to the OpenEdX gradebook).

Pat

[PatM]

Hi @noman.shafi - will you be able to get a chance to review these settings over the next few days?

[noman.shafi (Noman)]

Hi, @PatM I am currently reviewing the setting of LTI 1.3 as I have already done H5P integration with EDX using LTI 1.1. Yes, I will get back to you in a few days after I integrate H5P with EDX using LTI Advantage (1.3+)

[PatM]

Thanks @noman.shafi
One thing I am not clear on is what the EdX “LTI passport” setting needs to be for v1.3.
The “client_key:client_secret” pair in H5P v1.1 is very clear for copying to EdX, but not so in H5P v1.3.

I wonder if the use of a Public Key approach in H5P v1.3 means that the details for the Passport have to be copied out from the data at the Json url?

There was also this post in EdX Slack LTI 1.3 from Pierre Mailhot at EduLib in Canada about problems with new LTI 1.3 components in Nutmeg (but existing LTI 1.3 in Maple transferred to Nutmeg without a problem).
He has had no answer yet.
(CC Pierre @sambapete )

[noman.shafi (Noman)]

There is no need to set for an LTI passport key while connecting the Consumer(EDX) and Tool/Content Provider(H5P) using the LTI 1.3+ version. So there is no need to copy the public key from the JSON URL for the Passport Key because there is no need for the LTI passport key in LTI 1.3 version. Below I add some of the screen shorts on how to connect the Consumer(EDX) and Tool/Content Provider(H5P) using the LTI 1.3+ version and LTI 1.1 version

Setting up an LTI 1.3 component

To add an LTI 1.3 component to a course unit, follow these steps.

1. Edit the unit in which you want to add the remote LTI tool and select Advanced from the Add New Component section. Select LTI Consumer.If the Advanced component type is not available, make sure you have enabled LTI components. To do this, see Enabling LTI Components for a Course.
2. Select Edit in the component that appears.
3. In the LTI Version field, select LTI 1.3.
4. Enter the LTI 1.3 settings provided by your tool. For basic LTI 1.3 tools, without LTI Advantage, you need to set the following settings:

• LTI 1.3 Tool Launch URL (can also be called redirect URL)
• LTI 1.3 OIDC URL (can also be called login URL)To enable LTI Advantage features, such as grades pass back and Deep Linking, we also need to set LTI 1.3 Tool Public Key mode to KeySet URL and also need to set LTI 1.3 Tool Keyset URL with a JSON URL provided by the LTI tool(H5P).

5. Select Save.
6. The Studio page will refresh and display the LTI configuration required by the tool. Copy each of those values and follow the instructions provided by the tool to set them up. For basic LTI 1.3 launches, the following configuration values are required (they are provided by the LTI tool being set up):

• Client
• Deployment ID
• Keyset URL
• OIDC Callback URL (some tools refer to this as launch or redirect URLs).

Setting up an LTI 1.1 component

We add an LTI Passport key to the Course Configuration while connecting the Consumer(EDX) and Tool/Content Provider([h5p) using LTI 1.1 version. . To create an LTI passport, combine the LTI ID, client key, and client secret in the following format ({your_lti_id}:{client_key}:{client_secret} ). LTI shows the content provided by H5P using Iframe.

[PatM]

Thanks @noman.shafi
It is good to know that I don’t have to bother with “Passport” values for LTI v1.3!

I seem to have the same settings as you for LTI v1.3.

I’m going to create a different new H5P activity and apply the same settings.
(The activity I have been using is for “Drag & drop”, so maybe it is that activity-type that is the problem.)

[sambapete (Pierre Mailhot)]

@PatM Just to be clear my problem is a little bit different than yours because our Open edX platform is the LTI Provider for components used by other systems. When our Open edX platform is used as an LTI Consumer, we have no problems thus far.

[PatM]

Ah, thanks Pierre!

If I continue to be stuck I might come back to benefit from your insights about using EdX as an LTI Consumer.

[PatM]

For anybody starting out with LTI 1.3 …
in trying to solve my problem (above)
I came across this useful list of steps/settings for configuring EdX courses & xblocks for LTI 1.3: “How to run the LTI Validation Test”
from Dave Ormsbee in the central EdX tCRIL team.
(Thanks @dormsbee - very pleased to have eventually found such a definitive list!)

Also, a support person at H5P said:

1. the “Issuer” url that is added to H5P “LMS Connection > Settings” should be https://domain-of-your-edx.com without any trailing /
2. any urls added to added to H5P “LMS Connection > Settings” should be https:
3. ensure all of the URLs that added to H5P “LMS Connection > Settings” work/are available if you try to open them in your browser
4. for users with access to the back-end: the “Issuer” url added to H5P “LMS Connection > Settings” must match your LMS_ROOT_URL configuration/setting. (For those like me that don’t have back-end access, I think this is just the url that you see in your browser-url for your platform-domain)

Note relating to Point 4: In Studio > Xblock, after adding in “Edit” the various settings, the 3 urls generated in the Xblock for use in the LTI tool (in my case H5P)
all appear as http:// (not https://)

• Keyset URL: http://
• Access Token URL: http://
• Login URL: http://

(Though none of the 4 points has solved my problem of the external exercise not appearing in the LMS learner-view of the page )

I have found these options in Django/admin:

• Course allow pii sharing in lti flags (Pii = Personal Identifiable Information = username/email)
• Lti ags line items (AGS = Assessment & Grading Service = passing scores from LTI-tool to OpenEdX: Uses x-block ID: such as block@…)
• Lti ags scores (seems to be what is logged as user’s score)
• Lti configurations (uses Public Key, Client-ID, Config-ID - but seems to be auto-populated after the Xblock-H5P settings are added)
• Lti dl content items (DL = Deep Linking = embeds the LTI tool into an OpenEdX page)
  But I’m not sure if I am meant to make any changes there.

[PatM]

I think the source of the problem has been found by our developer - it seems that not all the required ports were configured when the platform was set-up.

So some ways in which the LTI-provider needs to receive/send data from/to our OpenEdX have not been enabled.

[PatM]

One more element that I have found seems to need to be set:
In Django-Edx
[your.domain]/admin/course_live/courseliveconfiguration/
Add

• the course key
• tick “Enabled”
• the Lti configuration - this includes the X-block ID where you use the LTI_consumer X-block
• the “LTI provider” (the url of the domain where you want the X-block to access the LTI-compliant content)

That gets me an LMS page (when viewed with a learner login)
with an error message:
Error
The LMS is not configured to send the required User ID when connecting to H5P.com. Please contact your administrator

Nearly resolved, but not quite!