Khan Academy has a well deserved reputation as a terrific resource both for homeschool students and anyone else who wants to access lots of interesting talks and presentations. What you might not realize is the origin of its name. It’s not, in fact, named after Genghis Khan, it’s the brainchild of Sal Khan. As the story goes, “the site started in 2006 when Salman “Sal” Khan tutored one of his cousins in mathematics on the Internet using a service called Yahoo! Doodle Images. After a while, Khan’s other cousins began to use his tutoring service.”
The Khan Academy site has two different search systems, which makes it a bit puzzling to try and reverse engineer the results so you can link directly to the search output or add a search box to your own site, but we can overcome! The good news is that the site hasn’t eschewed the more traditional type of search where the search pattern is in the resultant URL. That’s our key.
To start out, let’s just have a peek at the Khan Academy home page:
The key box is on the top left: Search.
Type in a word, phrase or concept – I’ll use “lego” for my examples – and it’ll immediately show you results on the same page:
Have a look at the URL in the address bar and it hasn’t changed. Hmm…
But here’s the secret: With that same search term in the search box, end by pressing Return or Enter. After a moment, you’ll get to a new Web page with the search results:
The URL shown in this instance is:
https://www.khanacademy.org/search?referer=%2F&page_search_query=lego
Now that’s enough for us to work with…
HOW TO REVERSE ENGINEER THE KHAN ACADEMY SEARCH
I like to experiment to figure out which of the name=value pairs in the search results URL are really required, and it’s a pretty quick test to verify that the referer is unneeded (and misspelled too, ironically!). So, in fact, here’s the minimal search results page URL:
https://www.khanacademy.org/search?page_search_query=lego
In fact, that’s the link for the “lego” search results page. Click to see for yourself: Content related to LEGO on Khan Academy.
You can produce a link for any search results based on that, just keep in mind that spaces in your search term should be replaced with a “+”. So a few examples: The Declaration of Independence and evolution.
Cool, right?
Now, what if you want to build your own search box? With just a smidge of HTML knowledge it’s easy to unwrap the search results URL into the fields required for an HTML search form:
action=https://www.khanacademy.org/search
method=get
page_search_query=search
In other words:
<form action="https://www.khanacademy.org/search" method="get"> <input type="text" name="page_search_query" /> <input type="submit" value="Search Khan Academy" /> </form>
Really, that’s it. Here’s the form, ready for you to test out:
Try using the search box above. If you’re drawing a blank, search for ‘potatoes’. Pretty darn easy, isn’t it? And that’s it. Just carefully copy and paste the above four lines of HTML onto your own Web page and you’ll have a Khan Academy search ready for your visitors to use.
Pro Tip: I’ve been writing about HTML and reverse engineering things like search boxes for quite a while. Please check out my extensive HTML help area for lots more fun and interesting tutorials! Thanks.
The post Can I Add a Khan Academy Search Box to my Web Site? originally appeared on Ask Dave Taylor.
