ChatGPT AI - Cloze Game (Difficulty 4)

CreatiCode

Introduction

In a “cloze game” (also called the “cloze test”), you fill in missing words in a sentence. It is a great exercise for learning the difference between similar words.

In this tutorial, you will build an app that uses ChatGPT to generate cloze games for any words the user inputs. You will learn how to design the request (prompt) to ChatGPT so it is easy to process the response in your code.

The completed project will look like this:

Step 1 - A New Project

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

Step 2 - Send Prompt and Print Response

In the first few steps, we will focus on designing a good prompt for ChatGPT. After that, we will add the blocks for processing the response from ChatGPT.

Since our users will not talk to ChatGPT directly, we won’t need to send any system requests. We will only need a normal request block like this:

Recall that in the “waiting” mode we wait for the entire response to be stored in the “response” variable before running the next block, which prints it out in the console.

Step 3 - Start with A Simple Prompt

Since the cloze game (or cloze test) is a very common learning method, ChatGPT has already seen plenty of examples of it. We can start by directly asking ChatGPT to create the cloze game for us. We will refine our prompt later based on what we get.

For this step, we can simply “hardcode” 3 words ourselves, like “run, runs, ran”. We will work on the user input later.

Please try to run your project a few times. Observe the issues in ChatGPT’s output, and think about how you can fix them by improving the prompt.

Step 4 - Analyze ChatGPT’s Response

Here are a few example outputs from ChatGPT:

Here is a summary of the key issues:

The response may be too long. This will not only exceed the word limit, but also make the user wait too long.
The number of questions is not fixed, and sometimes a single paragraph is given instead of a list of questions. It makes it harder for us to create the user interface later.
The answers are sometimes not given, and sometimes given. We do not want to show the answers to the user, yet our program does need to get the answers from ChatGPT.

The first 2 issues are fairly easy to fix. Can you give it a try before moving 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 new example outputs:

Step 6 - Specify Response Format

To make it easy for our program to process the response, we need to make the response strictly follow some predefined format. To do that, the best solution is to specify the format ourselves. For example, this is an updated request. Note that you can use a comment in your project to serve as the text editor, so that you can format the output format using multiple lines.


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):

To keep it simple, we need the answers to be the hidden words themselves, not sentences. In addition, shorter answers would shorten the response time of ChatGPT. Can you try to make this change?

Step 7 - Answer Format

There are at least 2 ways to tell ChatGPT the answer format we need.

First, we can describe it like this: for each answer, only show the hidden word.

Second, we can modify the output format example to show ChatGPT what we need.

Here is an updated request with both changes:


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 we are done with optimizing the ChatGPT request, so we can start to work on the user interface.

Step 8 - Word Inputs

First, we need to allow the user to input 3 words. This can be done using “textbox” widgets. We will also use label widgets to label these words as “A”, “B” and “C”. So later the user just needs to select from A/B/C when they try to guess the hidden word.

To keep the main program short, we will define a new block named “word inputs”. Note that you should detach the ChatGPT block for now, since we don’t need to run ChatGPT while building the user interface. It will be too slow.

Step 9 - Add Questions

After the user has input the 3 words, he/she will click a “Create” button to create the cloze game. When we receive the questions from ChatGPT, we will display them in a multi-line read-only textbox.

We will define a new custom block “add questions”:

Step 10 - The “choices” List

The bottom of the stage will contain dropdowns for the user to choose which word goes to which question. We need to create a new list named “choices”, and add the letters “A”, “B” and “C” to it.

One issue you might have is that the stage is already covered by widgets, so you won’t see the list. To clear up the stage, the trick is to click the green flag button without running any block like this:

Step 11 - Add Answers

Now we can add the answer dropdowns for the 3 questions, and a “Submit” button:

We can use a new custom block “add answers” for this step:

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

In the first few steps, we have “hardcoded” the 3 words to “run, runs, ran”. Now we will need to make our request “dynamic”: no matter which words the user input, we will include them in the request. 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 will contain the 3 words from the user input, separated by commas.

format will describe the output format for ChatGPT:

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 - Get the Response from ChatGPT

Now we can use the ChatGPT block to send the request, then we will display the response in the “questions” textbox to review it:

Try to test it out with some new words:

Step 14 - Remove the “QUESTIONS:” header

Let’s first fix a small issue with the response. It always starts with “QUESTIONS:”, which makes our question numbers not aligned. Although we can adapt our request to ChatGPT to fix it, it is also fairly easy to fix it using a “replace” operator block like this:

Note that you can detach these blocks from the ChatGPT request, so we won’t need to rerun the request. Now we get a better-formatted question list:

Step 15 - Extract Questions and Answers

Since the response includes both questions and answers, we need to split it into 2 parts, and only show the questions to the user. We can use the “split” operator, and use “ANSWERS:” as the separator. All words before “ANSWERS:” will be stored in the “questions” variable, and all words after “ANSWERS:” will be stored in the “answers” variable.

And now we are only showing the “questions” variable in the textbox:

Step 16 - Compose the User Answer for Question 1

When the user clicks the “Submit” button, we need to check the choices made in the 3 dropdowns at the bottom against the correct answer from ChatGPT. We can define a new block “check answer 1”, which checks the answer to the first question. It will first need to compose the user’s answer into a phrase based on the user’s choice, and store it in a variable named “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” will be set to “1. word2”. Note there is a space after the dot.

Step 17 - Verify the User’s Answer

Now we can check if this user’s answer is part of the answers provided by ChatGPT. Depending on whether the user got a question right or wrong, we can set the dropdown to a different color:

Here is how to achieve this:

Step 19 - Check the Other 2 Answers

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

Here is the final demo of the project:

Enhancements

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 randomized? Alternatively, can you change the order of these 3 input words in your prompt sent to ChatGPT?
Instead of having the user choose 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.