Why build an educational game for the browser?
Students open a browser game from a link. They can play it on a school Chromebook, a tablet, a laptop or an interactive whiteboard, and nobody has to install anything. In many schools only an administrator can install apps, so with a link the teacher saves a lot of time.
A web game also fits the tools that publishers, schools and learning platforms already use. You can embed it in an e-textbook or a publisher's platform with an iframe. For a learning management system you can package it as SCORM. Moodle, for example, has a SCORM activity for this. Teachers then find the game next to the rest of the lesson.
Examples of well-known educational web games
These public examples show different ways to teach with a game. Codeward did not work on any of them.
- PBS KIDS. PBS offers free games at pbskids.org/games. PBS says that all PBS KIDS content, games included, is curriculum based and aimed at children aged 2 to 8.
- BBC Bitesize, Karate Cats Maths. A maths game for Key Stage 1 with hundreds of questions across eight topics, from fractions to statistics. The studio Complete Control, which built it, describes it as an accessible HTML5 game designed to meet BBC accessibility requirements.
- NASA Space Place. NASA's site for children has a games section with titles such as a Mars rover coding game and an ocean currents game. They are good examples of small simulations.
- Kahoot! A quiz platform for classrooms. Students join a game in the browser at kahoot.it with a PIN from the teacher, and in most games they do not need an account.
- Zintegrowana Platforma Edukacyjna (Poland). The government platform zpe.gov.pl has a Gry w edukacji section with history games, including Gra szyfrów, which the Institute of National Remembrance prepared about the Polish Bolshevik war and Polish cryptology.
Start with learning goals and the age group
Write down two or three things a student should be able to do after the game. Use verbs you can check, such as recognise, calculate, order or explain. With a goal like this, designers and teachers work toward the same target.
Write down your own goals as well. A publisher may need the game to match a textbook series. A foundation or a local government may need results for a grant report. A brand with an educational campaign should keep its logo in the background, because teachers are careful about advertising in lessons.
Then define the players. A game for six year olds needs voice instructions, large buttons and very short rounds. A game for teenagers can use more text, harder choices and longer sessions. Also decide where the game will be played: in class with a teacher, as homework or both.
Check how the game fits the curriculum
Teachers use a game when it matches a lesson they already teach. Map each level or mission to a topic in the core curriculum, and give teachers a short note on where the game fits.
- List the curriculum points the game covers, by subject and grade.
- Plan a game length that fits into one lesson, with time left for discussion.
- Prepare a short guide for teachers with the goals, the controls and ideas for the lesson.
- Ask a subject expert to check every question and every fact before production ends.
Choose game mechanics that teach
In the core mechanic, students should practise the skill itself. Students like points and badges, but they learn through the core action.
- Quizzes. Good for checking knowledge and for revision. They are fast to build and easy to translate, but students can guess. Add feedback with an explanation of the right answer.
- Simulations. Good for cause and effect, such as ecosystems, budgets, physics or traffic rules. Students change something and see the result. They take longer to design and test.
- Puzzles. Good for logic, maths and language. With each puzzle, students practise one rule, and you can raise the difficulty step by step.
- Story and role play. Good for history, safety and social skills. Students make choices and see the consequences.
Many teams mix two of these in one educational game. You can end a simulation with a short quiz, or tell a story between puzzle levels.
Make the game accessible
The game should work for every student in a class, and many public bodies and publicly funded projects have legal accessibility duties. Use the Web Content Accessibility Guidelines (WCAG) as your reference from the start.
- Keep text contrast at least 4.5:1 for normal text, the level set in the WCAG contrast minimum rule.
- Use clear, readable fonts and a comfortable text size, and avoid long blocks of text.
- Make every action possible with a keyboard, and show which element has focus.
- Never use colour as the only signal. Add a shape, an icon or a label.
- Add captions or text for spoken instructions, and let students replay them.
- Let students pause the game and turn off time limits where the timer is not part of the skill.
Protect children's data
Children's data needs extra care. Under Article 8 of the GDPR, the default age for a child's own consent to online services is 16, and EU countries can lower it to 13. The simplest way to stay safe is to collect as little as you can.
- Skip accounts where you can. Many classroom games work well with a nickname or no login at all.
- Do not add advertising or third party tracking to a game for children.
- If you need results, store them without names or keep them in the platform the teacher already uses.
- Keep fonts, libraries and analytics on your own servers or remove them, so you do not send data to other companies.
- Write a short privacy note that teachers and parents can understand, and ask your data protection officer to review it.
Plan for school devices and weak Wi-Fi
School hardware is often old, and a whole class may start the game at the same moment on one connection. Plan the build for that.
- Keep the first download small and load later levels in the background.
- Test on the oldest Chromebook, tablet and whiteboard computer used in the schools you want to reach.
- Avoid heavy 3D and large videos unless the lesson needs them.
- Design the game so students can keep playing if the connection drops for a moment.
- Use a scaling layout so the game works on a phone, a laptop and a large board.
This is one reason we often choose Defold for educational web games. With Defold we can make small HTML5 builds that load quickly on weak hardware. In our guides on HTML5 game optimization and web game ports we explain the techniques in more detail.
Languages and localisation
Plan languages from the start, even if the first version has only one. Keep all text outside the game code, leave space for longer words and use fonts with the characters you need.
Translation is only part of the work. Examples, names, money and measurement units may need changes for each country, and the curriculum fit can be different too. Ask a teacher from each country to review the translated version.
Test with real students and teachers
Adults are poor judges of what children find clear. Watch students play early versions in a real classroom, with a real teacher and the real devices. If your organisation does not run schools, find one or two partner schools early and agree on test dates with them.
- Test a paper or simple digital prototype before full production.
- Watch where students get stuck, and do not help them during the session.
- Ask teachers how the game fits into the lesson time and what they need to run it.
- Test again after each larger change, and include students with special educational needs.
Measure learning results
Decide before production how you will know that the game works. A short test before and after playing is a simple start. Compare a class that played with one that learned the topic another way, if a partner school agrees.
You can also record useful data in the game itself, without personal details, such as which questions most students get wrong or where they quit. Teachers can use this to plan the next lesson, and you can use it to improve the game.
Maintenance after launch
Browsers, school devices and curricula change. Plan who will fix bugs, update content and check the game after major browser updates. Agree on hosting, a contact for teachers and a simple way to report problems.
If the game is part of a grant or a public project, check how long it must stay online, and include that period in the contract with the studio.
How to commission the game
Write a short brief with the learning goals, the age group, the curriculum points, the devices, the languages and the deadline. In our guide on how to outsource game development we explain how to compare studios and plan the milestones.
Codeward is a game studio from Kraków with many client projects behind it. We build web games in Defold that load fast on modest devices, and we are happy to help publishers, edtech companies, foundations, institutions and brands plan a game around clear learning goals.