Simplex: the online linear programming tutoring tool

Django / React based dynamic e-learning solution

Posted by creatic on Sat 20 July 2019

Simplex - React & Django based online app

Simplex V4 is an online automatic tutoring tool that helps students at Kaposvar University, Hungary to learn the theory of Linear Programming. It is created with React, Django and additional libraries, like JSXGraph, i18next, TastyPie REST API, django-mptt and Electron.

The online tool has simple dynamic UI for input, data manipulation, charting and file management. This UI is based on React which communicates with the Django backend over a REST API. The backend gives the basic site templates, the account and file management (the exercises and solutions can be saved) and the admin interface. The graphing tool is created via JSXGraph, a javascript graphical mathematic library for visualizing 2D objects.

The project went in a really agile way: the prototype was released early and we enhanced the functionality step-by-step as the client and friendly-users used it.

An automatic tutoring tool

Kaposvar University, Hungary has a project to give the students practical assistance in learning Linear Programming theory. The base idea is to create an online tool using which a student is able to solve optimalization tasks, make the necessary steps in the process and check the outcome in visual form. The tasks themselves are represented in linear relationships (e.g. equations, matrices). The solution is visible on the graphical chart and in the result matrix, too.

The Simplex Method

The theory of Linear Programming goes back to Fourier, but during the 20th century several economist and mathematician added to this field. The so called Simplex method is one popular algorithm for Linear Programming. What we wanted to achieve is that the online Simplex tool is able to get a matrix as an input containing the optimalization problem, the constraints, etc. and the user can make subsequent steps towards the proper solution choosing a Pivot element (in this matrix) in each step.

As the user goes through the optimalization process she learns to find the proper Pivots and gets a visual feedback of the optimalization itself in a graphical chart. The tool works for 10 dimensions currently - the chart works for 2D - but the theory shows itself: one can clearly see the outcome of choosing a proper or improper Pivot.

React and Django

It was clear from the start that the UI of this tool will be a very dynamic, rapidly changing environment. So we choosed React to give a solid background. The main building bricks of our application are the problem marix, the settings bar, the file management panel and the graph area. All of these has a bunch of sub-components, so we have a nice React component tree to work with.

The backend is a Django based web application which is accessed via a REST API from the UI. Django gives us the base views, the login and account mechanism and the storage of the saved exercises. And we can rely on the general admin interface - which is not used often in this project, but anyway a good-to-have feature.

Delivery method

As we only had a really simple draft of requirements of the product the components of the application had to be created in a modular way. This enabled easier upgrades and/or replacements as the client gathered enough experience in the usage. The two main frameworks React and Django backed this agile way of development up to a level we could release newer versions fast. Also frequent verbal communications, demos and regular feedbacks helped much to avoid functional dead-ends or misunderstanings.

Conclusion

We could deliver a function-rich product to a satisfied client in the end while in the beginning only had limited information about the requested functionalities. What helped us is the well-choosen technologies, the agile way of development and the frequent and proper communication.

All of these can be a solid background either to rapid prototyping or large-scale projects.