As I mentioned last week, I’ve been working on Twine games a good bit lately. The University of Oklahoma is in the process of transitioning to the Canvas LMS, so I am also spending a good bit of time playing with it to integrate various web material. Embedding Twine games proved surprisingly easy.

The process takes only three steps:

  1. Get the html file for your game
  2. Upload that html file to the files section of Canvas
  3. Post that file into modules or the navigation bar

I’ll unpack each of these

Get the HTML File

From within Twine, you can save your game as an HTML file by choosing “Publish to File” from the menu.

A screen shot of the Twine app showing how to publish a game to html

If you want to embed a previously generated Twine game, you can download the html from the game. Right click on the game and use the “save as” function to save the html. If the game is presented in a frame (games on itch.io for example), you can right click and “view frame source” and then save the html.

Animated image depicting how to save the source code for a frame

Upload the HTML as a File to Canvas

To upload files to Canvas, simply go to the ‘Files’ page. Click the upload button and then select the html file for your Twine game.

Canvas Upload screen

Because Twine generates the entire game as a single HTML file, uploading it to Canvas is as easy as uploading an image or pdf.

Post a link to the File in a Module or Page

Once you have uploaded your game, add the file to a module for easy access by the students:

Screen shot of Canvas module

Alternatively, you can add a link from a page if you have structured your courses around pages.