Jeremy Bell

Highlight Text on Hover

Discussion created by Jeremy Bell on Jun 27, 2018


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:


     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;
               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');
          function addHighlight(){
          function removeHighlight(){
//end highlight sentence on hover hot text