The main objective of the project was to be able to :
Be able to see thumbnails of the videos while clicking on them
Arrange them so as to allow topicwise referral while studying
Be arranged in chronological order so as to allow quick revision of specific chapters
This would allow users to efficiently and easily access the lectures they required to study during lockdown.
The Website contains the video lectures of Physics, Chemistry and Mathematics for JEE preparation and the video links have been embedded as an <iframe>. The navigation bar is divided into the three subjects and subdivided into chapters or topics.
Each topic has its own page which has all the videos pertaining to it in chronological order. This means that lectures can be accessed both topic wise and in sequential order.
The issue became evident within a week of receiving large lists of links everyday with the lectures and topics scheduled to be learnt that day, there were also links sent midday and corrections to the links previously sent, this meant that no clear flow of study would be evident to revise or relearn a particular topic. Furthermore the links weren't sent with the topics, so it was unclear which link would open which topic.
The process of designing the website took place near the end of the term when students wanted to revise but were unable to do so without wasting large amounts of time finding the lecture they wanted.
Thus, a quick and easy to use system was necessary to sort the links and arrange them in a chronological order. The entire data gathering process and implementation was done over a weekend.
The tools used for this project had to be:
Free or an already available program to implement and access the videos
Quick to use and develop
Easily accessible on multiple types of devices for students
With these set conditions I decided to create a Google Site for the user end as it checks all 3 requirements.
On the data side of things I used Microsoft Excel, to pre organize the data, and then automated the ingest into the website using an opensource scripting tool called AutoHotkey.
The most labor intensive process was gathering the data, I manually combed through every link and arranged it in an excel sheet topic wise and in chronological order.
I sketched out the tree structure for the website as the following
I decided on using the embed function on google sites to embed all the videos as Iframe elements. So I used the google website to create the file structure from the diagram as a baseline.
To create the Iframe you can simply right click on a YouTube video and get the embed link. Using an Autohotkey script, which I designed, I automated the function of copying the url from excel and producing a text file with all the iframes in it for each topic.
Then it was simply a cause of pasting the html code into the website and publishing.
The project was able to achieve its primary goals. In that sense it was a success. The implementation was user friendly, cross platform and free to use.
However there were a few issues.
There was no implementation to increase the video playback size other than opening it in YouTube
The large number of Iframes caused slower loading times in some cases
These issues were more due to the limitation of Google Sites than any performance improvements I could have made. The solution would have been to host a custom built website with the ability to control the backend development but due to the time and budget restriction that was not possible in this case.