Non-cognitive skills : the art of learning to learn well : data visualisation

E-learning is a popular alternative tool for traditional classroom teaching but it lacks the face-to-face advantage. However, the limitation can be overcome with the use of automated tracking of user activities on the website, which the data can then be analysed to identify students’ behaviour and engagement on learning. An e-learning platform with tracking abilities was built by NTU students but the data collected were not collated. I was then tasked to construct a dashboard for the e-learning platform, which allows educators to view all the results collected in a systematic yet simple way. This report discusses the process of in building the dashboard, from back-end data processing to front-end designing. Since this project involves both server and client side scripting, WAMP server is used as the main web development tool. Bootstrap is used for the responsive web design. The grid system of Bootstrap has high flexibility that let user to decide what to shown on different devices of different screen sizes. C3.js is the main chart plotting tool. It is advantageous because it is highly customisable on the data to be shown in charts. Installation and configuration details of these tools are explained more discreetly in the report. There are three phases of design approach – data categorisation, dashboard design and chart types. For data categorisation, data is mainly categorised into four groups, which are cohort, practices, student and questions analysis. The overview data is showed at the first level, whereas the details of each component will then be displayed at the lower level. The dashboard employs a minimalist design with the emphasis on readability and user-friendliness. A consistent theme with clear typography is used over the dashboard. A monochromatic background is also applied to achieve the design calmness. As different chart types have different functionalities, thus various chart types were used for the data presentation. A full explanation on chart types can be found in the report. For technical approach, PHP, JavaScript are the main programming languages used for data extraction and processing. To improve the browsing speed, students' raw data is kept as a local copy. In order to link all the files together, meaningful and specific PHP data is first stored in variables, before passing them to JavaScript for further processing. When the user tries to recall the desired data by hitting the submit button, the data from the local copy will be called and processed into the chart or tables. CSS is used to style the website into a simplistic design for a better user experience. After finalising the dashboard, user testing was carried out to compare the dashboard built by me and another PhD student, Liu Kai. Results show that candidates spent 20% lesser time in getting the desired data on my platform. In overall, in a scale of 10, the people find my dashboard is 12% better in terms of design and user friendliness but Liu Kai's dashboard is 10% better than mine in term of data compactness. A step-by-step user guideline is also embedded in the report.Bachelor of Engineerin