Mrig,

 

This is the first in a series of small jobs that I hope will lead you into learning enough about how our system to works to be able to do bigger jobs. Open this page in the WordPress page editor. 

Job 1.  Change the image file associated with Highlight Styles: “PCUED” and “PCUED OVERLAY”

 

In our system we can setup any block of text so that it can be read outloud to the reader and so that as it’s being read, word by word, the words are highlighted.


To see what I mean, highlight this paragraph of text and go up to the “Play Audio” menu and select “Config” and then (without making any adjustments) click OK.  This paragraph should now look like this one:

 

To see what I mean, highlight this paragraph of text and go up to the “Play Audio” menu and select Config and then (without making any adjustments) click OK.  This paragraph should now look like this one: 

 

Note: the Green speaker button at the beginning of the paragraph.  If you look at the text view of this paragraph you will see that it is specified at end of the code for the highlight and speak process: 

 

<span style=”font-size: 2vw;”><span class=”playable-audio-wrapper” data-speed=”1,000″ data-highlight-color=”green” data-button-loc=”start”><img class=”playable-audio” style=”height: 1em;” src=”/wp-content/uploads/2017/11/speaker-active-e1509810087391.png” data-highlight-with-audio=”true” />

 

Run this page in a new tab and click each of the following buttons:

 

Currently this same speaker image is used when the green Highlight type is selected.  

Currently this same speaker image is used when the orange Highlight type is selected. 

Currently this same speaker image is used when the blue Highlight type is selected.

Currently this same speaker image is used when the black Highlight type is selected. 

Currently this same speaker image is used when the PCUED Highlight type is selected. 

 

Currently this same speaker image is used when the PCUED OVERLAY Highlight type is selected. 

 

I want to change our system so that whenever PCUED or PCUED OVERLAY is the selected mode of highlight we use the “READ” image instead of the speaker image.


Click the two buttons (I  have manually edited the code to replace the speaker image with the read image:

 

This is the PCUED style of highlighting while reading text. 

 

This is the PCUED OVERLAY style of highlighting while reading text. 

 

So the job is to find the code that is generating and inserting the code into the page that specifies the “Play audio” and “highlighting” components. Add a new routine that differentiates the styles of highlighting and uses this src=”/wp-content/uploads/2020/04/read-pqd.jpg” to code for the buttons uses by PCUED and PCUED OVERLAY styling instead of the src=”/wp-content/uploads/2017/11/speaker-active-e1509810087391.png” currently used for all styles of highlighting.

 

Develop and test the new code on our https://fireaimready.com/wp-admin/ site.