Putting a GBG Education game in Canvas

Option A: Upload the file and link to it (fastest)

1. In your course, open Files.
2. Click Upload, choose gbg-compatibility-test.html, and wait for the upload to finish.
3. Make sure the file is published (green check). If your course uses restricted files, give students access.
4. Open Modules, click + on a module, choose File, select gbg-compatibility-test.html, and click Add Item. Publish the module item.
5. Open the item as a student (see Test as a student below). Canvas should show the game right on the page.

If Canvas offers a download instead of showing the game, use Option B.

Option B: Embed the game on a Canvas Page (best for students)

1. Upload the file to Files as in Option A, steps 1 to 3.
2. Click the file name in Files. Look at the address bar. It ends with something like /courses/12345/files/67890. Write down the two numbers: the course ID (12345) and the file ID (67890).
3. Open Pages, create a page (for example "Quick Check"), and click Edit if needed.
4. Switch the editor to raw HTML. In the newer editor, click the </> icon at the bottom right of the editor (you may need to click it twice to get the raw HTML view).
5. Paste this, replacing COURSEID and FILEID with your numbers:

   <iframe src="/courses/COURSEID/files/FILEID/preview" title="Thistle Hollow Quick Check" width="100%" height="760" style="border: 0; max-width: 100%;" allowfullscreen="allowfullscreen"></iframe>

6. Switch back to the regular editor. You should see the game inside the page.
7. Click Save & Publish.

Tip: if students have to scroll inside the game box, raise height (for example to 900).

Option C: Collect completion codes with an Assignment

At the end of every game, students get a completion code like P3-FOX-2-87-Q4T.

1. Create an Assignment.
2. Paste the same <iframe ...> from Option B into the assignment description, so the game is on the assignment page.
3. Under Submission Type, choose Online and check Text Entry.
4. Tell students: "Play the game, then paste your completion code as your submission."
5. To check codes, open the game, tap the tiny "Made by GBG Education" text at the bottom 5 times, enter your teacher passphrase, and paste in the codes. The game shows each code's class code, level, and score, and flags any code that was changed. (The passphrase for the test game is thistle hollow.)

Test as a student

• On your teacher account: Settings, then Student View (right side). Open the page or module item and play to the end.
• Best: sign in on an actual student device with a student or test student account, then play the test game to the end. The last screen should say "It works! Your GBG Education game will run on this device."
• Optional: try the Read aloud button. If the device has no speech voices, the button is simply hidden and the game still works.

If something does not work

• Blank box or "refused to connect": check that the file is published and that students can open course files. Then try Option A to see if the file opens on its own.
• The game loads but looks tiny or cut off: make the iframe taller, or open it full screen.
• A district filter blocks the page: GBG Education games make no outside connections, so a block usually comes from a policy on uploaded HTML files. Ask your Canvas admin, or use another delivery method (Google Sites, your own website, or our hosted link).