This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Challenge 1: A Connexions module transformed


 

Challenge: Take a little XML module and transform it to HTML

Pre-requisites

All of the techniques you will need are located in the first three chapters of Jenni Tennison's "Beginning XSLT 2.0". You don't have to have the book to complete this challenge, however. You should be able to use any of the web resources listed here, and then look up the needed techniques listed below. 

The first chapter is a review of XML. If don't know much about XML, this is the chapter for you. It also has a nice review of encodings. Chapters 2 and 3 cover xsl:for-each, xsl:value-of, xsl:apply-templates, selecting, matching, modes, priorities, generating attributes and ids and xsl:next-match (a 2.0 feature). She gives a series of examples that transform an xml document describing tv channels and shows in to a simple web page displaying them. The techniques she uses can be applied directly in our challenge.

The goal

Transform a simplified CNXML module into an HTML page. The sample module contains some introductory paragraphs, some exercises, and some terminology within the exercises that are tagged as "terms". Each exercise has a title. The module also has a little bit of metadata, a title, some authors, and a license URL.

Resources

Detailed description

The input file

You will be starting with the following XML file (download it here).

The images below show some of the code

https://lh5.googleusercontent.com/f8U1E9v8GargNg0PGkf8pElcYndVNfqmK5u4EjS-SDRry8OWXumU58a41VQvESWMeDD593kVUXwsjbn-O8cvGs8g29rg1SXDsBxuT6-aROVygphuZ9M

https://lh3.googleusercontent.com/VKN2P2Q8sV2fmEDHmEUWgIo5AniQt-103PKq7xQQqBPBJQZr37vVMBkk8F7TxxC32hMxHX1gioyhk_eKHmk17NVaw0zb0uyiG31U9CL4GqkZTrvGIas

Sample output file

This is just an example of what your rendered module might look like. Be creative. This one isn't even completely done.

https://lh4.googleusercontent.com/Pr_x0EeCLEQSxtTu0_mCHfk1rXRSFRbEKzC-IjA8gmme-Al-P5BRiUxI5TFXnzonClHtpe5fEeFLYMJXDeoPXZX7EJaPtVST5_rMoIivodYZL7b8RWIhttps://lh5.googleusercontent.com/iRDEb3zJ0A29c85hZnPcFz1-f1UR6JSKJeXVOiB7mHaOy0jFtWdMaKC9GlrBY0AnBJXkJ3sChPXbjpcWj6S_-XjACsJLMUKAfu0HTfOvllf6uMTlOcg

Your solution should have the following components:

  • A table of contents with links to each of the exercises
  • The document output with exercises that hide their solutions initially and let you click on the them to open them.
  • A glossary at the end that lists all the terms found in the document.

The input document has a <verbatim-section> element that contains a table that we aren't processing yet. The intention is just to copy it into the output directly since it is already HTML. An easy way to copy it is to use the following template snippet. The first three chaps don't cover xsl:copy-of, so I am giving this to you.

NOTE: Template to copy table:
								<!-- Given template to output the table as is into the html document. -->

<xsl:template match="verbatim-section">
     <xsl:copy-of select="node()"/>
</xsl:template>

Extra challenges for those already experienced with XSLT

  • Use the 2.0 next-match feature
  • Number the exercises using XSLT and using CSS.
  • Any other cool features and interactions you want to throw in.
  • Add an exercise that doesn't have a solution and make sure it is properly handled. Ex. "Organize the data from smallest to largest value."

What to turn in

Take a couple of screen captures of your document and post them. Await better instructions.

Task Discussion


  • Kathi Fletcher   June 11, 2012, 11:48 a.m.

    Totally agreed. Will try to get that converted. I started at CNX, though, and needed to do all the conversion to entities by hand which was a pain, so just did the images for a quick solution. 

  • therealmarv   June 11, 2012, 9:16 a.m.

    I would suggest using the option "Syntax highlighting" in this editor instead of images of XML code.

    Example:

    <hello>
      I'm a <XML/>
    </hello>