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.
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!
Do you really need it to automatically load when the user scrolls? Why not put it behind a button click?
I’ve used CodePen for embedding code editors in tutorials. Here’s an example:
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 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.
Good luck, and let us know what you figure out.
Thanks. I’ll keep you updated.
Were you able to resolve this problem?
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)