ChatGPT AI: A Quiz Writer (Difficulty: 3)

CreatiCode

Introduction

You have learned how to use ChatGPT to build 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 the program will use ChatGPT to help generate a quiz question and also evaluate the user’s answer. You will also practice building a simple app using buttons and textarea.

Step 1 - An Empty Project

Create a new project, and name it “ChatGPT- Quiz Writer”. Delete the sprite with the dog, and we will just 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”.

They will look like this:

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

Now we need to move these 2 widgets to the top row of the stage window, so we can add other widgets below them. This can be easily done using the “Widget Position” tool like this:

You will find the X/Y/Width/Height values of the 2 blocks are automatically changed for us, so the next time you run the program, the widgets will directly appear in the new positions:

Of course, you can still change the position and size numbers manually at any time.

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. Please use the “Widget Position” tool to place it in the top right like this:

Your program should be similar to this afterward:

Step 5 - Add the Question Box

Now we need to add a big textbox to show the quiz generated by ChatGPT. It should allow multiple lines of text but does not allow any user input (“read-only”). Practice using the widget position tool to position this textbox.

Step 6 - 2 New Custom Blocks

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

Please define 2 new blocks “add question widgets” and “add answer widgets”, and run them in the main stack. We will also move all the existing blocks 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.

They look like this:

Step 8 - The Feedback Box

When we click one of the 4 buttons, we will ask ChatGPT to tell us if we got it correctly. So we need to add another textbox at the bottom to show ChatGPT’s feedback. Please add it as multi-line and read-only.

Now the interface is ready:

Step 9 - Compose Request to ChatGPT

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 what the user wrote as well. 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:

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.

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

We will need to make another new variable “question” to hold 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 different here from the CreatiCode playground):

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

Step 12 - Handle User Answer

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

Now we can run this new block when the user clicks 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 tell ChatGPT what’s the question since we are not asking ChatGPT to remember it. We also need to tell it the user’s answer, then ask ChatGPT whether it 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:

Now we have a working version of the quiz writer!

Step 15 - Highlight the User’s Answer

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

We can change that button’s background color when it is clicked like this:

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 do some more testing to make sure the user experience is smooth. Here is a final demo:

Step 18 - Further Improvements

This quiz writer is a very basic 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 write the answer in another textbox.
Improve the Prompt: The current request we send to ChatGPT is very simple, so sometimes we may get strange answers from ChatGPT. For 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 Colors: You can change the text style/color and background color of all the widgets to make the interface look better.
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 the questions on the fly, since you have no control over what ChatGPT may ask. If you have a fixed topic, then you can ask ChatGPT to generate 20 questions for you, and store these questions and their answers in a list or table. Then when the user runs the program, you can randomly select the question from your pool of questions.