Forums → Prototype and script.aculo.us →

 
Mar 28, 2008 2:06am
Generic-user-small Mike E. 5 posts

I need some help with the HighlightEffect function to highlight one entire sentence of a paragraph. The onclick action needs to come from outside the paragraph. In the example below, the third sentence will be highlighted in red after clicking on the “Click here to check your answer,” sentence that follows the paragraph.

For example:

November and December are wonderful months for gardening in the south. While residents of northern states are more concerned with preparations for winter, gardeners in southern states can enjoy natural circumstances that enhance their efforts. Football enthusiasts in November and December can enjoy the sport throughout the country. Temperatures in the south are warm enough to grow abundant amounts of flowers and vegetables. Plants and gardeners are relatively free from the pesky bug populations that present problems during the summer. If you enjoy gardening, you’ll find November and December good months in the south.

Click here to check your answer.

Any ideas on how to do this? I’m new to script.aculo.us if it’s not obvious. Just need a little help.

Thanks,
Mike
 
Mar 28, 2008 7:51am
Headshot_120px_small Christophe P... 28 posts

I think you would just need to wrap the relevant part inside a <span> that you could identify somehow.

For instance, say your paragraphs are always the last pars before the one containing your “check…” link, and you wrapped the relevant sentence inside a <span class="answer"> item. Your event handler could go something like this:

function handleCheckLink(e) {
  e.stop();
  e.findElement('p').previous('p').down('span.answer').highlight();
}

You could even bind this just once at the document level if you took care to identify your links with a class, say, <a href="#" class="answerChecker">…</a>:

function handleCheckLinks(e) {
  var activator = e.findElement('a.answerChecker');
  if (!activator)
    return;
  e.stop();
  activator.up('p').previous('p').down('span.answer').highlight();
}

document.observe('click', handleCheckLinks);

And if you want it to be accessible, you should make your links point to the proper URL (probably the current one with a parameter to highlight the answer directly in the markup, as you wouldn’t have JS available then).

‘HTH
 
Mar 28, 2008 3:44pm
Generic-user-small Mike E. 5 posts

Thank you so much for your response.

Here’s what I have so far.


<head>
...
    <script type="text/javascript" src="/javascript/prototype.js"></script>
    <script type="text/javascript" src="/javascript/scriptaculous.js?load=effects"></script>
     <script type="text/javascript">
        function handleCheckLinks(e) {
        var activator = e.findElement('a.answerChecker');
        if (!activator)
        return;
        e.stop();
        activator.up('p').previous('p').down('span.answer').highlight();
        }

        document.observe('click', handleCheckLinks);
    </script>
...

<p><a href="#" class="answerChecker">Click here</a> when you are finished.</p>

<p class="Rightbar_body_green">November and December are 
wonderful months for gardening in the south. While residents 
of northern states are more concerned with preparations for 
winter, gardeners in southern states can enjoy natural 
circumstances that enhance their efforts. 
<span class="answer">Football enthusiasts in November 
and December can enjoy the sport throughout the country.</span> 
Temperatures in the south are warm enough to grow abundant 
amounts of flowers and vegetables. Plants and gardeners are 
relatively free from the pesky bug populations that present 
problems during the summer. If you enjoy gardening, you'll 
find November and December good months in the south.</p>
</head>

A few questions:
1. It doesn’t work if the ‘Click here’ sentence is before the main paragraph.
2. How do I change the color of the incorrect sentence?
3. I would also like the answer to remain highlighted after clicking ‘Click here’.

Please forgive my lack of knowledge. I’m very new to javascript.

Thanks again,
Mike
 
Mar 29, 2008 10:56am
Headshot_120px_small Christophe P... 28 posts

Hey,

1. If your “Click here” link is before the par, use .next('p') instead of .previous('p') in your DOM navigation.
2. I’m not clear on what the “incorrect sentence” is in your context. The whole remainder of the par? Or perhaps you meant the correct sentence?
3. If you want the answer to remain highlighted, not just to use a YFD (Yellow Fade Technique), you should explicitly set the color instead of the Highlight effect, something like:

activator.up('p').next('p').down('span.answer').setStyle({ backgroundColor: '#dfd' });

(that would be light green background, and remain persistent).

‘HTH

4 posts, 2 voices