A Slightly Useful Product

Last weekend, I was able to spend a lot of time on Academist. I completed the first thing on my to-do list from last post, which was to make a basic search algorithm to find Khan Academy topics and videos based on keywords that may appear in assignments.

The end result is that Academist will successfully display links to relevant Khan Academy pages for an assignment titled "Study for Quiz on Circular/Gravity," and it will know what type of Khan Academy resources they are (It says "Watch" if a video, "Study" if a broader topic, etc.). Luckily, I had this assignment on my list so that I could test Academist against a real assignment, instead of creating fake ones. Here is proof of it working:

Academist will automatically display the top five results using the search algorithm. This all came together thanks to a lot of intricate parts.

First, there was the database of Khan Academy topics. I stuck with only math and science to keep things simple, and I re-created the XML (discussed on 9/19) to include the type of resource for each Khan Academy page. I then had to parse that XML file in JavaScript and translate the data from the file into a JavaScript array.

The next part is the search algorithm. Of course, search algorithms are a widely useful tools that are used all over the place, so I wasn't going to reinvent the wheel. I just had to download a JavaScript library for a search algorithm, and I found one called "lunr." This library allowed me to input a query to search in a list, which in this case was list of all the math and science topics on Khan Academy. It was able to find similar, yet not exact matches, and also ignored common words such as "the." One thing that I did do myself was filter out common words that teachers post in assignments that would get in the way of searching for a topic, such as "study" and "quiz."

Those were the two most important parts, but I also had to learn how to format HTML elements, how to create a hyperlink with JavaScript, how to read local files in a Chrome Extension, and the list goes on. There are endless technical details that are involved in this project, but for the average non-computer-programmer, a picture of the code that makes Academist work might give you the gist of what I am working with:

Building the Chrome Extension - First Steps

After creating a foundation for accessing data for online resources, as discussed in my last post, I decided to start work on making the actual Chrome Extension. I started with the basics, using online tutorials to learn how to setup the file structure and add basic functionality.

One thing that Academist will have to do is be versatile in accessing information on the the School Loop Student Portal, namely assignments. I experimented with sifting through HTML elements and their contents using JavaScript, and I was able to make the program print out the name of an assignment– not too difficult, although it was slow getting used to the JavaScript programming language.

Chrome Extensions are also meant to alter the HTML of a webpage to add new UI features. Of course, Academist needs to do this. The most important feature of Academist will be buttons that are displayed under assignments in the Student Portal, which will open webpages of Khan Academy and possibly other resources related to an assignment. Enabling Academist to be able to take information from an assignment on School Loop and decipher what topic it is on is going to be a lot of work. That will happen later. For now, I'll just add a button that does nothing under every assignment. Currently, the Chrome Extensions displays a button with the text, "CLICK ME" under an assignment whenever the dropdown is activated, as shown below.

I could talk about some technical things now, like how I used a Mutation Observer in order to detect when the dropdown is first opened. Or I could talk about plans for the future, which I think will be more interesting.

Here's a reminder of the two main features I had planned for Academist: Find online resources to help understand topics on School Loop assignments based on keywords in those assignments, and find online resources to help understand topics on School Loop assignments based on textbook page numbers in those assignments and the topics of the sections that those page numbers are in. From my experience, math and science teachers will more often post textbook assignments with page numbers or section numbers rather than explicitly mention the topics that the homework is on. Because of this, I will focus more on the textbook aspect of Academist. But even with that feature, the topics in a textbook still need to be matched with the correct Khan Academy page, and any other online resource I choose to add into the mix.

This leaves some important to-do's:

• Create a basic word-matching algorithm and test it against fake assignments so that it can correctly determine corresponding topics in Khan Academy.
• Convert images of table of contents of textbooks at Sage Creek to useful spreadsheets.
• Convert the spreadsheets to a readable format for the Chrome Extension.
• Create an interface in Academist that prompts student to choose which textbooks they use for their classes.
• Put all of those things together in order to enable Academist to read page numbers in School Loop, then determine the topic name for that section in the textbook, then determine the Khan Academy page that explains that topic.