Annie Conda added this page on March 15, 2025

Let's begin your second challenge for Level 3!

In this challenge, you'll make the text more interactive, so that it highlights and changes color when you click an answer, depending on whether you got the answer right. If the answer is wrong, the text you clicked changes to red. If the answer is right, the text changes color to green!

To find the Level 3 Challenge 2 code template, open the Level 3 folder, the Challenges folder, and then the Challenge 2 folder. You should already have the files downloaded onto your computer (see Load the IncrediCoders Files). Open the ClassroomQuizChallenge2.py file in Visual Studio Code to build the program by following along with my instructions below!

On Line 1, from init import *, initializes the program (init is short for initialization). This includes code that sets up the file path for the images and text file, gets the fonts ready for this game, sets the window size, and loads the images. This statement allows you to use all the information in that file, for the rest of your program.

On Line 3, you'll see the comment, #We pull each line of text from the file into a list. As usual, comments don't do anything when you run the code (they just tell you information when you're looking at your files). This comment tells you what you will be doing for the next line (for Line 4). In this case, you will put the text from the file into a list.

On Line 4, the code TRIVIA = read_file('Assets/Trivia.txt') takes the trivia text from the Trivia.txt file and puts it in the TRIVIA list variable.

On Line 6, you'll see the comment, #We now have a list of variables that holds our current question, correct answer, and the two wrong choices, in that order. This comment continues onto another comment on Line 7, #We use these variables to display text on the screen. You will create a Python list that holds the text from the file for the current question (on Line 8), the correct answer (Line 9), and the two wrong choices (Lines 10-11).

The comments on Lines 6-7 are an example of using multiple lines of code for a code comment. This helps you explain a section of code, so that the reader can fix the code (if there's a bug), add features or capabilities to the code, or to copy the code for a different application (and save time in the process).

On Line 8, the code question = TRIVIA[0] assigns the question variable a spot in the TRIVIA[] list for the current question. This is the question that the player will be asked on the screen. Line 8 sets the string of text (the question) to the first place in the TRIVIA list that we created on Line 4. The first place in a Python list is the 0 (zero) position.

On Line 9, the code answer = TRIVIA[1] accesses the second place in the TRIVIA[] list, which is the correct answer to the question. (In the Trivia.txt file, the correct answer comes right after the question. We later will randomize the order of the three answers as they appear on the screen, so that the player won't know which one is the right answer, based on the order they're displayed.) Line 9 assigns the value to the answer variable, so that it's clear what the answer is.

On Line 10, the code wrong_choice_1 = TRIVIA[2] creates the wrong_choice_1 variable for the first of two wrong answers. (Every question has one correct answer and two wrong answers.) The code then assigns the #2 spot in the TRIVIA[] list to the wrong_choice_1 variable. As I mentioned above, we do this so that we can randomize the order of the questions. (This way the questions will likely be in a different order almost every time that the player takes the quiz. So, the player can't memorize the order of the answers to know which answer is the correct answer.)

On Line 11, the code wrong_choice_2 = TRIVIA[3] creates the wrong_choice_2 variable for the second wrong answer. The code assigns the #3 spot in the TRIVIA[] list to the wrong_choice_2 variable. Because Python lists (and all arrays) start on spot #0, this is our fourth spot in the TRIVIA[] list. (Back on Line 8, we assigned the #0 spot to the question variable.)

On Line 13, the code ANSWER_CHOICES = [answer, wrong_choice_1, wrong_choice_2] creates the new ANSWER_CHOICES type list variable.

Type List Variable: A type list variable is a type of variable that lets you list a few different items in it. It's a little like a list (or array), but you usually create it just for a few items that you won't need to revisit. In our case, we're putting three different variables in the ANSWER_CHOICES type list variable. This is going to allow us to randomize (or mix up) the order of these three variables, so that when they appear on the screen, the player isn't going to know which one is the correct answer (at least not by memorizing the order of the answers).

On Line 13, for the three variables that we add to the ANSWER_CHOICES type list variable: The first place in this list is the correct answer, the second place is the first wrong answer, and the third place is the second wrong answer.

On Line 14, you'll see the code: randomize_answers(ANSWER_CHOICES) #Shuffles the first set of answer choices. This line randomizes the order of the answer and the two wrong choices, so that when the three answer choices are displayed on the screen, the player won't know which is the correct answer, based on the order of the answers.

Also, at the end of Line 14, you'll see the comment, #Shuffles the first set of answer choices. This is a common way to use comments in order to explain to the reader what that specific line of code does. That way, if someone opens up your code file, they can understand what's happening with each line of code. Not only does this help if they're trying to fix the code (like to fix a bug), but it's also helpful in case they want to reuse the code for another program. Not all lines of code (nor most lines of code) have a comment on the end like this one; usually just lines of code where the author thinks someone might need help understanding what the line does and why it exists.

On Line 16, the code line_number = 0 creates the new line_number variable and sets it to 0. This variable is used mostly by the init.py file to count the lines of the TXT file. The program uses this information to properly move on to the next question in the sequence and to find out when the game runs out of questions in the TXT file (because that's when the game ends).

On Line 17, the code number_of_questions = 12 creates the number_of_questions variable, which sets the total number of questions in the game. This variable is mostly used by the init.py file to track when you run out of questions, in order to end the game. For this version of the game, we set the number of questions to 12.

On Line 19, you'll find the code display_intro_screen() #Displays the intro screen. The display_intro_screen() function runs a block of code that lives in the init.py file. The block of code displays the intro screen until the player clicks near the "Click here to start" text to start the game.

On Line 21, the code running = True creates the running variable and sets it to the True value. This means that the program (the main part of the game) is now running.

On Line 23, you'll find the code comment, #This while block runs the game until the player closes the window. This commented line describes what will be run in this while block. The question screen will be shown, and then when you run out of questions, it displays the end screen, with a message from Mrs. Codala. The game ends when the player closes the window.

Line 23 is an example of including a code comment on its own line. This tells the programmers who are reading your file what the next section of code does, to give them more context. This information is helpful if they need to update the code.

On Line 24, the code while running: starts a while loop that runs the entire game. It displays each new question until the user closes the window or until the game runs out of questions. On Line 21, we set running to the True value, so all the code inside the while loop continues running until the value of running is changed to False instead. That happens on Lines 28-29, when the player clicks the close button on the window. At the end of the file, on Line 94, if the game runs out of questions, then running is set to False (in the init.py file). The while loop stops running, so the screen doesn't refresh with new questions.

On Line 25, you'll find the code, display_question(question, ANSWER_CHOICES) #Displays the new question and the three answer choices. As the comment describes, the display_question() function displays the new question and the three answer choices on the screen. Because this is a loop, this code runs for each new question, and it changes the screen each time, displaying the new questions and answers. This function is defined in the init.py file.

On Line 26, the code EVENTS = pygame.event.get() sets the EVENTS variable to the list that came from pygame.event module. The Pygame extension comes with modules like this one, that capture player clicks. Our code puts that information into the EVENTS variable so that the program knows where the player clicked.

On Line 27, you'll see the code for event in EVENTS: This is a nested for loop, which means it is a for loop within another loop. In this case, the for loop is nested within our while loop. The code that's in this for block goes from Line 27 until the end of the file (Line 96). This block of code is going to run until there are no more events coming from the pygame.event.get() function, which is stored in the EVENTS list.

This loop can be thought of as a "for each" loop. It allows us to access every element in the EVENTS list and assign it each time to the events variable. This list runs once for each event that happens (such as a mouse click).

On Line 28, you'll find the code, if event.type == pygame.QUIT: #If the player clicks the Close button, it exits the game. This if statement checks to see if the user clicks the Close button on the window. If so, Line 29 runs, which closes the program and the window. You'll code like this in every Pygame-based Python game. Without these lines of code (Lines 28-29), the window wouldn't close when the player clicks the Close button on the window.

On Line 29, the code running = False sets the variable running to False to exit the loop and close the game. The while loop on Line 24 runs the game indefinitely, until running is set to False.

On Line 30, the code mouse_position = pygame.mouse.get_pos() sets the variable mouse_position to a Pygame function that captures the coordinates of where your mouse is on the screen. The get_pos() function stands for "get the position."

On Line 31, you'll find the code, if event.type == pygame.MOUSEBUTTONDOWN: #If the player clicks the mouse. This if block (Lines 31-96) includes the rest of the code for the game. If the player doesn't click the mouse at that mouse coordinate position (determined on Line 30), then the while loop runs again as the player moves the mouse to a new position.

On Line 32, you'll find the code comment, # Check to see if player has clicked on one of the possible answers. This comment uses a full line to explain what's required for the if block (from Lines 33-92) to run. This if block only runs if the player clicks one of the three possible answers.

On Line 33, you'll find the code, if answer_1_rect.collidepoint(mouse_position) or answer_2_rect.collidepoint(mouse_position) or answer_3_rect.collidepoint(mouse_position): This line of code sets up the three embedded if statements on Lines 34, 53, and 72. This line of code makes sure the player clicks on one of the three possible answers. This ensures that nothing happens unless the player clicks one of the answers.

On Line 34, you'll find the code, if answer_1_rect.collidepoint(mouse_position): #If the player clicks the 1st answer on the top. This is a nested if statement that only runs if the player clicks the top answer. You might notice that the hitbox for each answer is a little bigger than the text, so that you can "miss the text" a little with your mouse and still get the desired result (of clicking the answer).

On Line 35, you'll see the code, if ANSWER_CHOICES[0] == answer: #If it's the correct answer. Python checks to see if the first/top answer that the player chose is the correct answer. If it is the correct answer, then Python runs the code below it that is indented (the code in this if block, on Lines 36-43). If the answer isn't right, Python skips ahead to the else statement on Line 44.

On Line 36, you'll find the comment, #TODO: Uncomment these lines to add interactive effect. This comment instructs you to uncomment Lines 38-42. This is your first change to the code for this project!

NEW CODE: On Lines 38-42, you're going to remove the hashtags before those lines of code. For instructions, see the next section, "Write Your Own Code." So, we're skipping ahead to explain Line 43...

On Line 43, you'll see the code, display_codala(correct_a, "correct_text") # Displays the image of Mrs. Codala and her text for the correct answer. Since this was the correct answer choice, Mrs. Codala will be displayed with her text bubble saying that the player got the correct answer!

On Line 44, you'll find the code, else: #If it's an incorrect answer. If the player picked the first answer, and it's wrong, then the code block runs, including Lines 45-52. This code is going to display the image of Mrs. Codala with her text bubble saying that the player got the incorrect answer. you're going to write this code yourself!

Let's start this off with the code comment on Line 36, #TODO: Uncomment these lines to add interactive effect. On Lines 38-42, you're going to remove the hashtags before those lines of code.

On Line 37, you'll find the comment, # Change the color from blue to green. That's exactly what will happen when you make Lines 38-42 active! Because this block of code only runs if the user clicked the first answer (Line 34) and if it's correct (Line 35), then this block changes the blue text to green to visually show to the player that they got the answer right!

On Line 38, the code #answer_1_text = my_font.render(answer, True, (0,128,0)) is commented out, so that it doesn't run.

• Delete the hashtag (the pound symbol) from the front of this line to load the text for the first question into the answer_1_text variable.

On Line 39, remove the hashtag from #screen.blit(answer_1_text, answer_1_rect) to uncomment this line so that it runs. This line creates the image for the text and the rectangle to be displayed, but they aren't visible on the screen yet.

On Line 40, remove the hashtag from #pygame.display.update() to uncomment and run the line of code. This line updates the display to show the question and the answer that was drawn on Line 39.

On Line 41, remove the hashtag from #pygame.event.get() to uncomment it. This will get the next event in the "pygame.event" list. [TO REVIEW THIS]

On Line 42, remove the hashtag from #time.sleep(1) to uncomment it. This line starts the timer to pause the game for one second, so that the player can see that the text changed color.

On Line 45, #TODO: Add the interactive effect, in the next lines, you will be adding the interactive effect described on Line 44.

On Line 46, # Change color from blue to red, you want to write out in the next lines the code that will change the color from blue to red.

On Line 45, look back at Line 36 to write out the first step for changing the color from blue to red.

On Line 46, look back at the second step to changing the color on Line 37 that makes sense to go after what you wrote on Line 45.

On Line 47, next you want to write the code to update the color from pygame looking back at Line 38.

On Line 48, the next step you want to do is get the information from pygame looking back at Line 39.

On Line 49, the final step is setting the timer for if the player is inactive, to do this look back at Line 40.

On Line 50, display_codala(incorrect_a, "incorrect_text") #Display codala and text for incorrect answer, since this was the incorrect answer choice, Codala will be displayed with her text bubble saying that the player got the incorrect answer.

On Line 51, if answer_2_rect.collidepoint(mouse_position): #If the player clicks the 2nd answer, similar to Line 32, the program will read if the player selected the second answer from the top.

On Line 52, if ANSWER_CHOICES[1] == answer:, if the answer that the player selected was correct, the following indented code will be run.

On Line 53, #TODO: Add interactive effect, is what you are going to do on the next lines which I describe on Line 54.

On Line 54, #Change color from blue to green, is what you will do on the following lines, changing the color from blue to green.

On Line 55, you first want to display the text like you did on previous lines look back to what you did on Line 45 for guidance.

On Line 56, next you want to draw on the screen the text like you did on previous lines look back to what you did on Line 46 for guidance.

On Line 57, next you want to update the pygame program like you did on Line 47.

On Line 58, the next step that you want to write out is getting the information from the pygame file like on Line 48.

On Line 59, the final step is you want to write out the code for a timer in case the player does not continue with the game like on Line 49.

On Line 60, display_codala(correct_b, "correct_text"), this will display Codala's speech bubble saying that the answer was correct!

On Line 61, else:, if the answer is incorrect, the following lines that are indented will be run.

On Line 62, #TODO: Add interactive effect, this is a comment that describes what you will do on the next lines which I described on Line 63.

On Line 63, #Change color from blue to red, is the goal you want to achieve on the next lines.

On Line 64, you first want to display the text like you did on previous lines look back to what you did on Line 45 for guidance.

On Line 65, next you want to draw on the screen the text like you did on previous lines look back to what you did on Line 46 for guidance.

On Line 66, next you want to update the pygame program like you did on Line 47.

On Line 67, the next step that you want to write out is getting the information from the pygame file like on Line 48.

On Line 68, the final step is you want to write out the code for a timer in case the player does not continue with the game like on Line 49.

On Line 69, display_codala(incorrect_b, "incorrect_text"), this will display Codala's speech bubble saying that the answer was incorrect. On Line 70, if answer_3_rect.collidepoint(mouse_position): #If the player clicks the 3rd answer

On Line 71, if ANSWER_CHOICES[2] == answer: this is a true or false statement checking to see if the answer choice is the correct answer (true) or not (false).

On Line 72, #TODO: Add interactive effect , this describes what you will be writing on the next lines which I describe more on Line 73.

On Line 73, #Change color from blue to green, is the goal for the next lines, to change the color from blue to green.

On Line 74, you first want to display the text like you did on previous lines look back to what you did on Line 45 for guidance.

On Line 75, next you want to draw on the screen the text like you did on previous lines look back to what you did on Line 46 for guidance.

On Line 76, next you want to update the pygame program like you did on Line 47.

On Line 77, the next step that you want to write out is getting the information from the pygame file like on Line 48.

On Line 78, the final step is you want to write out the code for a timer in case the player does not continue with the game like on Line 49.

On Line 79, display_codala(correct_a, "correct_text"), since this was the correct answer, Codala will be displayed with her text bubble saying that the player got the correct answer.

On Line 80, else:, the following lines will run if it is the incorrect answer which you will write yourself.

On Line 81, #TODO: Add interactive effect, as you did before, you will be writing code for an interactive effect described on Line 81.

On Line 82, #Change color from blue to red, your goal for the next lines is to change the color from blue to red.

 answer_3_text = my_font.render(ANSWER_CHOICES[2], True, (255,0,0))
 screen.blit(answer_3_text, answer_3_rect)
 pygame.display.update()
 pygame.event.get()
 time.sleep(1)
 display_codala(incorrect_a, "incorrect_text")

On Line 83, you first want to display the text like you did on previous lines look back to what you did on Line 45 for guidance.

On Line 84, next you want to draw on the screen the text like you did on previous lines look back to what you did on Line 46 for guidance.

On Line 85, next you want to update the pygame program like you did on Line 47.

On Line 86, the next step that you want to write out is getting the information from the pygame file like on Line 48.

On Line 87, the final step is you want to write out the code for a timer in case the player does not continue with the game like on Line 49.

Now we're going to explain the last section of code!

On Line 90, display_codala(incorrect_a, "incorrect_text"), since this was the incorrect answer, Codala will be displayed with her text bubble saying that the player got the incorrect answer.

On Line 91, #If it's the not the last question, we display the next question, is a commented line that describes if there are more than twelve questions, then line 74 will be displayed.

On Line 92, line_number, question, answer, ANSWER_CHOICES = move_to_next_question(TRIVIA, question, line_number, ANSWER_CHOICES), displays the text for if there is more than twelve lines of code.

On Line 93, #Checks if it's the last question and display end screen, This is describing what the next line of code which I will describe on that line.

On Line 94, running = check_if_last_question(line_number, running, number_of_questions), this is a true or false question, if false, the program will quit, and if true it will continue on to the next question.

We have a new 95-96.

In addition to this Help page and the instructions for our Level 3 challenges, we also have Online Articles, a Learning Quiz, an Unplugged Activity, and a Rewards article:

• Level 3: Help - This page helps you complete the instructions in the book, in case you get stuck.

• Level 3: Challenge 1 - On this page, I show you how to add a score to the game, so you can get all the questions right, then when the game ends, displaying the score.

• Level 3: Online Articles - I made you a list of different web pages I found, which will help you learn more about the Classroom Quiz.

• Level 3: Learning Quiz - I wrote some questions in case you want to quiz yourself about what you learned. Or you can teach others and quiz them!

• Level 3: Unplugged Activity - I wrote this page with more details than what you saw in the book. In this game you pick a character and an animal with your friend, then you flip a coin and if it lands on heads, you will act like your character and if it lands on tails, you will act like your animal!

• Level 3: Rewards - If you completed the Classroom Quiz project that we talked about, then I set up this page to act as a reward. You can see some illustrations of me and learn more about who I am! You'll also find the Bow Award digital download, to show off your accomplishment!

After you're completely done with Level 3 (did you do the challenges?), then it's time to move on to Level 4! While you read through Level 4 in your book, you can check out the resources for how to build the Space Wars program:

• Level 4: Space Wars: All Online Resources