# Interactive tutorials using p5
**URL:** https://discourse.processing.org/t/interactive-tutorials-using-p5/17091
**Category:** Project Guidance
**Created:** [January 15, 2020, 1:07pm UTC](https://discourse.processing.org/t/interactive-tutorials-using-p5/17091 "2020-01-15T13:07:30Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@stixan](https://discourse.processing.org/u/stixan)
#### Post date: [January 15, 2020, 1:07pm UTC](https://discourse.processing.org/t/interactive-tutorials-using-p5/17091/1 "2020-01-15T13:07:30Z")
I am very inspired by Tim Holman’s [Tutorial Markdown](https://github.com/tholman/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](https://generativeartistry.com/tutorials/piet-mondrian/).
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!
---
### Author:  [@Kevin](https://discourse.processing.org/u/Kevin)
#### Post date: [January 21, 2020, 11:41pm UTC](https://discourse.processing.org/t/interactive-tutorials-using-p5/17091/2 "2020-01-21T23:41:36Z")
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:
> **[P5.js Hello World](https://happycoding.io/tutorials/p5js/hello-world)**
>
> Say hello world to P5.js!
---
### Author:  [@stixan](https://discourse.processing.org/u/stixan)
#### Post date: [January 22, 2020, 9:52am UTC](https://discourse.processing.org/t/interactive-tutorials-using-p5/17091/3 "2020-01-22T09:52:28Z")
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 🙂
---
### Author:  [@Kevin](https://discourse.processing.org/u/Kevin)
#### Post date: [January 22, 2020, 2:04pm UTC](https://discourse.processing.org/t/interactive-tutorials-using-p5/17091/4 "2020-01-22T14:04:39Z")
Well, it’s doable, but it’s probably going to take some custom code. Try [splitting it up into smaller steps](https://happycoding.io/tutorials/how-to/program) 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.
Good luck, and let us know what you figure out.
---
### Author:  [@stixan](https://discourse.processing.org/u/stixan)
#### Post date: [January 22, 2020, 8:47pm UTC](https://discourse.processing.org/t/interactive-tutorials-using-p5/17091/5 "2020-01-22T20:47:36Z")
Thanks. I’ll keep you updated.
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [May 8, 2020, 5:14pm UTC](https://discourse.processing.org/t/interactive-tutorials-using-p5/17091/6 "2020-05-08T17:14:40Z")
> [@stixan](#):
>
> 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.
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).
---
### Author:  [@stixan](https://discourse.processing.org/u/stixan)
#### Post date: [June 3, 2020, 10:39am UTC](https://discourse.processing.org/t/interactive-tutorials-using-p5/17091/7 "2020-06-03T10:39:59Z")
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/](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)