If you create language learning content – for yourself, or for your students – then you need to check out the latest update to Claude AI.
Along with a competition-beating new model release, Anthropic have added a new feature called Artifacts to the web interface. Artifacts detects when there is self-contained content it can display – like webpage code, or worksheet text – and it pops that into a new window, running any interactive elements on the fly. In a nutshell, you can see what you create as you create it.
This makes it incredibly easy to wrap your learning content up in dynamic formats like HTML and JavaScript, then visually preview and tweak it to perfection before publishing online. This favours interactive elements like inline games, which can be impressively slick when authored by Claude’s Sonnet 3.5; it turns out that model update is a real platform-beater when it comes to coding.
Using Claude’s new Artifacts Feature
You can give Artifacts a whirl for free, as Claude’s basic tier includes a limited number of interactions with its top model every few hours. That’s more than enough to generate some practical, useful material to use straight away.
First of all, you’ll need to ensure that the feature is enabled. After logging into Claude, locate the little scientific flask icon by the text input and click it.
Claude – locating the experimental features toggle
A window should pop up with the option to enable Artifacts if it’s not already on.
Claude – enabling Artifacts.
Now it’s on, you just need a prompt that will generate some ‘Artifactable’ content. Try the prompt below for an interactive HTML worksheet with a reading passage and quiz:
Interactive HTML Worksheet Prompt
Create an original interactive workbook for students of French, as a self-contained, accessible HTML page. The target language level should be A2 on the CEFR scale. The topic of the worksheet is “Summer Holidays“. The objective is to equip students with the vocabulary and structures to chat to native speakers about the topic.
The worksheet format is as follows:
– An engaging introductory text (250 words) using clear and idiomatic language
– A comprehensive glossary of key words and phrases from the text in table format
– A gap-fill exercise recycling the vocabulary and phrases – a gapped phrase for each question with four alternative answer buttons for students to select. If they select the correct one, it turns green and the gap in the sentence is filled in. If they choose incorrectly, the button turns red. Students may keep trying until they get the correct answer.
Ensure the language is native-speaker quality and error-free. Adopt an attractive colour scheme and visual style for the HTML page.
With Artifacts enabled, Claude should spool out the worksheet in its own window. You will be able to test the interactive elements in situ – and then ask Claude to tweak and update as required! Ask it to add scoring, make it drag-and-drop – it’s malleable ad infinitum.
An interactive worksheet created by Claude, displaying in the new Artifacts window
Once created, you can switch to the Artifacts Code tab, then copy-paste your page markup into a text editor to save as an .html file. Then, it’s just a case of finding a place to upload it to.
Pulling It Together
After you’re done with the worksheets, you can even ask Claude to build a menu system to pull them all together:
Here’s the result I got from running that – again, instantly viewable and tweakable:
A language website menu created by Claude, displayed in the Artifacts feature.
You’ve now got the pieces to start to stitch together into something much bigger than a single worksheet.
Instant website – without writing a line of code!
Have you had chance to play with Claude’s new Artifacts feature yet? Let us know in the comments what you’ve been creating!