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.

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

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)

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?

So – what did I built? 💪

1. One and only login option – Google

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

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

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

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

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?

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.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store