_edited.png)
I wanted round flip cards. Somehow, I ended up coding.
I like flip cards.
They’re simple, intuitive and give learners a reason to interact with the content. And in Rise, I use them quite a bit.
I’ve also spent plenty of time finding ways to make them feel less like they’ve come straight out of a template adding custom imagery, creating background artwork and generally doing what I can to make them pop.
But there was one thing I kept coming back to. Why do they always have to be square?
Square is… well, square!
And once that thought was in my head, I started wondering.
What if the cards themselves could become part of the visual idea? What if they could be circles? Or another shape entirely? Could we keep everything that's useful about the flip-card interaction, but make the cards feel genuinely designed for the learning experience?
Of course, I could build something in Storyline and drop it into Rise. I've done that plenty of times. But that wasn't really the point. What if I could make Rise itself do it?
Down the Code Block rabbit hole
Articulate Rise has a custom Code Block. I knew it was there. I’d largely ignored it for one very good reason ... I can’t write code. Or perhaps I should say… I couldn’t write code.
Because this is where ChatGPT entered the picture.
Lately, ChatGPT has become much more than my AI copilot. It’s become my go-to when I hit a technical roadblock helping me troubleshoot problems, find my way around unfamiliar programs and, increasingly, learn how to do things I simply couldn’t do before.
And code? That was definitely in the couldn’t do before category.
But perhaps I didn’t need to know how to write it from scratch. I needed to know what I wanted to achieve, explain it clearly, test what came back and recognise when it wasn’t quite right.
So I asked: Could we create a genuinely circular flip interaction directly inside a Rise Code Block?
Turns out, we could.
Now, I know the coders are probably rolling their eyes…
I’m sure people who know how to code have been creating custom interactions and far cleverer things for years. But I hadn’t. And that’s the point.
This wasn’t about discovering that code could create a different shape. It was about discovering that I could use code to create a genuinely circular flip interaction without becoming a coder.
For learning designers who don’t code, that opens up possibilities. Instead of looking at a Code Block and thinking “That’s not for me”, AI gives us a way to experiment, learn and see what we can make it do.
From idea to artwork
So, I’d decided on a directional compass. Three of them, in fact. I wanted them to be visually appealing, completely circular and, importantly, I wanted them to flip.
Step one was the artwork.
Now, I could create the visuals myself in Canva or Illustrator. But why would I, when my mate ChatGPT has become rather familiar with my artistic style?
I’ve spent a lot of time teaching it what I like - the colours, the detail, the illustrative feel, what looks like me and, perhaps more importantly, what definitely doesn’t. So I can describe what’s in my head and, within seconds, get remarkably close to the visual I was imagining.
A few tweaks later, I had my three compasses. Next problem: how do i make them flip?
Flippin good fun!
Artwork sorted. Next came the bit I couldn’t do.
I asked ChatGPT: “Can we make them flip?”
ChatGPT, with considerably more confidence than I had, essentially said:
“Yes. Open a Code Block in Rise and add the code.”
Right.
“And where exactly am I getting this code from?”
“I can write it for you.”
Oh.
And this is where things got interesting.
I opened the Code Block. ChatGPT wrote the first version of the code. I pasted it in.
And there it was.
A circular card. In Rise. That flipped.
Now, was it perfect first time? Of course not.
This became a conversation:
Can we make it bigger?
Can we get rid of that edge?
Can the image fill the whole circle?
Can we have three of them sitting side by side?
What happens on mobile?
Change the code. Paste. Test. Tweak. Repeat.
And somewhere along the way, something else was happening.
I was learning what the code was doing.
Not enough to start calling myself a coder, let's not get carried away, but enough to understand what we were changing, ask better questions and start seeing possibilities I hadn't considered before.
And then the Articulate Rise custom code worked!
After a few rounds of tweaking, I had what I’d imagined at the start: three circular compass cards, sitting side by side in Rise, each one flipping to reveal its content.
No Storyline embed. No standard rectangular card dressed up to look different. The interaction itself was being created inside Rise using the Code Block.
And perhaps my favourite bit? It still felt like my design.
I’d decided what I wanted the interaction to do. I’d shaped the visual concept, created the artwork with AI, tested the experience and kept refining it until it behaved the way I wanted.
ChatGPT handled the bit I couldn’t do translating all those “Can we make it…?” questions into code.
And suddenly, the thing I’d had in my head was sitting there on the screen.
So, did I learn to code?
Well… not exactly. But something has shifted.
Code used to be one of those things I looked at and thought, too technical for me. Now I’m curious about what I might be able to do with it.
I don’t need to know how to write every line myself. I need to know what I want to create, ask the right questions, test what comes back and keep tweaking until it works.
And that feels like a pretty useful new skill to have.
One more of my ducks in a row!
Comments