THINK YOU CAN'T CODE? FROM PRINT TO PIXEL

or How to Quickly Make Your Materials Interactive

Technically, I should start with a catchy introduction. But I doubt I can top an AI platform’s pitch for their AI-powered feedback tool (spotted their ad on Facebook yesterday):

‘I showed this to an English teacher at a conference, and she cried (happy tears, of course).’

Now, I’m not exactly sure why anyone would cry *happy tears over outsourcing something like lesson planning or giving feedback—the very essence of our job, after all. So, no need to reach for the tissues just yet. What I’m going to show you today may not be tear-worthy but it’s definitely useful, especially if you teach online, and can help save a few trees.

So, what do we have? A fantastic Icebreaker Grid with 6×6 topics for students to discuss. Here’s how it works: students pair up, roll a dice twice, and then pick a topic based on the numbers. What I love about the Grid is the element of random choice—it keeps things interesting. But here’s what I’d tweak: give students more control by allowing them to change topics. After all, not everyone ‘did something over the summer holidays’ or ‘traveled somewhere’, right?

So, how can you turn your ideas into interactive tools if coding isn’t your thing? Though, even if you can code, it takes time. Do you have extra time at the beginning of the school year? (A purely rhetorical question that no teacher in their right mind would ever ask.) We can use an LLM (large language model) to handle the coding, and for that, we’ll use Claude. Of course, you can opt for other LLMs like GPT-4 or Gemini, but with Claude’s built-in Artifacts feature, you get a space to view and tweak your wow-sheet or whatever you’re creating.

Step 1 – Make it

Start by taking a snapshot of your paper-based Grid and uploading it to Claude. Then, ask Claude to turn it into an interactive tool. You can provide details on the user experience (UX design)—your preferred colours and styles, and any extra features you’d like to add.

If you don’t provide specific details and just stick to a vague prompt like ‘make it interactive’, don’t expect anything beyond the ordinary. The rule of LLMs in action is simple: no details, no magic—just average output. Personally, I like dark backgrounds and all shades of blue (there must be a reason why ‘blue’ and ‘beautiful’ start with the same letter). So, my design choices were pretty much predetermined.

I asked Claude to add an ‘Edit Mode’ button. When students press this button, they can enter a mode where they can delete or replace topics with their own. To start the game, they’ll need to exit Edit Mode and then press the dice button to select a topic. This way, students can customise their Grid while still enjoying the element of random choice.

Once your Grid is up and running, test it and make any additional tweaks as needed, for example, aligning buttons or introducing any other changes.

Step 2 – Save it

When you’re satisfied with the Grid, you have 3 options:

Option 1: Publish the Grid and share the link with your students.

Option 2: Copy the code and embed it on your website. If you don’t have a website, you can create a dedicated Google Site and embed it there by clicking <Embed> and selecting <Code>.

Or Option 3: You can paste in your code in Notepad and save it as an *.html file to be able to use offline whenever you need it.

Fast and simple. But it’s not a magic wand.

This works well for basic worksheets or simple games with minimal programming. However, if you have something more complex in mind or want to create a highly customised and accessible design, you’ll need some coding experience to have control over the process and be able to make (or guide) adjustments when needed.

Step 3 – Actually I’d recommend starting with this

Think about how you’ll use the tool in the classroom and what you can add to make learning more efficient. Sure, saving trees is a noble goal, but I doubt it’s enough of an incentive to keep your learners engaged. One common misconception (and probably why e-learning *sometimes fails to deliver the promised results) is that simply replicating paper-based games or worksheets will have the same effect. No amount of bells and whistles can compete with the smell of paper (oh, lignin, how we miss you)) or the feeling of tossing a dice in your hand.

So, consider what you can add to the digital worksheet or task to keep students engaged and focused on learning.

You can use the Grid, or copy and save the code, here, on ELTcation https://eltcation.com/wp-content/uploads/2024/08/IcebreakerGrid.html