Highlight words by clicking them

How to highlight words by clicking them, and have the list of highlighted words placed into a hidden INPUT within a FORM.

<html>
<head>
  <script language="JavaScript">
  <!-- Script hiding

function SortString(value) {
  var valuearray = new Array();
  
  arraypos = 0;
  valuearray[0] = '';
  
  for (x=0; x < value.length; x++) {
    valuearray[arraypos] = valuearray[arraypos] + value.substring(x,x+1);
    if (value.substring(x,x+1) == ',') valuearray[++arraypos] = '';
  }

  for (x=0; x < valuearray.length-1; x++) {
    for (y= x+1; y < valuearray.length; y++) {
      if (valuearray[y] < valuearray[x]) {
        temp = valuearray[x];
        valuearray[x] = valuearray[y];
        valuearray[y] = temp;
      }
    }
  }
  
  newvalue = '';
  for (x=0; x < valuearray.length; x++) newvalue = newvalue + valuearray[x];
  return newvalue;
}

function QuestionNumber(name) {
  tempname = name.toUpperCase();
  pos = tempname.indexOf('W',0);
  if (pos < 0) {
    alert('Error in question format, ' + name + ' is not valid.');
    return -1;
  }

  return name.substring(0,pos);
}

function WordNumber(name) {
  tempname = name.toUpperCase();
  pos = tempname.indexOf('W',0);
  if (pos < 0) {
    alert('Error in question format, ' + name + ' is not valid.');
    return -1;
  }

  return name.substring(pos,name.length);
}

function InsertItem(name) {
  QNumber = QuestionNumber(name);
  WNumber = WordNumber(name) + ',';
  if ( (QNumber != -1) && (WNumber != -1)) {
    tempstring = document.forms[0].elements[QNumber].value;
    pos = tempstring.indexOf(WNumber,0);
    if (pos < 0) document.forms[0].elements[QNumber].value =
      SortString(tempstring + WNumber);
  }
}

function RemoveItem(name) {
  QNumber = QuestionNumber(name);


  WNumber = WordNumber(name) + ',';
  if ( (QNumber != -1) && (WNumber != -1)) {
    tempstring = document.forms[0].elements[QNumber].value;
    pos = tempstring.indexOf(WNumber,0);
    if (pos >= 0) {
      document.forms[0].elements[QNumber].value = tempstring.substring(0,pos) + tempstring.substring(pos+WNumber.length, tempstring.length);
    }
  }
}

function Toggle(HighlightColor) {

  source=event.srcElement;

// eval('if (typeof(' + source.name + 'isselected)=="undefined")' + source.name + 'isselected =0');
// eval('isselected = !' + source.name + 'isselected');
// eval(source.name + 'isselected = isselected');
  
  isselected = (source.color == HighlightColor);
  if (!isselected) {
    source.color = HighlightColor;
    InsertItem(source.name);
  }
  else {
    source.color = document.body.text;
    RemoveItem(source.name);
  }

  //Now de-select
  txt = document.body.createTextRange();
  txt.move("character",1);
  txt.select();

  
}

// End of script hiding -->
    </Script>
</head>
<body>
  <form name = 'fred' action = '/'>
  Please select all the verbs in the following sentence
  (Click each word to select/deselect)
  <p OnMouseOver="this.style.cursor='hand';" OnMouseOut="this.style.cursor='auto';">
  <font name="q1w1" onclick="Toggle('#ff0000');">The</font>
  <font name="q1w2" onclick="Toggle('#ff0000');">cat</font>
  <font name="q1w3" onclick="Toggle('#ff0000');">sat</font>
  <font name="q1w4" onclick="Toggle('#ff0000');">on</font>
  <font name="q1w5" onclick="Toggle('#ff0000');">the</font>
  <font name="q1w6" onclick="Toggle('#ff0000');">mat</font>
  <input name = 'q1' value=''>
  </form>
</body>
</html>

 

Share this article!

Follow us!

Find more helpful articles: