Trouble Outputting <punc> Elements with XSLT to HTML

kes213 commented 6 years ago

For JavaScript Exercise 2, I'm making an html page that displays all of the Harlem Ren Project's Claude McKay poems.

I have green html file output that formats the page how I want it. However, the JavaScript Exercise 2 assignment requires elements for the javascript coding. I want to wrap my elements in elements, and the @class attributes will then basically match each other. That way, I can create a list similar to the one that Dr. Bondar uses for "The Injured Islanders" page.

My problem is that I don't know how to get my elements to output on my html page that I created with XSLT.

Here is my XSLT:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    xmlns:math="http://www.w3.org/2005/xpath-functions/math"
    exclude-result-prefixes="xs math"
    version="3.0">

    <xsl:output method="xml" indent="yes"/>

    <xsl:template match="/">
        <html>
            <head>
                <title>Claude McKay 10-Poem Collection</title>
            </head>
            <body>
                <xsl:apply-templates/>
            </body>
        </html>
    </xsl:template>

    <xsl:template match="poem">
        <h2>
            <xsl:apply-templates select="title"/>
        </h2>
        <p>
            <xsl:apply-templates select="stanza"/>
        </p>
    </xsl:template>

    <xsl:template match="stanza">
       <xsl:apply-templates/>
        <br/>
    </xsl:template>

    <xsl:template match="stanza/l">
        <xsl:apply-templates/>
    <br/>
    </xsl:template>
</xsl:stylesheet>

And here is a sample of my HTML Output:

<?xml version="1.0" encoding="UTF-8"?>
<html>
   <head>
      <link rel="stylesheet" type="text/css" href="harlem_ren_css.css"/>
       <script type="text/javascript" src="McKay_poemCollection_colorCoding_java.js">/**/</script>
      <title>Claude McKay 10-Poem Collection</title>
   </head>
   <body>
      <h2>Subway Wind</h2>
      <p>
            Far down, down through the city’s great gaunt gut<br/>
            The gray train rushing bears the weary wind;<br/>
            In the packed cars the fans the crowd’s breath cut,<br/>
            Leaving the sick and heavy air behind.<br/>
            And pale-cheeked children seek the upper door<br/>
            To give their summer jackets to the breeze;<br/>
            Their laugh is swallowed in the deafening roar<br/>
            Of captive wind that moans for fields and seas;<br/>
            Seas cooling warm where native schooners drift<br/>
            Through sleepy waters, while gulls wheel and sweep,<br/>
            Waiting for windy waves the keels to lift<br/>
            Lightly among the islands of the deep;<br/>
            Islands of lofty palm trees blooming white<br/>
            That led their perfume to the tropic sea,<br/>
            Where fields lie idle in the dew-drenched night,<br/>
            And the Trades float above them fresh and free.<br/>
        <br/>
      </p>

      <h2>On Broadway</h2>
      <p>
            About me young careless feet<br/> 
            Linger along the garish street;<br/> 
            Above, a hundred shouting signs<br/> 
            Shed down their bright fantastic glow<br/> 
            Upon the merry crowd and lines<br/> 
            Of moving carriages below.<br/> 
            Oh wonderful is Broadway — only<br/> 
            My heart, my heart is lonely.<br/>
        <br/>
            Desire naked, linked with Passion,<br/> 
            Goes trutting by in brazen fashion;<br/> 
            From playhouse, cabaret and inn<br/> 
            The rainbow lights of Broadway blaze<br/> 
            All gay without, all glad within;<br/> 
            As in a dream I stand and gaze<br/> 
            At Broadway, shining Broadway — only<br/> 
            My heart, my heart is lonely.<br/>
        <br/>
      </p>

      <h2>Romance</h2>
      <p>
            To clasp you now and feel your head close-pressed,<br/> 
            Scented and warm against my beating breast;<br/>
        <br/>
            To whisper soft and quivering your name,<br/> 
            And drink the passion burning in your frame;<br/>
        <br/>
            To lie at full length, taut, with cheek to cheek,<br/> 
            And tease your mouth with kisses till you speak<br/>
        <br/>
            Love words, mad words, dream words, sweet senseless words,<br/> 
            Melodious like notes of mating birds;<br/>
        <br/>
            To hear you ask if I shall love always,<br/> 
            And myself answer: Till the end of days;<br/>
        <br/>
            To feel your easeful sigh of happines<br/>
            When on your trembling lips I murmur: Yes;<br/>
        <br/>
            It is so sweet. We know it is not true.<br/> 
            What matters it? The night must shed her dew.<br/>
        <br/>
            We know it is not true, but it is sweet—<br/> 
            The poem with this music is complete.<br/>
        <br/>
      </p>
   </body>
</html>

If it helps, both of these files are currently uploaded on the Harlem_Ren GitHub repo.

Can anyone tell me how I can get the elements to turn out on the html output? I'm thinking I need a new template match, but I'm not sure.

kes213 commented 6 years ago

Wait, I think I figured it out, but someone can still take a look if they want, just in case.

I was missing the <xsl:mode on-no-match="shallow-copy"/> at the beginning of my XSLT document.

ebeshero commented 6 years ago

@kes213 I was just taking a look at your code, and I needed to see a sample input XML, so I was looking at https://github.com/kes213/Harlem_Ren_Project/blob/master/Poem%20XML%20Documents/McKay/McKay_After_the_Winter.xml

I'm a little confused by your solution: I don't know why you'd want to do an identity transformation. (That is what xsl:mode on-no-match="shallow-copy"/> is for.) You probably want to be setting your <xsl:output> to html, since this is an XML to HTML transformation (and you should model that on earlier homework assignments, using the xsl:output line we provide.)

If you're using shallow-copy, you're probably outputting your <punc> XML elements in your HTML, and that's going to produce non-valid HTML. Instead, our goal here is to transform those XML elements into legal HTML elements: You want to transform <punc type="Something"> to . So you just need to write an <xsl:template> rule to handle your <punc> elements and convert them into HTML  elements. In the template rule, you can use an attribute value template, so you can make your  elements as XSLT processes them. Does that make sense? You've written this kind of code before.

kes213 commented 6 years ago

Okay, I see what I was doing wrong!

Thanks, I'll give that a try!

ebeshero commented 6 years ago

@kes213 Just to be clear, I would not use <xsl:mode on-no-match="shallow-copy"/> here. Instead you want to write a new template rule to convert the elements you want to toggle into HTML  elements.

kes213 commented 6 years ago

Where should I put the new template match on so that the new elements appear in my output?

ebeshero commented 6 years ago

@kes213 It's simply a new template rule, and it can really go anywhere in your XSLT file. You can put that template rule anywhere because you already have this rule in place:

 <xsl:template match="stanza/l">
        <xsl:apply-templates/>
    <br/>
    </xsl:template>

Because you have that rule, you are all set to apply whatever template rules process elements that might be inside the <l> elements in your XML. XSLT doesn't care in what order you set your template rules--they will fire as long as they encounter a rule to process them, and if they do not, they'll default to outputting plain text.

kes213 commented 6 years ago

Okay, I added this template match:

<xsl:template match="punc">
        <span class="{@type}"></span>
    </xsl:template>

The elements are on the output, but the punctuation marks that should be between the tags are gone. Do I need to put something else in between the tags to get the commas, periods, etc. to appear as well?

kes213 commented 6 years ago

Oops, I see what I did. I didn't put my <xsl:apply-templates/> in between them.

ebeshero commented 6 years ago

@kes213 And of course you can process your figurative language elements with a template rule much like that one you've just written.

kes213 commented 6 years ago

Yes! Thank you!

kes213 commented 6 years ago

Okay, I've gotten past my HTML output problems.

I've finished putting together my JavaScript file and pairing it with my HTML and the CSS documents, but it's not working (meaning it's not highlighting the punctuation marks like it should).

I uploaded my HTML file, my CSS file, and my JavaScript file to the Troubleshooting folder. I created a new folder called STINEBISER so that all 3 would be held together.

ebeshero commented 6 years ago

@kes213 Aha! I see the problem--this is a proofreading issue! When I look at your CSS, I see:

span.commas.on {color:purple}
span.periods.on {color:white}
span.semicolons.on {color:green}
...

But when I look at your HTML, I see:

My heart<span class="comma">,</span> my heart is lonely<span class="period">.</span>
         <br/>

I think the mismatch is in your JavaScript as well. Be careful! You want to make sure these all match up exactly.

ebeshero commented 6 years ago

@kes213 More of the CSS classes are mismatched--I just posted those three for a quick overview of the problem.

Also, you might want to think about giving the values up in your checkbox area a stable class of their own so they show what the elements will look like when they're highlighted. You could just set those to toggle on as well, though.

kes213 commented 6 years ago

I see the proofreading problem!

By "a stable class of their own," do you mean highlighting the checkbox labels to match the highlighted text? Does that mean I should add another attribute value to the html elements?

kes213 commented 6 years ago

Changing the proofreading issues didn't make the checkboxes work.

ebeshero commented 6 years ago

@kes213 Uh oh...let's take another look to debug the code...

About the checkboxes...Yes, I was thinking you could highlight your checkbox labels so people can always see what the highlighting will look like when they click, and you could give the  elements in your input field something distinctive for CSS to find.

ebeshero commented 6 years ago

@kes213 I wasn't looking closely at your JavaScript before, but I see lots of the same kind of error now that I look at it. For example, I see:

case "CommasToggle": {
            var commas = document.getElementsByClassName("commas");
            for (var i = 0; i < commas.length; i++) {
                chars[i].classList.toggle("on")}};

There is no variable named "chars" here. (That was my variable name from the sample.) You've named your variable commas, so you need to use that. Check each one of these...

kes213 commented 6 years ago

I figured it was an oversight as I was adapting your code.

I'll change those and try again!

ebeshero commented 6 years ago

@kes213 Also-- I notice that some of your cases are lacking that crucial last line where you step on each member of the variable list to toggle it on! For example, notice:

case "Open_PsToggle": {
            var open_p = document.getElementsByClassName("open_parentheses");
            for (var i = 0; i < open_p.length; i++) {}};
        break;

It's missing the line that should be

open_p[i].classList.toggle("on")}};
break;

kes213 commented 6 years ago

I believe it's working now! Thank you!

ebeshero commented 6 years ago

@kes213 Huzzah!!! :-D It's always a big triumph when you get all your files to work together the first time! :-)

ebeshero / DHClass-Hub

Trouble Outputting <punc> Elements with XSLT to HTML #404