How To Make an Educational Browser Game using GPT-4 / ChatGPT Plus

Reading Time: 16 minutes

Artificial Intelligence (AI) has become an increasingly mainstream topic, with many people anticipating how it will change the way we work and live. One of the most significant impacts of AI technology can be seen in the field of education, as accessible AI tools have become more widely available for non-experts to utilize. In this article, I will explain how I made a simple browser game using GPT-4, what steps I took, what the challenges were, and what it means for educators and students.

How AI Technology May Change the Way Educators Work

AI technology has advanced significantly, becoming more user-friendly and accessible to individuals without technical expertise. Previously, one needed to be a coder, an AI researcher, or both to utilize the power of AI effectively. However, modern educators can now access powerful and reliable AI technology, enabling them to integrate AI into education without extensive technical knowledge.

Consider a basic demonstration of force and inertia for physics students. If an educator wants to demonstrate the concept virtually, they could search for a YouTube video, find a web page containing a game or animation illustrating the concept, or purchase educational software. Although these methods are useful, they lack customization.

Educators often have their own unique approach to teaching a specific concept, and there may not be existing resources to match that approach. This could be due to catering to students with learning disabilities or ensuring the demonstration aligns with the lesson’s overall theme. Creating content is a time-consuming task for educators, and developing technological resources requires expertise that most educators don’t have. Current advancement in AI technology may hold the key in facilitating educators to become resource creators.

Understanding GPT Technology

For effective discussion of AI in education, let’s take a look at the key terms and concepts related to this technology, particularly GPT technology, which has become increasingly vital for educators.

GPT, or “Generative Pre-trained Transformer,” is a versatile AI model created by OpenAI. Its latest version, GPT-4, has garnered attention for its remarkable problem-solving skills and highly precise output. GPT-4 powers ChatGPT Plus, which is a paid version of ChatGPT, a conversational AI that can comprehend and respond to user inquiries in a chat-based format.

The distinction between ChatGPT and ChatGPT Plus lies in their underlying technology; ChatGPT is powered by GPT-3.5, a prior generation of GPT tech, while ChatGPT Plus uses GPT-4. The GPT-4 model has significantly advanced capabilities compared to GPT-3.5. For instance, GPT-3.5 ranks in the 10th percentile on the Uniform Bar Exam, while GPT-4 achieves the 90th percentile. Similarly, GPT-3.5 scores in the 70th percentile for SAT Math, whereas GPT-4 reaches the 89th percentile. This highlights the exceptional reasoning capacity of the GPT-4 model.

AI as a Democratizing Force in Education

One instance of AI’s ability to help make education more accessible can be seen in an inspiring article written by Ethan Mollick, a professor at Wharton School of Business. He showed how ChatGPT can generate games or demonstrations for classroom use, enabling teachers to develop innovative learning experiences without relying on educational software or having advanced programming skills. Ethan framed GPT technology (and AI in general) as a democratizing force in education. AI empowers educators to take approaches that were previously impossible, allowing them to implement effective, customized instructional methods without relying on pre-made software.

Encouraged by Ethan’s article, I decided to create a basic browser game using OpenAI’s GPT-4 Playground, which is a platform for businesses to experiment with GPT-4 based on given prompts. Although its interface appears more complex, it functions similarly to ChatGPT Plus. In this blog post, I’ll outline the approach I took to create a simple JavaScript game illustrating force and inertia concepts without doing any coding myself. Furthermore, I’ll discuss challenges encountered during the process and offer guidance for educators interested in utilizing similar strategies to create their own browser games or other classroom demonstrations.

The Following Game was Created Using GPT-4

The game described below was developed by GPT-4 in OpenAI’s Playground and is a straightforward browser game. It utilizes only HTML, CSS, and Javascript, eliminating the need for any software installation. The game aims to illustrate the following concepts:

• The way force can affect an object’s motion, specifically its acceleration.
• The impact of a longer duration of applied force (i.e., the distance the force is applied) on the change of speed.
• The decelerating effect of friction on an object.

Features of the game include:

• Allowing students to actively apply force and observe its impact on motion, rather than simply watching a demonstration.
• Supporting group gameplay, allowing students to engage in friendly competition for higher scores.
• Providing follow-up questions to assist students in summarizing, exploring, and comprehending the game’s concepts.

Recommended age groups:

• Grades 7 to 11, as the game corresponds with the mechanics unit for Grades 7 and 8 and the dynamics unit for Grade 11 in Ontario.
• Due to its simplicity, the game may be more appropriate for students in Grades 7 and 8.

Open in a new tab

Where You Can Go to Use GPT-4 to Create the Game

There are 3 places that you can use GPT-4. Each method has strength and weakness. Also, the cost is different.

Bing.com Search Engine

(Screenshot of Bing Search Engine)

Bing.com has now integrated GPT-4 into their search engine. By activating Chat mode and posing a question, the Bing engine offers a response along with references to online articles on which the answer is founded. Additionally, the Chat feature on Bing.com can produce code when given an instruction.

Cost: free

Advantage: Easy to use. References web resources

Disadvantage: The input is limited to 2000 characters. This may be too small for some of our prompts (see Step 4, below).

OpenAI’s Playground

OpenAI’s Playground is an interactive web platform designed to let users explore and experiment with OpenAI’s AI models, such as GPT-4. It serves as a testing ground where users can input text, modify settings, and see the AI’s responses in real-time. You will need an access to OpenAI’s GPT-4 API key, and you can get it only by creating a company account  being granted an access to early release API through waiting in the official waitlist.

If you have access to GPT-4 early access API , go to the Playground and select the “Chat” mode. From the right sidebar, choose the model “gpt-4”. There are several parameters you can set:

• Maximum length: Maximum length parameter is used to limit the number of tokens that the GPT-4 will generate. Since you don’t want the code to be cut off in the middle, set it to maximum at 2048.
• Temperature: The temperature parameter controls the randomness of the output. 0 will let GPT-4 create more deterministic output, whereas 1 will let GPT-4 create more randomized, unpredictable output.
• Frequency penalty and Presence penalty: These parameters will prevent repeating content in the generated output. Keep them at 0.

Cost: $0.06 / 1000 tokens (approximately 750 words). Pay-as-you-go.

Advantage: Has controls for parameters in UI. Can change line in prompt.

Disadvantage: Have to wait in the API waitlist.

ChatGPT Plus

(Screenshot of ChatGPT)

ChatGPT Plus is the paid version of ChatGPT. ChatGPT Plus uses GPT-4, and users ask questions in a chat format. The user interface is simple to use and attractive to look at. User without GPT-4 API access can use ChatGPT Plus to use the powerful GPT-4 engine. However, there are no visible controls for parameters such as Temperature. To change the parameters, you’ll have to input it in the prompt. See how to do it here. To use ChatGPT Plus, sign up for a ChatGPT account, then upgrade it to ChatGPT plus.

Cost: $20 USD / month

Advantage: Attractive UI. Simple to use.

Disadvantage: No controls of parameters in UI. The input area does not allow you to change line. The cost is fixed cost no matter how little you use it.

 

In this article, we’ll use OpenAI’s Playground. While not tested, I believe the same work can be done in ChatGPT Plus.

How the Game Was Made, and How You Can Make a Game

Step 1: Think about the game concept and lesson outcome you want to achieve.

First, consider the type of game you want to create. For instance, I thought of a straightforward game that illustrates the connection between force, acceleration, and inertia. Develop a detailed plan of what the game will entail. For my game, this consisted of:

a) A hockey puck is present and is at rest.
b) When a student clicks on a button, the hockey pack is pushed by a stick.
c) When a student holds the button, the stick continuously pushes the hockey pack, making it accelerate.
d) When a student releases the button, the hockey puck is released from the stick.
e) When the stick is not pushing the hockey puck, the hockey puck decelerates due to friction.
f) The goal is to move the hockey puck to a goalie line make it stop as close to the goalie line as possible.

Step 2: Head to ChatGPT Plus or OpenAI Playground to create the first draft of the game.

Using the outline, give GPT a prompt to start creating the first draft of the game. The prompt that I used was:

Create a javascript script game for a learning application for middle school students illustrating the concept for force and inertia by doing the following:
1. Write a paragraph about what a force is and what inertia is. Then write about the relationship between force and inertia.
2. Make a simple javascript game that has the following components:
a) A hockey puck is present and is at rest.
b) When a student clicks on a button, the hockey pack is pushed by a stick.
c) When a student holds the button, the stick continuously pushes the hockey pack, making it accelerate.
d) When a student releases the button, the hockey puck is released from the stick.
e) When the stick is not pushing the hockey puck, the hockey puck decelerates due to friction.
f) The goal is to move the hockey puck to a goalie line make it stop as close to the goalie line as possible.

Step 3: Put the code into CodePen and identify the problem.

GPT-4 created the following code on the first try:

The code is shown in the “ASSISTANT” part (abbreviated above because it’s long). The code, when installed on a web server, gives the following game:

Not bad for a first try, except that it doesn’t work! When you push the button, nothing happens.

To host the HTML code on a web server, you can use CodePen. Go to CodePen and copy and paste the HTML code (from <!DOCTYPE html> to </html>) onto the HTML pane and click on Save. The result will be displayed in the area, below.

Next, we have to debug the code by telling GPT-4 what is wrong.

Step 4: Tell GPT to revise the code. Iterate this process until you have a satisfactory game.

In this step, we make a list of items that we want GPT-4 to change or add. I paid special attention not to tell GPT-4 which part of the code is wrong or how to change the code. The first draft contained some errors. Additionally, there are things that we want to add, such as a hockey stick that pushes the puck. Put these in a list and make each point as specific as possible.

1. When user holds down on the Push button, the puck does not move. When user holds down on the Push button, the puck should accelerate. When the user releases the Push button, the puck should decelerate.
2. No stick is shown. A stick should be shown, and it should move with the puck when the user holds down the Push button, and the stick should be detached from the puck and stop when the user releases the Push button.

Use the following prompt and include the above points:

The following game is not working. The game should do the following.

a) A hockey puck is present and is at rest.
b) When a student clicks on a button, the hockey pack is pushed by a stick.
c) When a student holds the button, the stick continuously pushes the hockey pack, making it accelerate.
d) When a student releases the button, the hockey puck is released from the stick.
e) When the stick is not pushing the hockey puck, the hockey puck decelerates due to friction.
f) The goal is to move the hockey puck to a goalie line make it stop as close to the goalie line as possible.

Problem:

1. When user holds down on the Push button, the puck does not move. When user holds down on the Push button, the puck should accelerate. When the user releases the Push button, the puck should decelerate.
2. No stick is shown. A stick should be shown, and it should move with the puck when the user holds down the Push button, and the stick should be detached from the puck and stop when the user releases the Push button.

Debug the following code so that it works:

<!DOCTYPE html>

… (code abbreviated)

GPT-4 may give you something like this:

Extract the code (from <!DOCTYPE html> to </html>) and put it into CodePen (or another web hosting environment) to see if it works this time.

For me, unfortunately, this code still didn’t work. Pressing on the button didn’t result in anything and the hockey stick went through the puck. At this step, you have to be very patient in telling the AI what is wrong and make it improve the code one iteration at a time.

You can update the prompt by putting in a new set of problems and copying the new code that GPT-4 gave you. You may try changing the wording to see if the AI can find the problem and correct it.

The following game is not working. The game should do the following.

a) A hockey puck is present and is at rest.
b) When a student clicks on a button, the hockey pack is pushed by a stick.
c) When a student holds the button, the stick continuously pushes the hockey pack, making it accelerate.
d) When a student releases the button, the hockey puck is released from the stick.
e) When the stick is not pushing the hockey puck, the hockey puck decelerates due to friction.
f) The goal is to move the hockey puck to a goalie line make it stop as close to the goalie line as possible.

Problem:

1. When user holds down on the Push button, nothing happens. When user holds down on the Push button, the puck should accelerate. When the user releases the Push button, the puck should decelerate.
2. The stick is horizontal and is penetrating the puck. The stick should be vertical and should be placed on the left of the puck.

Debug the following code so that it works:

<!DOCTYPE html>

… (code abbreviated)

Unfortunately, the code given by GPT-4 didn’t work again. I repeated this iteration process several times until GPT-4 was able to give me a working code. Two things that made a difference were:

• Letting the GPT-4 output some debug messages to see what the code is doing. I included the following into the “Problem” part of the prompt: “Put in a series of debug output below the game to show me where the code goes.”
• Setting the temperature parameter to 1 (the most randomized output) so that the AI can be more creative.

Outputting the debug message showed that the Puck Position and Stick Positions were both NaN (undefined) even though the velocity was changing. By telling GPT-4 in the next round of debugging, “Puck Position and Stick Position are both NaN,” GPT-4 was successful in debugging the code and creating something that worked.

Doing further improvements involves this kind of iteration process where you

1. Updating the prompt by changing the Problems list and copying the newest code.
2. Testing the code.
3. Identifying new problems or things that you want to add or improve, if any.

By doing approximately 30 rounds of iterations, the following game was born:

Open in a new tab

Step 5: Publish the game.

Once you are satisfied with the game, save the code and publish the game. You can publish it in your website or host it on CodePen for free.

Lessons Learned and Tips

Creating a game using GPT-4 does require some work

Creating a game using GPT-4 is possible, but it does require some work. GPT-4 is an impressive piece of technology, but when it comes to writing and debugging novel codes, it requires monitoring, testing, and giving lots of instructions. An educator needs to be patient and has to think like a coder to aid the GPT-4 in creating a working code.

Remember that GPT-4 is blind

GPT-4, for now, is blind. In the future, GPT-4 will include vision capability, allowing users to upload an image as a part of the prompt. For now, there is no way for GPT-4 to see how your game or screen looks like. When giving instructions in a prompt to either make the first draft or revise the game, you have to tell the AI where to place what and exactly which part of the game needs to be changed.

GPT-4 is not a graphic designer

Don’t expect GPT-4 or ChatGPT to make the next Candy Crush or Minecraft. For now, GPT-4 is capable of making basic user interface with basic paragraphs, basic coloring, and basic animations. If you want specific visual elements placed in your screen, you have to tell GPT-4 exactly what and where to put in. However, AI technology is continuously evolving, and we won’t know what GPT-5, which does not exist yet, will be capable of. It may be able to create more sophisticated user interface.

Provide images to GPT-4

If you want to include an image in your game or screen, host your image somewhere (e.g. imgur) and provide the URL to the GPT-4 in your prompt. Otherwise, GPT-4 will use an image that may be copyrighted or use an image whose URL is no longer valid. This is because the training data for GPT is only until 2021, so GPT is unaware of the status of any URLs after 2021.

You need to be creative in instructing GPT-4

GPT-4, like all other AI, is a black box. Even creators of GPT-4 don’t know how it arrives at a specific conclusion given a prompt. If one prompt does not solve the problem, you have to reword your prompt and try again. For example, the puck and the stick didn’t move after telling the AI to fix it three times. When the AI was told to show the internal parameters such as velocity and positions, the problem became apparent. By informing the AI that the positions were showing NaN, it successfully created a working code. This shows that an educator has to be in the driver’s seat, directing the AI in the creation process.

GPT-4 isn’t perfect

Despite several attempts that telling the GPT-4 to include a picture of a hockey stick and a puck, it just couldn’t get it right. Also, there is a slight gap between the stick and the puck that GPT-4 could not solve. An educator should be aware of the limitation of GPT-4 when creating a game or demonstration.

How GPT Technology can Help Students

As demonstrated in this article, GPT-4, or ChatGPT Plus, enables educators to create custom games and demonstrations tailored to their students and designed to fit specific lesson themes. This customization has the potential to enhance students’ learning experiences.

Another intriguing possibility is to have students create their own games or demonstrations using GPT technology, effectively making them creators. For example, educators could have students create a demonstration illustrating the relationship between force and energy. Such activities would empower students to take charge of their own learning while allowing them to express their creativity, leading to better understanding, retention of information, and enjoyment. Additionally, these experiences would help students develop critical thinking and communication skills as they interact with and provide instructions to GPT-4. Creating the game featured in this article involved a fair amount of thought and trial-and-error for me personally. While sometimes frustrating, it was mostly enjoyable and certainly demanded critical thinking. This creative process can be an invaluable learning experience for students, potentially sparking their interest in STEM fields.

AI Can Co-exist with Educators, not Replace Them

Many people are concerned that AI will take away their jobs. A report by Goldman Sachs estimates that 25% to 50% of white-collar jobs may be replaced by AI. However, AI technology also holds tremendous promise to help workers achieve things they couldn’t achieve before, whether due to lack of expertise, time, or budget. One example is creating custom educational games for students. Granted, the game mentioned in this article is not impressive by any means, but it serves as a proof-of-concept that educators can create their own coded demonstrations without using any programming skills. As this example illustrates, AI is not a replacement for educators’ talents, experience, or expertise. Instead, it functions as an augmentation of their skillset. Educators still need to be in the driver’s seat. Rather than just creating worksheets and recorded videos, AI technology enables educators to accomplish much more, including making custom browser games.