project: semitone difference - A gui that is more...awesome

Tags html css
Hard Prerequisites
IMPORTANT: Please review these prerequisites, they include important information that will help you with this content.
  • PROJECTS: semitone difference - basic algorithm
  • PROJECTS: semitone difference - Make a simple GUI
  • PROJECTS: semitone difference - Advanced algorithm

    • Extend your simple gui with the following behavior:

    1. Add a button that lets the user give up. If the user clicks on this button then ALL the notes (A, A#, B,…) should be displayed. The currently selected notes should be highlighted and the final answer should be displayed on the screen. The user should clearly see how the answer was calculated.
    2. The user should be able to restart the game and generate new notes. If the game restarts then of course the explanation from (1) should disappear.
    3. If the user submits the correct answer then the “explanation” should be populated with the currently selected notes highlighted. The user should be congratulated.
    4. Keep track of how many correct answers the user gets in a row and display this answer on the screen. This is referred to as a streak. Have some pseudocode:
    user accesses gui for first time
gui displays: "Streak: 0"
user gets correct answer
gui displays: "Streak: 1"
user gets correct answer
gui displays: "Streak: 2"
user gets correct answer
gui displays: "Streak: 3"
user gets wrong answer
gui displays: "Streak: 0"   <<< the streak is reset to zero because the user got the answer wrong
    RAW CONTENT URL