ChatGPT AI - Cloze Game (Difficulty 4)

CreatiCode

Introduction

In a “cloze game” (also called a “cloze test”), you fill in the missing word in a sentence. It’s a great way to practice telling similar words apart.

In this tutorial, you’ll make an app that uses ChatGPT to create cloze games from any words the user types in. You’ll learn how to write the right kind of prompt to ask ChatGPT for help, and how to make your app understand the response. You’ll also design a more advanced user interface, which makes this a good project for learning how to use the widget blocks.

When you’re done, your project will look like this:

Step 1 - A New Project

In the CreatiCode playground, create a new project named “Cloze Game”. Remove the “Sprite1” block, as we will only need the “Empty1” block.

Step 2 - Send Prompt and Print Response

In the next few steps, we’ll focus on writing a good prompt for ChatGPT. After that, we’ll build the part of the program that uses ChatGPT’s reply. This is how most AI apps are built: we start by making sure ChatGPT gives us the right kind of answer. If it doesn’t, there’s no point in building the rest of the app.

Since the user won’t be talking directly to ChatGPT, we don’t need to send any system messages. We’ll just use a regular request block like this:

Remember: when the request is in “waiting” mode, we wait until the full response is saved in the “response” variable before we move to the next block, which will print it in the console. With these blocks in place, we are ready to design and test the prompt.

Step 3 - Start with A Simple Prompt

The cloze game is very common, so ChatGPT has already seen lots of examples. We can begin by just asking it to make a cloze game and there is no need to explain what it is. Later, we’ll improve the prompt depending on the results we get.

For now, we can “hardcode” (type in ourselves) three words like “run, runs, ran.” We’ll let the user enter their own words later.

Try running your project a few times. Look at what ChatGPT gives back. What problems can you find? How can you improve the prompt to fix them?

Step 4 - Analyze ChatGPT’s Response

Here are a few example outputs printed in the console panel. Note that the “Empty1” at the beginning just means the log is printed from that sprite, so you can ignore that.

Here is a summary of the key issues:

The reply might be too long. That can exceed the word limit and cause the user to wait longer.
Sometimes you don’t get exactly 3 questions. Or it comes as one big paragraph, which is harder to use for our app.
Sometimes the answers are shown, sometimes not. We don’t want the user to see the answers, but our code still needs them.

The first 2 issues are relatively easy to fix. Can you give it a try before moving on to the next step?

Step 5 - Fix Issues with Token Count and Question Count

We can use the following request to fix some of the problems fairly easily:

in 60 words, create a cloze game with 3 questions for these words: run, ran, runs

Here are some example outputs from this updated prompt:

Step 6 - Specify Response Format

To make it easy for our program to process the response, we need to make the response strictly follow a predefined format. To do that, the best solution is to specify the format ourselves in the prompt.

For example, this is an updated prompt:


in 60 words, create a cloze game with 3 questions for these words: 
run, ran, runs

use this output format:

QUESTIONS:

1.
2.
3.

ANSWERS:

1.
2.
3.

Now the output looks better (still not perfect):

Next, we need the answers to be ONLY the hidden words themselves, not entire sentences. That way, our program can easily parse the output. Can you try to make this change?

Step 7 - Answer Format

We don’t want full sentences for the answers—just the missing word. There are two ways to do that:

First, say clearly in the prompt: only show the hidden word for each answer.

Second, show ChatGPT an example of how the format should look.

Here’s an updated prompt that does both:


in 60 words, create a cloze game with 3 questions for these words: 
run, ran, runs

use this output format (for each answer, only show the hidden word):

QUESTIONS:
1.
2.
3.

ANSWERS:
1. hidden word
2. hidden word
3. hidden word

With this new request, the response from ChatGPT will be fairly consistently formatted like this:

Now that we have optimized the ChatGPT request, we can begin working on the user interface.

Step 8 - Let the User Enter Words

Next, we need to let the user type in three words they want to use in the cloze game.

We’ll do this by adding textbox widgets for the words. We’ll also add labels next to the textboxes to mark them as “A”, “B”, and “C”. This will help later when the user chooses the missing word from a dropdown.

Here’s what it might look like:

To keep things organized, create a new custom block and call it “word inputs”. Add the widget blocks yourself and use the Widget Position tool to adjust their sizes and positions.

Important: Detach the ChatGPT block for now — we don’t need to call it while building the interface. It would make things slower.

Here is an example program:

Step 9 - Show the Questions

Once the user has typed in three words and clicks a “Create” button, we’ll send the request to ChatGPT. When the questions come back, we’ll show them in a multi-line textbox that the user can read but not edit.

We will define a new custom block “add questions” and add these 2 widgets:

Step 10 - Create the “choices” List

At the bottom of the screen, we’ll add dropdowns so users can pick the right word for each sentence. For that, we’ll create a list called “choices” and add the letters “A”, “B”, and “C” to it.

Note: Sometimes the widgets might cover part of the stage, so you can’t see the list clearly. To fix this, click the green flag button without running any other blocks. That will clear the stage:

Step 11 - Add Answer Dropdowns

Now it’s time to show the dropdowns where the player picks their answers, along with a “Submit” button:

To keep your code neat, group the new blocks under another custom block called “add answers”:

By now, we have completed the game interface. For the last few steps, we will need to handle user actions with the help of ChatGPT.

Step 12 - Compose the ChatGPT Request Using User Words

Earlier, we hardcoded the words as “run, runs, ran.” Now we’ll switch to using the user’s input words in the request we send to ChatGPT.

To make our code easy to read, we will create 3 variables and join them together: task, words and format. We will store the final request in another new variable called “request”.

task will be the part of the request before the 3 words. It describes what we need:

in 60 words, create a cloze game with 3 questions for these words:

words contains the 3 user words, separated by commas.

format tells ChatGPT exactly how to format the response:

use this output format (for each answer, only show the hidden word):

QUESTIONS:
1.
2.
3.

ANSWERS:
1. hidden word
2. hidden word
3. hidden word

Here are the blocks to compose the request when the user clicks the “Create” button:

Step 13 - Send the Request and Show the Response

Now that we’ve built the request, we can send it to ChatGPT and show the reply in the textbox for the user to read:

Try to test it out with some new words:

Step 14 - Remove the “QUESTIONS:” header

Right now, the output always starts with “QUESTIONS:”, which makes the formatting look off.

To fix that, we can use a replace block to delete that line:

As shown, you can detach these blocks from the ChatGPT request and run them alone, so we won’t need to rerun the ChatGPT request. Now we get a better-formatted question list:

Step 15 - Extract Questions and Answers

The ChatGPT response includes both the questions and the answers. But we only want to show the questions to the user.

We can split the response into two parts using the word “ANSWERS:” as the divider.

The first part (before “ANSWERS:”) goes into the questions variable.
The second part (after “ANSWERS:”) goes into the answers variable.

Now the textbox only shows the questions:

Step 16 - Check the Player’s Answer to Question 1

When the player clicks the Submit button, we’ll check if their answers are correct.

Start by making a block called check answer 1.

It will figure out which word the player picked for question 1 and save it in a variable called user answer:

For example, suppose the 3 words are A) “word1”, B) “word2” and C) “word3”. If the user has chosen “B” for the first question, then the “user answer” variable will be set to “1. word2”.

Make sure there’s a space after the dot! Otherwise we won’t be able to compare it with the answers from ChatGPT.

Step 17 - Verify the User’s Answer

Now let’s check if the user’s answer matches one of the correct answers from ChatGPT.

If they’re right, we’ll turn the dropdown green. If not, it turns red:

Here is how to achieve this:

Step 18 - Check the Other 2 Answers

Lastly, we just need to check answer 2 and answer 3 in a similar way.

Final Result!

When you’re done, your full cloze game app will be ready to play:

Additional Challenges

This tutorial only covers the core logic of the project to keep it short. There are a lot of areas where you can improve upon it or adapt it. Here are some ideas for you to try:

You might find that ChatGPT tends to order the 3 questions the same way as the 3 input words, so the correct answers are always A/B/C. Can you modify the prompt so the 3 questions are randomly ordered? Alternatively, you can change the order of these 3 input words randomly in your prompt that’s sent to ChatGPT.
Instead of having the user input the 3 words, use a predefined list of words. For example, define a list of 30 words, and run through them 3 by 3. This would be useful for a teacher who wants to test students on some specific words.
Use the “streaming” mode for ChatGPT, so that the user can see the questions as they get generated. It will reduce the waiting time a lot.
Add colors to the widgets to make them look better.
Make sure the questions from ChatGPT are properly formatted. For example, you need to avoid getting questions like this:

Fix “run” vs “runs”: sometimes one of the words from the user input contains another word. For example, suppose the words are “run, ran and runs”, and an answer is “1. runs”. Then, when we check if the correct answers contain “1. run”, we would get a match, though that’s the wrong answer.