Building Tutorials Inside Repls
We can do *What*?!
The Tutorial pane, and floating video components, are a fantastic way of structuring learning within any Repl. You can see them in action in our amazing 100 Days of Code course, where thousands of users from across the world have been learning Python together, one day at a time.
If you'd like to use this functionality in your Repl it's really easy to achieve.
Adding Tutorial Functionality
To start with, in any Repl, all you need to do is make a folder named .tutorial at the top level of the File tree.
You'll know it's worked as a new tutorial pane will immediately pop open with the warning message No tutorials found, so let's go and fix that.
Adding Content to a Tutorial
To add content you'll need to add markdown files in the .tutorial folder.
Each markdown file will become a separate page of the tutorial. Create a new file with the extension .md inside the .tutorial folder to begin.
The files will be presented to the user in a sorted (alphabetical) order, if you want to manually order your pages then make sure to name your markdown files starting with numbers to give you the most flexibility.
You can use all the standard supported (markdown syntax) [] within these files, but the most important step is that the very first thing in each file must be a top level heading, like this # Here's my Heading. This is what gets displayed as the title of each page in the table of contents, which is generated automatically.
When another user forks your Repl they will be presented with your tutorial pane instantly and be able to code along with your instructions. Their progress will be show visually through the progress bar on the bottom, and this will be saved so that next time they load their Repl it will be in the same place.
Adding the Floating Video Pane
To add a floating video pane to any Repl you will need to ensure that your video is hosted and published on YouTube. Videos can be published or unlisted but cannot be private.
You will first need to create the .tutorial folder, as above.
Inside this you will need to create a video.json file inside the .tutorial folder. This is as simple as creating a new file with that exact file name in the file tree.
The contents of the .json file will need to look something like this:
{"embedUrl": "YouTubeEmbedURL"}
Please note that at this time we only support YouTube embed URLs. You can work out yours for yourself by taking the URL of the video playback page and copying the unique video code into the example above.
Reload your Repl. As in - tap that reload button on your browser.
When it loads back up your video pane should pop up, with the embeded video ready to play.
Share your Tutorial
A tutorial is nothing without people to learn from it, so publish it to our community using the tag #tutorial to get it visible to our users, and take your cover page URL and share it through the vastness of the internet.
Hide the .tutorial folder
If you don't want anyone fussing with the contents of .tutorial or you're concerned that its mere presence may confuse and disorient your learners then you may want to hide that folder away.
First you'll need to show hidden folders by clicking the kebab menu on the file pane and selecting show hidden files.
Then find your way to your .replit file, this controls a bunch of stuff about how your Repl works (find out more here) but all we need to do is to add one more entry on the line that starts hidden =, and we're going to add in , ".tutorial" as the last option before the ]
Turn your hidden files back on and your .tutorial folder is hidden away from those prying eyes