Class Activity 2

Instructions

Step 1: VidQuiz

Make a folder in your or your pair's repository called ca2. Copy your completed ca1/player.html file to ca2/. Update the page so that:

• add a bar at the top in which users can enter the URL of a YoutTube video
• add an "add" button next to it that will either add a player for the video or display an error message if it's not a valid YouTube URL (doesn't start with https://youtu.be or https://youtube.com)
• every video added is displayed in a list, with most recently added videos at the bottom
• every video has it's title above it

Here's an example wireframe of what your page might look like:

Step 2: Submitting

Stop wherever you are at the end of 40 minutes. Add a README.md file with the following information:

• who you worked with (say "I worked alone" if you didn't have a partner)
• how long you spent on the assignment
• what the most challenging aspects were
• any lingering questions you have about the assignment

You will need to include a similar README.md file for all of your assignments (see this video for details Links to an external site.). Commit your work, push it to GitHub, and then submit a link to your folder for this assignment on GitHub.

Programming assignment options

PA2.1 (Advanced): Add support for cutting videos

Copy your completed ca1 folder to a new folder pas/pa2.1. Update VidQuiz to include a "Cut" option below each video. When clicked, some kind of editor is displayed (see below) below the video. As the video plays back, the user can begin a cut (if not in a cut) or stop a cut (if in a cut). These cuts should be listed somehow and each should be removable. There should be a "Save" button that only displays when in "Cut" mode; when clicked, it saves the cuts and when the video is played back, skips the segments that have been cut. All cuts should be displayed when the "Cut" option is clicked in the future.

In terms of the UI for displaying cuts, you may choose what you want as long as it is reasonable. Two suggestions are:

• use a pair of text boxes for each cut, one for the starting timestamp and one for the ending timestamp (these should be editable)
• use a slider with a pair of handles for each cut and a different color signifying what segments are cuts

Here are some wireframes to help you out:

Here's the rubric:

[ ] meets the criteria of Class Activity 2
[ ] there is a way to toggle cut mode and playback mode for each video
[ ] the user can add, edit, and delete cuts for each video in the list of videos
[ ] when not in playback mode, cut segments are skipped during playback and cut information is hidden
[ ] cuts for a video are remembered between editing sessions
[ ] cuts are saved in localStorage automatically or when a save button is clicked
[ ] the code is well commented and styled
[ ] there is a header at the top of the file that includes the name of the author(s) and a brief description of the file
[ ] the PA folder includes a README.md file with the required information in it

Submitting PAs

Be sure to create a README.md with the following information:

• who you worked with (say "I worked alone" if you didn't have a partner)
• how long you spent on the assignment
• the PA option (and, if applicable, the earlier PA option it builds off of; see this video for details Links to an external site.)
• a copy of the PA option's rubric, filled out (only submit if you can honestly check off each of the criteria)
• what the most challenging aspects were
• any lingering questions you have about the assignment