show content based on checkbox status?

pinkerbot · April 17th, 2012, 03:00 AM

Hi
First, appologies if my question is trivial! I am not a programmer, but i need to be able to display the results of my research.

I have some marked-up texts stored in xml. The texts are marked up with sentence boundaries and wordclass, e.g.:

Code:

<sentence>
	<word type="noun" string="Peter"/>
	<word type="verb" string="bought"/>
	<word type="determiner" string="a"/>
	<word type="adjective" string="new"/>
	<word type="noun" string="computer"/>
	<word type="preposition" string="with"/>
	<word type="determiner" string="the"/>
	<word type="noun" string="money"/>
	<word type="pronoun" string="he"/>
	<word type="verb" string="got"/>
	<word type="adverb" string="yesterday"/>
</sentence>

Now, i want to be able to display the text as running text without the wordclass info, but with the possibilty to choose to highlight all words belonging to one or more chosen wordclasses - this choice should be made by checking a checkbox.

Below is a (obviously) non-working solution. My question is: How can i achieve what i wish to do? If not, any other suggestion is more than welcome!

Code:

<form name="FormDebitor" action="#">
 <input type="checkbox" name="type" value="noun"/>Noun
 <input type="checkbox" name="type" value="verb"/>Verb
 <input type="checkbox" name="type" value="adjective"/>Adjective
</form>

<xsl:for-each select="sentence/word">
 <xsl:choose>
  <xsl:when test="[her goes test to check wheter current @type is checked above]">
    <SPAN style="BACKGROUND-COLOR: yellow">
      <xsl:value-of select="@string"/>
    </SPAN> 
  </xsl:when>
  <xsl:otherwise>
   <xsl:value-of select="@string"/> 
  </xsl:otherwise>
 </xsl:choose>
</xsl:for-each>

Thanks in advance!
/Pete

samjudson · April 17th, 2012, 03:28 AM

XSLT is used for processing XML input and producing XML output. You cannot do what you are asking using only XSLT, although Michael Kay has been working on Saxon-CE which might be able to do what you are after: http://www.saxonica.com/ce/doc/contents.html

However, what you probably want is just to use Javascript to do it. I'd output the words in spans with a class name set to the type, and then in JQuery or similar just update the styles for all those classes.

Code:

<xsl:for-each select="sentence/word">
    <span class="{@type}"><xsl:value-of select="@string"/></span> 
</xsl:for-each>

and then something that handles the click event for the checkboxes:

Code:

$(document).ready(function() {
   $("input:checkbox").click(function() {
      var type = "." + $(this).val();
      $(type).toggleClass("highlight");
   });
});

Then define your CSS class

Code:

highlight { background-color: yellow; }

pinkerbot · April 17th, 2012, 03:59 AM

Thanks for the quick reply!

Quote:

However, since i am not a programmer, could you please give a bit more detail of how to put it together?
I tried copying your suggestion into my xsl-file, but i cannot seem to make it work. The script handling the checkbox-event goes into a script-node at the end, right? But how about the CSS definition?

Sorry about that! It works now!

However, now that i see it working, i realize that it would be neat to add different highlighting colors to the different values (i.e. nouns would be one color, verbs another, etc.)
Could anyone give me hints/solutions to achieve that?

/Pete

pinkerbot · April 18th, 2012, 05:59 AM

Hi again,

I have modified my xml (added a class attr. with a count value), as well as the JQuery script; it now looks like this:

Code:

$(document).ready(function() {
      $("input:checkbox").click(function() {
      var pattern = "." + $(this).val();
      // $(pattern).toggleClass("highlight");
 
	if ($(this).hasClass('1')) {
		$(pattern).toggleClass("highlight1");
	}
	if ($(this).hasClass('2')) {
		$(pattern).toggleClass("highlight2");
	}
	if ($(this).hasClass('3')) {
		$(pattern).toggleClass("highlight3");
	}
	else{
		$(pattern).toggleClass("highlight4");
	}
});

It is probably way too verbose, since it also requires an equivalently long list of highlight color specifications in the CSS, but if it worked, that would be ok. Alas, it doesn't :(
It does however result in a partial success, since it works if the class attribute is '3' (any other class-value results in the default coloring). Isn't that strange?

Again, any suggestions or comments are more than welcome. I would very much like to finish this before a presentation tomorrow!

samjudson · April 18th, 2012, 06:08 AM

I've no idea what XSLT you have used that would generate anything where that javascript would produce any kind of result.

This forum is here to help you take some XML, process it with XSLT and produce some XML (or HTML) output. If you want help with javascript you probably want a different forum.

As you have not shown us your XSLT I am assuming you are happy with what it is generating.