Category: Mobile

Posted on

Remote Debugging Samsung Galaxy 7 Edge with Chrome

If you’re confused as to why something which is working well on your Canvas site, isn’t working on the Student App, Google Chrome gives you a great way to find out what’s going wrong with its Remote Debugging Android Devices

Annoyingly, it’s not quite as easy as one would hope on a Galaxy S7 Edge or, by the sounds of it, any Samsung device, on Windows 10 anyway.

Extra steps required above what’s on the page above, for me anyway, were:

  1. Enabling USB Debugging. On A Galaxy S7, to turn developer mode on, you have to go to About phone | Software info then tap Build number 7 times(!?). You can then access the Developer options (at bottom of Settings) to switch on USB Debugging.
  2. On Windows 10, to even get the Device to be recognised, you need to:

If you have a Mac available, you don’t seem to need to bother with Step 2 above – it just works!

 

Posted on

Self-test questions in Moodle

In an earlier post I outlined plans for migration of MedLearn to Moodle. The technical work is now done except for editor plugins. The migration is well underway.

The tricky bit was getting the self test questions to work. The purpose of self test questions is to enliven content and enhance learning. They are not intended to be an assessment, although it may be useful to record the answers.

The Quiz activity provides the best range of question types but it also forces questions into an assessment with a very specific workflow (start attempt; answer questions; finish; submit; review). We wanted a much looser workflow which did not present questions as a quiz. The answer (suggested by Tim Hunt) was to embed a preview question in an iFrame. We chose the Book module for the content into which the questions were embedded.

Students log in to our VLE (Sakai). They then launch an LTI tool which automatically provisions them in Moodle. They are assigned an adapted set of permissions to avoid the issues highlighted by Tim Hunt in this post. The LTI provider plugin does all the provisioning, including the assignment of the role with the permissions.

Questions are inserted into the book content using Generico filter and Atto plugin. I’ve defined a template which just takes the question number and applies the correct iFrame. A Javascript frame resize script triggers on load (and on change) so that the question appears seamlessly in the content. The plugin also has an Atto editor plugin to simplify editing.

I have modified the preview PHP so that the title and config have been stripped off, leaving just bare question with answer box and ‘check’ button. The preview PHP still accepts the querystring configuration so I passed &correctness=0&marks=0&markdp=0&feedback=1&generalfeedback=1&rightanswer=1&history=0 to it in the Generico template.

The script tag to load the JavaScript resize code is in AdditionalHTML config.

We’ve also made the content more mobile friendly using Bas Brand’s Bootstrap  3 theme and more semantically relevant HTML5 tags such as <figure>, <cite>, <dfn> and <dl>. We are about to start authoring Atto plugins to support these tags. JQuery is used to for image swaps, replacing the mouseovers and flash which aren’t mobile friendly.

The only missing feature which would be really nice to have is a way of browsing the questions from the question bank for insertion. It’s currently a little clunky to find the question ID for use in the Generico Atto plugin.

My thanks go to Tim Hunt, Juan Leyva (LTI Provider) and Justin Hunt (Generico) for making the tools which underpin this integration.

Posted on

IOS 7 status bar with fixed footer navbar in Cordova/JQuery Mobile

To avoid your content scrolling underneath the new IOS 7 status bar, you have a few choices but in most situations, org.apache.cordova.statusbar is the best solution.

From the CLI:

$ cordova plugin add org.apache.cordova.statusbar

And you can then turn the transparent IOS7 status bar into one which behaves as it does in IOS6 with the following in your config.xml:

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />

However, if you have a fixed navbar in the footer such as this to approximate the look of a tab bar in the new IOS7  Human Interface Guidelines:

<div data-role="footer" data-id="allot_footer" data-position="fixed">
    <div data-role="navbar" data-iconpos="bottom">
        <ul>
            <li><a href="#browse" data-id="footer_browse" data-theme="d" data-icon="grid">Browse</a></li>
            <li><a href="#find" data-id="footer_find" data-theme="d" data-icon="search">Find</a></li>
        </ul>
    </div>
</div>

then you’ll find that the statusbar plugin pushes the navbar down off the bottom of the page by the height of the status bar. So, for a fixed bottom navbar, the solution I’ve adopted inn the end is to forget the statusbar plugin and to allow the status bar to overlay my content. However, to create a bit of space at the top of the page for it to sit, I used this Gist from Shazron to arrive at:

function onDeviceReady() {
    if (parseFloat(window.device.version) >= 7.0) {
        $("div.ui-header").css("padding-top", "20px"); 
        }
    ...
    }

Note that you’ll need to install org.apache.cordova.device using the CLI:

$ cordova plugin add org.apache.cordova.device

It now looks fine on startup but if you need to scroll your content, it’ll still get overlayed by the IOS7 status bar so make your header fixed too:

<div data-role="header" data-id="allot_header" data-position="fixed" data-theme="d">
    <h1>Browse</h1>
</div>

Hoping that IOS7 issues will all become a distant memory very soon, but this is what works for me at the moment.

Posted on

Migrating Cordova/JQuery Mobile app from Android to iOS

Some notes on this process in case they are useful to others:

Back button

Android specifically prohibits back buttons due to the presence of a physical Back button on all Android mobiles. However, in iOS, it’s the norm. JQuery mobile does provide an easy to insert header back button :

<a href="#" data-role="button" data-rel="back" data-icon="arrow-l">Back</a>

but it uses the JQuery theme. If you want to make it look like an iOS back button, this article makes it relatively easy.

Navigation

In Android,with Cordova, we have to use absolute URLs for navigation:

navigator.app.loadUrl("file:///android_asset/www/mypage.html");

In iOS, we can use the much simpler form:

location.href = "mypage.html";

Seemingly random clicks firing intermittently

It seems that using JQuery Mobile’s ‘vclick’ event in iOS can cause problems, although the same code was working fine in Android. I was seeing a page change, followed by another page change as if something in the first page loaded had been clicked. After trying all sorts of event undelegation and unbinding, I finally looked at JQuery’s vclick documentation. This explains that there is a slight delay between the JQuery’s ‘vclick’ event  and the native ‘click’ event. When the content under the clicked point changes (as in this case with a new page load), the click event can actually fire on the changed rather than the original content. In situations like this, the recommendation is to use the ‘click’ rather than ‘vclick’ which solved the problem for me.

External pages

My app opens links to an external site for further information. In Android, simply specifying a full http:// prefix URL was enough to ensure that it loaded in the device’s normal web browser. In iOS, the default to seems to be to load it within the embedded brwoser which is being used to run your Cordova application, which is far from ideal. The workaround seems to simply add:

target = '_blank'

to all external links – they then fire up the iOS device’s Safari browser.