Coding with Canva: A Six Step Problem Solving Experience

In today’s episode, we'll explore how to use the AI coding feature in Canva to facilitate a problem-solving experience in your classroom. Visit AVID Open Access to learn more.

Transcript

Paul Beckermann 0:00 Welcome to Tech Talk for Teachers. I'm your host, Paul Beckermann.

Transition Music with Rena's Children 0:05 Check it out. Check it out. Check it out. What's in the toolkit? What is in the toolkit? Check it out.

Paul Beckermann 0:16 The topic of today's episode is coding with Canva, a six-step problem solving experience.

Paul Beckermann 0:24 Let me start out by saying I am not a coder. I know what code is, but I don't know how to code. Until recently, this meant that I would not be able to code my own app unless I studied up and learned a coding language, bought a hosting platform, and spent lots of time and possibly money to get my project up and running.

But the key here is, until recently, generative AI has been changing what is possible, including making the act of coding accessible to anyone, even me. A task that once required a highly specialized skill set in the use of a coding language now is dependent on creativity, imagination, problem solving, and communication. And these are the skills I want for my students. These are the skills that they will need to thrive in this rapidly changing, tech-powered labor market.

Transition Music with Rena's Children 1:18 Here's the, here's the here's the tool for today.

Paul Beckermann 1:22 So in today's episode, I'm going to explain how you can use Canva, a free design tool, to have your students engage in a coding challenge that will allow them to practice these transferable life skills.

Paul Beckermann 1:36 Let me begin by giving you a general overview of how you might use Canva to generate code. First, you would access Canva's coding tools by navigating to canva.com

Paul Beckermann 1:47 Schools can get the pro version of Canva for free. But even if you don't have the Pro version, the coding tools are available in the free version as well.

Once you're on the Canva home page, click Canva AI at the top, then click the "code for me" option on the bottom banner of the prompt box. From there, you can either type in an idea or click the Microphone icon and speak your idea.

Essentially, you'll describe the app or web experience that you want Canva to create for you. Enter your prompt and Canva AI will begin writing code to produce your program, which will appear on the right side of the screen that allows you to actually interact with it and experience the program generated from your prompt.

It's probably not going to be perfect, which I'd argue is ideal. This forces you to iterate in order to make the product better. This is a key life skill and an authentic way to practice problem solving. To do this, you interact with the chatbot on the screen, explaining what you'd like changed. Based on your input, Canva updates its code and creates a new version of your app. You can repeat the cycle as many times as needed to get the results you're looking for.

Again, you don't need to know how to code, but you do need to think critically, evaluate results, and ask for updates and iterations until you get an acceptable result.

Transition Music with Rena's Children 3:12 Integration, inspiration, integration, ideas.

Paul Beckermann 3:16 All right, let's talk about using this with your students. How might you do this? Of course, you'd want to find a curricular connection first. What standards are you learning that could inspire students to build an app or interactive website to reach one of those standards?

Perhaps science students could build a lab simulator. Math students might create practice quiz games. World Language students could maybe build an app to facilitate practice conversations or conjugate verbs. As a teacher, you can set the parameters and objectives, and then students can have flexibility within that framework to generate their prompts.

To make the process manageable and structured, I'd recommend following some basic problem solving steps. For example, you could use this basic six-step problem solving experience.

Number one, identify the problem to be solved. Number two, generate a prompt that describes an app that would help solve that problem. Three, review and iterate until the results meet your expectations. Four, have someone test the app. Five, revise and repeat until satisfied, and six, publish and share.

Now there are lots of versions of problem solving processes, but they all generally have similar steps to this. Choose your favorite and go with that, or use this one. To illustrate how this might work, I'll share the example I tried for context. Let's say I was a student in an ELA class, and we were working on technical writing skills, writing directions that were clear and understandable. Here's how it might look in this six-step problem solving process.

Step number one, identify a problem to be solved. This is where I would tap into my personal interest and identify a problem that needs to be solved within that interest area. Your specific classroom context will determine how much freedom you can give your students for choosing a topic. But generally, the more the better. This can allow students to connect with their personal experiences.

For me, I love songwriting, and sometimes I fall into a rut of using the same chord progressions over and over. So for my problem, I wanted to develop a chord progression generator to help me write songs.

Step two, generate a prompt that describes an app that would help solve the problem. So based on my problem, I then wrote a prompt to describe what I wanted created that would help to solve the problem. I typed in this: "A songwriting collaborator to help generate chord progressions to match a musical idea played on guitar. Suggest options for various parts of a song (Intro, verse, pre-chorus, chorus, bridge, etc.). Display tabs to show how each chord is fingered. Suggestions should match the mood and feel appropriate to the song's content or topic."

Paul Beckermann 6:03 Then I moved on to step three, review and iterate until the results meet your expectations. This is probably where most of the time will be spent.

The prototype on my computer program appeared on the right side of the screen. I could actually interact with it and test it out to see if it worked as intended. I liked a lot of it, but there were parts that were not acceptable. I liked that it offered the songwriting options at the top, like typing in a topic, choosing a mood from a list, and selecting a musical key. Then it displayed each section of the song with possible chord progressions. This was nice. There was even a new ideas button that could be clicked to generate new chord options. Then at the bottom, there was an option to select a chord and view an illustration of how to play it.

Paul Beckermann 6:48 The chord illustrations were not perfect. I wasn't satisfied with how the chords were displayed, and it actually got the C chord wrong. Based on my review, I began the iteration process. I explained how to improve the chord illustrations by typing in the chat field.

With each revision, a new prototype appeared that I could try out. After about five revisions, I was satisfied with how the chords were displayed, and they were accurate. I then decided to ask for more mood options to choose from. It was fairly limited, and I had the app add a level of difficulty option at the top so advanced players could be stretched more.

Once I got what I liked, it was time to move on to step four. Step four is to have someone test the app. Now, I didn't do this step, but in the classroom, I would definitely have students have classmates try out their apps. Not only does this bring in collaboration and communication skills, but it's a key part of the design thinking and problem solving process. This is real feedback and a critical part of the testing and iteration process.

Paul Beckermann 7:51 Then at Step five, revise and repeat until satisfied. It's sort of like rinse and repeat until the product meets acceptable standards. It's going back to that iteration process over and over until you get what you want. This is the place where students will be stretched and really have to think critically. It's the problem solving process in action. It provides an authentic opportunity to put growth mindset into practice as well and help students learn that they can fail forward by learning from their mistakes.

Paul Beckermann 8:22 Step number six, the final step, is to publish and share. This is the last step, and Canva provides five ways to share the final product. One is to copy the actual code and paste it into another program. For my example, I pasted the code into a free Google website that I created with Google Sites. This allowed me to see the interactive experience embedded into my own website.

However, you don't need your own website. Students can simply click the "Use a design" button at the top and select website presentation, doc, or whiteboard. Whichever option is selected, offers a fully functioning app embedded into that type of product, right within Canva. Each of these can then be shared with a link. It's super easy, and would allow students to share their creations with authentic audiences and with their teacher for grading purposes.

Transition Music with Rena's Children 9:14 Here's a bonus tip.

Paul Beckermann 9:17 Now, these are six steps in the process. You could, of course, add more. You should do some review afterward. Review the process. How did it go for you? Where could you improve? Review the final product. Did it really turn out the way that I wanted it to? The self-reflection at the end can be very powerful.

Paul Beckermann 9:35 Not every student will need to be a coder, but I'd argue that every student should be a problem solver and a communicator. Canva's free AI code generator can be a fun and engaging way for you to have students solve a relevant, high-interest problem in the context of your curriculum while practicing these critical life skills. That's a win-win situation in my book.

Paul Beckermann 10:00 If you think this approach may have merit in your classroom, head over to canva.com and check out the "code for me" option with Canva AI.

Paul Beckermann 10:10 To learn more about today's topic and explore other free resources, visit avidopenaccess.org. Specifically, I encourage you to check out the article collection "AI in the K-12 classroom," and of course, be sure to join Rena Winston and me every Wednesday for our full-length podcast Unpacking Education, where we're joined by exceptional guests and explore education topics that are important to you. Thanks for listening. Take care, and thanks for all you do. You make a difference.