This unit covers some of the common interactions between the components
exposed by the DOM and the DOM Event model.
The following exercise contains a block of text that represents the written transcript of a video. Often, a transcript is provided with a video so viewers can read along, or so the video can be captioned.
In this exercise, we'll be doing the first step in building an interface that could appear alongside a video player on a Web page. The idea is that each word in the transcript will highlight as the matching portion of the video is playing.
In order to do this, each word must be in its own HTML SPAN (or DIV). In a real video transcript application, each SPAN would have a time value in seconds associated with it, and as that moment of the video played, we'd change the background color of the SPAN matching that time period.
In a real application, we would also have the word be clickable, upon which the video would seek to the appropriate moment and play from there. We will do this in Unit 4 if this course, but you don't have to make the words clickable in this assignment. Instead, you'll make the words highlight (with a yellow background perhaps, or some other notable change in style) when the mouse is over the word.
So, if the input text is Breaking News. Spring is here to stay. the HTML output would be something like:
<span class="word" id="word0">Breaking </span>
<span class="word" id="word1">News. </span>
<span class="word" id="word2">Spring </span>
<span class="word" id="word3">is </span>
<span class="word" id="word4">here </span>
<span class="word" id="word5">to </span>
<span class="word" id="word6">stay. </span>
In practice, the display of the sentence in the browser wouldn't look much different, like so: Breaking News. Spring is here to stay. (go ahead and View Source and you'll see that this sentence in this paragraph is indeed separated into seven distinct SPANs).
We won't be building the video player part of this tool in this exercise. We'll only be preparing the transcript by dividing it into individual SPANs.
The DIV that will serve as your input (and output) is here, with id="transcriptText":
To break the problem into smaller pieces, you may want to think about it as a few simple steps that may look something like this:
Submit your solution as a ZIP file, with the usual naming convention: a folder named [lastname_firstname]_project3a zipped into a file named like [lastname_firstname]_project3a.zip
Credit: the sample text here comes from the Harvard Extension Hub blog, and is not actually from a video.