Congratulations on having made it this far, because this is where the real fun starts. If you take any of the uses of AI we have been discussing in this book and you get a really good result, like an activity or a resource you are particularly proud of, you can now add one extra layer of sophistication by turning your product into a webpage. You can simply ask the large language model, "turn this into an interactive webpage", and you will probably get something that's already usable right away.

In all likelihood, you will want to have a much more customised product, and you will have to ask the large language model to add specific functions or visual elements. If you are using Canvas in Gemini, ChatGPT, or Claude, you will see a preview of the website it created for you, so it will be very easy for you to iterate until you get the finished product you like. Once you are happy with the result, you can simply save the code in a notepad document with the .html extension.

Sometimes, large language models divide the output into three elements, which are the three traditional files necessary to create a web page: the index file, the CSS file, and the JavaScript file. Of course, you can save those three files separately, but it usually is more convenient in the context of education and resources to have all three elements in one snippet, ready to be quickly shared. Simply ask the large language model to include all three elements in one snippet, and it will do that for you. If the content of the webpage is particularly long, large language models can be quite lazy and they may use placeholders or summaries instead of writing the full code; don't hesitate to ask it to include everything in the snippet.

These are the basics of webpage creation with a large language model, but the limit is the user's imagination and also their experience. If you have seen something before, and you can describe it and articulate what you want in detail, you will probably be able to get it from the language model.

The response you will get will be in the form of hundreds of lines of code that you will need to copy and paste into a notepad document and save with the extension .html, selecting ‘all files’ in the dropdown menu ‘save as type’.

LLM's Response (Web App):

In the section ‘3.3. Worksheets’, I explained how to get the LLM to generate worksheets with multiple activities on a given topic, which is already a rather complex use of generative AI in itself. Here, we are adding a layer of sophistication by asking the model to transform the materials it has generated for us into a webapp where pupils can enter the answers to the different tasks, submit them, and see their score, errors, and other relevant feedback.

We will think about this task in a similar way to when we plan a lesson: we start with the outcomes and build all the steps backwards, asking ourselves the questions ‘What do I want the webapp to be like? What do I want my pupils’ experience to be like? What type of feedback are they going to get?’ This will help us be as specific as possible when giving instructions to the model.

Let’s say I want my webapp to look professional but fun, with animations and 3D effects. I also want the experience to be straightforward for my pupils, clean and without distractions, and I want them to receive feedback upon submission of the task, but in a very specific way: I want them to receive a score and also the correct answers in the instances where they have got something wrong.

LLM's Response (Web App):

Feedback PDF Report:

I would like to clarify that these results were achieved with no iteration whatsoever, hence why you will see little things that need polishing in my video tutorial, like the order of the responses in the first activity. This is a perfect example of something LLMs struggle with at the moment, which is randomisation. A simple follow up request asking the LLM to randomise the answers in the dropdown menu will suffice to fix this problem and it shouldn’t take us long to get a perfect final product for our pupils.

Both my students and I have had so much fun setting up and playing this type of activities. Escape rooms offer a break from traditional lessons and present an element of competition and gamification to our pupils, making learning or consolidating content a fun and engaging task.

Teachers who have set up escape rooms and created all the materials and puzzles from scratch know very well how time-consuming it is to come up with a top quality activity. There are lots of things to consider, like the game logic, types of puzzles, how pupils get their hints and what they are supposed to do with them, etc. Combine that with the development and distribution of the physical materials required, and you will many times be paralysed before such a mammoth task.

Digital escape rooms are arguably not as good as physically tangible puzzles and tasks, but crafting them with AI will shorten the process and make it less overwhelming for the teacher. Furthermore, pairing up pupils or having them work in groups will add a component of collaboration and socialisation, which is perhaps one of the main downsides of most digital resources.

To create your very own digital escape room, conveniently tailored for your pupils, we will follow a different route to what we had been doing in previous sections, where we would ‘turn’ things into webpages. In this case, it is much more efficient and straightforward to create a digital resource from scratch rather than basing it on a previously made activity.

LLM's Response (Web App):

If you have been trying out my prompts and had a few conversations with a large language model, you will have certainly noticed that these tools are very good at certain things, but not so much at others. Coding activity generators is the best way I have found to bypass those deficiencies by using the models to actually write the code for webapps that ironically succeed where they fail. Unlike LLMs, apps are very good at randomising, counting, structuring, and at any tasks in general that require systematisation and computation.

1. Vocabulary match up

   Sample prompt:

   Copy

   “Act as a web developer. Write the HTML, CSS and JS code in one snippet for a webapp that takes a CSV list and creates a randomise match-up activity. Add a function that exports the activity to PDF and includes the solutions on a separate page.”

   LLM's Response (Web App):

   Generated PDF:

   

2. Gap fill

   Sample prompt:

   Copy

   “Act as a web developer. Write the HTML, CSS and JS code in one snippet for a webapp where the user can input a text or set of sentences and select several words for them to be removed in order to create a gap-fill activity. The words will appear at the bottom of the text in a randomise order when exported. Add a function that exports the activity to PDF. The words will appear at the bottom of the text in a randomise order when exported. Ensure the app includes the solutions on a separate page.”

   LLM's Response (Web App):

   Generated PDF:

   

3. Word search

   Sample prompt:

   Copy

   “Act as a web developer. Write the HTML, CSS and JS code in one snippet for a webapp where the user can input a list of CSV words and definitions and the app will create a word search with the words, presenting the definitions as a list below. Add a function that exports the activity to PDF. Ensure the app includes the solutions on a separate page.”

   LLM's Response (Web App):

   Generated PDF:

   

4. Crosswords

   Sample prompt:

   Copy

   “Act as a web developer. Write the HTML, CSS and JS code in one snippet for a web app where the user can input a list of CSV words and definitions, and the app will create a crossword puzzle, presenting the definitions as a list below. Ensure the app has a sound logic to identify common letters in different words, allowing them to match in the intersections. Add a function that exports the activity to PDF. Ensure the app includes the solutions on a separate page.”

   LLM's Response (Web App):

   Generated PDF:

   

After having created dozens of them and learnt a few tricks, I can now guide you through the process so you can get the same or even better results whilst avoiding the learning curve. As usual, and like with any educational game we use in our lessons, we first need to think about the purpose of the game, how it aligns with the objectives of the lesson and how it can help our students to meet the expected outcomes. We need to be explicit about this in our instructions to the model.

For this example, I will use History and the Cold War for an espionage role play game (RPG). The outcomes are:

• Understanding key events, like the Berlin Airlift, the Cuban Missile Crisis, and the Space Race.
• Understanding of the ideologies behind each power.
• Analyse sources.
• Understanding causes and consequences.

LLM's Response (Web App):

Now let’s try something more dynamic, like a space shooter. We will use biology this time, and we’ll make the pupil play as a leukocyte who needs to shoot down pathogens.

LLM's Response (Web App):

When it comes to memorisation and long-term retention, spaced repetition is one of the most effective methods in our toolkit and most, if not all, serious and successful educational apps use an algorithm to implement this. Spaced repetition is a learning technique where the material is presented and reviewed at intervals based on the student’s ability to recall it.

Some will be wondering what advantages spending time building such an app have over finding a service that already does this on the internet. For me, there are a few key aspects:

• It takes me much longer to find an app or service online that matches exactly my students’ needs.
• Building my own app is free.
• Once I have built an app that suits me, I’m be able to reuse it or refine it as much as I want.
• I can customise it and add all the features I can imagine.

LLM's Response (Web App):

Timelines are a very useful and visual way to present the content to students, particularly in subjects where the progression of events and dates are key to understand the topics. Digital timelines add a fun and interactive element to the mix, making them more engaging and visual, and structuring the content in a cleaner way thanks to the use of collapsible menus, animations, visual effects, etc.

Many online learning platforms and even digital textbooks, use interactive timelines to illustrate explanations, but what if we are teaching a topic and we cannot find an interactive timeline anywhere? Well, with generative AI you can just develop it yourself in a matter of minutes.

The process is quite simple, and you won’t even have to feel the model with data, as it will be able to draw it from its knowledge. However, you can of course provide the information if you want to have more control over the outcome.

LLM's Response (Web App):