Highlight the whole sentence

MIT App Inventor Help
1

I want to highlight the whole sentence just by click at only one word withen that sentence. but the problem is how can I read the paragraph from WebViewer instead of read it from html code:

Code :
If you split the sentences into <span> elements you can add a click handler and control the styles of each individually.

blocks
blocks737×345 21.6 KB

html_3.aia (124.8 KB)

2
3

Hi Tim,

I have tried to apply my example on all examples in the link you have post but there is no example looks like what I am having.

I have tested my example html_4.aia and it works fine because I have added only 4 sentences inside the code wv.html itself in order to test it if it works or not and it works fine but when I tried to read these sentence from pro.csv file it doesn't read them from pro.csv file.

blocks (1)
blocks (1)718×641 36.8 KB

html_4.aia (125.4 KB)

4

The example I posted shows you how to pass data from the app using the webviewstring to the html page. That is what you want to do. I have proably also provided you with many example of much the same thing. You will rarely find an example that matches your requirements because there are so many variables....:wink:

I fear your javascript example will not work for you in the way you want, it does not allow for line breaks in the paragraph. Suggest you go back to whoever provided the example and ask for that as well.

5

Can you please give me the full discription that
it does not allow for line breaks in the paragraph
In order to ask him to rewrite the code to meet my example requirement because I fear that I give him wrong requirement.

6

You want it to look (something) like this:

image

The "spanning" javascript displays like this:

image
image1261×57 8.01 KB

html

<p id="test">
(1) Lorem ipsum dolor sit amet. <br>(2) consectetur adipisicing elit. <br>(3) Similique aliquam totam odit excepturi. <br>(4) reiciendis quam doloremque ab eius quos.
</p>

You should also clarify that you will want the text in an arabic font, the number in a different colour/bolded, that the text should run right to left, and you want to be able to programmatically select a "span" without clicking on it (this is when the reading continues from line to line), and no doubt some other requirements.....

7

I want the sentences fit the page in both sides right and left I mean (justified allignment) not like this

So I want like this:

image
image1161×173 13.6 KB

and in Arabic font as you said.

8

OK, that is not a problem then, until you change your mind.

9

Hi Tim,

I need to review the below message before I submit it to rewrite the code

"I want to highlight the sentence just when I click on it but it should be allow for line breaks in the paragraph to be able to programmatically select a "span" without clicking on it (I need this when the reading continues from line to line for using sound mp3 purpose).
I hope that it is possible to make these changes in my code."

10

Two different things....

"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 <br> in the paragraph

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

12

You should test them and see if they work....

13

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)
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>
15

I once agreed not to post on the AI2 forum any more, but I just have to in this case. If I get banned that’s fine.

The reason I am posting is because Osama_Sayar is spamming the Thunkable X forum with the same questions he is asking here. You can see he has asked the above question here even though it is nothing to do with Thunkable X.

A couple of weeks ago he used another account to post a question he was already getting help for.

I’m just pointing this out as you guys are spending a lot of time on him but he’s not bothering to follow your suggestions and is going on other forums to ask the same things he is asking you.

2 Likes
16

I am sorry to bother you brother. I just need help from any helpful community. again I am so sorry to bother you all. In addition, many people advise me to get help from thunkable form and I respect all people there.

1 Like