XSLT Exercise 5: Internal Links for Dracula

Overview of the Assignment

For your last assignment you used the XSLT @mode attribute to create a table of contents for the chapters in the Dracula novel. Our output for that previous assignment is at https://newtfire.org/courses/tutorials/Dracula-output/Dracula.html

This assignment builds on the previous one, so you can take your stylesheet for that assignment and modify it for this one. In this assignment you will first (if needed) make repairs to your XSLT code so that it generates valid, well-formed HTML with a table rows (one table row for each chapter). Then you will be adding tagging that you need to make internal links from the chapter headings in the table of contents down to the chapter headings. In case you need it, here is our source XML file for Dracula (which you should right-click to download, save, and open in <oXygen/>.

For this assignment we’re going to enhance our output from the last assignment in the following ways:

• We’re going to create links between the chapter headings in the table of contents to the chapters in the reading view, so that you can click on a poem’s identifying information and be taken immediately to the corresponding chapter.
• We’re going to link back from the chapter headings in the reading view to the top of the document.
• We’re going to apply a function to alphabetize our outputs of locations and tech from each chapter displayed in our table of contents.

Our output for this assignment, with its linked table of contents, looks like this.

How to make internal links

To create internal links between the chapter headings in the table of contents and the chapters in the reading view below, we’re going to use attribute value templates (AVT). We have been working with these in earlier XSLT assignments, but you may want to review Obdurodon’s page on how they are written: http://dh.obdurodon.org/avt.xhtml.

The <li> items in the table of contents should include <a> (anchor) elements, which is how HTML identifies a clickable link. An anchor that is a clickable link has an @href attribute, which points to the target to which you want to move when you click on the link. For example, the table of contents might contain the following list item for Chapter VII:

HTML <a> elements that have @href attributes normally appear blue and underlined in the web browser, to advertise that they are links. The target of a link can be any element that has an @id attribute that identifies it uniquely. (This is why you need to use a hashtag (#) in the @href on the Table of Contents that links to an @id, because the # indicates you are pointing to the unique identifier that follows.) If you click on this line in the browser, the window will scroll to the element elsewhere in the document that has an @id attribute with the value #C7. In our case, we’ve assigned that @id attribute value to the <h2> for that chapter in the main body:

<h2 id="C7">CHAPTER VII</h2>

Adding links to your output

You should first review Obdurodon’s page on Attribute value templates (AVT), which describes a strategy you can use to create a unique @id attribute for each chapter. For this task we gave our chapters @id values that were a concatenation of the letter C and their count (counting the preceding-sibling:: chapter elements and adding 1 like we did in a previous XSLT assignment). We attached those @id attributes to the <h2> elements that we used as titles for each chapter in our reading view, e.g., <h2 id="C7">CHAPTER VII</h2>. Meanwhile, in the table of contents at the top we created <a> elements with @href attributes that point to these @id values. The value of the @href attribute must begin with a leading # character, but that # must not be part of the value of the @id attribute to which it points. For example,

<td><a href="#C7">CHAPTER VII</a></td>

means if the user clicks on the linked content in this table cell, the browser will scroll to the line that reads <h2 id="C7"> later in the document. Remember: the value of the @href attribute begins with #, but the value of the corresponding @id attribute on the <h2> element you want to scroll to doesn’t.

Armed with that information, you can take your answer to the main assignment and, using AVTs, modify it to create the <a> elements with the @href attributes and the @id attributes for the targets.

Finishing touches

We are not quite finished yet! When outputting a list of distinct locations and tech in the chapters, we wanted to produce a simple, human-readable list, and human eyes and brains often find searching such lists easier when they are alphabetically ordered. We will now sort those lists, using the XPath sort() function. Also, notice that the output may still contain some duplicates because the <location> and <tech> nodes had variable amounts of spaces in them. Revise your code so that you first use the normalize-space() function to remove any unnecessary spaces, then apply distinct-values() to remove the duplicates. Next, apply the sort() function, and finally string-join() that output.

Oh, and did we mention CSS? Can you associate a CSS stylesheet to your output (write the CSS file link into your XSLT) to make it look more interesting than what you get by default in a web browser? See if you can find an interesting way to style the <span> elements, and try to make the table look more appealing.

When you complete this assignment, submit your revised XSLT file, your output HTML file, and your CSS file to Canvas.