Unplugged Coding for Kids Activity in English/ELA and Art Classes: A Cross-Curricular Coding Adventure

Ages: 8-year-olds and up (3rd grade and up)

Standards Involved: You could apply almost every English/ELA standard for any grade level involving creating/writing a story to this activity. It also involves illustrating the story/novel through art.

Materials Needed:

• Your Imagination and Time (approximately 2 to 3 hours)
• Paper, cardboard, poster board, card stock, construction paper, tissue paper (or bulletin board paper) of varying shades/hues, or something to write/draw on
• Pencils, pens, crayons, markers, map pencils, paint/watercolors — colorful objects to illustrate and author with 
• Scissors
• Glue or glue sticks
• Notebook paper
• Student-created stories. Can be a novel, a short story, or a creative essay students have previously written

A long, long, time ago in a classroom far, far, away, students had something called an imagination because technology did not rule the world they lived in. Yes, oldsters, I am talking about us — the kiddos that grew up before the 1980s and beyond. This activity will take the teacher and his/her students in the Way-Back Machine to the past where stories were not only created but were developed with elaborate characters, stellar settings, complicated plot lines, character dialogues, conflicts between the heroes and villains, and being completely immersed in a world developed by the author, aka your students.

Wait a minute! We do this already, in the present, in our classes! How is this activity going to be different from all the rest? Well, fellow teachers, we are going to “Kick it old school.” No technology involved. However, if you want to add the shiny technology to this activity, you can in the end once it is completed by hand. How will this activity involve coding? Coding will graciously make its presence throughout the process with Computer Science/Computational Thinking vocabulary that will help explain concepts in that lovely nerdy vernacular (which I hold near and dear to my heart). This activity will also be aligned to the skills possessed and utilized by Video Game Designers, Comic Book Artists, Animators, Videographers, and Event Cinematologists — a tie-in to careers in the real world — SCORE! Now, who’s ready to get this Algorithm Party started? Oh no, she dropped one of those nerdy computer words already!

An algorithm is a detailed step-by-step instruction set or formula to solve a problem or to complete a task. In computing, programmers write algorithms that instruct the computer how to perform a task.

****Important note to teachers: If your students have not written a story in their ELA/English class, then they MUST create a story FIRST.

Teacher/Parent Instructions:

Teachers/parents, I have created kid-friendly, step-by-step instructions. This activity was designed for self-paced, independent creativity with little to no teacher involvement. The role of the teacher will be to corral stray writing utensils that have gone astray, to offer small shoves through questioning for students suffering from creativity block, to control overzealous excitement, to offer advice when asked, and to keep your cool if the floor of your classroom looks like a hot mess, … If this activity is successful, then it will be effortless because the students are in total control of their creativity and learning. They have already finished the difficult task prior to this activity — writing the story. 

Student Instructions to Bring a Story to Life:

Step 1:  Gather drawing supplies and paper or cardboard.

Step 2:  Begin developing the characters from your story by drawing them on paper. Loop/Repeat Step 2 until all characters of your story are drawn.

Step 3:  Begin drawing the settings of the story on paper– include backgrounds for each scene of the story.  Be sure to draw each background on a separate piece of paper. [Optional] For a 3D effect, tear off small pieces of tissue paper (or bulletin board paper), crumple them up a little in order to give it some texture, and glue them to cardstock paper or cardboard to create the scene of your background. For example, you would use small pieces of green and brown tissue paper to create a 3D tree. Make sure that the colors that you use coordinate well with the theme of your background. Loop/Repeat Step 3 until all the background scenes (settings) of your story are drawn. Label or number each scene on the back of the paper. If you number them, start with the number 0. Why? In coding, that is the way (rule/syntax) we count (index) each item (element) of a collection/set (array). Computers start counting at zero. Wholey Moley! Computers use the set of whole numbers to index each element of an array.

Step 4:  Using scissors, cut out your character images. Loop/Repeat Step 4 until finished. Be sure to label/name each character and write it on the back. The terminology for what we just did, gets complicated when we explain it in Computer Science lingo, but here we go. Let’s say we want to put all of our characters — PacMan, Inky, Blinky, Pinky, and Clyde — into an array. First, we have to declare the name of the array as a variable # let’s call our array origPacMan, {var origPacMan;} #, and define the type of elements that the array will store # {origPacMan = [“PacMan”, “Inky”, “Blinky”, “Pinky”, “Clyde”];} #. So, all of my story characters’ names have been defined and are contained in the array named origPacMan.

.

Step 5: Sort your characters into 2 piles: heroes and villains (good guy/bad guy). If character = hero or good guy, place character in the hero or good guy pile; else place character in the villain or bad guy pile. We can think of these 2 piles as arrays. An array is just a collection of things (data) that have the same characteristic (the same data type). Example: If I have ten bananas, each one has an index or name within the array. Banana[0], Banana[1], Banana[2], etc… If we are describing the set we call them Bananas (this is the array). 

Step 6: Read through your story and find a scene that has a conflict between the hero and the villain. If there is not a dialogue/conversation between them, then create one. Write down each blurb of the conversation on a small piece of paper. Draw a conversation bubble around it. On the back of the conversation bubble, label which character is talking. Cut out each conversation bubble. [Optional] If the character has a main color associated with it, you can outline your conversation bubble with this color or lightly shade the conversation bubble with the same color.

Step 7: Play (run) the scene using the physical background, characters, and conversations that you created in the previous steps. Rehearse the dialogue. Say it with emotions and feelings. Make any improvements/changes where needed (debugging). How? Lie the pieces on a flat surface like a table.

Step 8: On a piece of notebook paper, label (declare and define) the name of the scene from Steps 6 and 7. Describe what is happening to your audience like you are the director and you are creating a movie/video. Include the setting of the scene (background), what characters (sprites) are involved, and the conversation(s) (dialogue) they have. Is there any conflict? What action(s) is(are) each character doing? Is this a fight scene? How would you keep up with which character is winning/losing? Should there be a score? How many points should be given/taken away for each action? Don’t you love how I switched to game design on this step?

Step 9: Complete the other scenes of your story. What do they involve? Is it a description of what is going on (narrative)? Does it involve movement from one scene to another (journey)? Is it a task (quest)? Is there more conflict? Have you included all of your characters and settings by the end of your story? Did your story have some direction (a plot/storyline)? Did you build up suspense to the main event(s) in your story? Did your story have a final ending or can there be a part 2 (cliffhanger)? Hey, this is feeling a little like an RPG game!

Step 10: Arrange the scenes of your story in some sort of order that makes sense (sequencing). Read aloud each scene in the order that you have decided. Does it make sense? If not, rearrange it or provide a backstory (more information) for it to “flow” and make it believable. It is okay if you are traveling back and forth in time as long as the reader (player) understands if it is the past, the present, or the future time for each scene. Once you have the sequencing finalized, write the number order in the top corner of each piece of paper. Why? The numbers will tell you how to put the pages back in order if you accidentally drop them.

Step 11: This is the dress rehearsal. Go through your story, scene by scene, and read it aloud. Be sure to have a piece of notebook paper ready in case you find a mistake (debugging) or decide to make improvements (editing) along the way. Take detailed notes to make the debugging/editing process quick (efficient). You have worked so hard, but you want everything to be perfect for the final reveal.

Step 12: This is the big show! If you are doing this at home, now is the time to call in the family with the popcorn. If you are doing this at school, this is your big presentation! Don’t be nervous! You have been creating, improving, and practicing all along this wonderful journey. You’ve got this! Lights, Camera, Action!

Step 13: This is the after, the show self-reflection/self-evaluation (critique) of how your first showing went. Get out some notebook paper and get real. The more honest you are with your self-reflection/self-evaluation, the better the second showing will be. How did things go? How did the audience respond? Did they react with the emotion(s) that you expected at the end of each scene? Did anything unexpected happen during the show? Did you have a great new idea in the middle of your show? Do you plan on making improvements? Or were you happy with the end product? Is there a sequel in the making already? Did the audience show excitement? Was it a thumbs up or thumbs down show? How do you feel about your show? Was there a request for you to perform it again (an encore)? Did the audience stand up and clap (a standing ovation) or shout “Bravo” (this is a compliment)? Take time to write down your feelings about the show and evaluate your performance. It’s okay if it wasn’t stellar (awesome) or if things went wrong — that’s why they say “on with the show” in show business. What that means is that you continue with your show (production) even if problems arise during the live presentation. Don’t stop in the middle of your show and just quit if problems come up. Keep on going. It is not the end of the world if it didn’t turn out the way you practiced it. Your audience will appreciate your efforts. Sometimes we have to fail before we sail.

More Teacher/Parent Instructions and Adaptations:

As you can see, this activity can get very involved really quickly. It is designed to spark curiosity and imagination. I designed it to be hands-on in order to improve fine motor skills. Having physical items (manipulatives) allow the student to rearrange what is happening in each scene until s/he is satisfied with the outcome. Then, the writing of the scene comes afterward in order to minimize the frustrations of rewriting/erasing.

• Students may choose to draw comic book style storyboards before writing the actual scene, but it is optional. They have actually created their storyboards physically by moving and arranging the characters, conversation bubbles, and scenes in this activity. However, some students need a little extra help to envision and remember their overall vision of the final reveal.

• Students may also want to make this a stick-puppet show by attaching small wooden dowels or popsicle sticks to the backs of their characters and conversation bubbles with glue or tape.  They may need to add cardstock or cardboard to the backs of these in order to make them stiff for better attachment to the sticks.  They can also glue their scenes to pieces of cardboard to create an easy way to “change out the set”. The possibilities are endless. Now I see why she had the labels/names on the back!

The purpose of this activity is to spark imagination and to learn some coding vocabulary along the way. When the student has finished, s/he has created her/his own story world that has been defined to the tiniest detail. When school starts back, this “story” is ready to code using almost any game design software. To use the student’s actual drawings/creations in the software program, either the teacher or parent will have to use a scanner, Google Drive, Notes app on an iPhone/iPad, and upload these picture files (be sure you saved them as  -.PNG or -.JPEG files) to the student’s computer/account.  I knew she would have to make it “plugged in” somehow! 

And now the technology adaptations to use AFTER students have finished and presented their masterpiece creations:

• Use computer software to draw characters and scenes: Some teachers may want their students to use technology to draw their characters and scenes. This can be achieved by using software such as Microsoft 3D Paint, Adobe Spark, Duck Duck Moose, Microsoft Fresh Paint, Krita, GIMP, etc. However, if it were my classes, I would rather students physically draw their images, scan, and upload them to their accounts. This is very labor-intensive, but it will make this activity more real for students. It brings out the magical qualities of what students can do with technology and exemplifies perseverance and determination, i.e., those little extra-special nuggets that bring on the “WOW!” factor.
• Create a stop motion animation movie with their characters and scenes: This task is for an intermediate level Google Slides/Microsoft PowerPoint user. It is not very difficult, but students must be very familiar with the software program being used.
• Use storyboarding software to organize thoughts or creating a comic book strip by uploading their characters and scenes: There are several different storyboard programs available, PBS, Storyboard That, Canva, Google Jamboard app, …, that students can customize by uploading their scanned character images and scenes.
• Create student avatars: In this day and age, there is so much paperwork for teachers to be able to use actual photos of students. An alternative is for students to create an avatar of themselves through software like Pixton, My Avatar Editor, DoppelMe,…, and upload it into their stories. Now, the student can be a character in his/her own story or just have a visual image for the Narrator.
• Narrate their own stories: Be sure students know about this option — recording their voices as they tell their stories. This can be done through numerous avenues and programs. Creating their own voiceovers will take this activity to the next level for our students. Talking about ownership!
• Create their own background music: Every great character has his/her own theme song, so let students create theirs. This can be done with numerous software programs, but students also can record themselves. One band teacher did this using Zoom. However, students would need some advanced technical skills to extract just the audio from the video file (but that’s what Internet searches are for, right?). I have been encouraging a group of my students that create “beats” by tapping ink pens on their desks to start a pen percussion ensemble — Zoom can now make that possible.
• Create videos during COVID-19 hiatus: This activity would be an awesome family event during our “Stay-at-home” time. Parents or older siblings could video our star pupil(s) presenting this activity through Zoom/Skype/Facebook Live/YouTube Live sessions shared privately with other members of their family. Teachers can take it to the next level by using Flipgrid. With this app, teachers create an assignment (called a grid) and push it out to students. Students then upload their video responses. The teacher can change the permissions in order to pre-screen videos before sharing them with the entire classroom. Students may make positive comments and “like” the videos. Flipgrid made some major improvements earlier this month, like increasing maximum video time to 10 minutes. 
• Create a movie trailer: Every great movie has an action-packed movie trailer, so why not ours? Again, there are a plethora of software programs that students can use to achieve this task, but some are tricky to use (like Adobe Premiere Pro). However, programs like Movie Maker, Animoto, Spark Video, WeVideo, PowToon, …, make it easy. 
• Create a mini-lesson: Students may have discovered some awesome digital tools along the way while creating their masterpieces. Allow them to create short videos using screencasting software like Screencastify, Screencast-O-Matic, …, explaining how they used those newly discovered digital tools (app smashing) in creating their show. These short videos can also be pre-screened and shared with the class by the teacher using Flipgrid.
• Insert your idea here:  The possibilities are only limited by you and your students’ imaginations. In the era of App Smashing, there is not just one way to do this. The stars are the limit. Find yours!

Vocabulary Terms from Unplugged Coding Activity in English/ELA and Art Classes

Written by Michelle Ward. Michelle is a PreK – 8^th grade Keyboarding/Computer Apps/Computer Science Specials teacher at Lake Road Elementary School in Union City, TN that sneaks in Computer Science at every available opportunity. She is a CodeMonkey Teacher Ambassador, a member of CSTA, an advocate for CS4ALL, and a future presenter at ISTE20.