amer Posted July 17, 2022 Share Posted July 17, 2022 This code is to highlight the sentence just when I click on it in the paragraph for using sound mp3 purpose: <!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> .selected { background: yellow; 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'); } I just need to join it with my code for MIT Application Inventor and I will post it here. Thank you so much. expandcollapse popup<!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> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now