How to add flip cards to LearnWorlds with AI or Claude

Someone in the LearnWorlds Facebook group recently asked about flip cards. They’d seen them on a competitor’s site and wanted the same thing in their own school.

Can you do it in LearnWorlds? Yes, and the real question is how. I built the same set of flip cards two ways: once with the AI that’s built into LearnWorlds, and once with Claude, with the result running inside LearnWorlds. The video above shows the whole build. This post gives you the steps and the prompts, and there’s a free PDF guide if you want them in one place to work from.

What I built

The content is the US citizenship civics test, which has 128 questions and answers. It’s exam preparation, so it suits flip cards well. I also wanted the cards to work on a phone as well as a laptop.

Both versions started from the same prompt:

Create a set of flip cards based on the attached questions, showing one at a time, with the question on the front and the answer on the back. Make sure the questions and answers are clear, and that all the text fits on the card, even on mobile.

Option 1: flip cards with LearnWorlds AI

First, tell the AI about your school. In LearnWorlds, go to Settings, then Integrations, then AI. This page is where you tell LearnWorlds AI about your school: the school goal, the language, your audience and your brand personality. There’s also a box for custom instructions.

This matters because it’s the context the built-in AI works from. The more it knows about your learners, the more tailored the content it can make for them.

I know flip cards in LearnWorlds don’t usually flip, so I added a custom instruction: “Flip cards should always have a spin animation.”

Then build the cards:

1. Open an ebook and choose Build your own.
2. Pick AI activity or AI canvas. The activity has a preset flashcard layout. The canvas is more free-form.
3. Paste the prompt, upload your questions as a PDF and run it.

What LearnWorlds AI gave me

The flashcard interaction came out with quite small text, and the text didn’t fill the card. It also didn’t flip, so the custom instruction didn’t have the effect I wanted.

One mechanic I liked a lot: after you reveal the answer, it asks how confident you were. You choose between “I recalled it”, “I’m not sure” and “I didn’t recall it”. That’s a good thing to have on a flip card. Without the flip, though, it’s less obvious that you’re still on the same card, and I think the flip is an important part of a flip card.

The AI canvas version had the same reveal button and the same mechanics. The text was still small, it still didn’t flip, and it used 20 questions this time. I don’t know why the text came out so small in either version.

I also tried the Edit with AI option to ask for improvements. I asked how we could improve the interaction for this audience. It gave me a few examples, such as simplifying the wording or adding a listen and repeat step, then asked which one I wanted. When I asked for 10 ideas, it asked what kind. I said 10 design ideas, and all it did was cut the deck down to 10 cards. That wasn’t what I was after.

LearnWorlds AI is still very useful for a lot of situations, and it does a good job at what it’s designed for. I’d call these two versions the base level of what LearnWorlds gives you.

Option 2: flip cards with Claude

I used the desktop version of Claude and started in a project, because a project is where you can give it context. Three things went in:

• A design system. A markdown file that holds your brand.
• An audience file. Background on your learners. I asked Claude to write this one itself, so it covers a lot more than the LearnWorlds version.
• The same PDF of questions I gave LearnWorlds.

That does the same job as the AI settings page in LearnWorlds, in more detail. For the video I used a slightly different brand from the one in my LearnWorlds school. You’d normally match the two to your website, and that’s easy to do: point Claude at your website and ask it to create a design system based on what it sees.

The prompt is basically the same as the LearnWorlds one, with two differences. It tells Claude to use the design system and audience files, and it asks for a single HTML file that works in a LearnWorlds embed code block. Claude needs that extra detail because it has to know where the file is going.

What Claude gave me

The first build was mobile first, so it came out quite narrow. It flips with an animation, and that just feels better. It’s a nice speed and quite tactile. It has a shuffle button and the same confidence rating. I wasn’t sure about the colours or how it applied them across the full layout, but the mechanics worked.

I also have a LearnWorlds CSS skill that I’ve built up over the last few months. It teaches Claude some of the typical problems you get when you drop an HTML file straight into an embed block. If you hit those problems, consider creating something similar, and Claude can help you do that.

How to get Claude’s code into LearnWorlds

You don’t need to understand any of the code. You only need to copy it and paste it in the right place.

1. In Claude, download what you’ve built as an HTML file. It saves to your computer.
2. Open the file in a code editor. I use Sublime Text, which is free, and there are plenty of others.
3. Select all (Ctrl+A, or Command+A on a Mac), then copy (Ctrl+C, or Command+C).
4. In LearnWorlds, open the ebook where the flip cards will live.
5. Add a new section and choose Embed.
6. Click the widget. You’ll see a box for the embeddable script.
7. Click in the box so your cursor is flashing, then paste (Ctrl+V, or Command+V).
8. Click Update, then Save.
9. Ebooks default to a narrow layout, which squeezes the cards. Go to the layout settings, choose full width, and save again.
10. Preview the ebook and try it as a learner.

When I tried mine, it flipped, the confidence rating appeared, and it moved on to the next question straight away. It also had some extra instructions at the bottom, which are easy to remove if you don’t want them.

Taking it further with Claude

I asked Claude how we could improve the cards for this audience. I kept it very open and invited it to generate ideas, and it came back with plenty. These were the ones I liked:

• Audio. The real test is spoken, so learners need to understand the question when they hear it, not only read it, and English might not be their first language. The closer the practice is to the real performance, the more likely people are to transfer what they’ve learned.
• A mock interview mode. This takes the pressure up a level: timed, perhaps with a mock interviewer, maybe an AI avatar.
• A 65/20 mode. Applicants aged 65 or over with 20 or more years as permanent residents take a different test, so Claude suggested a mode for them.
• Saved progress between visits, and explaining hard words.

I asked for the audio version and the explain button first. The audio version lets you slow the speech down, play it automatically, or hide the question words so you rely on what you hear. It uses the browser voice, which isn’t the best, but it’s fine. You could plug it into ElevenLabs or something similar for any voice you like. The explain button gives a one-line plain English meaning of a hard word, reads it out, and can be switched on or off.

This is the prompt for the explain button:

Let’s add: explain hard words. Words like amendment, senator, jury and federal are hard for learners at lower English levels. A small “What does this mean?” tap that gives a one-line plain English meaning helps without changing the official wording.

Then I asked the question I’d been wondering about: can we fit all 128 questions into that window? Yes, we can. Claude also organised them by category without being asked, so you can go category by category or take the whole test. Mixed practice mixes them up five at a time.

The last thing was screen size. The cards looked good on a mobile and narrow on a wider screen, because I’d told Claude to focus on mobile. This was the prompt:

The screen layout is very narrow on a larger screen. Can we do something to make the viewing experience better for wider screens, but still be good on mobile?

Claude rewrote it, and the layout now fills a wide screen. If you shrink the page, it goes back to the mobile layout with the same features.

Which should you use?

For this job, the Claude version did more. The card flips, and I could keep adding features by asking. The LearnWorlds AI versions gave me a working base quickly, but in my test the cards didn’t flip and the text was small. That’s one test with one set of questions, so try it with yours.

Either way, LearnWorlds is still a key part of the process. It gives you the space to run these things, and it organises the courses and products around them.

Context makes the difference

The most important piece in all of this is context, and it always has been with learning design. If you take the time to talk to your audience and carry out a proper training needs analysis, you start to understand the problem through the learner’s eyes. That’s where you get the insights about what will work for them.

If you put a request straight into Claude without giving it that context, it’s the same as not talking to your learners. Being an expert in your topic doesn’t mean you can design great learning for people who aren’t experts. You need what design thinking calls a beginner’s mindset.

One piece of context was missing from my example: me, the course creator. If you’re using AI tools, build that up too. If Claude knows how you speak and write, it can learn from that, and you can create materials that sound like you, more quickly.

Questions people ask about flip cards in LearnWorlds

Can LearnWorlds AI make flip cards?

Yes. In my test it made a flashcard interaction and an AI canvas version, both with a confidence rating after each answer. Neither one flipped.

Do I need to know how to code to use Claude’s flip cards in LearnWorlds?

No. You download the HTML file Claude builds, copy the code and paste it into an embed in your ebook. The steps are above.

Where do I paste the code in LearnWorlds?

In an ebook, add a new section and choose Embed. Click the widget and paste the code into the embeddable script box. Then click Update and Save.

Do the cards work on a phone?

Mine were built mobile first, so they worked on a phone straight away. They looked narrow on a wide screen until I asked Claude to fix the layout.

How many questions can I put in one embed?

All 128 of mine worked. Claude also added categories and a mixed practice mode without being asked.

Is there a free guide?

Yes. The free PDF guide has the prompts to copy, where to paste them, and each step from code in Claude to a live page in LearnWorlds. Sign up on that page and it arrives by email.

What should we build next?

This is the first in a series. I’ll take simple things people ask about in the LearnWorlds communities and run them through the same test: built in LearnWorlds, built in Claude, and always hosted in LearnWorlds. Tell me in the comments on the video what you’d like built next. If you’d like help with something like this in your own school, see how we use AI in AI course design for LearnWorlds.