Expert Tutorials — Coding with AI
Leverage AI to write code for you. Create custom webapps, interactive games, and powerful activity generators with zero prior coding knowledge.
The Human in the Room
The complete guide to AI for teachers. Go beyond the tutorials.
Get the Book →4.1 Turn Anything into a Webpage
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.
Example prompt (from PDF):
“Act as an expert web designer. Turn this pdf file into an interactive webpage for my students of GCSE Chemistry to help them learn the content and self-assess their learning. Use html, css and js, and write all the code in one snippet. I need the webpage to be as interactive as possible, including definitions when clicking on tier 3 words, explanations, dropdown menus, etc. Add quiz questions that self-mark so students can self-assess their learning.”
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):
4.2 Self-marking Worksheets
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.
Sample prompt:
“Act as an expert web designer, with a deep understanding of pedagogy and EdTech. I need you to turn this worksheet into a self-marking webapp for my pupils, writing the HTML, CSS, and JS in the same snippet. I need my app to look fun and professional, avoiding distractions for my pupils but, at the same time, including subtle and relevant visual effects and animations. Upon submission, I would like my pupils to receive a score and feedback on the mistakes they have made. In order to make the process smoother, I would like my pupils to be prompted to enter their names when submitting, and the app will automatically create a report in PDF with their names, day and time of completion, how long it took to complete the worksheet, score, and relevant feedback.”
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.
4.3 Digital Escape Rooms
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.
Sample prompt:
“Act as an instructional designer with expert knowledge of web development and gamification in education. I need you to write the HTML code for a digital escape room for my students of biology, who are consolidating their knowledge of the human eye. I need this session to serve as a revision of the main concepts and elements involved in visual perception. Integrate the CSS and JS in the same snippet, and ensure the visuals are functional and pleasant, with a theme that clearly matches the topic.”
LLM's Response (Web App):
4.4 Activity Generators
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.
-
Vocabulary match up
Sample prompt:
“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:
-
Gap fill
Sample prompt:
“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:
-
Word search
Sample prompt:
“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:
-
Crosswords
Sample prompt:
“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:
4.5 Educational Videogames
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.
Sample prompt 1 (RPG):
“Act as a web designer, expert in educational games and with a thorough understanding of the GCSE History curriculum and the Cold War. I need you to write the HTML code for an espionage RPG where the pupil gets to choose between being a CIA or a KGB agent and has to investigate and solve a local incident that can unexpectedly have international implications. The learning outcoes of the game are the following: Understanding key events: Berlin Airlift, Cuban Missile Crisis, Space Race. Understanding of the ideologies behind each power. Ananlyse sources. Understanding causes and consequences. I need a polished CSS with a theme that matches the topic, visual effects and animations when relevant. Present the game as a progression of stages.”
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.
Sample prompt 2 (Space Shooter):
“Act as a web designer, expert in educational games and with a thorough understanding of the GCSE Biology curriculum and the immune system. I need you to write the self-contained HTML code for a space shooter style game where the pupil will play the role of a leukocyte and will have to fight and shoot down any pathogens they find... The player will find different pathogens like viruses, bacteria... The leukocyte will use two tools, the Phagocyte ‘Tractor Beam’ to engulf bacteria, and the Lymphocyte ‘Antibody Missile’... Power ups will be platelets... and oxygen... Implement a score and level system...”
LLM's Response (Web App):
4.6 Spaced Repetition Apps
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.
Sample prompt:
“Act as a web designer, expert in educational apps and spaced repetition algorithms. I need you to write the self-contained HTML code for a flashcards app that imports CSV files and uses a spaced repetition algorithm to present the content. I need the student to be able to choose between two modes: Write the term, and Check definition. In the first mode, the student will be presented with the definition and will have to write down the term. In the second mode, the student will see the term and will have to check a box to say whether they know the flashcard well, they don’t know it at all, or they know a bit but need to revise it further. The spaced repetition algorithm will feed on this data to present the content at different intervals. Make the user interface pleasant and easy to use.”
LLM's Response (Web App):
4.7 Interactive Timelines
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.
Sample prompt:
“Act as a web designer, expert in educational apps and the creation and design of interactive timelines. I need you to write the code for a self-contained HTML file that presents all the key events of the space race and space exploration on a horizontal timeline with collapsible content at both sides of the line. Ensure the app is pleasant to use, with a sleek design and breathtaking effects and animations.”
LLM's Response (Web App):