The client is a leading education technology company in the USA focused on teaching, assessing, and certifying students in critical skills. Their motto has been to combine personalized technology and deep education research data with a dedicated implementation team that allows teachers to feel as though they have blended learning assistance in their classroom.
QBurst helped a well-known company in the eLearning space migrate from a Flash-based environment to a mobile-friendly alternative. Through extensive analysis and evaluation of coding options, complex Flash animations were recreated using HTML5 and implemented systematically to meet the client’s expectations.
The key challenge the client faced was that their web application, developed using Flash, was not supported on iPad and Android 4 and above devices. HTML5 was chosen as an alternative to Flash and this involved several challenges.
- Long series of complex animations
- Audio synchronization with animation at the time of pause and play
- Loading issue during page start
- Duplicating the transition effects to match Flash transitions
- Making the animations compatible with IE8
- Playing audio and video on IE8
Addressing loading delays: In the HTML5 app, audio autoplay was used to initiate audio. However, at times the audio files did not load due to browser cache issues. To resolve this problem we used an HTML5 loader and loaded the audio files using the preloader script instead of completing the process by adding the source tag. This ensured that the initial blockers would not prevent any audio files from loading. It was the best solution for the audio loading issue and it helped us to improve user experience as it displays the loading status with the help of a progress bar showing percentage of files loaded.
Duplicating the transition effects: We used an ActiveX object with native media player support for playing audio/video files. As the application contains multiple audio and video files, we created a common method which accepts object ID as an argument. This method attaches all the associated functions (play, stop, pause, and others) and data (current time) with the object.
Compatibility with IE8: Earlier, CSS3 transitions were used for rotating elements; but since IE8 does not support CSS3, we opted to use a jQuery rotate plugin tomake this functionality work on IE8 as well as other browsers.
Features and Functionalities
- Audio and video integration
- Audio synchronized animations
- Animations on time update
- Complex animation screens including SVG
- Audio and video play, pause, replay
- Animation pause
- Audio narration
- Pages with drag/drop functionality and user interaction
- Quiz pages with simple/complex animations
- Toolbar, help, narration, and calculator
- IE8+ compatibility
- iPad and Android tablet support