Implementation : Read Along App-Web Interactions

[charanpreet-s]

Description

Using the Google Read-Along android app from a web page to perform a fluency test.

Current Problem & Android Specific Solution

Read-Along is not yet available as a PWA or web-based implementation due to which, Assessment module in Shiksha will not be able to perform fluency and reading test. This will be achieved by creating interfacing between web implementation and the Read-Along android app via an intermediate Android app working as a bridge.

Functional Diagram

Implementation

1. In the android app where the web page will be hosted, JS interfacing is needed to be enabled -

webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(this, "androidInteract");
webView.loadUrl("file:///android_asset/index.html");

here, "this" refers to the class where the JS interfacing method will be implemented which is explained in the next step

2. Adding a function inside the class(in the android app where javascript interface has been added as mentioned in Pt. 1). This function will be called from the web page triggering the Read-Along app.

@JavascriptInterface
 public void triggerReadAlong(String bookId) {
     openBolo(bookId);
 }

3. Adding Read-Along opening Intent in the same class

private void openBolo(String bookId) {
    Intent intent = new Intent();
    intent.setAction("com.google.android.apps.seekh.READBOOK");
    intent.putExtra("assessment_mode", true);
    intent.putExtra("intent_open_book_id", bookId);
    intent.addFlags(Intent.FLAG_INCLUDE_STOPPED_PACKAGES);
    boloLauncher.launch(intent);
}

4. Add a callback in the android app which will receive the results from the Read-Along App and call the method "onReadAlongResult" on the web page with parameters word count and total time taken in seconds

ActivityResultLauncher<Intent> boloLauncher =
registerForActivityResult(new ActivityResultContracts.StartActivityForResult(), result -> {
    int resultCode = result.getResultCode();
    if (resultCode == Activity.RESULT_OK) {
        int correctWords = result.getData().getIntExtra("correct_words", 0);
        long totalTime = result.getData().getLongExtra("total_time", 0L);
        if(totalTime < 1000) totalTime = 1000;
        long totalTimeInSeconds = totalTime / 1000;
        int wordsPerMinute = (int) ((correctWords * 60) / totalTimeInSeconds);
        webView.evaluateJavascript("onReadAlongResult(" + correctWords + "," + totalTimeInSeconds + ")", null);
    } else {
        Toast.makeText(this, "Read Along Result Code : " + resultCode, Toast.LENGTH_LONG).show();
    }
});

5. On the Web side two functions will be created, one for calling the android code and another one for receiving results from the android app

function openReadAlong() {
    androidInteract.triggerReadAlong("hp_g3_hinP4")
}
function onReadAlongResult(correctWords, timeTaken){
    document.getElementById("results").innerHTML = "Read Along : Correct words : " + correctWords + " : Time taken : " + 
    timeTaken + " seconds";
}

Example Implementation - Github Link
(This has been created and tested using a local webpage. The same would work for an online running webpage)

Sample Video
https://user-images.githubusercontent.com/87115901/178682782-fb20cec6-9db6-49ac-9996-0fbae04abe6a.mp4