“Code” Math Games with ChatGPT + Google Sites

/
Text input area with an arrow pointing at the Google Sites logo with embed code on it

I made an online game, and I want to tell you about it.

The Percent Progress Game is played by guessing the percentage of a progress bar that is filled with color. The actual percentage is revealed after the guess is submitted, and the difference between the guess and the actual percent is calculated as the score for the round. The game is played over ten rounds, and the final score is displayed after all ten rounds have been completed.

Here's the link to play The Percent Progress Game:
sites.google.com/view/tppgame/tppgame

 
 

<ProudDad> My fourth grade twins actually enjoy playing this game, and are really, really good at estimating the percentages. They often score between 25 and 40 points after 10 rounds. Their number sense is impressive! </ProudDad>

A game like this probably exists somewhere online, but I set out to make my own. The first step was to think through the game and write a prompt I could input into ChatGPT. I don’t have to know HTML code because ChatCPT generates the code. Click to see my entire prompt.

 
 

After entering the prompt, ChatGPT produced embeddable code. I copied the code.

 
Screenshot of generated code from ChatGPT
 

I created a new Google Site and inserted an Embed element. I made sure to choose Embed Code. I pasted the code from ChatGPT.

 
Screenshot showing the Embed button going to the Embed Code box
 

After inserting the embed code, I clicked the Preview button in Google Sites. The code is run, and I try out the game. It wasn't perfect the first time, so I went back to ChatGPT and told it to make some changes. Changes included keeping the progress bar on the screen when the answer was revealed and displaying which round number the player is on.

ChatGPT generated new embed code, which I copied. I went back to Google Sites and deleted the previous code and replaced it with the new code. I clicked the Preview button and tested out the updated game. It needed more refinements, so I went back to ChatGPT.

The trial and error process is a little grueling. It is frustrating that ChatGPT is slow, and didn't always complete the code. And, sometimes the code changed in ways I did not intend.

Tom Barrett has written Uplevel your prompt craft in ChatGPT with the CREATE framework. Tom’s CREATE acronym really does capture what you need to do to effectively prompt ChatGPT.

 
 

After tinkering and evaluating the output, I added a title to the Google Site and published it. I copied the URL, and now anyone can play The Percent Progress Game!

Maybe The Percent Progress Game will provide inspiration for others to create their own math games. I've unsuccessfully tried to create other games, including pie chart and angle measuring games—but I'll keep trying.

I was successful at making The Mentally Make 1,000 game with ChatGPT and Google Sites. Like the The Percent Progress Game, it took trial and error to get the result I wanted (and it still doesn't function exactly as I'd like). My twins were again rockstars at playing The Mentally Make 1,000 game.

 
 

Note that ChatGPT's Terms of Service state: "You must be at least 13 years old to use the Services. If you are under 18, you must have your parent or legal guardian’s permission to use the Services.”

Bonus Idea

I've used the combination of ChatGPT and Google Sites to make a random compliment generator. I explain this in my short TikTok video.