CSc 101: Math Quiz

Yay! Everyone’s favorite . . . math! In this assignment, you’ll be writing a program that gives randomized math quizzes to the user. Once all of the questions of the quiz have been asked, the program will give the user a summery of how they did. Below shows one instance of a user taking the math quiz:

The quiz works as follows:

• During the quiz, there will be 3 “counts” shown at the top of the canvas. The number of right answers, number of wrong answers, and questions remaining. The quiz should ask a total of 7 questions.
• The math questions will be displayed in the “middle” of the canvas.
• The answer from the user (a typed number) will be in the lower section of the screen. You should create an underline to indicate where the numbers will show up too.
• The answers to each question will always be three digits (more on this later). Thus, a questions is “finished” once the user has typed in three digits on the keyboard. Once this happens, update the right, wrong, and remaining counters in your program. Then, ask the next question.
• Once all 7 questions have been answered, a “results” page will be displayed. This page will show the student’s grade in points and as a percentage. The green/red background will also change to reflect the score. The percentage score will correspond to how much of the screen the green percentage-bar covers.

Each math question that is asked should be randomly created. The first number should be between 1-10, the second between 40-70, and the third between 60-90. Given these ranges, the answer will always be some positive number between 101 and 170, so the answer will always be a 3-digit number. In order to get the answer from the user, listen to the keyboard clicks. When the user types a key, add this to the solution string. Once three key-presses have been made, you have a full solution. Once they hit “ENTER”, accept the solution, update the counts, and move on to the next problem. Check if the answer is correct, and then generate the next “random” question.

Once the user has provided 7 answers, the quiz is over. Instead of displaying the counts and questions, display the results text. You need to do a little bit of math to compute the grade and percentage, but it isn’t too hard! Just some basic multiplication and division.

The only code you are allowed to put into draw() are if-statements and calls to functions that you have written. You may not draw any shapes, respond to mouse clicks, etc. within draw(). Instead, put your code into at least three separate, well-named functions.

In setup() you must initialize the random numbers with a seed value. To do this, use the randomSeed function. While testing, you should try out multiple different seed values to make sure that the numbers in the quiz change. When you turn in your assignment, set the random seed to 150.

Development Strategy

If you break the problem down into smaller “chunks” it becomes much more manageable to tackle. I recommend you use the following strategy to complete:

(1) Generate 3 random numbers

Start by getting the three random numbers generated, and showing up on the screen. Remember, you should use the random() function for this purpose. If you are using random correctly, different numbers should show up on the screen each time you run this program. Below is an example of one run at this stage:

(2) Formulate a question

Modify your program so that the numbers are displayed on the screen, but formulated like a math question. For example:

(3) Getting the answer from the user

Next, let’s get the user input showing up on the screen. Remember, you need to read in the keys from the keyboard. You can add the key being pressed to the end of a string, which stores the answer. For example:

(4) Guessing one answer

Now, add some logic to your program to check if the (first and only) answer is correct. Don’t worry about processing multiple questions - just check the answer to the first question. Then, tell the user if they were right or wrong.

(5) Adding in the counters

Now, let’s make the questions counters. To keep track of the right, wrong, and remaining questions, you’ll want to have three int variables. Add and subtract from these variable as appropriate when each question is answered. Once you have each of these, you can then repeatedly ask questions until the quiz is over.

(6) Red/Green percentage bars

Lastly, get the percentage-bars working on the summary page. To do this, you will be drawing two rectangles: One red and the other green. The size of these rectangles will be determined by the % score the user earns. The more questions the user answers correctly, the bigger the green bar should be (thus, covering the red background). See below for a few example summary pages:

Comments

All of your programming should be well-formatted and easy for the graders to read and comprehend. You should follow the style guidelines that we have discussed in class. Each program file should have a header comment at the top that has roughly the following format:

//
// Author: Student Name
// Description:
//    A short description of what this program does!
// 

Each function should have a descriptive block-comment above it, and other helpful comments. If any part of your scripts are particularly complex, you should put documentation comments above those lines of code. Name your program netid_math_quiz.pde (where netid is your UA username).

Submission and grading

This was assigned on 11/20/2017. It is due on 12/1/2017 at 5:00pm.

Turn in each of the files described in the spec (just 1) the assignment drop-box in D2L before the due date. Make sure to name the files exactly as this document specifies. In general, make sure to follow these instructions precisely. If you don’t, we will deduct points!!!