App as an Ordered Sequence of Pages. How to Build a Quiz Application with JavaScript

Web app development is not a piece of cake by itself, and each new project brings new challenges. We can usually freely navigate the pages and choose our journey when using apps. But what if we need to build an app where users must follow the prescripted page order?


For example, it can be an online quest game where users can’t proceed to the next room before solving clues and finding a key. A more straightforward example is an eLearning app that tests students’ acquired knowledge that you’ve probably seen on platforms like Coursera. Today, we will show you how we implemented such functionality for one of our projects and share some techniques we used.


How We Found the Suitable Technology for Our Project


Suppose you need to build a web application that guides users through a sequence of pages in a particular order. Users need to solve a specific task on each page, such as answering a series of questions. For each correct answer, users receive some points. The total number of points and correct answers must be saved somehow. After the test, these results will be compared with reference values to understand whether the user passed the test. Also, to avoid cheating, users must perform tasks one by one without the possibility of jumping ahead or returning to the previous page after the answers have been submitted. Described functionality is similar to what we previously implemented in our online exam system:


This time we needed to act fast and efficiently to demonstrate functionality to the customer as quickly as possible. In our team, we had a React guru and an experienced Webix developer (he’s a guru as well). The team started to discuss who should take care of this task and the most optimal way to solve it. The React enthusiast suggested using Redux, React Router, and other tools, which made sense but didn’t fit our primary goal of rapidly launching an MVP without redundant technologies.


Read Also How Much Does MVP Development Cost


The Webix UI library, on the other hand, had all the ready-to-use components that were ideal for our needs. Charts, multi selects, forms — everything was at hand. Why use React if you have Webix Jet, a microframework for building web apps, with a ready-made solution for routing management? Plus, there’s a convenient API for working with Local Storage, making Webix a simple and effective solution we could use without resorting to redundant React technologies. Ultimately, we chose Webix, and this decision could not have come at a better time since we had no resources to reinvent the wheel. And despite the temptation to dive into React, we preferred simplicity and efficiency, allowing us to achieve our e-learning project’s goals quickly.


This is how we implemented our solution with Webix Jet: https://xbsoftware.com/blog/e-learning-app-development/