NewtFire logo: a mosaic rendering of a firebelly newt
newtFire {dh}
Creative Commons License Last modified: Friday, 19-Nov-2021 15:19:57 UTC. Maintained by: Elisa E. Beshero-Bondar (eeb4 at psu.edu). Powered by firebellies.

For this take-home test, you will be transforming and styling a student-coded XML file for a project on the Skyrim legends based on the video game.

Files to begin with

  1. First, access the source XML file, however is most convenient for you via one of the following methods:
    • Right-click on this link, use Save as to download the file to your computer and open it in oXygen.
    • Or, (if you have a stable network connection) you can open the file link in the web browser, copy the URL for the file, and use "Open URL" to open the file directly from the web in oXygen. (You can then save the file directly in oXygen to your local computer.)
  2. Open a new XSLT 3.0 file in oXygen, and set up the xsl:stylesheet root element and xsl:output line this way to output HTML 5 (as we have been doing for previous assignments): 
    <?xml version="1.0" encoding="UTF-8"?>
         <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="3.0"
    xmlns="http://www.w3.org/1999/xhtml">
    
   <xsl:output method="xhtml" html-version="5" omit-xml-declaration="yes" 
              include-content-type="no" indent="yes"/>
    
    </xsl:stylesheet>

Your tasks for this test are:

  1. Write XSLT to produce an HTML reading view of the Skyrim document, selecting the content in the <source> and the <body> elements to transform into HTML. (5 points)
  2. Process the <para> elements to:
    • output them as HTML <p> elements (2 points),
    • Add an @id attribute to the HTML <p>, and use an Attribute Value Template (AVT) to make its value look like this: "skyrim-1", "skyrim-2", etc. Hints: Use the count() function, and review Obdurodon’s tutorial on Attribute Value Templates and the homework exercises in which we used them for help with this. (3 points).
  3. There are several types of in-line elements that appear in many different contexts in the source document. Your XSLT needs to process the following:
    • <event>
    • <item>
    • <char>
    • <soCalled>
    • <faction>
    • <place>

    Write XSLT to process these elements wherever they may be, and output them as HTML elements: You can use some of the basic HTML in-line elements, like <em> for emphasis or <strong> for strong emphasis, but you’ll also want to use CSS to set some elements to different colors or background colors or borders or fonts or font sizes or font styles (e.g., italic) or font weights (e.g., bold) or text decoration (e.g., underlining) or text transformation (e.g., convert to all upper case) … well … anything else. Use <span> elements using @class attributes for styling. (10 points)

    Reminder for processing richly mixed content, as seen in XSLT Exercises 3 and 4

    When you write a template rule for mixed content (elements floating in text) and you want to simply process all the contents without remixing them, you can just use <xsl:apply-templates/> without the @select attribute. This simply means, process everything inside this node, and apply templates to whatever you find.

  4. Instead of setting all <faction> elements to the same HTML @class, please create separate template rules to match on factions according to their attribute values. For example, <xsl:template match="faction[@ref='daedra']"> is a normal XPath expression to match <faction> elements only if they have a @ref attribute with the value daedra. (3 points)
    • Bonus: For extra credit (up to 3 points), exercise your document analysis and XPath skills: Note that in the header some factions are described (with an @align attribute) as evil, good, or neutral. You can write an Attribute Value Template (AVT) that will dereference the @ref attribute on, say, <faction ref="daedra">assassins</faction>, look up whether this is an "evil", "good", or "neutral" faction, and set the @class value accordingly. Make all "good" factions one color and all "evil" factions a different color, letting XPath look up the moral alignment of a faction for you. Note: This will require the XSLT current() function, to read a specific value from the source node at the time it is being processed. Learn more about current() here.
  5. Prepare a separate CSS stylesheet file, saved with a .css file extension, and specify how you want to style your <span> elements. (5 points)
  6. Link the CSS stylesheet to the HTML you are outputting by creating the appropriate <link> element in your output HTML (you can remind yourself how to do that here in this section of our Intro to CSS). Set that <link> element in your XSLT so it is always output every time you update your code. (2 points)

Resources to help with constructing the HTML and CSS

Completing the test

You should make sure you have completed the following before submitting your test:

Please upload your XSLT, HTML, and CSS files to Canvas.