Projects new and old

Workarounds and usability notes.

Re: Projects new and old

Postby John Robin Dove » Fri Jul 05, 2024 10:28 am

Here is the innerHTML before manipulation:
Code: Select all
The reading and writing classes however, were a great success. By the autumn almost every animal on the farm was literate in some degree.<br>As for the pigs, they could already read and write perfectly. The dogs learned to read fairly well, but were not interested in reading anything except the Seven Commandments. Muriel, the goat, could read somewhat better than the dogs, and sometimes used to read to the others in the evenings from scraps of newspaper which she found on the rubbish heap. Benjamin could read as well as any pig, but never exercised his faculty. So far as he knew, he said, there was nothing worth reading. Clover learnt the whole alphabet, but could not put words together. Boxer could not get beyond the letter D. He would trace out A, B, C, D, in the dust with his great hoof, and then would stand staring at the letters with his ears back, sometimes shaking his forelock, trying with all his might to remember what came next and never succeeding. On several occasions, indeed, he did learn E, F, G, H, but by the time he knew them, it was always discovered that he had forgotten A, B, C, and D. Finally he decided to be content with the first four letters, and used to write them out once or twice every day to refresh his memory. Mollie refused to learn any but the six letters which spelt her own name. She would form these very neatly out of pieces of twig, and would then decorate them with a flower or two and walk round them admiring them.

If I choose to make autumn a blue word, it will be successful. Here is the resulting innerHTML:
Code: Select all
The reading and writing classes however, were a great success. By the <span id="w00070" onclick="top.relay(event,'w00070')" class="blueWords"> autumn </span>almost every animal on the farm was literate in some degree.As for the pigs, they could already read and write perfectly. The dogs learned to read fairly well, but were not interested in reading anything except the Seven Commandments. Muriel, the goat, could read somewhat better than the dogs, and sometimes used to read to the others in the evenings from scraps of newspaper which she found on the rubbish heap. Benjamin could read as well as any pig, but never exercised his faculty. So far as he knew, he said, there was nothing worth reading. Clover learnt the whole alphabet, but could not put words together. Boxer could not get beyond the letter D. He would trace out A, B, C, D, in the dust with his great hoof, and then would stand staring at the letters with his ears back, sometimes shaking his forelock, trying with all his might to remember what came next and never succeeding. On several occasions, indeed, he did learn E, F, G, H, but by the time he knew them, it was always discovered that he had forgotten A, B, C, and D. Finally he decided to be content with the first four letters, and used to write them out once or twice every day to refresh his memory. Mollie refused to learn any but the six letters which spelt her own name. She would form these very neatly out of pieces of twig, and would then decorate them with a flower or two and walk round them admiring them.

If I choose to make the first instance of could a blue word, it will fail. Here is resulting innerHTML:
Code: Select all
The reading and writing classes however, were a great success. By the autumn almost every animal on the farm was literate in some degree.As for the pigs, they cˆould already read and write perfectly. The dogs learned to read fairly well, but were not interested in reading anything except the Seven Commandments. Muriel, the goat, could read somewhat better than the dogs, and sometimes used to read to the others in the evenings from scraps of newspaper which she found on the rubbish heap. Benjamin could read as well as any pig, but never exercised his faculty. So far as he knew, he said, there was nothing worth reading. Clover learnt the whole alphabet, but could not put words together. Boxer could not get beyond the letter D. He would trace out A, B, C, D, in the dust with his great hoof, and then would stand staring at the letters with his ears back, sometimes shaking his forelock, trying with all his might to remember what came next and never succeeding. On several occasions, indeed, he did learn E, F, G, H, but by the time he knew them, it was always discovered that he had forgotten A, B, C, and D. Finally he decided to be content with the first four letters, and used to write them out once or twice every day to refresh his memory. Mollie refused to learn any but the six letters which spelt her own name. She would form these very neatly out of pieces of twig, and would then decorate them with a flower or two and walk round them admiring them.
apparently unchanged because ˆcould was not found. The ˆ was inserted in the wrong place: cˆould
John Robin Dove
 
Posts: 538
Joined: Thu Jan 23, 2014 4:35 am

Re: Projects new and old

Postby Clifton » Fri Jul 05, 2024 11:03 am

Looks like your script to remove spaces may be a little aggressive.
degree.As for the pigs, they cˆould

If a space was after the period, the ^ (chevron marker) may have been in the right place. However, I am not sure how or why the period lost it's space, nor am I certain why your code inadvertently put the chevron in the wrong place (c^ould). Seems like your code is expecting something that is not actually there, or it could be that your code is removing something necessary to make this work. You may be able to check this be using
console.log( [myField].innerHTML );
before and after some of your search and replace routines.

Looking closer, it seems you are removed linefeeds (<br>). When you do this, try replacing them with a space character.
Try something like this:
var textBlock = [myField].innerHTML.replace( /<br.*?\/>/g, " ").replace( / {2,}/g, " ");


What the line does is use regular expressions to search for all instances of HTML line breaks and then it replaces all instances of doublespaces with a single space. I am not sure this will satisfy the requirements of what you are doing, but I do know from my study of contentEditable
<div>
that carriage returns and line breaks cause many logistical problems. If you really need a separate paragraph, then use
<p> text </p>
to wrap around your paragraph text.
<p>
tags by design
<p>
tags are block elements and add line breaks without causing the integrity of the contentEditable
<div>
to begin failing. I ran a number of tests on this in my code work on caretPosition().

When using contentEditable
<div>
you also need to be careful about manipulaing the innerHTML of the
<div>
. Whenever you manipulate innerHTML, any text selections you desire will be lost. This could be one reason why your use of the selAddContent with caretPosition() was not producing the desired effect. In caretPosition(), I use the textContent property of the field to access the content rather than innerHTML. You can possibly avoid losing selected text by manipulating textContent instead of innerHTML.

While it may seem you are far from reaching your goal, you are probably a lot closer than you think.
Clifton
Site Admin
 
Posts: 781
Joined: Tue Jan 14, 2014 1:04 am

Re: Projects new and old

Postby John Robin Dove » Sat Jul 06, 2024 6:46 am

My script to remove cerain characters is causing the problem. I have replaced it with this:
Code: Select all
//txt = txt.replace(/\n\n/g, "\n"); //remove empty lines. This causes the error when getTheWord()is used to create 'blue words'
    txt = txt.replace(/\n/g, " "); //remove all paragraph separations and replace them with a space
    txt = txt.replace(/\t/g, " "); //remove all tabs and replace them with a space
    txt = txt.replace(/ˆ/g, " ");  //remove all chevrons and replace them with a space
    txt = txt.replace(/  /g, " "); //remove all double spaces and replace them with a space
    //txt = txt.replace(/.../g, "."); //convert 3 periods to a single ansi 133 character. This does not work and reduces the text to a series of periods (...........)
    //txt = txt.replace(/../g, "."); //ensure there is no repetition of periods. i.e. .. or ...... must always be converted to a single . As with the line above, this does not work. Also ?? and !!
    tbfunction_pgTBObjSet("myText", "text", txt);

I would prefer not to remove all paragraph separations but I have not been able to do this so I replace them with spaces. I also need to find a way to remove any repetition of periods. All this is necessary for the 'animated reading' which requires the text to be sub-divided into sentences. I should also point out that the 'myText' object is a textarea because I have not been able to select text programatically in a div. This is absolutely not a problem because using this.obj.setSelectionRange(start, end); works perfectly and when required I can hide the textarea and show the div and the user will not be aware that there are two objects.
John Robin Dove
 
Posts: 538
Joined: Thu Jan 23, 2014 4:35 am

Re: Projects new and old

Postby Clifton » Sat Jul 06, 2024 7:44 am

Couple things will help.
Regarding periods. They are wildcards in regular expressions.
So
/.../g
will search and find any sequence of three characters and replace them with periods.
Try
/\.\.\./g
this will restrict to search to 3 periods. Or better yet
/\.{3,}/g
does the same thing. The
{3,}
means to search for previous character exactly 3 times.
Also, you can try
/\s*/g
as this will search any whitespace character (newlines, tabs, and spaces) and manipulate them accordingly.
Clifton
Site Admin
 
Posts: 781
Joined: Tue Jan 14, 2014 1:04 am

Re: Projects new and old

Postby John Robin Dove » Sat Jul 06, 2024 7:49 am

Thanks. I had actually just found a solution:
Code: Select all
let txt = "A....B....C....D";
while (txt.indexOf("\.\.")  >  -1 )
{
txt = txt.replace("\." + "\.", "\.");
}
return txt;

but I'll try yours now.
UPDATE Actually what I really needed was this: txt = txt.replace(/\.\.+/g, "\.");
John Robin Dove
 
Posts: 538
Joined: Thu Jan 23, 2014 4:35 am

Re: Projects new and old

Postby Clifton » Sun Jul 07, 2024 7:19 pm

You wrote:
UPDATE Actually what I really needed was this: txt = txt.replace(
/\.\.+/g, "\."
);

You don't have to escape the
"\."
just use
"."
and it will give you the same result.
Also, this gives the exact same result
/\.{2,}/g
for your search expression. It means to match the previous character exact 2 times.
Clifton
Site Admin
 
Posts: 781
Joined: Tue Jan 14, 2014 1:04 am

Re: Projects new and old

Postby John Robin Dove » Mon Jul 08, 2024 3:08 am

Thanks Clifton,
So would /\.{2,}/g remove any number of repeated periods like ..................?

I have decided to go ahead with all the required modifications to the text and inform the user that this is necessary 'for technical reasons'. … is another tricky one because it can be used anywhere in a sentence not just at the end. At the moment the code is looking like this:
Code: Select all
txt = txt.replace(/…\./g, "."); //convert a single ansi 133 character + a period to a single period. Open Office sometimes uses this instead of 4 periods!
    txt.replace(/…/g, "."); //convert a single ansi 133 character to a single period.
    txt = txt.replace(/\.\.+/g, ".");//convert all repetitions of periods to a single period.
    txt = txt.replace(/\?\?+/g, "?");//convert all repetitions of ? to a single ?
    txt = txt.replace(/\!\!+/g, "!");//convert all repetitions of ! to a single !
    //txt = txt.replace(/\n\n/g, "\n"); //remove empty lines. This causes the error when getTheWord()is used to create 'blue words' so the lines below are used.
    txt = txt.replace(/\n\n/g, " "); //replace all double paragraph separations with space.
    txt = txt.replace(/\n/g, " "); //remove all paragraph separations and replace them with a space
    txt = txt.replace(/\t/g, " "); //remove all tabs and replace them with a space. Tabs will be used as a separator at a later stage.
    txt = txt.replace(/ˆ/g, " ");  //remove all chevrons and replace them with a space.
    txt = txt.replace(/  /g, " "); //remove all double spaces and replace them with a space.

I hope I have not forgotten anything. I also intend to save the user's work as a file or files: mp3 for the recordings and xml for additions to the text (words per sentence, blue words etc) but maybe I should also use a txt file because the innerHTML cannot be saved in an xml file without escaping certain characters < & and others including all unicode (such as Chinese etc I imagine). What do you think?

UPDATE Just tested saving the HTML as a text file. It worked first time! As simple as this:
Code: Select all
<button5>
  <pgStyleObject>
  <![CDATA[
  { theStyle : "cursor",
  propVal  : "pointer" }
  ]]>
  </pgStyleObject>
 
  <function name="myClick" event="click" params="" useTB="true">
  <![CDATA[
  const fileName = "../../cases/Animal.txt"
  tbfunction_XMLHttpRequest("POST", fileName, null, "button5")   
  ]]>
  </function>
 
  <function name="myUser" event="user" params="evt,value" useTB="true">
  <![CDATA[
  sharedActions.obj2.innerHTML = value;
  ]]>
  </function>     
  </button5>
John Robin Dove
 
Posts: 538
Joined: Thu Jan 23, 2014 4:35 am

Re: Projects new and old

Postby Clifton » Mon Jul 08, 2024 8:37 am

You can experiment with regular expressions and other Javascript code at this address:
https://pgsoftwaretools.com/powerpac/assessments/exec-js/index.html

Enter this on the site:
var s = "this is my test......string.......to see what happens!";
return s.replace( /\.{2,}/g, ".");


Should return
"this is my test.string.to see what happens!"
with NO double periods.
Clifton
Site Admin
 
Posts: 781
Joined: Tue Jan 14, 2014 1:04 am

Previous

Return to General Discussion

Who is online

Users browsing this forum: No registered users and 2 guests

cron