Highlight the sentence in the paragraph

JavaScript
1

I want to highlight the sentence just when I click on it in the paragraph but also to be able to programmatically select a span without clicking on it (I need this when the reading continues from span to span for using sound mp3 purpose).

Can it also allow for line breaks in the paragraph?

I hope that it is possible to make these changes in my code.

paragraph = document.getElementById('test');
paragraph.innerHTML = '<span>' + paragraph.textContent.trim().replaceAll(/\.\s/g,'. </span><span>') + '</span>';

sentences = paragraph.querySelectorAll('span');
sentences.forEach(s => s.addEventListener('click', highlight));

function highlight(event) {
  sentences.forEach(s => s.classList.remove('selected'));
  event.target.classList.add('selected');
}

.selected {
  background: yellow;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
 </head>
<body>
<p id="test">
  (1) Lorem ipsum dolor sit amet. (2) consectetur adipisicing elit. (3) Similique aliquam totam odit excepturi. (4) reiciendis quam doloremque ab eius quos.
</p>
</body>
</html>

type or paste code here

3

I have MIT App Inventor which has 114 paragarphs. Each paragaraph has 25 pages, each page has 50 sentences and when I click play button, it reads the sentences one by one with sync highlight every single sentence one by one because each sentence has start and stop timings.

5

The above code is for highlighting the whole sentence when I click it. I just need to add it into my original code for my project and I will post it here.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.highlight {
background-color: yellow;
 }
</style>
<script>
window.smoothScroll = function (target) {
var scrollContainer = target;
do { //find scroll container
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
} while (scrollContainer.scrollTop == 0);
var targetY = 0;
do { //find the top of target relatively to the container
if (target == scrollContainer) break;
targetY += target.offsetTop;
} while (target = target.offsetParent);
scroll = function (c, a, b, i) {
 i++;
if (i > 30) return;
c.scrollTop = a + (b - a) / 30 * i;
setTimeout(function () {
 scroll(c, a, b, i);
}, 20);
}
// start scrolling
 scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}
</script>
</head>
<body>
<!--
<div><p id="debug">||---||</p></div>
-->
<script>
var oSentence = "sntnce1";
var nSentence = 'b';
document.write(window.AppInventor.getWebViewString());
</script>
<script>
//var elemDebug = document.getElementById("debug");
//elemDebug.innerHTML = window.oSentence;
window.setInterval(function () {
nSentence = window.AppInventor.getWebViewString();
if (nSentence.length < 10) {
//elemDebug.innerHTML = window.oSentence + " " + nSentence;
if (nSentence !== window.oSentence) {
//elemDebug.innerHTML = nSentence + " not equal! " + window.oSentence;
document.getElementById(nSentence).classList.add("highlight");
var elem1 = document.getElementById(window.oSentence);
if(typeof(elem1) != 'undefined' && elem1 != null){
elem1.classList.remove("highlight");
}
var target = nSentence.substr(6) - 1;
var elem2 = document.getElementById("sntnce"+target);
if(typeof(elem2) != 'undefined' && elem2 != null) {
smoothScroll(elem2);
}
window.oSentence = nSentence;
//elemDebug.innerHTML = nSentence + " equal! " + window.oSentence;
}
}
}, 1000);
smoothScroll(document.getElementById('sntnce1'));
</script>
</body>
</html>
6

Here is my .apk

Is it possible to join thes codes together
Is it possible to join these codes together.
Thank you for helping me.

7

Hi Randell Dawson,
Would you please tell me if it can be joined?
Thank you so much.

9

Thank you very much RandelDawson.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.