Highlight and read a line / a section by using Javascript, HTML,CSS, PYTHON

Osama ghanem · July 10, 2022

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>

<script>
var oSentence = "sntnce1";
var nSentence = 'b';

document.write(window.AppInventor.getWebViewString());
</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>

Edited July 10, 2022 by Osama ghanem

Sign In

Highlight and read a line / a section by using Javascript, HTML,CSS, PYTHON

Recommended Posts

Osama ghanem

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity