Jeremy Bell

Highlight Text on Hover

Discussion created by Jeremy Bell on Jun 27, 2018

Issue:

Some students may have reading issues that involve losing one's place when reading a paragraph of text.  

 

Custom Solution:

Make text highlight on mouse hover.  I think some people call this "hot text"?  I made the highlighting feature able to be turned off and on with the click of a button in the bottom right hand corner of the screen.

 

 

 

The Code:

 

$('.ht-btn').ready(function(){
     const pElements = document.querySelectorAll('.ems-container-fluid p, .ems-container p');
     const liElements = document.querySelectorAll('.ems-container-fluid li, .ems-container li');
     const allElements = [...pElements,...liElements];

     const htBtn = document.querySelector('.ht-btn');
     let htSwitch = false;
     htBtn.addEventListener('click', activateHt);
     function activateHt(){
          htSwitch = !htSwitch;
          if(htSwitch){
          allElements.forEach((el)=>{
               const text = el.innerHTML;
               //A regex to try and select each sentence in the paragraph and wrap it in a span element. The span element allows a listener to be added to the sentence inside the paragraph.
               const newText = text.replace(/([\w\d\s\,\(\)\{\}\:\<\=\"\-\>\/\@\#\%\^\&\*\_\+\\\|\'\[\]\;])+([\!\?\.][^\s]+)?([\w\d\s\,\(\)\{\}\:\<\=\"\-                    \>\/\@\#\%\^\&\*\_\+\\\|\'\[\]\;])*/g, `<span class="ht-sentence">$&</span>`);
               //Replace the old paragraph with the new paragraph with the span classes
               el.innerHTML = newText;
          })
          //Grab all those spans with the class .ht-sentence, which will allow mouseover listener added
          const highlights = document.querySelectorAll('.ht-sentence');
          highlights.forEach((el)=>{
               el.addEventListener('mouseover',addHighlight);
               el.addEventListener('mouseout',removeHighlight);
          })
          function addHighlight(){
               if(htSwitch){
                    this.classList.add('ht-highlight');
               }
          }
          function removeHighlight(){
               this.classList.remove('ht-highlight');
          }
     }
}
})
//end highlight sentence on hover hot text

Outcomes