CSCI E-3 Project Unit #3a

Unit 3 Projects will cover the DOM, browser Events and FORM handling, with a detour into Javascript closures.This part (a) will focus on the DOM.

What you're learning:

Javascript is the "behavior" layer of the client-side Web experience. This unit covers some of the common interactions between the components of a Web page (structure, content, styles, forms) and Javascript, as exposed by the DOM and the DOM Event model.

What you need to do:

DOM Exercise: Split a block of text into individual SPANs or DIVs

1) DOM Exercise: Split a block of text into individual SPANs or DIVs

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":

It's that time of year when you clean out your closets, dust off shelves, and spruce up your floors. Once you've taken care of the dust and dirt, what about some digital cleaning? Going through all your files and computers may seem like a daunting task, but we found ways to make the process fairly painless.

Your task is to add Javascript to the file js/hw3a.js that will convert that text as described when the Transform the Transcript button is clicked. Your output can be written back into the same DIV. You may use innerHTML to clear the contents of the DIV, but not to create the SPAN elements. You should build the elements using document.createElement() and the associated methods.

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:

Divide the text into an array of words.
Iterate over that array, at each step:

Build SPAN elements as you go, along with the attributes as shown in the example
Add the SPAN elements to the original DIV

Add a handler to the SPAN elements, or to the DIV, which causes the style on the SPAN to change on mouseover.

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.