Embed an Ungraded OpenDSA Exercise or Visualization on Any HTML Page

OpenDSA is an eTextbook project developed at Virginia Tech. OpenDSA materials include many visualizations and interactive exercises that support courses in a wide variety of Computer Science-related topics such as Data Structures and Algorithms (DSA), Formal and Programming Languages.

OpenDSA has hundreds of visualizations and exercises. Most algorithms and data structures are illustrated by interactive algorithm visualizations. Students could enter their own test cases to see how the algorithm or data structure works on that input, and they can control the pacing of the visualization.

This guide is for those who want to include OpenDSA exercises/visualizations in an arbtirary HTML page. It is important to note that this method does not allow for the recording of scores. This method is aimed at those who do not have the infrastructure to support LTI, or do not care about tracking scores, but still want to use OpenDSA exercises/visualizations outside the context of an OpenDSA eTextbook.

Step 1: Go to the list of embeddable exercises.

Embed 1

Step 2: Click on a category to expand it and show the modules in that category.

Embed 2

Step 3: Click on a module to expand it and show the exercises and visualizations in that module.

Embed 3

Step 4: Click on the name of an exercise/visualization to see a preview. To close the preview, either click the Close button in the bottom right of the pop-up window, the × icon in the top right, or just click outside the pop-up window.

Embed 4a
Embed 4b

Step 5: After finding an exercise/visualization you want to include on your page, copy the HTML embed code by clicking the clipboard button.

Embed 5

Step 6: Paste the code you copied in the last step to wherever you want to include the exercise/visualization. This might be your own HTML page, or it might be an editor that allows you to specify some HTML. See below for an example of embedding an exercise/visualization on a Canvas page.

Embedding an OpenDSA Exercise/Visualization on a Canvas Page

Step 1: After following the steps above, go to your course in Canvas and click on the "Pages" link in the left-hand menu.

Embed canvas1

Step 2: Click the "+ Page" button in the top right.

Embed canvas2

Step 3: Enter a page name in the box at the top.

Embed canvas3

Step 4: If you would like to accompany the exercise or visualization with some prose, enter it into the large textbox.

Embed canvas4

Step 5: Click the "HTML Editor" button.

Embed canvas5

Step 6: Paste the HTML embed code you copied in the desired location.

Embed canvas6

Step 7: Click "Save" or "Save & Publish". "Save and Publish" will make the page visible to students.

Embed canvas7
Embed canvas final