Embed edX content in LMS

The edX Edge site has been configured to be a learning tool interoperability (LTI) provider to UBC's LMS environments (i.e., Canvas), allowing instructors to embed content, problem types, videos, etc. from edX Edge courses into LMS courses. When this is enabled in a course, marks from gradable content are passed back from edX Edge to the Canvas gradebook.

General information about using the edX Edge environment as an LTI Tool Provider can be found on edX's site. Below you will find specific information about using this feature at UBC.

Generate an LTI URL

The first step in embedding edX Edge content is to generate an LTI URL. General information on generating the LTI URLs is available on edX's site.

The base LTI link to be embedded in Canvas looks like this: https://edx-lti.org/lti_provider/courses/{course_id}/{usage_id}


The course_id can be obtained from your browser's URL field:

CourseIDinURLhighlight.png


You can add an individual component (individual problems or video etc), vertical (unit) or sequence (subsection) from an edX course to a Canvas course.

To generate the required link for embedding a component:

1. Login to your edX course.

2. On the "View this course as" field on top of the page, check to make sure Staff is selected in the dropdown menu.

3. Go to the component you would like to embed.

4. Click "Staff Debug Info" link and copy the value in location field:

Staffdebuginfo.png

5. To create the LTI URL, take the base URL, and append the course_id and the value in step 4:

For example:

  • Base URL: https://edx-lti.org/lti_provider/courses/
  • course_id: course-v1:UBC+d101+1
  • location value: block-v1:UBC+d101+1+type@problem+block@20ab8eca608f40bc8b4b2243d5b48fad

The final URL should look like below:

https://edx-lti.org/lti_provider/courses/course-v1:UBC+d101+1/block-v1:UBC+d101+1+type@problem+block@20ab8eca608f40bc8b4b2243d5b48fad

To generate the required link for embedding a vertical or sequence:

1. Login to your edX course.

2. On the "View this course as" field on top of the page, check to make sure Staff is selected in the dropdown menu.

3. Move your mouse cursor on an empty space next to the unit or subsection and right click.

4. Select Inspect/Inspect Element:

BrowserMenu.png

5. Copy the value in the id field:

SourceCode.png

6. To create the LTI URL, take the base URL, and append the course_id and the value in step 5:

For example:

  • Base URL: https://edx-lti.org/lti_provider/courses/
  • course_id: course-v1:UBC+Demo_Course
  • location value: block-v1:UBC+Demo_Course+type@vertical+block@902c9bfeb5674b57a0bd2e74c658a8c1

The final URL should look like below:

https://edx-lti.org/lti_provider/courses/course-v1:UBC+Demo_Course/block-v1:UBC+Demo_Course+type@vertical+block@902c9bfeb5674b57a0bd2e74c658a8c1

Now you are ready to add content to Canvas using the steps below.

Add Edge Content to Your Canvas Course

To use edX course content in Canvas, you add the links to either a module page or an assignment. Add to an assignment if your content includes grades.

1. In Canvas, select your course.

2. (module) From the module page, click the + icon to add content to the module.

3. (module) Add external tool from the dropdown menu and select Edx Edge from the list of available tools. Enter an identifying name and the URL for the edX content you want to include. The URL is the LTI URL that you determined for the edX course content, as outlined above.

Screenshot of adding edx LTI to module page in Canvas

2. (assignment) From the assignments page, click on + Assignment.

3. (assignment) In the submissions type section, select external tool from the dropdown menu and enter the URL for the edX content you want to include, as above. Apply other settings as desired including the assignment points.

Screenshot of adding edx LTI to assignment in Canvas

4. Review the content to verify that it appears as you expect.

Screenshot of integration of edX into Canvas using LTI

Important: when you click the LTI link and end up with an empty page, it means that the course on Edge is not available yet. In Studio, under Settings/Schedule & Details, change the start and end dates and Save.