How we developed HTML5-based interactive tools for Education industry in Ireland?

HTML5 vs Flash

We have a long history of cooperation with EDCO, however most of our previous project were based on Adobe Flash technology. Connect with Math requirements were different however. Our goal was to achieve a modern application, responsive in limited resolutions (tablet -> laptop -> desktop) and available for wide range of devices. We decided not to use Adobe Flash, since this plug-in is not available for most of mobile internet browsers.

Furthermore, our team is definitely more proficient with the newest and most modern techniques of web projects production, based on HTML5, CSS3 and Canvas. If you want to check our capabilities in that field, please check MerixGames, a division of Merixstudio agency focused on developing high-quality, visual, handcrafted HTML5 games.

SVG

One of the key project requirement was efficient and aesthetically pleasing display of all created applications on various screens with different resolutions – from 1024x768 to 1920x1080. In order to fulfil such requirement we decided to use graphics element in SVG (Scalable Vector Graphics) format. Vector graphics is seamlessly scalable between different resolutions and, what is most important, no loss of quality is observed – the element looks sharp and  perfect despite the screen type it is displayed on. Furthermore SVG file structure is relatively simple, which allows us to alter the object directly in our application. The last feature proved to be crucial in order to provide our client with required level of interactivity for each interactive tool.

Animations

Whole project was divided into two subprojects. First one – the Construction Animations consists of 22 animated curriculum-based constructions, designed to:

• show how to draw geometrical shapes and figures, with drafting instruments (i.e. to bisect an angle, to construct a parallel line, to draw a given kind of triangle, etc.)
• conduct formal proofs of geometrical theorems (i.e. to proof that in a parallelogram, opposite sides are equal and opposite angles are equal, etc.).

Each animation is divided into series of separate steps. User is able to pause the animation at any time, resume the animation and navigate easily between steps. It was challenging to synchronize those separate steps with convenient possibility of jumping between them. In order to achieve it, we created animation management system, which allowed us do store each scene and basic movements of each elements in JSON format. This approach made jumping between steps easy to handle.

Some of the geometrical constructions required use of certain angle, for example 70 degrees. Because the whole project is responsive, it was not an easy task and required extremely mathematical approach to the issue. Additional custom mechanism were produced, responsible for position, angle and rotation point recalculation of certain animated object and when the recalculation was completed, for executing the animation.

All construction are created with standard drawing instruments like ruler, set square and protractor. The most troublesome one was the compass, which consists of three independent elements – two arms connected by a hinge. Therefore, instead of one object, we have three. In order to animate the compass the application needs to constantly check the position of both arms in relation to the hinge and synchronize the animation of all three elements at the same time, in order to move, open or change the compass position.

Interactive tools

The second part of Connect with Maths project were focused on creating 8 completely different interactive tools.

1. Probability

The aim of this tool is to explain the probability concept. User is able to choose one of four types of objects (coin, die, spinner with colours and playing card). Then he or she is able to discuss certain probability scenario on selected object, for example:
- how possible is rolling six dots on a single die and how the probability is changing with introduction of more dice
- how possible is drawing of a certain card from different sets of a card deck. Imagine how probable is drawing the queen of hearts form the whole deck of cards in comparison with deck which consist only with figures.

2. Relative Frequency

This tool is a natural follow-up of the previous one. User is able to use the same object types (coin, die, spinner with colours and playing card) and see results generated with set number of trials (up to 1 000 000). Application allows to discuss on real life examples concepts of statistics and frequency.

3. Sets, Elements and Patterns

User is able to use set of predefined Venn diagrams along with five types of objects (animals, fruits, letters, numbers and shapes) and practice different basic operations on those diagrams. First he is able to create own diagram or use one of the prepopulated examples and then he can use sector-highlighting feature to discuss basic operations, like intersection, union or complement of two or three sets.

Thanks to simple drag&drop mechanism, user is able to pull an object from a list on the side of the screen to drop the object in a certain set area. We struggled with conversion of position in SVG object to position of the object on the display screen. We came up with solution which recalculates the position according to the current scale of SVG element.

4. Number line

A simple tool which visualize actual difference (distance) between certain numbers on number line. It can be used for better understanding of commutativity of addition and concepts relating to Natural numbers, Integers and Rational numbers. A drag&drop mechanism is introduced, which allows to seamlessly adjust displayed numbers.

5. Fractions

This tool allows to take a closer look to rational numbers. Fractions are shown in easy to understand way, for example as a pizza divided into several slices.  Furthermore, different representation of those number is displayed - as a common and declaim fraction and as percentage. User is able to freely modify the fraction value, compare two fractions and display a random values for numerator and denominator.

While coding we encountered the same problem as before, concerning the SVG element positioning along with its responsiveness and scalability. For example it was difficult to make sure the pizza object maintains proper position while the size of the object was changing though different resolutions. To solve this issue, we implemented the same solution as per the Sets, Elements and Patterns tool.

6. Pie chart

A wide range of prepopulated examples allows user to explore the concept and usability of pie chart. User is able to create own chart, with different values, which are instantly recalculated to sum of 100 percent. User can freely change the colour of each section and label them in convenient way.

Pie chart could be divided into any amount of sections. Each section is labeled. We struggled with finding the optimal point on the label to start the line connecting the label to the pie chart. To solve this problem, each label have 8 helper points. Application calculates distance between each of those points and the pie chart. Connecting line is drawn between the pie chart and the start point, which gives the shortest distance.

7. Graphing

Simple tool utilizing predefined examples to show simple, real life activities (Sun flower growth, savings, etc.) as simple mathematical functions graphs. User is able to create own graphs, in order to do so he or she may use wide range of templates with different values and ranges for X and Y axis. A simple drag&drop mechanism is introduced allowing the user to create and modify existing points.

User is able to add new point to the graph in two ways:
- by clicking on a position, where the point should be displayed
- by entering the X and Y coordinates in graph data table.

In order to properly synchronize drawn point with coordinates in the data table, a special scalable relative coordinate system was produced. This mechanism recalculates positions and distances in pixels to unified units, which allows us to display points in proper places and draw the graph correctly.

8. Geometry

Definitely the most complex tool in whole project, the scope of functionalities resembles simple vector graphics editor. User is able to draw various shapes, straight lines, rectangles and ellipses. On drawing area user can create and edit texts and utilize additional set of math symbols. In order to deepen relations between geometry and real life, an image bank of several dozen pictures is introduced (tree, bridge, floor plan, football pitch, etc.). User can use those images to discuss different topics like Pythagorean theorem, difference between perimeter and area or congruent triangles.

While working on this tool, we encountered a truly difficult issue. User is able to rotate SVG objects form image bank and change objects size. However when he did so, image was changing its position in an unexpected manner. The reason of such behavior is that, each SVG object utilizes inner coordinates system, and when object was rotated those coordinates system was rotated as well. To solve this problem, we decided to approach differently to rotate option, we changed position of rotation point from upper right corner of the object to the center of the object. Thanks to such approach, object position is not changed while resizing it and the problem with unexpected position change do not occurs.

While touch screen optimization were implemented, it turned out that points responsible for resizing objects did not recognize touch and gesture commands. To solve this issue, apart of standard gesture instructions coded for the drawing area, additional custom made commands were prepared to make object resizing available on touch screen.

Summarizing

E-learning, education with use of various multimedia resources and Internet access, is a great mean to facilitate and enhance traditional learning process. It has many advantages:

• you can use it whenever and wherever you want (for example in your home)
• it diversify the learning process, utilising multimedia resources and non-verbal means of visualising different concepts
• you can use it in your own, convenient pace
• content is adjusted to certain kind of user, for example learn by play for the youngest users.

Thanks to the newest technologies HTML5, CSS3, SVG and canvas, e-learning applications are available for wide range of devices. You can use such tools on desktop, tablet and even on your phone. Ongoing development of those technologies reduce more and more limitations and allows developers to unleash creativity further while creating new e-learning tools.

The most important is, that this method of knowledge acquisition and complementation is appreciated and becoming more and more popular in various social groups, from children and teenagers,  adults (to broadening of employees competencies) to elderly people starting their adventure with internet

‍