ScopeNote

Remote learning got you down? ScopeNote solves just that! It breaks down articles into keywords and summaries, then makes flashcards and a reference sheet so remote learning is better for everyone!

Comment

Inspiration

Friday, March 13th, 2020. This was the final day that many students in Ontario were in a classroom face to face with their teachers. At this point, we, along with the rest of the world, were forced to transition to remote learning environments in an effort to fight the Covid-19 pandemic. Nobody was prepared to react to this drastic change, and it was by far the students who suffered the most from this change.

We quickly realized just how ineffective remote learning could be: with teachers too busy to handle individual queries, most of our education revolved around doing individual work in front of a screen, often reading or typing for hours for research, or watching countless videos on end. Most times, it was the most engaging experiences at school, where we were able to physically grapple with the information we were learning, that were taken away. The motivation was lacking too: with little peer interaction, we often struggled to keep working and meeting deadlines. This was further compounded by the aforementioned monotony of our tasks, which made many of us fall asleep of boredom. All together, learning became extremely difficult.

With ScopeNote, we wanted to eliminate the sense of repetitive monotony that comes with remote learning in favour of a more engaging learning process. With teacher impact minimized, the goal was to decrease the time students need to spend in front of a screen doing low-engagement, low-effort tasks, such as reading research papers, in favour of ones that actually benefit memory retention, such as annotating and using flashcards.

What it Does

ScopeNote is a Chrome extension that provides three main features that supplement a student’s learning. The first is a keyword breakdown of a given article in the form of a PDF file or a website. This component analyzes the text within an article and identifies around fifteen of the most prevalent, critical keywords to a piece. In practice, this facilitates a student’s understanding of a paper by reducing the need to consistently search up most of the specific keywords in favour of having the important ones displayed on screen and only one click away.

Secondly, ScopeNote pulls some of the most important sentences from the piece that is meant to act as a summary for students to use both to ensure the content they are looking through is relevant and as a review section in their notes. While we noticed that this function was not entirely perfect, it did a fair job of capturing the tone and the content of the piece, which are also both relevant in determining how useful a piece may be for a research project or as a study resource. Again, this helps reduce the amount of time a student spends on low-effort tasks such as skimming through sources in favour of active studying or analysis. In both of the aforementioned features, students are also able to add their own commentary to supplement the software.

Finally, ScopeNote takes the key words and summary that it pulls from a text and exports them such that they can be printed as a .pdf file. The format in which this is done is then conducive to making flashcards, while also acting as a reference sheet on the topic that a student can always look back to. While the process of making flashcards is both monotonous, the actual use of flashcards can be extremely beneficial to retaining memories. As a result, by automating the prior step, we hope to encourage more students to use flashcards and thus engage with information more actively.

How We Built It

The Chrome extension is coded in Python and React for the back-end and front-end, respectively. Specifically, we used the diffbot API to pull text from a website and the PyMuPDF library to read text from a .PDF file. Once the text was pulled out, we used the Azure Text Analytics API to pull key phrases that were most important to the piece. Following this, we ran a basic algorithm to determine which keywords or phrases were most prevalent in the text, and linked it to a WordsAPI to provide students with a definition. Phrases with no definition were then appended to the default Wikipedia URL so that students would be forwarded directly to the Wikipedia page on the topic. To process text and identify keywords, we explored other possibilities such as the RAKE algorithm and TF-IDF. While neither was as good as Azure’s API, we realized that by modifying the RAKE algorithm to include longer phrases and by using a database of the most common English words as stopwords, we could generate decently appropriate summary sentences for an article. This was leveraged in forming this functionality. These components were then attached to the React front-end with axios, which performed HTTP requests between React and Flask. More specifically, the URL is sent from tthe front end to the backend, where the text is pulled and processed into JSON objects, which are then sent back to the front end. In React, an emphasis was made on state changes and mapping to update the information in the application, using React lifecycle functionalities to do so. The actual user interface and functionality of the Chrome extension was made in React, where CRUD actions were used so that users can edit and add notes, definitions, and so on to the automated ones.

Azure

Specifically in terms of the usage of Microsoft Azure, we leveraged Azure’s Text Analytics API to pull keywords from a piece of text. These keywords, which were ordered as they were presented in text, were then compiled into a list of tuples containing each key word/phrase and the quantity of appearances. This was compiled alongside a list of words specifically from key phrases and how many times they showed up. Our mentality was that the most important keywords for a student to know would be the ones that showed up most frequently; thus, we used these compiled lists to determine which key phrases were most important to define.

Challenges We Ran Into

Our team had little experience transferring information between a React front-end and Python back-end in both directions, making the implementation of axios one of the biggest challenges we faced. Specifically, mapping and working in states was difficult in terms of syntax, and saving json values into the React component states was extremely challenging. However, we worked with mentors and worked through a lot of trial and error to solve this challenge.

Another issue that we confronted was the limitations of the Azure API. While the API itself worked well, there was a character limit of around 5000 on each time it was called, and a total of 5000 calls available. Unfortunately, we did not handle this well and tested on long pieces of text from websites. This meant that for a single website, a single run through the program resulted in around 25 calls of the Azure API. Unfortunately, we did not realize this until we hit the limit on our free trial. It was only after our second setup of an account by a different team member did we recognize the importance of efficiently using the limited calls on APIs.

What We Learned

Our team was composed of both inexperienced and more experienced hackers. For the beginners, both the provided workshops and immediate hands-on applicability were helpful for learning programs such as CSS and React. The novices were also pushed towards technologies they had never used before, such as Figma, and learned to leverage them by doing as opposed to by reading a textbook.

This does not mean that the more experienced coders were comfortable during the entire hackathon, though. We learned to work more comfortably with React and Flask, specifically with states in the former framework. We also explored more in terms of connecting the front and back-end of applications through axios, and learned to save information from .json files into the states of React components.

Accomplishments that We're Proud Of

We are all proud of the new things we learned as part of this hackathon, whether it was an introduction to React or Figma, or learning to save .json information in React states. Furthermore, we are proud of both the functionality and the design of the final product—together, we think we made a well-functioning Chrome extension that does not sacrifice anything visually.

What's Next for ScopeNote

Moving forward, we hope ScopeNote can be a tool we use in a crunch if we need to synthesize a document or information from a website. As first year students, we’re venturing into a new level of challenge in university, and thus may leverage this program in a pinch. Aside from our personal use, there is a lot of potential for growth with ScopeNote. The most immediate steps that can be taken are to develop a platform for PDFs to be uploadable through the extension itself, as opposed to having them downloaded and opened on a browser. The development of a local database, where students can store past data would also be helpful. In the future, there may also be more work done in terms of machine learning or text-processing algorithms, which in turn opens up a wide range of possibilities. For example, we could explore using ML to recognize graphical representations of data such as bar, pie, and line graphs, and convert them into meaningful, text-based data for students in their notes. Hopefully with improved algorithms, we can also improve upon the keyword and summary sentence selections to better represent the articles from which they’re pulled. With these additions, we believe ScopeNote could feasibly go from a proof-of-concept idea to genuinely applicable, if we chose to continue development in the future.

Built With

Share this project:

Updates