Add button within content (iframe embed)

Submitted by stopbit on Wed, 10/05/2016 - 18:30
stopbit's picture
Forums: 
General discussion

Hi,

I want to add a toolbar that performs as an accessiblity toolbar. This toolbar also acts as a Text to Speech function with multi-lingual translation in other languages.

Now don't worry - The toolbar technology is already produced and I've been using it for many years.

I am simply trying to get it to work with H5P when using 'embed' as 'iframe'.

What I have so far....

I have worked out how to add the toolbar (which overlays on top of the content). There is a toggle button that triggers the appearance of said toolbar. The problem I am having is I cannot work out how to get the button to appear within the 'content' for the H5P id. Rather than outside of the H5P content when using iframes.

See these images, which illustrate the toolbars position and the location of the toggle image to show/hide the toolbar.

1. Toolbar off (not shown).

toolbar off

2. Toolbar on (displays toolbar).

toolbar on

The 3rd image is where I want to put the toggle button.

3. Where I want to put the toggle button.

Where I want the toggle buttonl

I have edited "/wp-content/plugins/h5p/h5p-php-library/embed.php". I added the parts in bold.


<body>
<div id="TTSbarbutton" style="font-size: 13px;"><a href="javascript:void(0);" style="text-decoration: none;">&nbsp;</a></div>
  <div class="h5p-content" data-content-id="<?php print $content['id']; ?>"></div>
  <script>
    H5PIntegration = <?php print json_encode($integration); ?>;
  </script>
      <script type="text/javascript">
        //<![CDATA[
        var p = (("https:" == document.location.protocol) ? "https://" : "http://");
        document.write(unescape("%3Cscript src='" + p + "r3.talklets-secure.com/TTSapp/jslaunch.php'type='text/javascript'%3E%3C/script%3E"));
        //]]>
    </script>
</body>
</html>

The problem is this does not show the toggle button within the content, although it is displayed when viewing the H5P (not fullscreen) and does work.

I want to have the toggle button inside the contents. I have been looking all over the code, thinking where can I insert it. I have tried many, many (yes I said it twice) edits in various files across the H5P code and simply can't get it inside the content area.

The primary issue, is that when the full screen button is used (for a course presentation for example), I no longer see the toggle button to turn on the toolbar.

If I can get the toggle button in the content in an absolute position on each slide of the course presentation I would have my solution.

Can someone at H5P point me in the right direction - drove me nuts today :-D

Thanks and all the best

icc's picture

icc

Thu, 10/06/2016 - 10:28

Interesting! I think what you want is to get the DIV element for the toolbar inside the 'h5p-content' DIV. Now, this can be a bit tricky since the H5P Content will replace the entire contents of the DIV. So what you'll have to do is add it after the H5P content is created.

This will have to be done by JavaScript, so first you'll have to implement an action handler in WordPress that adds the JavaScript, this you'll typically do in a custom plugin or your theme:

function yourtheme_alter_h5p_scripts(&$scripts, $libraries, $embed_type) {
  $scripts[] = (object) array(
    // Path can be relative to wp-content/uploads/h5p or absolute.
    'path' => '/wp-content/themes/yourtheme/add-toolbar.js',
    'version' => '?ver=1.2.3' // Cache buster (change whenever add-toolbar.js changes)
  );
}
add_action('h5p_alter_library_scripts', 'yourtheme_alter_h5p_scripts', 10, 3);

And then in your add-toolbar.js you'd want to do something like this:

console.log('add-toolbar.js loaded!'); // Debug message to verify that script is loaded

H5P.jQuery('document').on('ready', function () {
  // When iframe is ready, 
  // add div to the beginning of .h5p-content:
  H5P.jQuery('<div id="TTSbarbutton" style="font-size: 13px;"><a href="javascript:void(0);" style="text-decoration: none;">&nbsp;</a></div>').prependTo('.h5p-content');

  // Add toolbar JavaScript:
  var p = (("https:" == document.location.protocol) ? "https://" : "http://");
  document.write(unescape("%3Cscript src='" + p + "r3.talklets-secure.com/TTSapp/jslaunch.php'type='text/javascript'%3E%3C/script%3E"));
});

Let me know how it goes :-)

 

stopbit's picture

stopbit

Thu, 10/06/2016 - 16:45

Hi Icc,

I have tried your code suggestion. It does load the javascript file, but the jQuery does not seems to run.

I've updated the code a number of times and tried a few alterate ways, but I can't get the new code to prependTo the h5-content class.

I have inserted a number of console messages to confirm what's (or what isn't) going on.

I also have a test page if you'd be so kind to have a check to see if there is anything obvious I'm missing.

Here's the code in the javascript file named: add-rt-toolbar.js

<code>console.log('1 Toolbar Initial Javascript add-rt-toolbar.js loaded!'); // Debug message 1 to verify that script is loaded
   
H5P.jQuery('document').on('ready', function () {
  // When iframe is ready,
  // add div to the beginning of .h5p-content:
  H5P.jQuery('<div id="TTSbarbutton" style="font-size: 13px;"><a href="javascript:void(0);" style="text-decoration: none;">Toolbar</a></div>').prependTo('.h5p-content');
    console.log('2 prependTo DIV Javascript Inserted'); // Debug message 2 to verify that script is loaded 
  // Add toolbar JavaScript:
  var p = (("https:" == document.location.protocol) ? "https://" : "http://");
  document.write(unescape("%3Cscript src='" + p + "r3.talklets-secure.com/TTSapp/jslaunch.php'type='text/javascript'%3E%3C/script%3E"));

    console.log('3  Talklets Script loaded'); // Debug message 3 to verify that script is loaded 
});</code>

When I visit the page I see the console outputs message 1 - this confirms the javascript file is being loaded.

The other console messages never get outputted and the code does not appear within the h5p-content DIV. I've also tried changing the class to see if that made any difference (such as .h5p-wrapper). I've also tried the prependTo when the fullscreen button is clicked with an on click in the js.

Here's a link to a live test: http://www.sheilds.org / glitch /
I've put spaces in the url as I don't really want this url being picked up by searches.

Any clues? I've had a good go at it today, but no success with inserting the code required.

Many Thanks

 

stopbit's picture

stopbit

Thu, 10/06/2016 - 18:12

Hi,

Perhaps the only way for me to get the jQuery to actually make chages within the iframe is the an an id to the iframe. This is the only way I can be sure to specify in code to change the contents within an iframe. Do you know where the iframe gets generated so I can add-in an ID value.

Many thanks

icc's picture

icc

Fri, 10/07/2016 - 10:00

Oh... I'm sorry I messed up the most important part of the code. You have to change the first line so it looks like this:

H5P.jQuery(document).ready(function () {

(document was supposed to be a variable and not a tag)

I hope you can forgive me.

stopbit's picture

stopbit

Fri, 10/07/2016 - 10:38

Hi Icc,

No problem, I see the differences in the line of code, thank you. I attempted this amendment and the jQuery ran, however I  get a series of error messages in the console.

The good news is that the code actually runs this time (see the console messages) . Although I'm not so sure about these errros :-/

Also the H5P never appears on screen.

Here's a capture of the errors, if you have any clues?

errors

Many thanks for your help Icc

stopbit's picture

stopbit

Fri, 10/07/2016 - 11:02

I had to revert this back for now...

Although I have some screen shots of the errors if this gives any clues?

errors

errors

errors

errors

errors

The above lines 3036 runs off the page....

Thanks for any assistance.

icc's picture

icc

Fri, 10/07/2016 - 11:54

Could you update the /glitch URL and I'll have a look.

It's strange the document.body is null…

stopbit's picture

stopbit

Fri, 10/07/2016 - 12:23

Hi Icc,

I've just been playing with the files again. Wow it's really confusing me. It seems the script for hte toolbar needs to run last after the final script tag in the iframe that grabs the json stuff.

I've modified h5p.js and updated the version, manually inserting the code like so, but this below doesn't work either.

try

I can't leave the H5P's in this state for long as I have students using H5P.

I appreciate your help.

 

 

icc's picture

icc

Fri, 10/07/2016 - 13:02

Ah yes, you cannot use document.write() to add to the page after it's loaded, it will write over the entire page. Perhaps using something like this instead will work:

var p = (("https:" == document.location.protocol) ? "https://" : "http://");
H5P.jQuery.getScript(p + 'r3.talklets-secure.com/TTSapp/jslaunch.php');
stopbit's picture

stopbit

Fri, 10/07/2016 - 13:54

Hi Icc,

That's almost it! You star!

It does load the toolbar and the toolbar DOES work! Yay! (happy face)

Although (unhappy face) the toolbar Text to Speech only seems to work when viewing directly on http://www.sheilds.org domain.

The problem I notice is that the TTS does not work when I'm embeding on another website (http://www.sheilds-elearning.com).

The issue I believe, is that this toolbar will only work for registered domains. There is a list of allowed domains the server checks if the refering domain is one of these and then allows functionality.

Both my domains sheilds.org and sheilds-elearning.com are on this allow list, so the TTS will work on either.

The problem I'm experiencing is that when I'm using the iframe of the H5P activities (found in sheilds.org) on the site sheilds-elearning.com - The TTS functionality does not work at all.

However, to download the text as an mp3 - this actually does work and downloads the mp3 with audio. It just doesn't work for live tts reading.

To get the toolbar to read out loud you can 'highlight' text you want to speak and then click the play icon. This will play any text, but doesn't work when it's cross domain.

The mp3 download is similer, highlight the text and then click the download button - This works.

Any ideas on this one? I don't really use H5P activities within my sheilds.org site, but do embed them from sheilds.org inside sheilds-elearning.com. But this prevents playback when cross domain.

Any ideas?

Thanks so far, you've saved my bacon - it's very close to fully working.

stopbit's picture

stopbit

Fri, 10/07/2016 - 14:04

Hi Icc,

I create a quick page you can access to see what I'm talking about.

The sheilds.org glitch page works, but this one does not: http://sheilds-elearning.com /sb-pics /toolbar /tts-h5p.html

Again removing slashes as I don't want this url crawled.

Thanks

stopbit's picture

stopbit

Fri, 10/07/2016 - 14:26

Hi Icc,

I checked the example url I provided on sheilds-elearning.com with a number of the latest desktop browsers, here's the results.

  1. Firefox does not work, but downloads mp3's if chosen.
  2. Opera does not work, but downloads mp3's if chosen.
  3. Chrome DOES WORK for all
  4. Safari DOES WORK for all
  5. Maxthon DOES WORK for all
  6. IE 11 DOES NOT work at all - doesn't even show the toggle button.

Is there any chance there's an alternative way the load the JS? I have got All these browsers working with the boolbar when not using H5P activities. But that's probably because of the document write rather than

Again - Many Thanks, it's very close now

 

icc's picture

icc

Fri, 10/07/2016 - 15:03

I'm very glad we got i sort of working, good job! 
Thank you for the kind words.

Regarding the reading not working in Firefox and Opera, I think this has to do with how Flash is handled. I see that when you select the text for reading, it loads the TTSapp.swf – this, in turn, tries to load and play the audio. For Chrome I observe that it uses the same 'Referer' when requesting the .swf and the sound: sheilds.org ...
But in Firefox it only uses sheilds.org for the .swf request – the audio is request with: r3.talklets-secure.com/TTSapp/flash/TTSapp.swf?0.16695426109453093

Perhaps adding 'r3.talklets-secure.com' to the allowed domains list would fix the issue?
I think it will be difficult to fix this using any code. Perhaps the audio could be played using HTML5 instead of Flash/swf?

stopbit's picture

stopbit

Fri, 10/07/2016 - 17:42

Hi Icc,

I've made some further progress - mainly display issues, resizing images, clipping to ensure they fit in the available space. So far, so good.

I think I will just have to live with the browser restrictions for now.

I did notice a different issue regarding font size Only on Chrome browser - it completely oversizes the text making it go off the page.

So, I added this custom css to get around it:

@media screen and (-webkit-min-device-pixel-ratio:0) {
.h5p-course-presentation .h5p-element {font-size: 0.62em !important;}
}

This works for the in iframe (not fullscreen) and text is now readible.

When I go fullscreen, the text is maintained at 0.62em - so a percent of the size it should be. Obviously at full screen the text is very small.

This doesn't seem to happen on other browsers, but my fix may affect opera too.

Here's two examples, the latter has my fix:

broken

text goes off page due to wrong size text-size.

with fix

The above has my css fix.

It's a bit annoying that firefox doesn't work with my translations toolbar, so having chrome completely mess up the text size is not pleasing at this stage ;-p

Again, many thanks for any assistance.

icc's picture

icc

Mon, 10/10/2016 - 09:22

Hm, strange about the text size. It should be consistent no matter the screen size, i.e. relative to the other elements. However, fonts can sometimes be a bit limited when it comes rendering the different sizes. So, I guess you can't always be 100 % certain of how it will look on all browsers or devices when resized.

I'm glad I was able to be of assistance in getting you toolbar working :-)

stopbit's picture

stopbit

Mon, 10/10/2016 - 11:10

Hi Icc,

Thank you for all the help last week.

I have come back to work this week and noticed I had to rebuild the cache for my H5P libraries (I upgraded last week).

I still have an issue with text size, but the behaviour is a little wonky. I've checked to see if I can reproduce on H5P.org, but it seems fine in browsers I'm testing.

I have removed the css which provided a semi-fix for the text sizse issue.

After rebuilding the cache via wordpress, the text size is now even smaller than it was!

Obviously this is why I removed the css I added. The strange thing is that text sizse in full-screen is now smaller by default (it remains the same size as when not full screen). When I add my code back in, the fullscreen text is really tiny this time and the text size in the iframe is also smaller. I have checked hte css rules and it's not picking up my css amend, so something is changing hte text size, but I don't know what it is.

Can you tell me, is there a way to manually rebuild the caches again for H5P in wordpress? - this may be a quick fix for me.

Many Thanks (again :-)

stopbit's picture

stopbit

Mon, 10/10/2016 - 12:57

Hi Icc,

I have setup a brand new environment to test the font-size issue I'm experiencing.

I've found out it's related to the toolbar css, which gets inserted by javascript from an off-site domain (not one of mine).

So, as soon as I add the toolbar in a new environment, it messes up the consistency of text size. This includes when expanding to full-screen and makes the text waaay to small.

I guess I'll just have to work this one out ...

So, just confirming to you, the text size is not a H5P issue.

Thanks

icc's picture

icc

Mon, 10/10/2016 - 14:38

Yes, that's usually the issue when combining different tools; the different CSS rules tend to step on each other's toes from time to time. Though, it's good that you managed to find the culprit of the font-sizing issue.

Perhaps you can include some CSS rules of you own that corrects the issue?

icc's picture

icc

Mon, 10/10/2016 - 14:39

Regarding the cache, it's usually updated when re-saving the content or updating the H5P content types.

stopbit's picture

stopbit

Mon, 10/10/2016 - 15:04

Hi Icc,

I figured out the issue, but really struggling to correct it.

It seems as the toolbar I am using is technically an 'accessiblity toolbar', it allows for font re-sizing and changing of the background colour for visual imparements.

The issue it seems is with the javascript used for the re-sizing of text. I believe it's normalising hte text size to that of the default body font-size. So including the toolbar, upon full-screen, it changes the font size to 'body default', which is small when using full screen.

I do not think I can get my way out of this with custom css, I notice that H5P defaults to 2em for fonts when in full screen, but the javascript resets this.

The other anoying part is that I have worked out how to correct the issue, by effectively using the 'font increase size' button on the toolbar.

However that won't work as the toolbar does not display when in fullscreen mode. I've tried making amends to send it to hte front of the page, but it really does want ot play ball and won't overlay on top of the h5p activity. Although when triggering the font increase (zoom) the font can be altered to a prefered size.

So, it's a bit hooky.... I may try to remove the font size js, but as the files for this are not on my server (it's a service) I would have to speak to the developers of the toolbar, who are not particularly quick at getting back to me (sometimes totally ignored, unlkess I pester them).

I'll let you know if I get things working with more consistent behaviour.

Cheers

 

icc's picture

icc

Tue, 10/11/2016 - 10:11

Yea, that would be an issue. Not sure how to get around it if you cannot override the styles. Content Types like the Course Presentation won't work well when changing font size.

Let me know if you figure out a solution!

stopbit's picture

stopbit

Tue, 10/11/2016 - 11:24

Hi Icc,

I have fiddled with the css styles quite a lot and I have it 99% I think.

I pretty much set a combination of  'inherit' font-size and setting the font-size in em, in a particular order. This has corrected most font elements, although I'm sure there is room for improvement.

Thanks for the support!