Class 4, Preparation: Events & Reactive Variables Practice
In the previous class we practiced using events to add interactivity to an app prototype. We also learned about reactive variables and how to use them to store and display data in our app.
In preparation for the next class, you will finish implementing the whitenoise app in your homework 1 repository.
You must complete and submit Homework 1 prior to completing this preparation exercise. If you have not completed Homework 1, do so before continuing.
Grading
10 points. Completion credit for meeting the requirements specified.
You must demonstrate that you attempted all parts of the assignment, and you put forth a good faith effort to complete the assignment for full credit. No partial credit is provided for completion-graded assignments.
Source: syllabus
Professionalism: Professionalism means meeting the client's requirements. Not doing less and not do more. Your submission should meet these requirements and nothing more.
If your submission uses methods not covered in class thus far or implements additional functionality, you will receive 0 points for this preparation exercise.
Part I: Event to Play Sound
You must use only the methods covered in class to implement and play the events. If you use any other methods, you will not receive credit for this preparation exercise.
Create a single event handler function with one parameter. The parameter should be the file name of the sound to play (e.g. /sounds/wind.mp3). The event handler should play the sound when called.
For every sound button in your app (minimum 4, maximum 8), add a @click event handler that calls the event handler function you created and passes the appropriate sound file name as an argument. (You may have only one event handler function for all the buttons.)
Do not implement any custom mixing functionality. Do not implement volume controls for different sounds. Do not loop the sounds. etc. Simply play a sound when the corresponding button is clicked. If you don't have buttons for all the sounds (i.e. your design uses sliders, etc.), you may use the input or change events instead of click events. (or you may add buttons for this preparation exercise.)
Part II: Reactive Variable for Current Sound
You must use only the methods covered in class to implement and display the reactive variable. If you use any other methods, you will not receive credit for this preparation exercise.
In your app, add a "Now Playing" label. Using a reactive variable, display the file name of the sound that is currently playing. Put another way, when a sound button is clicked, the reactive variable should be updated to the file name of the sound that was just played. The "Now Playing" label should display the value of the reactive variable.
Do not implement any custom interface functionality for the current playing sound. Do not highlight the button for the current sound. Do not change the color of the button for the current sound. Do not implement any other functionality. Simply display the file name of the sound that was just played.
Submission
Stage, commit, and push your changes to your Homework 1 repository in GitHub.
Then complete the submission form for "prep4".