I am very inspired by Tim Holman’s Tutorial Markdown project. It allows you to create interactive tutorials by injecting and running code into a canvas as you scroll down the page. Here’s a live demo.
For a research project on browser-based textbooks, I want to test the scrollable interactive tutorials on my students but using the p5 framework instead of vanilla javascript.
I know how to detect the users position on a page. But I need some help on how I can dynamically inject pieces of code into a fixed p5 canvas on the page when the user triggers a certain spot on the page.
Any help towards achieving this is greatly appreciated. Thanks!
Thank you for your follow up on my question. Previously, I have also embedded examples in my tutorials using code stored in either Codepen or - more recently - the P5 online editor. However, I find several interesting things in Tholman’s interactive scrolling exasmple. I want to conduct a formal comparative study of students’ perceived differences in both approaches and the effect on their learning. So, to answer your question, yes I need to have the script automatically load when the user scrolls
Well, it’s doable, but it’s probably going to take some custom code. Try splitting it up into smaller steps and then taking on those steps one at a time.
Step 1: Can you write some JavaScript that detects when a certain element is scrolled into the view?
Step 2: Can you trigger opening a CodePen embed programmatically?
When you have both of those steps working (which could both be broken down further into even smaller steps), then start thinking about combining them.
It seems like another approach would be to just create several sketch instances, one for each stage of the tutorial and then your trigger event simply swaps which sketch is associated with the display div. Rather than code injection, you are just display swapping. It is less conceptually unified, but much cleaner (eliminates a LOT of potential complications with winding and unwinding code injection).
What a great suggestion. I’ll pursue this approach and report back. Since my first post, I have stumbled across this excellent blog post which blends written instructions and animated code listings: https://pomb.us/build-your-own-react/ (not directly related to my initial question but still very inspiring for anyone considering creative ways to make interactive tutorials more engaging and explanatory)
