www.webdeveloper.com
Results 1 to 10 of 10

Thread: highlight text by page user

  1. #1
    Join Date
    Dec 2010
    Posts
    10

    highlight text by page user

    I'm working on an educational website for reading strategies where I would like to have the possibilty for the user to highlight text and the possibilty to check their highlighted answers.

    For example:

    User task: Mark all the cause and effect connectors (because, so, therefore etc) in the text.

    Now I want the user to take the mouse and go over the text and mark all these connectors in the text. After marking the entire text the user will get feedback for his correct and incorrect answers and a possibilty to correct his mistakes.

    If the user marks in the sentence "He got hurt, because he fell of his bike." the word 'because' I would like somewhere else on the page be written that he did this correctly. If he would mark the word 'hurt' I would like the user to get a feedback saying that this answer is incorrect.

    Is this possible with simple html or do I need something else. If I need something else what do I need and maybe there is already a ready to use script for this.

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,681
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .zxc {
      color:black;
    }
    
    .highlight {
      background-Color:red;
    }
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcWords(n){
     var nu=n.childNodes.length;
     for(var z0=0;z0<nu;z0++) {
      var txt=n.firstChild.data;
      var rn=n.removeChild(n.firstChild);
      if(rn.nodeType==3){
       var s=txt.split(' ');
       for(var z1=0;z1<s.length;z1++) {
        var nn=document.createTextNode(s[z1]+' ');
        nn=document.createElement('A');
        nn.className='zxc';
        nn.appendChild(document.createTextNode(s[z1]));
        n.appendChild(nn);
        n.appendChild(document.createTextNode(' '));
       }
      }
      else {
       zxcWords(rn);
       n.appendChild(rn);
      }
     }
    }
    
    function zxcCheckWords(o){
     var obj=document.getElementById(o.ID);
     zxcWords(obj);
     this.words=this.bycls('zxc',obj);
     for (var z0=0;z0<this.words.length;z0++){
      this.addevt(this.words[z0],'mouseup','highlight',this.words[z0])
     }
     this.clss=['zxc','zxc '+o.HighLight];
     this.wordary=o.Words;
     for (var z1=0;z1<this.wordary.length;z1++){
      this.wordary[z1]=this.wordary[z1].toUpperCase();
     }
    }
    
    zxcCheckWords.prototype={
    
     CheckWords:function(id){
      for (var ary=[],word,z0=0;z0<this.words.length;z0++){
       if (this.words[z0].className==this.clss[1]){
        word=this.words[z0].innerHTML.replace(/\W/g,'');
        for (var ck=false,z0a=0;z0a<this.wordary.length;z0a++){
         if (this.wordary[z0a]==word.toUpperCase()){
          ck=true;
          break;
         }
        }
        if (!ck){
         ary.push(word);
        }
       }
      }
      document.getElementById(id).innerHTML=ary.join('<br>');
     },
    
     highlight:function(word){
      word.className=this.clss[word.className==this.clss[0]?1:0];
     },
    
     bycls:function(nme,el){
      for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
       if(reg.test(els[z0].className)) ary.push(els[z0]);
      }
      return ary;
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
     }
    
    
    
    }
    
    /*]]>*/
    </script></head>
    
    <body>
    <input type="button" name="" value="CheckWords" onmouseup="W1.CheckWords('results');"/>
    Click the words
    <div id="tst" >
    He got hurt, because he fell of his bike.
    </div>
    Bad Words
    <div id="results" ></div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var W1=new zxcCheckWords({
     ID:'tst',
     HighLight:'highlight',
     Words:['because','so','therefore']
    });
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Dec 2010
    Posts
    10
    Thanks Vic.

  4. #4
    Join Date
    Dec 2010
    Posts
    10
    I use the script Vic wrote and I am very happy with it.
    I tried to add some changes to the script so it will only highlight the words.
    Now I need it to highlight automatically al returning words (i.e. when clicking the first "he" in the following sentence it will automatically highlight the other "he" --> He watched and he listened.) and count the total highlighted words.

    Not really successful till now. Is there anyone who can help me on this one?

    This is the code I use to only highlight the words:
    code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
    <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .zxc {
    color:black;
    }

    .highlight {
    background-Color:red;
    }
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/

    function zxcWords(n){
    var nu=n.childNodes.length;
    for(var z0=0;z0<nu;z0++) {
    var txt=n.firstChild.data;
    var rn=n.removeChild(n.firstChild);
    if(rn.nodeType==3){
    var s=txt.split(' ');
    for(var z1=0;z1<s.length;z1++) {
    var nn=document.createTextNode(s[z1]+' ');
    nn=document.createElement('A');
    nn.className='zxc';
    nn.appendChild(document.createTextNode(s[z1]));
    n.appendChild(nn);
    n.appendChild(document.createTextNode(' '));
    }
    }
    else {
    zxcWords(rn);
    n.appendChild(rn);
    }
    }
    }

    function zxcCheckWords(o){
    var obj=document.getElementById(o.ID);
    zxcWords(obj);
    this.words=this.bycls('zxc',obj);
    for (var z0=0;z0<this.words.length;z0++){
    this.addevt(this.words[z0],'mouseup','highlight',this.words[z0])
    }
    this.clss=['zxc','zxc '+o.HighLight];
    this.wordary=o.Words;
    for (var z1=0;z1<this.wordary.length;z1++){
    this.wordary[z1]=this.wordary[z1].toUpperCase();
    }
    }

    zxcCheckWords.prototype={

    CheckWords:function(id){
    for (var ary=[],word,z0=0;z0<this.words.length;z0++){
    if (this.words[z0].className==this.clss[1]){
    word=this.words[z0].innerHTML.replace(/\W/g,'');
    for (var ck=false,z0a=0;z0a<this.wordary.length;z0a++){
    if (this.wordary[z0a]==word.toUpperCase()){
    ck=true;
    break;
    }
    }
    if (!ck){
    ary.push(word);
    }
    }
    }
    document.getElementById(id).innerHTML=ary.join('<br>');
    },

    highlight:function(word){
    word.className=this.clss[word.className==this.clss[0]?1:0];
    },

    bycls:function(nme,el){
    for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
    if(reg.test(els[z0].className)) ary.push(els[z0]);
    }
    return ary;
    },

    addevt:function(o,t,f,p){
    var oop=this;
    if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
    else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
    }
    },
    /*]]>*/
    </script></head>

    <body>
    <div id="tst" >
    When the man arrived at his office, he found out that he had forgotten his hat at the bus. He left the office and went to the central bus station. When he arrived there he remembered he left the house without his hat.
    </div>
    <script type="text/javascript">
    /*<![CDATA[*/

    var W1=new zxcCheckWords({
    ID:'tst',
    HighLight:'highlight',
    });
    /*]]>*/
    </script>
    </body>

    </html>

  5. #5
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,681
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .zxc {
      color:black;
    }
    
    .highlight {
      background-Color:red;
    }
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcWords(n){
     var nu=n.childNodes.length;
     for(var z0=0;z0<nu;z0++) {
      var txt=n.firstChild.data;
      var rn=n.removeChild(n.firstChild);
      if(rn.nodeType==3){
       var s=txt.split(' ');
       for(var z1=0;z1<s.length;z1++) {
        var nn=document.createTextNode(s[z1]+' ');
        nn=document.createElement('A');
        nn.className='zxc';
        nn.appendChild(document.createTextNode(s[z1]));
        n.appendChild(nn);
        n.appendChild(document.createTextNode(' '));
       }
      }
      else {
       zxcWords(rn);
       n.appendChild(rn);
      }
     }
    }
    
    function zxcCheckWords(o){
     var obj=document.getElementById(o.ID);
     zxcWords(obj);
     this.words=this.bycls('zxc',obj);
     for (var z0=0;z0<this.words.length;z0++){
      this.addevt(this.words[z0],'mouseup','highlight',this.words[z0])
     }
     this.clss=['zxc','zxc '+o.HighLight];
     this.wordary=o.Words;
     for (var z1=0;z1<this.wordary.length;z1++){
      this.wordary[z1]=this.wordary[z1].toUpperCase();
     }
    }
    
    zxcCheckWords.prototype={
    
     CheckWords:function(id){
      for (var ary=[],word,z0=0;z0<this.words.length;z0++){
       if (this.words[z0].className==this.clss[1]){
        word=this.words[z0].innerHTML.replace(/\W/g,'');
        for (var ck=false,z0a=0;z0a<this.wordary.length;z0a++){
         if (this.wordary[z0a]==word.toUpperCase()){
          ck=true;
          break;
         }
        }
        if (!ck){
         ary.push(word);
        }
       }
      }
      document.getElementById(id).innerHTML=ary.join('<br>');
     },
    
     highlight:function(word){
      for (var z0=0;z0<this.words.length;z0++){
       this.words[z0].className=this.clss[this.words[z0].innerHTML.toLowerCase().replace(/\W/g,'')==word.innerHTML.toLowerCase().replace(/\W/g,'')?1:0];
      }
     },
    
     bycls:function(nme,el){
      for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
       if(reg.test(els[z0].className)) ary.push(els[z0]);
      }
      return ary;
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
     }
    
    
    
    }
    
    /*]]>*/
    </script></head>
    
    <body>
    Click the words
    <div id="tst" >
    He got hurt, because he fell of his bike bike He got hurt, because he fell of his bike.
    </div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var W1=new zxcCheckWords({
     ID:'tst',
     HighLight:'highlight',
     Words:['because','so','therefore']
    });
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. #6
    Join Date
    Dec 2010
    Posts
    10
    Thanks Vic.
    It highlights the same words, but when I highlight a different word it erases the highlight of the other word. I want the highlight to stay.

    Is there a way to count the total words highlighted?

  7. #7
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,681
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .zxc {
      color:black;
    }
    
    .highlight {
      background-Color:red;
    }
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcWords(n){
     var nu=n.childNodes.length;
     for(var z0=0;z0<nu;z0++) {
      var txt=n.firstChild.data;
      var rn=n.removeChild(n.firstChild);
      if(rn.nodeType==3){
       var s=txt.split(' ');
       for(var z1=0;z1<s.length;z1++) {
        var nn=document.createTextNode(s[z1]+' ');
        nn=document.createElement('A');
        nn.className='zxc';
        nn.appendChild(document.createTextNode(s[z1]));
        n.appendChild(nn);
        n.appendChild(document.createTextNode(' '));
       }
      }
      else {
       zxcWords(rn);
       n.appendChild(rn);
      }
     }
    }
    
    function zxcCheckWords(o){
     var obj=document.getElementById(o.ID);
     zxcWords(obj);
     this.words=this.bycls('zxc',obj);
     for (var z0=0;z0<this.words.length;z0++){
      this.addevt(this.words[z0],'mouseup','highlight',this.words[z0])
     }
     this.clss=['zxc','zxc '+o.HighLight];
     this.wordary=o.Words;
     for (var z1=0;z1<this.wordary.length;z1++){
      this.wordary[z1]=this.wordary[z1].toUpperCase();
     }
    }
    
    zxcCheckWords.prototype={
    
     CheckWords:function(id){
      for (var ary=[],word,z0=0;z0<this.words.length;z0++){
       if (this.words[z0].className==this.clss[1]){
        word=this.words[z0].innerHTML.replace(/\W/g,'');
        for (var ck=false,z0a=0;z0a<this.wordary.length;z0a++){
         if (this.wordary[z0a]==word.toUpperCase()){
          ck=true;
          break;
         }
        }
        if (!ck){
         ary.push(word);
        }
       }
      }
      document.getElementById(id).innerHTML=ary.join('<br>');
     },
    
     Count:function(id){
      for (var obj=document.getElementById(id),cnt=0,z0=0;z0<this.words.length;z0++){
       if (this.words[z0].className==this.clss[1]){
        cnt++;
       }
      }
      if (obj){
       obj[obj.type?'value':'innerHTML']=cnt;
      }
     },
    
     Reset:function(id){
      for (var z0=0;z0<this.words.length;z0++){
       this.words[z0].className=this.clss[0];
      }
      this.Count(id);
     },
    
     highlight:function(word){
      for (var z0=0;z0<this.words.length;z0++){
       if (this.words[z0].innerHTML.toLowerCase().replace(/\W/g,'')==word.innerHTML.toLowerCase().replace(/\W/g,'')){
        this.words[z0].className=this.clss[1];
       }
      }
     },
    
     bycls:function(nme,el){
      for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
       if(reg.test(els[z0].className)) ary.push(els[z0]);
      }
      return ary;
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
     }
    
    
    
    }
    
    /*]]>*/
    </script></head>
    
    <body>
    Click the words
    <div id="tst" >
    He got hurt, because he fell of his bike bike He got hurt, because he fell of his bike.
    </div>
    <input type="button" name="" value="Count" onmouseup="W1.Count('cnt');"/>
    <input id="cnt" /> <input type="button" name="" value="Reset" onmouseup="W1.Reset('cnt');"/>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var W1=new zxcCheckWords({
     ID:'tst',
     HighLight:'highlight',
     Words:['because','so','therefore']
    });
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  8. #8
    Join Date
    Dec 2010
    Posts
    10
    Thanks Vic.
    This is really great.
    I will donate to 'operation smile' as you want.

  9. #9
    Join Date
    Dec 2010
    Posts
    10
    Vic,
    I hope I'm not making you crazy, but in the first version if I clicked a word by mistake I could correct it by clickinig it again. Now it is impossible to correct a mistake. Can this be solved?

  10. #10
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,681
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .zxc {
      color:black;
    }
    
    .highlight {
      background-Color:red;
    }
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcWords(n){
     var nu=n.childNodes.length;
     for(var z0=0;z0<nu;z0++) {
      var txt=n.firstChild.data;
      var rn=n.removeChild(n.firstChild);
      if(rn.nodeType==3){
       var s=txt.split(' ');
       for(var z1=0;z1<s.length;z1++) {
        var nn=document.createTextNode(s[z1]+' ');
        nn=document.createElement('A');
        nn.className='zxc';
        nn.appendChild(document.createTextNode(s[z1]));
        n.appendChild(nn);
        n.appendChild(document.createTextNode(' '));
       }
      }
      else {
       zxcWords(rn);
       n.appendChild(rn);
      }
     }
    }
    
    function zxcCheckWords(o){
     var obj=document.getElementById(o.ID);
     zxcWords(obj);
     this.words=this.bycls('zxc',obj);
     for (var z0=0;z0<this.words.length;z0++){
      this.addevt(this.words[z0],'mouseup','highlight',this.words[z0])
     }
     this.clss=['zxc','zxc '+o.HighLight];
     this.wordary=o.Words;
     for (var z1=0;z1<this.wordary.length;z1++){
      this.wordary[z1]=this.wordary[z1].toUpperCase();
     }
    }
    
    zxcCheckWords.prototype={
    
     CheckWords:function(id){
      for (var ary=[],word,z0=0;z0<this.words.length;z0++){
       if (this.words[z0].className==this.clss[1]){
        word=this.words[z0].innerHTML.replace(/\W/g,'');
        for (var ck=false,z0a=0;z0a<this.wordary.length;z0a++){
         if (this.wordary[z0a]==word.toUpperCase()){
          ck=true;
          break;
         }
        }
        if (!ck){
         ary.push(word);
        }
       }
      }
      document.getElementById(id).innerHTML=ary.join('<br>');
     },
    
     Count:function(id){
      for (var obj=document.getElementById(id),cnt=0,z0=0;z0<this.words.length;z0++){
       if (this.words[z0].className==this.clss[1]){
        cnt++;
       }
      }
      if (obj){
       obj[obj.type?'value':'innerHTML']=cnt;
      }
     },
    
     Reset:function(id){
      for (var z0=0;z0<this.words.length;z0++){
       this.words[z0].className=this.clss[0];
      }
      this.Count(id);
     },
    
     highlight:function(word){
      for (var z0=0;z0<this.words.length;z0++){
       if (this.words[z0].innerHTML.toLowerCase().replace(/\W/g,'')==word.innerHTML.toLowerCase().replace(/\W/g,'')){
        this.words[z0].className=this.clss[this.words[z0].className==this.clss[0]?1:0];
       }
      }
     },
    
     bycls:function(nme,el){
      for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
       if(reg.test(els[z0].className)) ary.push(els[z0]);
      }
      return ary;
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
     }
    
    
    
    }
    
    /*]]>*/
    </script></head>
    
    <body>
    Click the words
    <div id="tst" >
    He got hurt, because he fell of his bike bike He got hurt, because he fell of his bike.
    </div>
    <input type="button" name="" value="Count" onmouseup="W1.Count('cnt');"/>
    <input id="cnt" /> <input type="button" name="" value="Reset" onmouseup="W1.Reset('cnt');"/>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var W1=new zxcCheckWords({
     ID:'tst',
     HighLight:'highlight',
     Words:['because','so','therefore']
    });
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles