Teacher is very picky, document must have all these things

 

Sean has a new project for you to work on. In addition to digital games, the Harpe Gaming Store also sells board games. Sean is working on a page describing a few sample board games. He has created an XML document named games.xml that contains the description of two games, as well as scores the store has given the games on a 1 to 10 scale in seven categories. Sean also has an XML document named game_reviews.xml containing reviews written up in other gaming websites and an XML document named reviewers.xml that describes those websites.

 

Sean wants all of this information collected and displayed using a customized style sheet. He would like the style sheet to calculate the average score given to the selected board game and wants all numeric values and dates to be nicely formatted. Figure 6-46 shows a preview of the completed project. 

 

1. Using your editor, open the gamestxt.xml and gamestxt.xsl .Enter your name and the date in the comment section of each file and save them as games.xml and games.xsl , respectively.

 

2. Go the games.xml file in your editor. Take some time to review the contents of the file and then link the games.xsl style sheet file to the file. Close the games.xml file, saving your changes.

 

3. View the contents of the game_reviews.xml and reviewers.xml file in your editor, taking note of the structure and content of each document. Close the files. You do not have to save any changes to these documents. 

 

4. Sean also has created a library of functions you’ll use in this project. Open the hgfunctions.xsl file in your editor and study the contents. The document has two templates. One template matching the releaseDate element is used to convert date values from the mm/dd/yyyy format to the Month Day, Year format. The second template, named imageRow, is used to create a row of inline images. The imageRow template has two parameters: the imgFile parameter specifies the name of the image file, and the imgCount parameter specifies the number of images to be displayed. After studying the les, close the document. You don’t have to save any changes.

 

5. Go to the games.xsl file in your editor. Directly after the opening tag, use the include element to include the contents of the hgfunctions.xsl style sheet.

 

6. Directly after the include element, create the following global parameters and variables:

 

a. The gameID parameter with a default value of ‘bg210’. This parameter will be used to select different board games to display in the web page.

 

b. The currentGame variable containing the /games/game[@gid=$gameID] node set. This variable will be used to select the game to display in the report.

 

c. The externalReviews variable containing the /reviews/review[@gid=$gameID] node set from the game_reviews.xml file. ( Hint : Use the document() function.) This variable will be used to access customer reviews for the current game.

 

d. The externalReviewers variable containing the /reviewers node set from the reviewers.xml file. This variable will be used to access the list of reviewers for the report.

 

7. Go to the root template and make the following style changes so that the report displays information for the current game selected by the user:

 

a. Go to the   <title>   tag within the head section of the HTML file and change the node set for the   value-of   element to $currentGame/title in order to display the title of the current game.

 

b. Go to the gameSummary section and change the   select   attribute of the   apply-templates   element so that it applies the template for the   currentGame   variable.

 

8. Go to the game template and make the following style changes:

 

a. Locate the table cell in the List Price row that displays the value of the price element and format the price value so that it appears in the $#,##0.00 format.

 

b. Change the table cell in the Release Date row that displays the value of the   releaseDate   element so that it applies the template for the   releaseDate   element found in the hgfunctions.xsl file.

 

 9. Next, within the game template, you need to display the summary information on the game taken from the summary element in the games.xml file. Below the summaryTable web table </table>  tag in the game template, use the copy-of element to copy the node-set summary/* into the result document.

 

10. Sean wants the report to display the score for each game. Directly after the copy-of element you just created within the game template, create a variable named avgScore that returns the average scores contained in the scores/score node set. ( Hint : Divide the sum of the values in the scores/score node set by the count of values in that node set.)

 

11. Finally, within the game template, insert the following web table structure for a web table that displays the scores from each gaming category and a final row that displays the average score from all gaming categories: 

<table id=”scoreTable”>

     score template

<tr>

    <th>OVERALL

            (avgScore / 10)

    </th>

    <td>

        row of token images

    </td>

</tr>

</table>

where score template applies the template for the scores/score node set to display scores from each gaming category and avgScore is the value of the avgScore variable displayed with the 0.00 number format. Create the row of token images by calling the imageRow template from the hgfunctions.xsl file using the ‘token.png’ file for the imgFile parameter and the value of the avgScore variable rounded to the nearest integer for the imgCount parameter.

 

12. Directly below the game template, create a template for the score element. The template will display a table row for each category of gaming score by writing the following HTML code: 

<tr>

   <th>

      category (current score/10)

   </th>

    <td>

      row of token images

    </td>

</tr>

 where category is the value of category attribute, current score is the value returned by the current() function, and row of token images is created by calling the imageRow template using ‘token.png’ for the imgFile parameter and the value returned by the current() function for the imgCount parameter.

 

13 Scroll up to the game template and, directly below the tag, insert a command to apply the template to the externalReviews variable you created in Step 6.

 

14. Go back to the bottom of the style sheet to the review template used to display external reviews of the current game. This template has two local variables: the reviewerTitle variable contains the title of the review, and the reviewerURL variable contains the URL of the reviewer’s website. Add the following HTML code to the template:

 <section class=”review”>

    summary nodes

    <p>

      reviewerTitle

     <br />

     (<a href=”https://www.sweetstudy.com/content/reviewerURL”>reviewerURL</a>)

    </p>

</section>

where summary nodes is a copy of the summary/* node set using the copy-of element, reviewerTitle is the value of the reviewerTitle variable, and reviewerURL is the value of the reviewerURL variable.

 

15. Save your changes to the style sheet.

 

16. Generate a result document using bg210 and bg211 for the values of the gameID parameter, storing the results in files named bg210.html and bg211.html , respectively.

 

hgstyles.css

/*

   New Perspectives on XML, 3rd Edition

   Tutorial 6

   Review Assignment

 

   Harpe Gaming Store style sheet

  

 

   Filename:         hgstyles.css

   Supporting Files: none

 

*/

 

/* Default styles */

 

* {

   margin: 0px;

}

 

header, section, article {

   display: block;

}

 

 /* Body styles */

body {

   font-family: Verdana, Geneva, sans-serif;

   background-color: rgb(121, 211, 121);

}

 

div#wrap {

   background-color: white;

   margin: 0px auto;

   width: 1200px;

   border-left: 2px solid rgb(151, 151, 151);

   border-right: 2px solid rgb(151, 151, 151);

 

   box-shadow: rgb(51, 51, 51) 10px 0px 30px,

               rgb(51, 51, 51) -10px 0px 30px;

   padding-bottom: 50px;

}

 

header {

   background: -o-linear-gradient( top,rgb(61, 192, 61) , rgb(51,51,51) 95%); 

   background: -ms-linear-gradient( top,rgb(61, 192, 61) , rgb(51,51,51) 95%); 

   background: -moz-linear-gradient( top,rgb(61, 192, 61) , rgb(51,51,51) 95%); 

   background: -webkit-linear-gradient( top,rgb(61, 192, 61) , rgb(51,51,51) 95%); 

   background: linear-gradient( top,rgb(61, 192, 61) , rgb(51,51,51) 95%); 

}

 

div#wrap > header > h1 {

   font-size: 3.6em;

   letter-spacing: 0.12em;

   font-weight: normal;

   color: rgb(151, 151, 151);

   text-shadow: black 3px 3px 8px,

                white 0px -2px 0px;

   margin-left: 100px;

   padding: 15px 0px;  

   font-family: ‘Century Gothic’, sans-serif;

}

 

#gameSummary {

   margin: 0px 100px 30px 100px;

}

 

#gameSummary > h1 {

   margin: 20px 0px 2px 325px;

   font-weight: normal;

   font-size: 1.8em;

   letter-spacing: 0.07em;

   color: rgb(222, 112, 182);

}

 

#gameSummary > h2 {

   margin: 0px 0px 0px 325px;

   font-weight: normal;

   font-size: 0.85em;

   border-bottom: 1px solid rgb(211, 211, 211);

}

 

#gameSummary > h2 em {

   color: rgb(116, 158, 242);

   font-weight: normal;

   font-style: normal;

}

 

#gameSummary > h3 {

   font-size: 1.05em;

   font-weight: normal;

   color: rgb(204, 34, 142);

   margin-left: 325px;

}

 

 

#gameSummary > img {

   float: left;

   margin: 20px 0px 0px 0px;

}

 

#gameSummary > p {

   margin: 0px 20px 30px 325px;

   font-size: 0.9em;

}

 

 table#summaryTable {

   margin-left: 325px;

   font-size: 0.85em;

   margin-top: 10px;

   margin-bottom: 30px;

}

 

table#summaryTable th {

   text-align: right;

   padding-right: 8px;

   font-weight: normal;

}

 

table#summaryTable td {

   color: rgb(131, 91, 91);

}

 

 table#scoreTable {

   border-collapse: collapse;

   margin: 10px 0px 30px 325px;

   border: 1px solid rgb(151, 151, 151);

   width: 520px;

}

 

table#scoreTable th {

   font-weight: normal;

   font-size: 0.85em;

   text-align: left;

   padding: 0px 10px;

   height: 20px;

   vertical-align: bottom;

   border-bottom: 1px solid rgb(151, 151, 151);

   border-right: 1px solid rgb(151, 151, 151);

}

 

table#scoreTable td {

   padding: 0px;

   height: 20px;

   border-bottom: 1px solid rgb(151, 151, 151);

}

 

table#scoreTable tr:last-of-type {

   background-color: rgb(159, 236, 128);

}

 

section.review {

   border: 1px dotted rgb(151, 151, 151);

   background-color: rgb(235, 235, 235);

   margin: 10px 0px 10px 0px;

   width: 295px;

   clear: left;

   float: left;

}

 

section.review h3 {

   font-weight: normal;

   color: rgb(54, 121, 78);

   font-size: 0.9em;

   text-align: center;

   margin: 10px;

}

 

section.review p {

   font-size: 0.7em;

   margin: 10px;

}

 

section.review ul {

   font-size: 0.7em;

}

 

footer {

   clear: left;

   padding-top: 30px;

   font-size: 0.1em;

   border-bottom: 1px solid rgb(211, 211, 211);

 }

 

 

gamestxt.xml

<?xml version=”1.0″ encoding=”UTF-8″ ?>

<!–

   New Perspectives on XML 3rd Edition

   Tutorial 6

   Review Assignment

 

   Harpe Gaming Store Board Games

   Author: 

   Date:   

 

   Filename:         games.xml

   Supporting Files: games.xsl

 

–>

 

<games>

   <game gid=”bg210″>

      <title>Towers and Temples</title>

      <manufacturer>Royal Games</manufacturer>

      <price>17.73</price>

      <releaseDate>10/21/2017</releaseDate>

      <media>Board Game</media>

      <age>10+</age>

      <players>2 – 8</players>

      <time>30 – 60 minutes</time>

      <image>bg210.png</image>

 

      <summary>

         <h3>Rule an Ancient City</h3>

         <p><i>Towers and Temples</i> is the winner of the 2016 Palmer Medal for 

         Best New Simulation Board Game. Players adopt role cards of characters

         from ancient Greece and Rome in an attempt to manage the administration of

         a city. Each role provides a different ability and strategy. However, one

         role card belongs to a deadly assassin and players must be constantly

         aware of betrayal and double-cross. This card game provides a ton of enjoyment 

         and can handle up to seven players and expansion packs available for 

         larger parties.</p>

         <p>This is a nicely balanced game, where each player must carefully choose 

         his or her roles and the strategies can quickly change with the turn of a card.

         However the level of randomness is just right and cunning and resourcefulness

         can overcome bad luck (if given time.) I do not recommend this game unless 

         there are at least 4 players; less than that reduces the intrigue and some

         of the game appeal.</p>

      </summary>

      <scores>

         <score category=”Entertainment”>8</score>

         <score category=”Strategy”>9</score>

         <score category=”Innovation”>7</score>

         <score category=”Art Work”>6</score>

         <score category=”Community Enjoyment”>10</score>

         <score category=”Ease of Set Up”>9</score>

         <score category=”Play Again”>10</score>

      </scores>

   </game>

   <game gid=”bg211″>

      <title>Alliance</title>

      <manufacturer>Bearnes Brothers</manufacturer>

      <price>22.15</price>

      <releaseDate>9/14/2017</releaseDate>

      <media>Board Game</media>

      <age>12+</age>

      <players>2 – 6</players>

      <time>60 – 120 minutes</time>

      <image>bg211.png</image>

 

      <summary>

         <h3>Decide the Fate of the World</h3>

         <p>The world is at war. <i>Alliance</i> challenges you and your opponents to 

         decide the outcome. As one of the world powers battling for supremacy you must 

         lead your country’s military drive; but you can’t do it alone. You have to form

         alliances and then betray your allies before they betray you!</p>

         <p>Decide where to strike, when to strike and the intensity of the strike. Will 

         it be a bombing raid, an offshore missile barrage, or an invasion with land forces

         and tanks? Plan your attack, move into enemy territory with your forces and 

         win the conflict.</p>

         <p>The economic destiny of your nation is also at stake. Buy armaments and develop 

         secret weapons from your country’s economic funds and natural reserves; but be

         sure to save something for the future.</p>

      </summary>

      <scores>

         <score category=”Entertainment”>7</score>

         <score category=”Strategy”>10</score>

         <score category=”Innovation”>6</score>

         <score category=”Art Work”>5</score>

         <score category=”Community Enjoyment”>8</score>

         <score category=”Ease of Set Up”>7</score>

         <score category=”Play Again”>5</score>

      </scores>

   </game>

 

</games>

 

 

gamestxt.xsl

<?xml version=”1.0″ encoding=”UTF-8″ ?>

<!–

   New Perspectives on XML, 3rd Edition

   Tutorial 6

   Review Assignment

 

   Harpe Gaming Products Style Sheet

   Author: 

   Date:   

 

   Filename:         games.xsl

   Supporting Files: 

–>

 

 

<xsl:stylesheet version=”1.0″

     xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”

     xmlns:df=”http://example.com/dateformats”>

 

   

   <xsl:output method=”html”

      doctype-system=”about:legacy-compat”

      encoding=”UTF-8″

      indent=”yes” />

 

   <xsl:template match=”https://www.sweetstudy.com/”>

      <html>

         <head>

            <title><xsl:value-of select=”games/game[@gid=’bg201′]/title” /></title>

            <link href=”https://www.sweetstudy.com/content/hgstyles.css” rel=”stylesheet” type=”text/css” />

         </head>

 

         <body>

            <div id=”wrap”>

               <header>

                  <h1>Harpe Gaming</h1>

               </header>

 

               <section id=”gameSummary”>

                  <xsl:apply-templates select=”games/game[@gid=’bg201′]” />

               </section>

 

               <footer>.</footer>

             </div>

         </body>

      </html>

   </xsl:template>

 

 

   <xsl:template match=”game”>

      <img src=”https://www.sweetstudy.com/content/{image}” alt=”” />

 

      <h1><xsl:value-of select=”title” /></h1>

      <h2>By:

         <em><xsl:value-of select=”manufacturer” /></em>

      </h2>

 

      <table id=”summaryTable”>

         <tr>

            <th>Game ID: </th>

            <td><xsl:value-of select=”@gid” /></td>

         </tr>

 

         <tr>

            <th>List Price: </th>

            <td>

               <xsl:value-of select=”price” />

            </td>

         </tr>

 

         <tr>

            <th>Media: </th>

            <td>

               <xsl:value-of select=”media” />

            </td>

         </tr>

         <tr>

            <th>Release Date: </th>

            <td>

               <xsl:value-of select=”releaseDate” />

            </td>

         </tr>

         <tr>

            <th>Age: </th>

            <td>

               <xsl:value-of select=”age” />

            </td>

         </tr>

         <tr>

            <th>Players: </th>

            <td>

               <xsl:value-of select=”players” />

            </td>

         </tr>

         <tr>

            <th>Time: </th>

            <td>

               <xsl:value-of select=”time” />

            </td>

         </tr>

      </table>

 

   </xsl:template>

 

 

   <xsl:template match=”review”>

 

      <xsl:variable name=”reviewerTitle”

       select=”$externalReviewers/reviewer[@revid=current()/@revid]/title” />

      <xsl:variable name=”https://www.sweetstudy.com/content/reviewerURL”

       select=”$externalReviewers/reviewer[@revid=current()/@revid]/url” />

 

   </xsl:template>

 

 

</xsl:stylesheet>

 

 

 hgfunctions

<?xml version=”1.0″ encoding=”UTF-8″ ?>

<!–

   New Perspectives on XML, 3rd Edition

   Tutorial 6

   Review Assignment

 

   Harpe Gaming Library of Templates Style Sheet

 

   Filename:         hgfunctions.xsl

   Supporting Files: 

–>

 

<xsl:stylesheet version=”1.0″

     xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”

     xmlns:df=”http://example.com/dateformats”>

 

<df:months>

   <m>January</m><m>February</m><m>March</m><m>April</m>

   <m>May</m><m>June</m><m>July</m><m>August</m><m>September</m>

   <m>October</m><m>November</m><m>December</m>

</df:months>

 

<xsl:variable name=”monthNames” 

  select=”document(”)/xsl:stylesheet/df:months/m”/>

 

<xsl:template match=”releaseDate”>

  <xsl:variable name=”monthValue” 

   select=”substring-before(.,”https://www.sweetstudy.com/”)” />

 

  <xsl:variable name=”dayValue” 

   select=”substring-before(substring-after(., “https://www.sweetstudy.com/”), “https://www.sweetstudy.com/”)” />

 

  <xsl:variable name=”yearValue” 

   select=”substring-after(substring-after(., “https://www.sweetstudy.com/”), “https://www.sweetstudy.com/”)” />

 

  <xsl:value-of 

   select=”concat($monthNames[number($monthValue)], ‘ ‘,

   number($dayValue), ‘, ‘, $yearValue)” />

 </xsl:template>

 

<xsl:template name=”imageRow”>

   <xsl:param name=”imgFile” />

   <xsl:param name=”imgCount” />

 

   <xsl:if test=”$imgCount > 0″>

      <img src=”https://www.sweetstudy.com/content/{$imgFile}” alt=”” />

      <xsl:call-template name=”imageRow”>

         <xsl:with-param name=”imgFile” select=”$imgFile” />

         <xsl:with-param name=”imgCount” select=”$imgCount – 1″ />

      </xsl:call-template>

   </xsl:if>

</xsl:template>

 

 

</xsl:stylesheet>