Highlight Keywords onClick Hyperlink 2

djs45uk · Jan 30, 2006

Dear All

I work for a school and I'm trying to write some learning materials which include differentiation for Special Needs students.

The idea is that there will be a task displayed in a box on the screen (all in HTML) and a link at the bottom saying 'Highlight keywords'.

When a student clicks the link, it will highlight the important words in the task to help special needs students understand the important parts of the task.

Does anyone know how I can do this? I presume JavaScript is the easiest way.

Any help is greatly appreciated.

Many thanks

Daniel

theniteowl · Jan 30, 2006

You could do it a number of ways.
The first that comes to mind is to pull the innerHTML value of the section you want the highlighting done in, parseing through the text looking for the keywords and then adding tags to those words to alter their style and spitting then writing the innerHTML value back out updated.

Another approach would be to set a style for those key words to set the highlighting. Normally you could have one default style set for them and with the click of a button on the screen just change the style or class that applies to those elements.

Stamp out, eliminate and abolish redundancy!

BabyJeffy · Jan 30, 2006

Daniel,

Here is a very simple page that shows a way to do this. When the "toggle" link is clicked, it loops through the whole page looking for <span> tags with a class of "spec" (you can change these to whatever you use). When it finds a span with a matching class, it checks to see if the contents are colour "red"... and if so sets them to black/normal (otherwise it sets them to red/bold):

Code:

<html>
<head>
<script type="text/javascript">
function toggle() {
  var _collection = document.getElementsByTagName('span');
  for (var loop = 0, max = _collection.length; loop < max; loop++) {
    if (_collection[loop].className == "spec") {
      if (_collection[loop].style.color == "red") {
        _collection[loop].style.color = "black";
        _collection[loop].style.fontWeight = "normal";
      } else {
        _collection[loop].style.color = "red";
        _collection[loop].style.fontWeight = "bold";
      }
    }
  }
}
</script>
</head>
<body>
<div class="hint">Turn off the <span class="spec">computer off</span> by first <span class="spec">turning off the power switch</span> and then <span class="spec">pulling out the power cord</span></div>
<a href="javascript:toggle();">Toggle</a>
</body>
</html>

Hope that helps you find something that works for you.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

theniteowl · Jan 30, 2006

Precisely what I was suggesting while trying to avoid writing any code to show it.

Change in job functions keeps me from spending as much time here.

Stamp out, eliminate and abolish redundancy!

djs45uk · Jan 30, 2006

You guys are amazing!

Thank you so much -- it's perfect! Special thanks for the code -- it's great to see it working.

Many thanks again

Daniel

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Highlight Keywords onClick Hyperlink 2

djs45uk

Technical User

theniteowl

Programmer

BabyJeffy

Programmer

theniteowl

Programmer

djs45uk

Technical User

Similar threads

Part and Inventory Search

Sponsor