I built an e-learning website for my students..

Remote learning during COVID-19, I’ve tried plenty of different platforms. Some generous ones offered free trial service too. Some I find too over the top and quite an overkill to fit with my students and my needs – on the other hand, some simply works great.

My school policy is we don’t do live lessons – which I totally understand. I’m not going to talk into much detail about this.

So then, I know plenty of MOOCs (Massive Online Open Courses) platforms, like FutureLearn, Udemy, Khan etc. I’m also familiar with Moodle & when I was at uni – Blackboard.

Now here comes the reasons why I created my own as a trial or experiment;

1. I have to map existing materials to the curriculum.

One video from YouTube, another video from Khan, a worksheet on Google Docs etc etc. It’s all messy and all over the place. I mean – yes- I can just create a presentation slides and embed videos and stuff on there. But honestly, that sounds tacky and messy af.

2. Students don’t bother watch videos or read attachments.

On Google Classroom, I attached the videos, links to websites, notes on Google Docs and most importantly THE WORKSHEET that all of them need to do. This is ultimately the main task for them. What end up is, they don’t bother watching the videos or read the attachments, but simply fast forward to the worksheet, then look up for the answers elsewhere.

Is this a bad thing? Not necessarily. Internet is full of everything – however that can be an issue, as it’s so full and wide. Students answers range so much and some included those not within specification etc etc. Not to mention, copying and pasting!

3. Quick in lesson assessment for learning (AfL)

During usual physical in-classroom lessons, I usually do some form of AfL. The simplest is just a quick bounce of questions back and fourth before actually moving on to another part of the lesson. A quick check just to validate whether they actually understand what they need to – before moving forward.

So, how to do this remotely with no live lesson? Maybe send some information (slides, docs) as one assignment, then a quick Google Forms quiz after, then another information drop etc etc. That sounds so messy already. How am I going to do this coherently and seamlessly?

4. What’s the problem with recorded video lessons?

Yes, I can record my teaching at home, then asking them to pause the video to do a certain task etc – but, how do I know the students did pause? How do I know they actually understand before moving forward? I know – you might have plenty of ways of how you do this yourselves – AND I’m not saying it’s a problem or bad! I’m just thinking of another alternative – which also doesn’t require me recording, editing and re-recording a lot of videos.

So – what did I built? 💪

I’ve had some experience with coding (HTML/JS/PHP), digital design and using CMS like Wordpress and Joomla etc. So I set up Wordpress — because it’s easy & quick — then installed a LMS (learning management system) plugin. This LMS plugin intended for people to sell and buy courses online – like FutureLearn! My job is to modify this for my students to make it simple, quick and fit for our purpose.

1. One and only login option – Google

Our school uses GSuite for Education and everyone have a Google account with their school email address. Number one issue I encountered using different learning platforms is students forgot their logins or can’t login! Password issues, incorrect email etc. Our school email domain is quite odd – the school name is ‘X Catholic College’ – but our domain name is ‘xcollege.org.uk’. You see, without the ‘Catholic’. Then students often missed out ‘.uk’ at the end – or even uses ‘.com’.

Log In with Google prompted if not logged in.

However, they have no problems logging in to their Google Classroom. As we’re using an external SSO – RMUnify and they manage to do that fine. Hence, I decided to remove all other log in options, then add a single ‘Sign in with Google’ button. On top of that, I only allow those with email address domain ‘xcollege.org.uk’ – other domains won’t be allowed (just in case they log in with their personal Google (gmail) account).

2. Drip content

One of the feature this LMS offers is drip content. This means, there are rules students need to comply before proceeding. These rules such as, they need to complete a certain course (topic) first, before they allowed to start another one. The same as, they need to complete lessons sequentially – they can’t skip forward to a certain part.

The red lock 🔒means they can’t access unless prior lessons have been completed first.

It’s like an actual lesson in a classroom, where students have a walkthrough of the lesson with you one by one. Telling them a story from start to finish.

3. Quizzes in between

Using the drip content along with placing quizzes in between is a really good idea so at least they can check their understanding before proceeding to the next part.

The first page of a quiz section before starting the quiz.

Quizzes such as multiple choice questions, single choice, fill in the blanks and even written ones. They offer additional types at a price.

4. Embed videos, GeoGebra, PheT simulations etc

Embedding any video in a lesson page.

Since the platform is a website, anything is embedable. I can embed a YouTube video on there.

Embedding simulations — for example from GeoGebra or PhET.

GeoGebra and PhET simulations too – so I can write instructions at the top of what they need to do. Then a quick quiz at the bottom to check if they’ve done correctly and getting the expected results.

5. Start, pause, resume

The topic overview page; items completed, topic results, time remaining, lessons & quizzes.

Initially I don’t like the idea of them having to log in (also thinking about privacy & safeguarding issues – see at the end of this post). I rather a single click and complete. However this means they need to complete in a single sitting. Eventually I got around that and implement the log in anyway especially since I can use ‘Sign in with Google’. This means they can pause at any time and resume at any time. All of their progress are stored safely. They can also access on any device to resume their work.

They however have to complete the topic within a time limit. Each topic have their own duration, once they clicked ‘Start’ the countdown begins. Each topic usually range about 1–2 weeks.

6. Working alongside Google Classroom

In the lessons on the website, I included worksheets they have to complete. This is on Google Drive either Google Docs or Slides. Students click the link to the file, they will be prompted to make a copy of that file and complete that work on Google Docs/Slides. Then they submit them on Google Classroom for me to mark on there.

The worksheet is also previewed on the lesson page. They may opt to do the work in writing while the worksheet displayed on their device, then they can simply take a picture of their written work to turn in on Google Classroom using the app.

If they follow the lesson flow properly and sequentially, I shall receive their worksheet on Google Classroom. If they marked their assignment on Google Classroom as completed, however there’s no worksheet attached, that suggests the student doesn’t follow the sequence or skipped that part.

The LMS offer an add-on where students can submit their work on the website, but it’s too clunky and I rather receive, mark and return their work on Google Classroom (also see privacy & safeguarding issue at the end of this post). This also means they have a copy on their Google Drive.

7. Clean and minimal look

Simple and straightforward.

Most learning platforms interface is just too much. It’s overwhelming. So, I created custom themes and templates to simplify everything. There’s literally only two pages they can access, their courses and their profile. They can’t access other courses/topics that are not theirs which I didn’t ask/send them link to complete. I made a cute greeting animation too! Bootstrap really helps!

8. Accessible on mobile or smaller screens

One of the issues with remote learning is the lack of resources. Not all students have their own laptop. That is among the reasons why we can’t do live lessons. Not to mention internet accessibility.

Clean and simple view on mobile.

However, most students (almost all) have their own smart phone or a tablet. Thanks to Bootstrap framework, the website still looks good regardless on mobile or a full browser on desktop.

If there’s any worksheets, they can view on their device, and do them in writing in their book – then take a picture of their work with their device (most phones & tablet have at least one camera these days) to be submitted on Google Classroom using the Google Classroom app.

The main question is – how did it go?

I don’t know yet 🤷‍♂️ — this might be a waste of time or maybe not? I will report soon! It took me about a week to set up the main system and now I’m adding my lessons on there. I’m trying this out with my Year 12 A-Level Physics to start.

Nothing on here that I’m trying to do is new and you can do this yourself. I’m not using any fancy AI or machine learning mapping diagnostic stuff with curriculum etc. It’s literally a traditional way of ‘copying’ what I do in-class to online.

Let me know what you think? Tweet me at @mrkhairi_. Have you done something similar?

The important bit: data protection & privacy 🔒

1. The website is SSL secure to encrypt any ins and outs.
2. The website is optimised with Cloudflare CDN including firewall and brute force protection.
3. The website server and any related extensions & add-ons including Wordpress are always up to date to their latest secure version.
4. The website doesn’t allow any manual email address & password input to log in – all user authentication is done by Google.
5. Minimal data is stored as possible which only includes, name & email address along with their lesson progress. So it’s nothing more like signing up to a newsletter!
6. No other identifiable information are stored such as; profile picture, Google password, gender, address or phone number.
7. User’s data can be exported at any time upon request.
8. User’s data can also be completely wiped at any time upon their request.
9. Email address is not used for any newsletter or spam.
10. All website activity is always logged to an audit to monitor any unusual or suspicious activities.
11. Privacy is always an ongoing process – and I’m doing my best to protect my students.

The more important bit: Safeguarding 💎

1. All content are by me (the teacher) which am a qualified teacher with DBS approved and very aware about safeguarding policies and keeping children safe.
2. The platform doesn’t allow any messaging, commenting or reviewing between teachers and students, or among students.
3. No identifiable information re: other students registered and any of their information displayed publicly.
4. No passwords are saved as any user authentication are done by Google as per their policy.
5. The website is also restricted to accounts with the same email domain as my school. Any other users with domain (gmail.com, xxxschool.org etc) are not allowed and forbidden to enter.
6. Quizzes are auto-marked – no personalised feedback/interactions from the teacher on the website itself.
7. No written assignments submitted on there – hence again no personalised feedback/interactions from the teacher on the website.
8. Any interactions are through Google Classroom where once students completed the work on the website, they will submit any worksheets to the assignment set on Google Classroom which is monitored by the school.