How do I embed a tutorial into my Thimble project?

Revision Information
  • Revision id: 48706
  • Created:
  • Creator: JakeMakes
  • Comment: 1st
  • Reviewed: Yes
  • Reviewed:
  • Reviewed by: JakeMakes
  • Is approved? Yes
  • Is current revision? No
  • Ready for localization: No
Revision Source
Revision Content

Thimble allows you to embed a tutorial inside your project, which shows up when a viewer hits the remix button.

To embed a tutorial, simply add a tutorial-URL tag when you publish

Thimble tutorial tag

The tutorial-URL tag is a project tag that contains the word tutorial- and the URL of the tutorial that you want to embed.

You can embed just about any webpage as tutorial, all you need is the URL from the address bar.

An example

@Artychan’s movie poster has a tutorial embedded inside of it - https://artychan.makes.org/thimble/movie-poster/remix

Starter template

Use this starter template which sets up special sections to break up your tutorial into paginated steps:

https://thimble.webmaker.org/projects/tutorial/remix

Modify anything that falls between the <section> and <</!-- -->/section> tags. You can include any HTML in these tags.

Control the pagination of your tutorial

thimble-tutorial-pagination

You can copy and paste more sections or divs which will create new pages in the finished tutorial. That way you can segment your instructions into digestible steps that the user toggles through with the left and right arrow

Controls for the user

The tutorial panel itself has a few buttons that grants your remixer a few additional controls.

  • The thimble-tutorial-hide-button button hides the tutorial in order to save space while working.
  • The thimble-tutorial-show-button expands a hidden tutorial back to normal state.
  • The thimble-tutorial-expand-button button expands the tutorial window to a larger size
  • The thimble-tutorial-menu-button button allows you to load another tutorial if the author has embedded more than one into the Thimble project.