CSS from cnx.orgPre-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
- The input file (cnx-doc.xml): It will just look like a blank screen in the browser since it is xml. Save it.
- Other potentially helpful files.
- CSS for rendering Connexions modules. These classes and looks might be useful to you.
- Javascript for showing/hiding exercise solutions in Connexions modules. You can use this if you want, by outputing the classes that it is counting on.
- The html of an existing Connexions module. You might find this useful to look at. The complexity of this rendering is not the goal of this challenge, however.
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
…
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.
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 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.
"Exercise: write a XSLT style sheet which converts cnx content to HTML."