Quiz4 Bonus (Due Monday 8pm, 19-Feb)

Optional, 100% solo, worth 5 bonus points on quiz4

Notes:
  1. This is optional. You may skip this. If you do the problem, and it is correct, and submitted on time, you will receive +5 points on quiz4.
  2. You MUST read all Ed posts regarding this bonus carefully BEFORE beginning! Here are a few, though we may make additional posts, which you are also responsible for reading and following:
  3. Be sure to read this entire write-up before starting! There is no autograder for this problem. You must examine your code and the writeup carefully to make sure that you are implementing the features properly. There is no starter code.
  4. You must write your code in CS Academy and place your code in Creative Task 2 for Unit 3 (linked in the Ed post above) and you must hit the submit button before 8pm Monday, Feb. 19. Once you hit submit, you will no longer be able to edit your code. (If you must, you may ask to unsubmit on Ed, but there may be a delay, we cannot extend the deadline for this, and we will only do this once.) This is not a homework problem, and thus the grace day period cannot be used. We will not grade anything not submitted by the deadline.
  5. Unlike real quizzes, you may run your code as you write it. You may take as much time as you need, but try to complete this within 30 minutes.
  6. Work SOLO. By yourself. With nobody else and without any online help except CS Academy. You may refer to the CS Academy notes as needed.
  7. You may not use onKeyHold. Do not use lists, dicts, sets, recursion, or any topics not covered in or before Week4 or Hw4. You must follow MVC.
  8. Here is a working version of this app, also embedded below the problem description. (Note: Don't worry if the timing of your app appears to behave slightly differently, as long as it follows the writeup.)
Problem Description:
Write an app such that:
  1. At first, a 400x400 canvas displays 4 items:
    1. A counter, which starts at 0, centered at (200,20) of size 16 in bold.
    2. A red dot of radius 20 in the top-left corner, so centered at (20, 20).
    3. A blue dot of radius 20 centered at the center of the canvas.
    4. A horizontal gray line across the app drawn 50 pixels above the bottom of the canvas.
  2. In onAppStart, set app.stepsPerSecond to 50 and do not change it.
  3. The red dot moves down the left edge so it reaches the bottom after 1 second. Each time it reaches the bottom, it resets to its initial top-left position.
    Note: we will say that a dot reaches an edge when its center reaches that edge.
  4. The blue dot moves twice as fast as the red dot, and sweeps back-and-forth between the left edge and the right edge of the canvas. The blue dot stays vertically centered on the canvas throughout.
  5. When the user presses 'r', this either pauses or unpauses the red dot. So the first time pauses, the next time unpauses, and so on.
  6. Similarly, 'b' pauses or unpauses the blue dot.
  7. If the two dots intersect:
    1. The red and blue dots stop moving.
    2. The counter (in step 1) increases by 1, unless the '2' key is held down when the intersection occurs, in which case it increases by 2
    3. A green square centered on the canvas center is drawn at first with a side length of 1. Do not draw this square using align='center'. The green square should be drawn first (behind the other shapes).
    4. The green square grows so that after 1 second it fills the entire canvas.
    5. Once the green square fills the canvas, the red and blue dots are reset to their starting positions (from step 1) and move unpaused in their original directions.
  8. When the mouse is below the line drawn 50 pixels from the bottom of the canvas, the app freezes so no further movement or changes occur until the mouse is back above the line.