- Final project for UI design at Columbia University S22
- Focus on User Interactive Design with minimum backend server and no database.
- Built with primitive html, css, jquery, and flask
Interactive instance host on Piano 2022
In the quiz section. For each option the mouse enters, the web page will play the AUDIO corresponding to the option. The piano on the right will also show the corresponding keys.
From any webpage of the site, users can play the audio corresponding note by pressing 1 to 7 or A to G on the keyboard. The audo can also be played by clicking on the play button at the bottom of the note.
When the user clicks on the option, it will turn green if it is correct. If the answer is wrong, the wrong option will be marked red. Once the click is complete, clicking on any of the options on that page will not change the selection.
Users can know the quiz completion level by the progress bar on the top. At the same time, users can click on the progress bar to go to the unselected questions. Users can also click on the selected questions to review them, but they cannot change their choices.
The user can see the score after completing the last question. Both unselected and incorrect selections are recorded as 0 points. At this point, the user can still go to the unselected question through the progress bar and make a choice. If a correct choice is made, the score will be increased accordingly.
