Learn English passively while watching Youtube! Created at Hack The North 2016 (Bhavya, Tariq, Maya, Ethan)
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
backend
css
font-awesome-4.6.3
img
js
.DS_Store
README.md
ccsub.html
favicon.ico
index.html
view.html

README.md

WatchAndLearn

Devpost Link: WatchAndLearn Devpost
Hack The North 2016 (Bhavya, Tariq, Maya, Ethan)

Watch & Learn – screenshot 1

Home Screen

  • Watch & Learn – screenshot 2

    Search Bar

  • Watch & Learn – screenshot 3

    Search Result

  • Watch & Learn – screenshot 4

    General Video View

  • Watch & Learn – screenshot 5

    Subtitles with Dictionary Search, Image Search, and Video Timestamp Navigation

  • Inspiration

    According to the British Council's research, there are approximately 750 million English learners as foreign language speakers (EFL) and 375 million English as Second Language speakers (ESL).

    Each member of our team remembers witnessing his or her close ones, who were learning English as a second language, struggle to grasp the English language.

    With the evolving nature of technology, videos have augmented the learning landscape. So, we chose to augment the existing Youtube Subtitle system with tools that can assist an intermediate English learner while they are enjoying a Youtube video.

    What it does

    Our web application fulfills our goal of creating a passive learning experience for English learners.

    We created an improved version of Youtube's subtitles system where the user can hover over any word and get the definition, translations, and various images of that word. In addition, the user can click on any word and get redirected to the specific time stamp that correlates to it.

    How we built it

    We built this by using the Youtube API to extract video subtitles, Yandex's Translation API to extract translations of words, and Merriam Webster's Dictionary API to extract definition of words.

    We programmed our own unique subtitle system where the user could navigate the video by clicking on certain words in the transcript. We made this using AJAX.

    For connecting the various APIs to our web applications, we used JSON parsing among other things.

    Challenges we ran into

    We ran into a lot of issues with the Youtube API since there was no documentation on how to use/maniupulate Youtube captions. Also, for connecting the APIs to our web app, we ran into issues such as caching data results.

    Accomplishments that we're proud of

    We are proud of executing our whole vision together. Our team was composed of two first time hackathon attendees. All our team members worked together efficiently to tackle errors and roadblocks along the way.

    Most importantly, our team had a lot of fun learning and hacking together!

    What we learned

    We learned that a fresh pair of eyes always brings powerful insights to arduous tasks!

    What's next for Watch & Learn

    We plan to implement a more engaging platform with personalized data analytics, more accurate subtitles, and grammatical help (with natural language processing).