Jump to content

Osama ghanem

Members
  • Posts

    7
  • Joined

  • Last visited

Everything posted by Osama ghanem

  1. <!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; <script> 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'); } </script> 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.
  2. Is it possible to edit the below code in order to read these 4 sentences (1) Lorem ipsum dolor sit amet. (2) consectetur adipisicing elit. (3) Similique aliquam totam odit excepturi. (4) reiciendis quam doloremque ab eius quos. from WebViewString Block blocks (2)1466×232 34.5 KB instead of reading them from the below html code let paragraph = document.getElementById('test'); paragraph.innerHTML = '<span>' + paragraph.textContent.trim().replaceAll(/\.\s/g,'. </span><span>') + '</span>'; let 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'); } span.selected { background: yellow; } <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>
  3. Please help me to add the below script : <script> 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'); } </script> into this html documnent <!DOCTYPE html> <html> <head> <meta name="author" content="puravidaapps.com"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="jquery-1.8.0.min.js"></script> <script> function urldecode(str) { return decodeURIComponent((str+'').replace(/\+/g, '%20')); } </script> </head> <body> <script> var strdemo = urldecode(window.AppInventor.getWebViewString()); $("<div>" + strdemo + "</div>").appendTo("body"); </script> </body> </html>
  4. I want to highlight a line / section of text in html. By set tags e.g. id, to each section of text I wish to highlight, then run a javascript function to apply the highlight to that identified section of text. Then I would need to pass the selected text position back to the app in order to play the relevant sound. This is the code: <!DOCTYPE html> <html dir="rtl" lang="ar"> <head> <meta charset="UTF-8"> <meta name="author" content="Ghica van Emde Boas"> <style> @font-face { font-family: quran2; src: url('me_quran_volt_newmet.ttf'); } body { text-align: justify; text-justify: inter-word; background-color: #D9EAE6; } .arab1b { font-size: 18px; font-family: quran2; } .highlight { background-color: yellow; } .div_style_block { text-align: center; border-bottom-style: solid; border-bottom-color: #C0C0C0; } .bg_green { background-color: #D9EAE6; } .bg_grey { background-color: #F0F0F0; } .div_style_inline { display: inline; } </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>
  5. I need help creating a code and I can will pay money for the code. The app has 18 readers (each reader has csv file) and 114 texts ( each text has csv file) Each reader has csv file :1soundlinks.csv, 2soundlinks.csv,...,17soundlinks.csv to indicates start-stop times for each reader. So, for each reader has to read 114 texts files. 1soundlinks.csv has three columns: column 1 column2 column3 column4 text1، 110401.mp3 , Link of Audio(In Google Drive) , the points of times (highlight) text2، 110402.mp3 , Link of Audio(In Google Drive) , the points of times (highlight) text3 ، 110403.mp3 , Link of Audio(In Google Drive) , the points of times (highlight) https://drive.google.com/drive/folders/1aWtwj5OxYfYzxa6mgmEH75WpwaHADHW_?usp=sharing Each texts : 1.csv,2.csv,....,114.csv has different number of sentences. Here are only 3 texts of 114 texts 1.csv means text 1 114.csv means text 114 This link for 1.csv https://docs.google.com/spreadsheets/d/1igSCZEPs0yC6wRfq-_y5hFh2T6OlYBtek-saRtfDhZQ/edit?usp=sharing This the link for 114.csv https://docs.google.com/spreadsheets/d/1NMp30H8vTCSsFwPQvd6iImP_ZF3eMWkV7aVb9KmQJkg/edit?usp=sharing These text csv files have two columns column1 , column2 No of lines , sentence 1 , sentence1 2 , sentence2 3 , sentence3 The app will take a csv file of lines of text (in arabic), with a corresponding audio file (there are 114.csv files for texts and 17 csv sound files), and display the lines of the csv file. The user can then play the audio file, and the respective lines will be highlighted, or the user can select a line and that line will be played back, and then continue playback from there. The user should be able to select any csv file (and corresponding audio file) and the user may also select a different audio file for the same csv. I have quite a few display and formatting requirements for the arabic text and the layout I want to highlight a line / section of text in html. By set tags e.g. id, to each section of text I wish to highlight, then run a javascript function to apply the highlight to that identified section of text. Then I would need to pass the selected text position back to the app in order to play the relevant sound I have all the assets - csv, timings, audio files, arabic fonts, that I believe are required. These are currently located on google drive, along with files that help to synchronise the text and audio. There is significant history on the community for many parts of this work already This is the .apk https://drive.google.com/file/d/1RvSM5F4-azcDTo6UqvID1tfDHCwLv0aK/view?usp=sharing This is the code : <!DOCTYPE html> <html dir="rtl" lang="ar"> <head> <meta charset="UTF-8"> <meta name="author" content="Ghica van Emde Boas"> <style> @font-face { font-family: quran2; src: url('me_quran_volt_newmet.ttf'); } body { text-align: justify; text-justify: inter-word; background-color: #D9EAE6; } .arab1b { font-size: 18px; font-family: quran2; } .highlight { background-color: yellow; } .div_style_block { text-align: center; border-bottom-style: solid; border-bottom-color: #C0C0C0; } .bg_green { background-color: #D9EAE6; } .bg_grey { background-color: #F0F0F0; } .div_style_inline { display: inline; } </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. Hi all, I am trying to fix the web page when starting the sound and highlight the text (sentence) one by one. The problem is sometimes the sentence is too long and I need just to show only the highlighted text in the web page and hide highlighted one. Please help me.
×
×
  • Create New...