Week 5: MCQ's UI Improvement, Exercise compression and Code refactoring

Welcome to the third week of the Coding Period. This week I mainly worked on refactoring code and MCQ’s UI Improvement. Starting with the third week, I worked mainly in four areas -

1. MCQ Player’s UI Improvement.

Earlier clicking on any of the choice button would select that option, it was fine until the integration of multimedia. With multimedia integration, the user would also need to play the media element by clicking on the button. This created confusion as to which option was selected, in order to overcome this problem I used a radio input in-place with a corresponding choice button so that the radio button would indicate whether or not an option is selected.

MCQ Player's Interface before and after.

2. Exercise data compression.

Currently, the application uses local storage to store previously used activities. In case of Exerciser, with the presence of a number of media elements, it increased the size of json string to be stored in local storage considerably, hence arising the need to compress the json string before saving it. Note: (Here I am referring to json string as in localstrogae only Javascript strings can be stored). So in order to compress the string the library I used is lz-string, lz-string is designed to fulfil the need of storing large amounts of data in localStorage, and is also very simple to use.

var string = "This is my compression test.";
alert("Size of sample is: " + string.length);
var compressed = LZString.compress(string);
alert("Size of compressed sample is: " + compressed.length);
string = LZString.decompress(compressed);
alert("Sample is: " + string);

Here LZString.compress accepts a string and compresses it, similarly LZString.decompress accepts the compressed version of the string and returns it in uncompressed form. It compresses the length of the string to about 1/4th of its initial size.

3. Higher Order Component for Multimedia.

The previous implementation of multimedia integration in exerciser lead to a lot of redundant code. This problem was solved using HOC - Higher Orde Component. A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature. Concretely, a higher-order component is a function that takes a component and returns a new component. It is a great technique to refrain from writing redundant code as much as possible. You can find the link of its implementation here.

4. Testing changes with APK builder.

Apart from using Sugarizer on Web, Sugarizer can also be used on mobile devices. You can find the Playstore link here. There is an application developed by my mentor Lionel Laské which enables the conversion of JS based Sugarizer file to java based files - Sugarizer-AP-Builder. I used it to test the new implementation of multimedia in Exerciser and was glad to know that everything works just fine.

It was great sharing this milestone with you. Looking forward to seeing you all next week. Have a great week ahead.