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
