XPath / XSLT Test: Transforming Dracula

Overview

Your task is to transform our XML file representing Bram Stoker’s novel Dracula into an information-rich table of contents and HTML reading-view of the novel. Begin by right-clicking on the following files, saving them to your workspace, and opening them in <oXygen/> to study the code.

1. The source XML file for Dracula. Don’t be concerned about the red schema warning on the file: you are just missing the Relax NG schema. If you want the file with its schema, you can pull the directory of files in in locally from the textEncoding-Hub where it is in Class Examples > XSLT > XSLT-Test-Files.
2. A starter XSLT file for this exam (with the <xsl:stylesheet> and <xsl:output> elements prepared for processing to HTML).

To give you an idea of the desired output, here is a view of the HTML code for our target output as posted on the textEncoding-Hub. And here is a display view of that code on the web browser without any CSS. You are expected to prepare XSLT to output HTML like this, and provide your own CSS styling for it.

Open the XML file in <oXygen/> and study its code, and take some notes about where you can find the information destined for the target output in HTML.

Specific tasks

This test requires you to write modal XSLT to process the same <chapter> element nodes from the source XML in two different ways:

1. one way: to output just the chapter headings in a table of contents,
2. and the other way, to output the full chapters in a styled HTML reading view.

Reading View

Preparing the reading view involves processing richly mixed content without needing to target it selectively. Here is what you should capture from the Dracula XML markup:

• Transform the <title> element into an HTML <h1> element.
• Apply templates to process the <chapter> elements, and output them in HTML <section> elements with a @class of "chapter".
• Transform the chapter <heading> elements into HTML <h2> elements with @id attributes (to use as the targets of linking from the table of contents).
• Process the <p> elements from the XML into HTML <p> elements (which may seem odd, but the HTML version is actually different from the XML because the HTML is coded in an XHTML namespace).
• Within the paragraphs, the Dracula team has marked the following, and you may wish to capture it in HTML span elements with @class attributes (remembering our little tutorial on Using <span> and @class to style your HTML): Transform each the following to output for styling to feature them in the HTML:
  • <place>
  • <device>
  • <date>
  • <time>

Table of Contents

The table of contents should be output with modal XSLT as an HTML table with three columns (that is, three HTML <td> elements nested inside an HTML <tr> (table row) when processing each chapter. Each cell of the table should contain:

• Text from each chapter <heading> element. Link to this text to chapter headings in the reading view html.
• To preview locations mentioned in each chapter, output a string-joined list of sorted, distinct-values of <place> elements.
• To preview the devices mentioned in each chapter, output a string-joined list of sorted, distinct-values of <device> elements.
• We recommend simplifying your output of the devices and places a bit by applying the XPath string-join() function to separate each value with a comma. But you may output the distinct locations and techologies as an HTML bulleted or ordered list if you wish. We recommend looking up the string-join() function and any other functions you need to review in The XPath Functions We Use Most.

Completing and checking your work

• Write a CSS file to style your HTML, and be sure the CSS link line in the XSLT file is correctly referring to your CSS file, so the output HTML has its CSS link properly associated.
• Remember! It is a good idea to run your transformation every time you write some new XSLT code so you can see what you are doing. You will be looking at your results in the Output window as you write and test your template rules each time you press the blue Run-to-End button. Eye-balling those results is not really enough because the Output window does not check for well-formedness or validation against a schema. Be sure to save those results, either by setting an output location in the appropriate place in the selection boxes, or by right-clicking on the output window and selecting Save as. Always, always open the saved output file in <oXygen/> and check to make sure that it checks out as valid and well-formed. Your new output should open up as well-formed and valid HTML, with a green square in <oXygen>.
• When you complete this assignment, submit the following:
  • Your completed XSLT file
  • Your output HTML file
  • Your CSS file
  • You may bundle these files in a zipped directory to submit on Canvas, or submit them separately. All parts of the assignment must be present for full credit.