Something my team and I have been wanting to add to our software suite for a while is an elearning platform. We've all used one, whether it's to learn new skills for work or maybe to get help on a side project that you're hoping could sprout into something bigger.
Having said that, we feel that there are a number of flaws with existing platforms, including high price barriers for [school] students, a gap in the market for intranet/extranet usage, and poor user engagement/retention userflows. With this in mind, we decided to start working on an elearning platform at some point in 2021.
The Amplify Hackathon was something that was perfect for this. We often have trouble getting started with entirely new projects, so I thought this would be a good opportunity for me to get back to messing around with hackathons and be able to have something tangible by the end of it, something I could then take back to my team after the hackathon finished and keep working on it.
Just to reiterate: this was an entirely new project.
I decided that the backend would be created using Flask and I experimented around with React, Vue and Shoelace.style trying to decide which would be the best solution. I spent so much time trying to make pages from scratch that before I knew it, my home city was back in lock down, it was February 15th and I hadn't started creating anything with Flask either. It got to the point where I just had to rush everything, so I started designing things in figma and then exporting them to plain html & css. Unfortunately, amina didn't do a very good job with the Javascript and I wasted valuable time messing around with that. This was a massive project for me and with everything else that was going on I just wasn't able to get anywhere close to finishing. However, I'm excited with the groundwork I laid during this hackathon as it means I'm that much closer to adding another eventually finished product to my team's suite.
Tools, front-end and libraries
The app was design using Figma and the front-end in Microsoft Studio Code (unfortunately just the login screen for now). The first choice was to customise elements from the sholace.style library. Shoelace is very light and works smoothly across any web application and it is likely that we will be trying to bring this library into SK’s eLearning platform to cut development time.
Another library used for illustrations, that I highly recommend is Undraw.co . There are some very useful illustrations and all of them are in vector format, which allow us to edit each layer of the illustration.
User flow
There is not much about to say about the user flow. It is very intuitive, simple and not different than other eLearning platforms or even social media. The idea is to make the platform easy to use and manage, accessible to every level of familiarity with webapps and the internet. The user can create a new account by defining a user account (no email necessary) or login into an existing account. Also, users can be invited by content creators to the platform via email or by a shared link.
The first screen that the user see is a dashboard to monitor progress and access the courses enrolled. Relevant information such as percentual of courses completed and access to the latest courses, displayed at the beginning of the list. For content creators, or teachers, the courses created by them will be available on the dashboard. Information about each course will be presented, such as the number of students enrolled, engagement and if the course is published - available for search in the platform. Users can also explore other courses by accessing the tab Explore, giving it more opportunities develop new skills.
Courses have no limit in the number of chapters or individual lessons. Chapters can contain videos, quizzes, tests, text or zip files to be downloaded by the user – resources for instance. Each course can also have deadlines by chapters or the whole course. The course structure is very flexible, accommodating any type of subject.
Visual identity (the fun part!)
The general visual identity of the application reflects what is trending in the web/app development, making it friendly and visually pleasant to any type of user. In order to make the application easy to navigate, many design principles are applied. For instance, most elements, including typography, present elements with smooth edges, following a principle called contour bias. This principle states that element with round edges can be perceived as friendly, and therefore, can make the user more comfortable using the application.
Back to typography, the main font used is an open-source Sans-Serif from Google Fonts with smooth edges called Open Sans. To create contrast, another Google Font with serif, creating balance and a visual balance among elements that represent different level of information.
A light pastel colour scheme also features the platform, avoiding eyes strain and reinforcing the friendly image of the application. These colours are also presented in gradients, a recent trend in the market. This also complement the idea of fun and friendly represented in other elements in the composition.
I personally had never used AWS Amplify before, however I had used Robomaker & Sagemaker on a previous machine learning hackathon, from NASA with my team in 2019-20.
A flask full of Pythons
I haven’t really been able to get much of the flask backend working yet, but here’s the eventual plan for the flask-sqlalchemy-based database:
User - Username (Done) Password (Done) - hash function with werkzeug Email Address Local time (Done - automated) User ID (Done - Primary Key) All this user’s posts (Done - linkes to “user who posted” from Post class) Enrolled courses (as a student) - linkes to “Course ID”/”Enrolled Students” in Courses class Posts (like status updates) - Title Body (Done) Time of post (Done) User who posted (Done - Foreign Key) Post ID (Done - Primary Key) Courses (One user can have many courses) Title Description (like Body in Post(s) class) Teacher/Instructor - user foreign key Enrolled students - user foreign key Course ID (Primary Key) Video ID (Foreign Key) Any extra content…. Videos (One course can have many videos) Title Desc Course ID (Foreign Key) Video ID (Primary Key) Extra files/content
We hope to save the watch state of a user/their progress through the course so that on their student dashboard they’re able to jump straight back in.
User bookmarks could possibly be implemented with a form and then a db.commit().
Resources
Documentation & Files
Top comments (3)
online video education platform is very important and it solves most of the problems in interacting between students and the teachers.
You have explained it very well. The main objective of the elearning is that the students need to understand the concepts taught through the video platform for education. The interaction between the students and teacher should be very understandable.
See the hasnode article at devlog.acord.software/hashnode-ele...