Friday, December 18, 2015

The most common syntax mistakes from SQL newbies

We teach SQL on Khan Academy by embedding SQLite.js inside our real-time editor. In our courses, students first learn how a concept works in an interactive talk-through and then they work through a step-by-step SQL-writing challenge.

We've now had thousands of learners attempt the SQL challenges in our SQL course. Many of those figure out how to write correct SQL and pass the challenges. But a big fraction of them struggle to write SQL correctly the first time and bang their head over syntax errors. When that happens, I get a JIRA report with their code and any other colorful language they'd like to express :) A few weeks ago, I triaged nearly 2,000 reports from our first 3 challenges, and I was fascinated to see the huge variety of syntax errors.

Some of the errors kept popping up - here were the top 3:

  • Students putting a whitespace in their table name.
  • Students missing semi-colons after SELECT or INSERT statements.
  • Students spelling INTEGER as INTERGER and not noticing that extra 'R'.

For most syntax errors, students used to see "syntax error near [token]" and nothing else - so they knew something was wrong near a line of their SQL but had no other clues about why their SQL was wrong. To help those new SQLers out, I added more specific messages using simple regex-based checks. For example, the students from before will now see these messages:

  • You can't have a space in your table name.
  • Do you have a semi-colon after each statement?
  • Is INTEGER spelled correctly?

As I saw more repeat errors across learners, I just kept adding more messages. Here's a table of all the messages I added:

example SQL message
CREATE TABLE books (id PRIMARY KEY INTEGER,name TEXT,rating INTEGER ); Did you mean to put PRIMARY KEY after INTEGER?
CREATE TABLE books (id INTEGER PRIMARY KEY, name TEXT, rating INTEGER; Are you missing a parenthesis?"]);
CREATE books(id INTEGER PRIMARY KEY name TEXT); You may be missing what to create. For example, CREATE TABLE...
CREATE TABLE (name TEXT); Are you missing the table name?"]);
CREATE TABLE books (id INTEGER PRIMARY KEY,name,TEXT,rating INTEGER); Do you have an extra comma between the name and type?
CREATE TABLE booklist (id, INTEGER PRIMARY KEY, name TEXT, rating INTEGER); Do you have an extra comma between the name and type?
CREATE TABLE books (id INTEGER PRIMARY KEY, title TEXT, rating out of ten INTEGER); You can't have a space in your column name.
INSERT INTO FavBooks VALUES (1, Beautiful Creatures, 10); Are you missing quotes around text values?
CREATE TABLE books (name TEXT) INSERT INTO books VALUES (1, 'book a', 100) INSERT INTO books VALUES (2, 'book b', 110) INSERT INTO books VALUES (3, 'book c', 1) Do you have a semi-colon after each statement?
INSERT, INTO books VALUES (1, \"gone with the wind\", 1); There shouldn't be a comma after INSERT.
CREATE TABLE customers (id INTEGER PRIMARY KEY); INSERT INTO customers VALUES (1); INSERT INTO customers VALUES (1); Are you specifying a different value for each row?
CREATE TABLE customers (id INTEGER PRIMARY KEY, id TEXT); You have multiple columns named `id` - column names must be unique.

I stopped there, but there's still much more work to do: I put 23 more syntax error situations in a Github issue on our live-editor open source repo. If you're interested in making SQL easier to learn, I encourage you to submit a PR for that issue or any other SQL-related issues. Your message could prevent thousands of future SQLers from pounding their head against a keyboard!

Monday, December 7, 2015

Try an Hour of Code at Khan Academy

At Khan Academy, we know how important computer science and computer programming are - in fact, the Khan Academy website wouldn’t exist if Sal didn’t know how to code! That’s why we participate in Code.org’s Hour of Code campaign every year during Computer Science Education Week - we want to make sure every student gets to learn the basics of coding.

From December 7 to 13, millions of students around the world will be learning to code - in classrooms, in after-school clubs, and with parents at home. We invite you to join the #HourOfCode movement by learning to code here on Khan Academy, picking from one of our three tutorials:

image

Hour of Drawing with Code: Learn to program using JavaScript, one of the world’s most popular programming languages, via two great options:
- Drag-and-drop: block-based coding for those with less typing experience or on tablet devices (ages 8+).
- Typing: keyboard-based coding (ages 10+).

Hour of Webpages: Learn to make your own webpages using the basics of HTML and CSS (ages 10+).

Hour of Databases: Learn the fundamentals of databases using SQL to create tables with data and query the data (ages 12+).

We hope you’ll join us in celebrating Computer Science Education Week and spend an hour on Khan Academy learning to code!

- Pamela, Coder and Content Creator at Khan Academy

Monday, November 2, 2015

New video series from Code.org goes behind the scenes of the internet



We’re excited to share a great new video series that our friends at Code.org created to explain how the internet works. We’ve had lots of fun learning about everything from cables and IP addresses to encryption and cybersecurity from some of the top names in the business, including David Karp (the founder of Tumblr), Parisa Tabriz (Google’s “Security Princess”), and engineers from Microsoft, Spotify, and Symantec. We all use the internet every day; this series offers a fascinating look under the hood to show how it functions.

Monday, October 26, 2015

HTML/CSS course improvements: design, prototyping, and more!

We added 6 new pieces of content in our HTML/CSS course, based on feedback from both virtual and real-live students:

We hope the new content helps our students be better equipped web developers. Now go learn HTML/CSS if you haven't yet!

Thursday, October 15, 2015

New helpful messages for our webpage editor

All of our coding courses on Khan Academy make heavy use of the interactive real-time editor, and the code that powers that editor is open sourced in the live-editor repository. We have a growing list of issues in that repository, filled with great ideas for how to improve the live editing experience for our learners, and we'll never have the time to tackle all those issues on our small team. That's why we love when developers send pull requests (with tests, of course) that address those issues!

Recently, jjwon0 has started making improvements to our webpage environment. Thanks to his pull requests, learners will now see gutter warnings for common HTML newbie mistakes, like missing doctypes, missing semi-colons in CSS, and using deprecated tags:

They'll also see warnings for issues particular to our environment, like using an insecure resource:

We know that learners will appreciate these helpful hints. Interested in contributing to live-editor? Here's how you can help.

Monday, September 28, 2015

New course: Learn jQuery with our interactive tutorials!

jQuery is currently the most popular JS library on the web - it's included on 65% of the top 10 million highest trafficked websites! jQuery is so popular because it makes it easy to make your webpages interactive with features like slideshows, form validation, and slick animations. 

jQuery was also invented by one of our Khan Academy engineers: John Resig. He invented jQuery way back in 2006 and when he joined KA in 2012, he invented our interactive programming environment.

Today, we're happy to announce that we are teaching jQuery on Khan Academy, in that interactive environment! The tutorials in our jQuery course cover DOM access & manipulation, DOM events, Form processing, and Animation, using a mix of 15 talk-throughs, 15 challenges, 5 projects - plus a video interview with John Resig:

If you're a student interested in frontend web development - in making your own full-featured webpages - then we now have a full track of courses for you:

If you take all those courses in order, you'll have a great understanding of the fundamentals of web development. That's not all there is to frontend, of course - but we'll keep building courses and listing additional resources for you at the end of each course.

If you're a teacher who wants the students in your class to learn web development, then you can assign all of these courses in our coach report tools, and track the progress of your students. Learn more in our teacher’s guide.

Monday, September 14, 2015

Congrats, Summer of Scripters!

In June, we invited Khan Academy students to join us for a Summer of Scripting. Over the next 2 months, I sent weekly emails to thousands of students, reminding them with their weekly goals - plus we had contests and office hours. As an online teacher, it can be easy to forget that I have students, but this summer, it felt like much more of a classroom. :)

First, I want to give a huge congratulations to all of the students that started learning JS this summer!

Congratulations, Summer of Scripters!


To the 1,555 students that finished every single challenge and earned the JS badge this summer: Amazing work!

Confetti Craze


To the hundreds of students that entered our Summer of Scripting contests: thank you for wowing me with your creativity!

Celebrate With Minions!


Here are some more fun stats:

  • The most active day of the summer was June 24th, with 9,191 students completing JS challenges. That day is also my birthday - so thanks y'all for a great birthday gift!
  • ~30,000 students started learning JS this summer because of Summer of Scripting.
  • ~3,000 students got all the way through the 40-hour course to the final tutorial on Object-Oriented Design.
  • Typically, about ~32% of our JS students are female. This summer, 40% of them were female. Getting closer to 50/50!
  • We got 2,378 bits of feedback from students in the follow-up surveys- and read them all. That feedback will be super useful for helping us figure out how to improve the JS course and Summer of Scripting.

Thanks again to all the students who were a part of our JS classroom this summer, and to all of the fantastic community members that answered questions, evaluated projects, and helped our new students learn JS. Onwards to the fall!

Friday, July 24, 2015

New tutorial: Using JS libraries

We've just added a new tutorial to our HTML/JS course about Using JS libraries in your webpage. In it, we walk through an example of using a simple slideshow library, give examples of many of the most popular libraries out there (like jQuery and ThreeJS), and leave you with advice on picking a library for your page.

Monday, July 20, 2015

HTML/JS: 1-day workshop lesson plan

As I mentioned in my recent post, I spend many of my weekends teaching in-person workshops for GDI SF, and I've started turning my workshops from traditional lecture style to self-paced style, using the KA online courses and coaching tools.

This past weekend, I ran the JS 200 workshop using the KA HTML/JS course, and it worked out great. I've written up a lesson plan, which includes extra pair projects and tips on optimally pairing students up for the projects by looking at the skill progress tab.

You can find that lesson plan and others on our lesson plans list in our teaching guide.

Let us know if you have any lesson plans to share!

Tuesday, July 14, 2015

BELL afterschool programs: teaching programming to close the achievement gap

BELL is a non-profit that runs after-school programs to expand the learning time and help close the achievement gap. This summer, they're piloting a program to teach programming in their summer programs, using our Khan Academy Intro to JS course and our teaching tools.

The Marin Independent Journal just published an article about the success of the program so far. Once the pilot is done, we hope to have a case study in our teaching guide, to help others who want to run similar programs. It's great to see more teachers and programs embracing self-paced learning and encouraging more students to learn about technology!

Wednesday, June 24, 2015

New case study: Teaching JS to elementary schoolers

As part of our teaching guide, we have case studies that show the various ways that teachers use our curriculum across the world. I recently found out about an elementary school teaching JavaScript to their students, and was surprised because most folks think that elementary schoolers are too young to learn a syntactic language like JavaScript. However, they found their students took to it quite well -- "begging to do extra homework".

You can read all about the class in the case study, including how they bring in guest speakers over Google hangouts and how they showcase their great project work to parents. Thank you to Omar Alvarez for sharing it!

Monday, June 22, 2015

Our community's programs, up on the big screen!

Every morning I wake up and browse programs on Khan Academy, and every morning I'm impressed with the creativity and productivity of our coding community. Seeing the wide range of programs that they create is probably my favorite part of this job, and it's also what I love sharing with others.

This week, I got the chance to share hundreds of our community's programs with a thousand industry programmers at the jQuerySF conference. I held a Generative Art contest that got 445 submissions, turned 200 of them into an auto-advancing slideshow, and today through tomorrow, the jQuery conference organizers are displaying that between speakers! In most of the entries, the creator says what they love about programming, which makes the slideshow even more inspirational. To quote one of them, "its just great how i can type some mumbo jumbo and it will make amazing things." :)

An MC in front of the slideshow:
Photo of the slideshow behind a speaker

Some of the top submissions:
Screenshot of 6 of the submissions

Congratulations to our community on their hard work, and thank you to jQuerySF for sharing it with the world!

Summer of Scripting: join an online cohort to learn JS!

Over the last few months, I've been digging through our stats and doing surveys to understand more about our Intro to JS learners, trying to answer questions like "Why do they want to learn JS?", "What school level are they at?", and most importantly, "At what point in the course do they give up and stop learning?". To help me with that question, I surveyed several thousand learners that dropped out of one of the earlier challenges - asking why they dropped out - and their overwhelming response was "I wanted to keep learning, but I didn't have time in my schedule."

That makes sense. For school-age kids, programming isn't a requirement for the vast majority of them, but tons of academic fields are, so thats where they have to spend their time. For our lifelong learner crowd, well, life often gets in the way. It's hard to stick to an online course, especially when you're doing it alone.

So I want to give people an excuse to make time in their schedule -- not too much time, but enough time to learn. That's why I'm running Summer of Scripting over the next 2 months. Once people sign up, I'll email them every week with their weekly goals, plus fun contests. If they can put in ~3 hours a week, they should be able to complete the course over the 2 months period, and still be able to attend to the rest of their busy lives.

At the end of the summer, I'll look through the stats and surveys again to see if it helped. If it did, maybe we can run cohorts more regularly on Khan Academy, to give people the excuse to carve time out of their schedule for a little extracurricular learning! :)

JS 101: 2-day workshop lesson plan

As I mentioned in my last post, I spend many of my weekends teaching in-person workshops for GDI SF, and I've started turning my workshops from traditional lecture style to self-paced style, using the KA online courses and coaching tools.

This past weekend, I ran the JS 101 workshop using our Intro to JS course, and it was a lot of fun. I've written up a lesson plan, which includes tips on optimally pairing students up for the projects by looking at the skill progress tab.

2 students pair programming

You can find that lesson plan and others on our new lesson plans list in our teaching guide.

Let us know if you have any lesson plans to share!

Monday, June 8, 2015

HTML/CSS: 2-day workshop lesson plan

When I'm not creating programming courses for Khan Academy, you can often find me teaching workshops for GDI SF, a non-profit that offers low-cost web dev workshops to women.

When I first started teaching for GDI, I ran workshops the traditional way - with live lectures and breaks for exercises. However, especially with the longer workshops and more complex topics, I found that students would be unhappy because some would find it moved too fast and some would find it moved too slow.

Now that we have more courses on KA, I now have the students work on the KA content at their own pace, and I've become more of a learning facilitator than a teacher. I make sure to mix in a lot of social components - networking, demos, pair programming - so that students feel like they're a community and can learn from each other. The students are much happier with the format, so I'm hoping to move all of our long workshops over to the self-paced format.

To make it easier for other GDI chapters and clubs to implement, I've put together a lesson plan, which you can grab from our new lesson plans list in our teaching guide. I'll be adding the JS 101 and JS 200 lesson plans there over the next month, as I'll be teaching those workshops next.

Let us know if you have any lesson plans to share!

Monday, June 1, 2015

We're looking for a Computer Science Content Fellow!

Khan Academy just announced that we're looking for fellows in many new content areas, and we're excited that Computer Science is one of them!

As a CS content fellow, you would spend one year creating and curating content for our Computer Science subject - improving the current topics and bringing in new ones, potentially partnering with experts (like we did with Dartmouth on our Algorithms content). We're looking for fellows that have experience teaching CS, especially at the intro college level, and love designing great learning experiences. Interested? Learn more and apply!

Monday, May 11, 2015

New course: Learn SQL interactively on Khan Academy

There are millions of SQL users around the world. Who are these people, what is SQL, and what are they all using it for?

SQL stands for "Structured Query Language" and it's the standard way to interact with relational databases, a way we store data in apps and websites. Like if we actually had a database of all the people in the world and the things they use, we could find out the exact number who use SQL with a query like this:

SELECT COUNT(*) FROM people WHERE things_they_use LIKE "%sql%";

It's not just the database admins that are using it; it's the engineers that are writing code to send data to it, it's the product managers that are making decisions based on it, it's the marketing managers checking if their campaign was successful.

So that's why we decided to teach SQL on Khan Academy. We think it's the kind of skill that a huge range of people can use in their everyday life, and even if they don't, it's a great introduction to data storage and manipulation.

We started with just an Hour of SQL back in December, and based on its popularity, we're releasing a full introductory SQL course today. You'll learn more ways to query complex data, how to join data across multiple tables, how to update and delete data, and see a lot of real world examples along the way. And of course, like with all of our programming courses, you'll be writing the SQL yourself in our interactive editor.

Whether you're learning SQL for work or play, we hope you'll join us! Get started with the welcome video, or if you already did the Hour of SQL, jump in on the advanced queries tutorial:

Monday, May 4, 2015

Step 1) Learn English, Step 2) Learn to code ?

I just watched this TEDx talk where a kid shares his story of learning English and then learning JS on Khan Academy (fast-forward to 4:20):

It's awesome how much people can learn on the internet with enough motivation. Hopefully, we'll keep building out our translations so that more people can learn to code before they even learn English.

Wednesday, April 29, 2015

New article: Classroom debugging tips

I'm starting weekly programming office hours for the Khan Lab School, and today was my first time down there, helping the mixed age students with their challenges and projects. As I helped them debug their programs, I realized that other teachers and TAs could benefit from my strategies for debugging programs together. That's why I ran home and wrote this classroom debugging guide. Enjoy, and let me know if you have any tips to add!

Thursday, April 23, 2015

Check out awesome projects from Algorithms students!

In November, we released the algorithms course, a combination of articles, visualizations, quizzes, coding challenges, a few creative projects. Today we turned on the project evaluations page for algorithms, so that our community can see the neat projects that learners are coming up with, and help evaluate the projects. Here are some of my favorites I've seen so far:

A visualization of selection sort:

A rainbow-colored Sierpinski triangle:

Check out more on the project feedback page and give them your feedback!

Monday, April 20, 2015

How does our real-time editor work? Find out for yourself!

We now have a real-time, interactive editing environment on Khan Academy for JS/ProcessingJS, HTML, and SQL. Last year, we decided to make the editing environment open source on Github, to share how it works and encourage others to contribute. We've since had multiple contributors, and the most prolific, Kevin Barbarash, joined KA as a full-time employee.

If you're curious how it works, you can watch this talk from John Resig and this talk from me (Pamela Fox). You can also read this deep dive into the JS editor or browse through the code itself. If you're willing and able, we'd love more help in tackling the many complex issues that we run into when creating this cross-browser, real-time environment that's used by millions of students.

New classroom project idea: Make a music video

In our teacher's guide, we have a list of additional project ideas. I've just added another project to that, Project: Make a music video. That project is based on the Let it Code music video that I made with our online community last year, and it would be a lot of fun for a classroom of creative coders.

If you try that project or have other additional project ideas, let us know!

Tuesday, February 24, 2015

New course: Make interactive webpages with JavaScript

On Khan Academy, our two most popular programming courses are Intro to JavaScript, where you learn the fundamentals of JavaScript with the ProcessingJS library, and Intro to HTML/CSS, where you learn to create, style, and lay out a web page. But that's like having strawberries and chocolate in front of you, and not dunking a strawberry in the chocolate.

Why? Well, JavaScript was originally invented in order to bring HTML/CSS web pages to life, to make them interactive with events and animation. The language has become very popular since its invention and is now used outside of browsers, but still today, it is the only language that browsers natively understand and it is used by every interactive web page on the internet.

That's why we've put together a course on making web pages interactive -- combining your knowledge of HTML/CSS with your knowledge of JavaScript so that you can programmatically access parts of your page and modify them in response to all sorts of user events. With that knowledge, you can make slideshows, games, galleries, apps -- virtually anything you've seen on the web.


Get started with the welcome video and HTML/CSS/JS review quizzes, then get deep into DOM access, modification, events, and animation.

A big thanks to our early reviewers for all their great feedback:
Nicholas Zakas, Kevin Lozandier, @wbwalp, @SpongeJR, Katarina L., and @TheSwedishHutt. Now go make your webpages fly!

Tuesday, February 10, 2015

Earn rewards for your classroom with DonorsChoose.org and Google

We've partnered with DonorsChoose.org and Google on a program to help teachers earn rewards for their classroom while encouraging their students to learn programming. We ran a similar program last year, and since teachers and students both reported loving it, we're doing it again this year.

How does it work? Once teachers sign up for the program, they tell students to start working through Intro to JS, and in mid-March, we'll tally up how many students completed the course and send that to DonorsChoose.org. The teacher will then get a gift code equivalent to $100 for each student that completed, and they'll be able to use it to fund classroom technology projects on DonorsChoose.org - and all that funding is thanks to Google. Many teachers use the projects to buy things like laptops and robotics, so they can better teach computing in the future.

The funding rewards program is currently only available to public schools and high school students at this time, though of course, the course is available and free for anyone. If you're a teacher that's not eligible for this program but does want technology for your classroom, look through this list of technology grants that we've collected.

Saturday, January 10, 2015

Just released: sound effects for ProcessingJS programs!

The students of the Khan Academy programming community love making games, animations and mini-movies, and they've been clamoring for a particular new feature for the last year: sound. Their wait is over! Last week, we released a way for programs to play sound effects.

The code is as simple as this, purposefully similar to image():

playSound(getSound("rpg/metal-clink"));

The current sound effects in the picker are from an RPG pack:

We also have more sound effects coming soon, like a retro pack made by one of our top community members.

We've updated the program guidelines to specify that sounds should only be in response to user interaction, so that sounds don't become an annoyance. We'll hold a contest soon to challenge students to use the sound to enhance their programs in the most impressive ways. We hope that sound effects inspire even more creativity in our community!

Holiday contests: Lights, trees, snow globes, fireworks, and games!

In December, while millions of new students were trying their first hour of code, thousands of students in our programming community were creating amazing entries in four holiday-themed coding contests. I picked the top 5 for each one (it was sooo hard!) and made a few montage videos, too. Check them out!

Contest: Light up this house!

Check out the entries here and winners here. Here's a video montage that I made of the entries, synced to Pachebel's Cannon:



Contest: Animate this snow globe

Check out the entries here and winners here.


Contest: Tree decorating

Check out the entries here and winners here.


Contest: Snow game

Check out the entries here and winners here.


Contest: Fireworks

Check out the entries here and winners here. Here's a montage I made of the entries, synced to "Ride of the Valkyries":