Hazard prediction training web app

One of the companies I worked for put a lot of importance on safety. As a way to improve the employees' awareness of danger, there would be regular meetings during which participants would need to identify dangerous points in a picture. The results were written down and archived on paper, which I believed could be improved. So, I created this web application.

This app is built around an HTML5 canvas that displays an image of a random situation. One by one, the participants click on the dangerous points in it, which draws a colored circle at the clicks location. After all participants are done, the circles of every participant is displayed, giving an opportunity to discuss every one's input. Once discussed, the results, in the form of the point count and the canvas containing the circles of every member, can be saved on the server. The points of each session are stored in a new row of a MySQL table and is displayed prior to the session.

Group discussion phase

Scoreboard

The app is built using PHP for the back-end and JavaScript for the front end, with a special attention to providing HTML and CSS code that is compatible with internet explorer (used at the company). Its source code of the app available on GitHub.