A few days ago I came across this interesting pep talk generator on Reddit. I shared it on my Twitter feed with an idea of how lists/arrays can be taught by loading this data and randomising the messages. So, taking advantage of fall break, I played around with the concept and designed a couple of JavaScript variations of this which I wish to document in this post.
Step 1 : Getting the dataset ready
The first thing I had to do was make a CSV of this data so that loading and reading it in the different platforms I had in mind becomes easy. Hence, I created a CSV using Google Sheets (I am sure there are better ways but I find Sheets easier to manage). This CSV would then be loaded into lists/arrays using JavaScript and processed to create wholesome messages. I had to get rid of commas within the source so that processing it later would need lesser parsing.
Sample 1: P5JS sketch
The first variation I designed was using P5JS. I have written about this platform in the past and have enjoyed both teaching and learning it. To keep things visually interesting I decided to make it a T-Shirt design so that the randomized message gets printed in different font types, colors and sizes on a T-shirt. The idea was that I should be able to press a button and it should randomly pick up one value from the four lists to build the final message. I had some trouble with punctuation but managed to curate the source data to ensure the messages were largely consistent. I even loaded up some cool icons (from flaticon) to create random images on the shirt design. Given below is a sample of what this ended up looking like. The source code is commented with the essential bits.
Sample 2 : App Labs (Code.org)
My Grade 7 Computing class this year has been about mobile app design and development. One of the primary platforms we are currently working on App Labs by Code.org. To create a data driven example of the Pep Talk generator, I felt this could be an interesting variation. So, I built a small interactive shell that would basically do the same thing except without the T-shirt template. Clicking on the Generate Pep button would dynamically construct a message using random text pieces from the four data columns. I loaded the CSV dataset to the Data part of the design mode and created a single button application as seen below.
The fun bits and takeaways
- The P5JS project, not surprisingly, took longer since I had to figure out how to load all the different image icons into an array for dynamic loading.
- The clear( ) function came in handy since certain elements of the canvas has to be redrawn each time the button is clicked. This was the first time I had worked with images in an array on that platform and enjoyed it!
- This project combines lot of programming fundamentals and hence makes for an excellent student project. Reading from a file, dealing with arrays, images, loops, display elements, string variables…these are just the starting points.
- Setting up the back-end data took a little time. A quick way to do that would be to have students create a Google Form which accepts the four text pieces. They can get real creative with this. Loading the Sheet connected to that Form to a CSV would make things a lot easier.
- Such a project lends itself to any coding platform. Visual or not, such a project can be reproduced with any programming language. I plan to include it as a regular feature in all my coding classes.
- This project can be creatively extended in different ways – including adding random music based on set parameters, or generating different memes based on word presence. The sky is the limit.
- It also strong cross curricular links and computational thinking links too. Any language classroom can adapt this into a writing project. Potential collaboration between coding and language classes exist too!
- I have already shared the base idea with my Computing classes and coding club. I hope to return to this with examples of student work.
Compute Thought 