Osama ghanem
-
Posts
7 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by Osama ghanem
-
-
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
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>
-
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>
-
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> -
- 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 texts1.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> -
Highlight the sentence in the paragraph
in HTML/XHTML
Posted
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.