Moodle for mobile

Mobile app and iframes

 
on the Great Wall
Mobile app and iframes
Particularly helpful Moodlers

Starting a thread as haven't been able to find others facing this problem. 

Before I posted have spent the day testing to make sure that it was the same on Moodle 3.5.1and the latest Android app. 


We are heavy users of Gdrive to stream powerpoints and since the new app has come on board we are getting this "container" type cut off as per the picture. 


Also we have lost the ability to go full screen with it. Just goes to a blank screen...

ie like there is not content there. 


Anyone else using iframes and getting full use of screen real estate within the mobile app. ?

Here is a bit of code. 

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQ4fIJnrWjggro4UIz5Xokk5wMDfwP-gsommd8DOs1g24jjBjae2auZaAcgb2hxOdEPQSeXUIARRSSQ/embed?start=false&amp;loop=false&amp;delayms=3000" frameborder="0" width="945" height="407" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

I tested it with the SWAY codes as well and its the same small containered frames.. 

https://sway.com

<iframe width="760px" height="500px" src="https://sway.com/s/InEDiPX3RwpfvxH0/embed" frameborder="0" marginheight="0" marginwidth="0" max-width="100%" sandbox="allow-forms allow-modals allow-orientation-lock allow-popups allow-same-origin allow-scripts" scrolling="no" style="border: none; max-width: 100%; max-height: 100vh" allowfullscreen mozallowfullscreen msallowfullscreen webkitallowfullscreen></iframe>


Also with clean code from slides.. 

https://slides.com

<iframe src="//slides.com/advancedconstructionskills/70-20-10/embed?byline=hidden&share=hidden" width="576" height="420" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Its even worst with this code in that not even wanting to show with in the moodle mobile app both in a page setting and a book format. 

Which is a tad strange as a direct presentation using locally hosted content works, but of course not wrapped in a iframe. 


Flowpaper is almost usable. 

https://flowpaper.com/

<iframe frameborder="0"  width="400" height="300"  title="" src="https://online.flowpaper.com/74cc0732/702010/#page=1#PreviewMode=Miniature" type="text/html" scrolling="no" marginwidth="0" marginheight="0" allowFullScreen></iframe>

Just spent a few hours playing with formats and it seems that there is some code in the Android mobile app (As I don't have IOS to test on) that is

Keeping in this container and not allowing the iframe content to naturally flow out in a grid-like status.  


As a note also.. 

I usually use Bluestacks for testing and since the new upgrade have found these last few days its not liking too much on the new app as well. 

https://www.bluestacks.com


Edits: Reading through the tracker\ github looks like this is a bigger program with iframes and full screen within android so with a bit of luck it will settle over the coming months. 

https://tracker.moodle.org/browse/MOBILE-2433

 
Average of ratings: -
on the Great Wall
Re: Mobile app and iframes
Particularly helpful Moodlers

Not sure if this should go into bugs and improvements?

Mod's can steer me in the right direction. 

This screenshot actually shows what is happening well. 

Logging to the forums on the Mobile app (Android). Within the preview thread mode, I can actually see these iframes working as if I had put them in as HTML. We can see the container size they are being limited to. (but there again should they be actually showing as I had thought that iframes where turned off for the Moodle forums as I have tried to include a few before within the HTML edits and not have them show. )


going to full screen within the app.. 


Interesting enough if I go into the thread I just see the post code.. 



And chances are there is a bit of discussion on this editing ribbon being a bit overpowering. As it then only allows for one line edits within the forum once the keyboard kicks up. I see an option to turn it off?

Haven't had a look at the new H5P hosting site yet, but will do and play around over coming weeks with it and see how it fits into the Moodle app offering. 

All good, happy to join up with the Beta testing team if they want a tester as I am trying to develop the site for Mobile app first then Desktop/Mobile browser. As said in the previous post this may have to be put on hold until this all settles down. 



 
Average of ratings: -
on the Great Wall
Re: Mobile app and iframes
Particularly helpful Moodlers

A little play around today and looking at some codes that are working. 

Seeing that standard Moodle Atto Youtube insert looks fine and as we know that it is using an iframe that is being handled by the internal Atto Moodle coding. (but we can't see that code when we go to HTML edits). I also had a look at some of our Vimeo videos and they are looking fine via the mobile app. 

so I have pulled some of the Vimeo code apart and used it with the GDrive codes. 

This is what I get and it looks fine.. the padding can be played with to suit the PPT's in question. 


<div style="padding:70.00% 0 0 0;position:relative;"><iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQ4fIJnrWjggro4UIz5Xokk5wMDfwP-gsommd8DOs1g24jjBjae2auZaAcgb2hxOdEPQSeXUIARRSSQ/embed?start=false&amp;loop=false&amp;delayms=3000" frameborder="0" style="position:absolute;top:0;left:0;width:100%;height:100%;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe></div>

<div style="padding:70.00% 0 0 0;position:relative;"><iframe src="https://drive.google.com/file/d/1frtLH1cQkDBmclD4h_6UUpgfzM_5qL8u/preview" style="position:absolute;top:0;left:0;width:100%;height:100%;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe></div>

Using the format (and dropping in a src="https - As with in the desktop it works with out this but as per last posts mobile doesnt see it).. I am getting Slides.com working fine too.. will need a little tweeking but they are fine for now. 

<div style="padding:70.00% 0 0 0;position:relative;"><iframe src="https://slides.com/advancedconstructionskills/70-20-10/embed?byline=hidden&amp;share=hidden" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe></div>


Flowpaper also is looking better but the format needs to be played with as the iframe is only going mobile and it would be nice to trick it to use the desktop format..

<div style="padding:70.00% 0 0 0;position:relative;"><iframe frameborder="0" width="400" height="300" title="" src="https://online.flowpaper.com/74cc0732/702010/#page=6" type="text/html" style="position:absolute;top:0;left:0;width:100%;height:100%;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe></div>

Of note these do look full page on the desktop, but are responsive so is acceptable. 

I haven't had time to play with any H5P iframes out of WordPress to a Moodle site at the moment but I am guessing that this little fix will work. 

Hope this reporting back helps out any others that use any of these services. 

I am guessing that now that I have worked this out there might be a chance that using a GENERICO template might also achieve this and shorten the coding timeframes for activities creation. 


If anyone wants to have a play this code I have posted should work just by dropping it into your ATTO editor and see these in action then head to your mobile app to see how they look. 

The Actual PPT is a remake from the folks over at E-Learning Heroes - Articulate

https://community.articulate.com/download/powerpoint-70-20-10/

 
Average of ratings: -
Picture of Dani Palou
Re: Mobile app and iframes
Core developersMoodle HQParticularly helpful MoodlersPlugin developers

Hi Daniell,

we fixed a couple of issues that could be related to some of the errors you're finding:

https://tracker.moodle.org/browse/MOBILE-2500

https://tracker.moodle.org/browse/MOBILE-2433

Those issues will be included in the next release of the app.

Cheers,

Dani

 
Average of ratings: Useful (1)
on the Great Wall
Re: Mobile app and iframes
Particularly helpful Moodlers

Wondering if someone smarter then me can help me out and point me in the right direction. 


Following on from the conversation I am having with myself on the above. 

( I can't be the only moodle course designer for mobile app users that is facing this problem..can I?)


So far I am feely happy with the codes I have found that work to give me the look and sizing of the materials we are creating. 

But I would still love to crack out the "why & how" of the standard Moodle video placement codes in that, I want to play around with them on the H5P content. At the moment it is a bit of a deal breaker for me and why I am not leaning towards more H5P content creation but more of the google drive type. 


I have tried using the Chrome inspector to find any tidbits that may be of use, but my knowledge level is not great enough to see anything of use. 


To put it into pictures.. 

Portrait - Bad, 

seems at the moment I am not able to create a bigger container that is viewed within the android app then what is showing here. 


Portrait - Good

Using Atto internal Moodle codes. 



landscape - Standard codes

Same as above with container not being allowed to expand.

 

landscape - Moodle codes - Good (but while centred on the page in desktop not centring within the Mobile app)



Code from inspector I am looking at. 



At this stage, as mentioned nothing is popping out at me, but high chance as it is the lack my CSS and or HTML experience. 

Anyone got an idea and or have samples of better workings. 

Noting that this is for H5P content as for video and PPT's the codes in the previous posts are working a treat.


I will post to the H5P threads as well and report back any findings over coming weeks. 

Once this is settled then we have the holy grail for course designers. smile


I would still like to put forward the ability to have that bottom\top menu bar disappearing on content. i.e a sliding draw effect. Yes

As between the top one and bottom one, there is too much screen real-estate being lost. 


Is this something that can be voted on and or put out to the community to work on.. i.e a go fund page.?

I would be happy to put a few $$$ towards it, as while I know there are custom apps being made that may have this ability already. 

It would be nice to have it out there for the smaller creators to use for their students.. 


Also of note, I do understand the work here thus the idea of a funded page for someone to benefit from. 

 
Average of ratings: -