Multiple Pradigi HTML5 apps contain bug that breaks rendering on Android

[rtibbles]

Observed behavior

On any mobile browser - as detected by a sniff check using:

navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)

The HTML5 apps will attempt to reference an undefined variable (that is defined in the context that they are run inside a webview inside the Pradigi Android App), this breaks execution of the Javascript and causes a blank screen to be displayed.

Errors and logs

In one example, this code block is the issue:

var Barakhadi={};
var Utils={};
Utils.Path='';
Utils.mobileDeviceFlag=false;
var questionId=0,startTime=0,scoredMarks=0,totalMarks=100,resId;

$(document).ready(function(){
	$(".se-pre-con").fadeOut("slow");
	  if(navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i))
		Utils.mobileDeviceFlag=true;
	 if(Utils.mobileDeviceFlag)
		Utils.Path=Android.getMediaPath("ABCD");  
	setTimeout(function(){
		Barakhadi.setAllImages();
		Barakhadi.init();
	},200);
});

Specifically the reference to the undefined Android global variable.

Expected behavior

The HTML5 apps should run. Removing the reference to the Android global variable fixed it in this instance.

User-facing consequences

Breakage

Context

Android devices, using any browser - but easily replicable using Android + Chrome.

Notes for remediation

Fixing this may be tricky, as it would involve updating and rerunning a very old content integration script https://github.com/learningequality/sushi-chef-pradigi, where the source may have been heavily updated in the interim.

If this is the case, then simply rerunning the script may fail, and would require considerable effort to fix (and the source material may have changed considerably in the interim, in ways that we do not wish to update).

An alternative here would then be to follow the pattern used in the Khan Academy chef where we first download the existing version of the channel database, and then make incremental updates when needed. In the case where no modification to the files is needed, we can simply use the RemoteFile class to refer to the existing file. Otherwise, we can update with the edited version.

This takes us closer to a 'corrections' workflow that has previously been mooted for automated channel creation and updated, and there may be room to start generalizing into additional ricecooker functionality based on this experience.

[rtibbles]

Note in the updated versions of these HTML5 zips on the prathamopenschool website, this check has been added && !(window.location.href.includes('http') to ensure that the match only happens when the resources are fetched in presumably an insecure file context in an Android app, rather than over http.