ChatGPT AI: A Quiz Writer (Difficulty: 3)

CreatiCode

Introduction

You have learned how to utilize ChatGPT to develop smart chatbots. However, it can be used in many other types of projects, and the interface does not have to be a chat window.

In this tutorial, you will learn to build a smart “quiz writer”. The user can specify any topic, then our program will use ChatGPT to generate a quiz question on that topic, and then evaluate the user’s answer. You can even use this tool to help yourself prepare for an upcoming test!

Step 1 - An Empty Starting Project

Create a new project, and name it “ChatGPT- Quiz Writer”. Delete the sprite with the dog, as we will only use the “Empty1” sprite for coding.

Step 2 - The Topic Input

First, let’s add a label that says “Topic”, and an input textbox for the user to write the topic. We’ll name these 2 widgets “topiclabel” and “topicinput”. Note that the Y position of the label is 100, so they won’t overlap on the stage.

They will look like this:

Step 3 - Move Widgets Using the “Widget Position” Tool

Now we need to move these two widgets to the top row of the stage window, so we can add other widgets below them. You can manually specify the position and size of each widget if you are comfortable with math.

However, for a more visual solution, you can utilize the “Widget Position” tool like this:

Run the project first so the widgets appear on the stage;
Click the Widget Position tool button to turn it on;
Drag/resize the widgets;
Click the Widget Position tool button again to turn it off.

As you drag and resize a widget, the X/Y/Width/Height values in the corresponding block are automatically changed, so the next time you run the program, the widgets will directly appear in the new positions:

Of course, you can still manually adjust the position and size numbers at any time. For example, if the Y positions of these two widgets are off by a small value, you can manually set them to be the same value.

Step 4 - Add a “Go” Button

Next, we will add another button that says “Go”, which will tell ChatGPT to generate the quiz.

By default, the button will appear at the center. As a practice, please place it in the top right like this:

Feel free to update the block directly or use the Widget Position tool. Try to complete the change before looking at the solution code below.

Your program should be similar to this afterward:

Step 5 - Add the Question Box

Now we need to add a large text box to display the quiz generated by ChatGPT. It should allow multiple lines of text, but does not allow any user input (so it is “read-only”), since the user should never be allowed to change the quiz question. Practice positioning this textbox yourself.

Your program should be similar to this:

Step 6 - 2 New Custom Blocks

Before we add more widgets, it looks like this stack of blocks may be getting too long. Therefore, it is a good time to define two new custom blocks to help organize the program.

Please define two new blocks, “add question widgets” and “add answer widgets”, and place them right below the green flag block. Then, please move all the existing blocks for adding the widgets into the definition of “add question widgets”.

Step 7 - 4 Answer Buttons

Now we will add blocks to add 4 buttons in the definition of “add answer widgets”. Their names are simply A/B/C/D. Feel free to practice positioning all remaining widgets on your own.

They look like this:

Step 8 - The Feedback Box

When the user clicks one of the 4 buttons, we will ask ChatGPT to check if the user’s answer is correct. Therefore, we need to add another text box at the bottom to display ChatGPT’s feedback. Please add it as a multi-line, read-only textbox.

Now the interface is ready:

Step 9 - Compose the ChatGPT Request

Suppose the user inputs a topic at the top, then clicks the “Go” button. At this point, we need to compose a request and send it to ChatGPT. The request should include the topic written by the user. We can write our request first, then join it with the user’s input.

To store our request, we can define a variable “request”, and set its value when the “Go” button is clicked. The request will start with "write a quiz question with 4 choices of A/B/C/D. The topic is: ", which is joined by the value of the input box. Notice that we are forcing ChatGPT to always give us a question with exactly 4 choices.

Step 10 - Send Request to ChatGPT in Streaming Mode

Now we are ready to let ChatGPT do the magic and give us a random question. To show the question as soon as possible, we will use the “streaming” mode. To allow a fairly complex question, we can set the max length to 400.

Additionally, this should be a new chat, as each time we click “Go”, we do not need ChatGPT to recall the previous questions. If we use the continue mode, we will reach the token limit of ChatGPT after a few questions and have to restart.

We will need to create a new variable called “question” to store the question generated by ChatGPT.

Step 11 - Show the Question

Now we need to show the question as ChatGPT generates it. We will use a “repeat until” loop to keep updating the question box with the value of the “question” variable. You can copy the emoji for the checkmark here (may look grey here but it will be green when pasted into the block): . Note that we are using a “repeat until” block: the content of the textbox will be updated right before the checkmark emoji is appended to the question.

Now we can test if ChatGPT will generate the question properly:

Step 12 - Handle the User Answer

When the user clicks on one of the 4 answer buttons, we need to ask ChatGPT to check it. To do that, define a new custom block named “check answer”, which takes the “answer” as input:

We will run this new block when the user clicks any of the 4 buttons:

Step 13 - Compose the Feedback Request

In the “check answer” block’s definition, we need to compose a new request to ChatGPT: we will inform ChatGPT of the question, as we are not asking it to remember the question. We also need to tell ChatGPT the user’s answer, then ask ChatGPT whether the answer is correct.

We can compose a 4-part request using the “join” block like this:

Step 14 - Display the Feedback from ChatGPT

The remaining work is very similar to how we get the question from ChatGPT. We send the request, then display the result in the “feedback” textbox. You can duplicate the previous blocks and make some changes to them. Note that the session type is “new chat”, since we don’t need ChatGPT to remember the earlier messages about generating the question.

Now we have a working version of the quiz writer!

Step 15 - Highlight the User’s Answer

To make our quiz writer easier to use, we need to improve the user interface slightly. The most important change is to highlight the answer selected by the user.

We can change the button’s background color to yellow when it is clicked:

Step 16 - Reset Button Colors

When the user generates a new quiz question, we need to reset the color of all the answer buttons back to unselected. We can do it when the “Go” button is clicked:

Step 17 - Testing

Finally, you need to conduct further testing to ensure the user experience is seamless. Here is a final demo:

Additional Challenges

This quiz writer is an elementary version. There are many areas where you can improve it. Here are some ideas for you to try:

Other Question Format: For example, you can change the question format from multiple-choice to short answers. The user would need to enter the answer in another text box.
Improve the Prompt: The current request we send to ChatGPT is straightforward, so we may sometimes receive unexpected answers from ChatGPT. For example, sometimes the question generated by ChatGPT also contains the answer. For another example, in this feedback, the answer is wrong, but ChatGPT still says “Great job!” because it is a “great question”. Try to improve the request to avoid such issues.

Better Styling: You can change the text style, color, and background color of all widgets to enhance the interface’s appearance.
Keeping Track of Scores: You can help the user keep track of how many questions were asked and how many were answered correctly.
Pre-generated Questions: Sometimes, you may not want to generate questions on the fly, since you have no control over what ChatGPT may ask. If you have a fixed topic, you can instruct ChatGPT to create 20 questions for you beforehand, and store these questions and their answers in a list or table. Then, when the user runs the program, you can randomly select a question from your pool of questions.