teaching programming online

48
Teaching Programming Online pamela fox @pamelafox Friday, October 18, 13

Upload: pamela-fox

Post on 06-May-2015

359 views

Category:

Technology


1 download

DESCRIPTION

A talk about how Khan Academy teaches programming online, thanks to App Engine, HTML5, and open source.

TRANSCRIPT

Page 1: Teaching Programming Online

Teaching Programming Onlinepamela fox@pamelafox

Friday, October 18, 13

Page 2: Teaching Programming Online

Friday, October 18, 13

Page 3: Teaching Programming Online

What is Khan Academy?

Friday, October 18, 13

Page 4: Teaching Programming Online

K-12 Subject Tutorials

Friday, October 18, 13

Page 5: Teaching Programming Online

Exercises & Videos

Friday, October 18, 13

Page 6: Teaching Programming Online

Personalized Learning

Friday, October 18, 13

Page 7: Teaching Programming Online

Teacher-facing Analytics

Friday, October 18, 13

Page 8: Teaching Programming Online

The Tech Stack

Backend

Frontend

Backbone FB React

jQuery Handlebars LESS

Friday, October 18, 13

Page 9: Teaching Programming Online

Heavy on Open SourceUsing Contributing

https://github.com/KhanBlogging

http://bjk5.com/

http://mattfaus.com/

Friday, October 18, 13

Page 10: Teaching Programming Online

Friday, October 18, 13

Page 11: Teaching Programming Online

What should we teach, exactly?

Friday, October 18, 13

Page 12: Teaching Programming Online

So many options

Languages

Uses

Java Python

C++Haskell

JavaScript

Ruby

Scheme

GamesAnimation

Hardware

RoboticsData Science

Simulation

MobileWebsites

Lua

Friday, October 18, 13

Page 13: Teaching Programming Online

Our goals

No Installation Needed

Shareable

Fun for Anyone

Gateway Drug

Friday, October 18, 13

Page 14: Teaching Programming Online

So many options

Languages

Uses

Java Python

C++Haskell

JavaScript

Ruby

Scheme

GamesAnimation

Hardware

RoboticsData Science

Simulation

MobileWebsites

Lua

Friday, October 18, 13

Page 15: Teaching Programming Online

How do students program?

Friday, October 18, 13

Page 16: Teaching Programming Online

ACE editor

JSHint ! BabyHint ! Loop Checker

ProcessingJS

Friday, October 18, 13

Page 17: Teaching Programming Online

ACE Editornumber scrubber color picker

Friday, October 18, 13

Page 18: Teaching Programming Online

ACE Editornumber scrubber color picker

Friday, October 18, 13

Page 19: Teaching Programming Online

ACE Editornumber scrubber color picker

Friday, October 18, 13

Page 20: Teaching Programming Online

ProcessingJS

http://processingjs.org/reference

Friday, October 18, 13

Page 21: Teaching Programming Online

JSHintvar myName = “spaghetti

if (i == 0) {

}

var i = 2;if (i == 0) {

}

errors

warnings

bestpractices

Friday, October 18, 13

Page 22: Teaching Programming Online

BabyHintelipse(10, 10, 20, 30);

spelling

wrongarguments

ellipse(1, 1, 20, 30, 5);

Friday, October 18, 13

Page 23: Teaching Programming Online

Infinite Loop Checkervar i = 0;while(i < 10) { ellipse(i, i, 30, 30);}

Web Worker

Friday, October 18, 13

Page 24: Teaching Programming Online

Now, how do we teach?

Friday, October 18, 13

Page 25: Teaching Programming Online

Usual way to teach: Videos

https://www.khanacademy.org/science/computer-science/v/python-lists

Friday, October 18, 13

Page 26: Teaching Programming Online

Our approach: “talk-throughs”

Uses same environment they program in

Making passive instruction interactive!

https://www.khanacademy.org/cs/programming/drawing-basics/p/intro-to-drawing

Friday, October 18, 13

Page 27: Teaching Programming Online

Playing talk-throughs

SoundManager2.js

commands = [ {"key": "\n", "time": 14124}, {"key": "\n", "time": 14260}, {"key": "r", "time": 14676}, {"key": "e", "time": 14764}, {"key": "c", "time": 15036}, {"key": "t", "time": 15548},...]

<audio> or <object>

var player = soundManager.createSound({ url: revision.getMp3Url(),whileplaying: function() { updateTimeLeft(Record.currentTime());

Record.trigger("playUpdate"); }});

Friday, October 18, 13

Page 28: Teaching Programming Online

Creating talk-throughs

canvas controls

recording controls

Friday, October 18, 13

Page 29: Teaching Programming Online

Recording audio

var multirecorder = new MultiRecorder();multirecorder.startRecording();

https://github.com/Khan/MultiRecorderJS/blob/master/multirecorder.js

rightBuffer.push(stream[0]);leftBuffer.push(stream[1]);

getUserMedia()

new Worker()

multirecorder.stopRecording();getInterleaved();

encodeWAV();

Friday, October 18, 13

Page 30: Teaching Programming Online

How can we assess learning?

Friday, October 18, 13

Page 31: Teaching Programming Online

Usual way to assess: Exercises

Repeated multiple times with variantsFriday, October 18, 13

Page 32: Teaching Programming Online

Our approach: coding challenges

Structured yet flexible.

More than one way to code the solution.Friday, October 18, 13

Page 33: Teaching Programming Online

...and they’re fun!

Friday, October 18, 13

Page 34: Teaching Programming Online

How do we “grade” challenges?

staticTest StructuredJS Esprima

Friday, October 18, 13

Page 35: Teaching Programming Online

Esprima

http://esprima.org/demo/parse.html#

var theNumber = 50;

if (theNumber > 0) {

}

AST

JavaScript

Friday, October 18, 13

Page 36: Teaching Programming Online

StructuredJS

http://khan.github.io/structuredjs/index.html

var $numVar = $numVal;

if ($numVar > 0) {rect($x, $y, $w, $h);

}

var theNumber = 10;

fill(255, 255, 255);if (theNumber > 0) {rect(10, 10, 30, 40);

} if (theNumber < 0) { rect(10, 50, 30, 40);}

structure: user code:

it’s a match!

Friday, October 18, 13

Page 37: Teaching Programming Online

staticTest

staticTest(“Add the ifs!”, function() { var descrip = “Now add an if to check if the number is positive.”;

var pattern = function() { var $numVar = $numVal;

if ($numVar > 0) {rect($x, $y, $w, $h);

} };

result = match(pattern); if (passes(result)) { var goodX = structure(pattern, inRange(“$x”, 10, 20)); if (!matches(goodX)) { result = fail(“Hm, does your rect start on the side?”); } } assertMatch(result, descrip, displayP);});

Friday, October 18, 13

Page 38: Teaching Programming Online

...Not quite that simple, though!

Most challenge tests are hundreds of lines long.

Most steps have 10-20 helpful messages.

https://www.khanacademy.org/cs/challenge-exploding-sun/2050946856

Friday, October 18, 13

Page 40: Teaching Programming Online

Spreadsheet of user feedback

pivot table!

Friday, October 18, 13

Page 41: Teaching Programming Online

...plus automated statistics

Friday, October 18, 13

Page 42: Teaching Programming Online

How can we create a community?

Friday, October 18, 13

Page 43: Teaching Programming Online

Questions & Answers

Friday, October 18, 13

Page 44: Teaching Programming Online

Wilson Voting Algorithm, GAE’ddef wilson_confidence(upvotes_name, downvotes_name, score): """Lower bound of Wilson score 90% confidence interval.

This is the algorithm Reddit uses to sort comments. You should not use this if downvotes are disallowed - it is only useful in the presence of both upvotes and downvotes because its ranking is based on an estimate of the ratio of upvotes to downvotes.

See http://www.evanmiller.org/how-not-to-sort-by-average-rating.html """ upvotes = getattr(score, upvotes_name) downvotes = getattr(score, downvotes_name) if upvotes == 0: return -downvotes elif upvotes == downvotes: return 0 n = upvotes + downvotes z = 1.64485 # 90% confidence z-score phat = float(upvotes) / n # p-hat return ((phat + z * z / (2 * n) - z * math.sqrt((phat * (1 - phat) + z * z / (4 * n)) / n)) / (1 + z * z / n))

class TimeIndependentScoreProperty(ndb.ComputedProperty):

def __init__(self, upvotes_name="upvotes", downvotes_name="downvotes", **kwargs): super(TimeIndependentScoreProperty, self).__init__( functools.partial(wilson_confidence, upvotes_name, downvotes_name), **kwargs)

Friday, October 18, 13

Page 45: Teaching Programming Online

Spin-offs!

Friday, October 18, 13

Page 46: Teaching Programming Online

The Hot Programs

Friday, October 18, 13

Page 47: Teaching Programming Online

Reddit Voting Algorithm, GAE’ddef time_dependent(decay_seconds, upvotes_name, downvotes_name, created_name, score): """Ranking based on both age and quality.

This is the algorithm Reddit uses to sort stories. We want there to be churn, a constant stream of new programs hitting the hot page, so this algorithm takes into account both the score of the scratchpad and the age. See http://amix.dk/blog/post/19588 """ s = getattr(score, upvotes_name) - getattr(score, downvotes_name)

# Weight votes logarithmically - initial votes are worth a ton order = math.log(max(abs(s), 1), 10)

sign = 1 if s > 0 else -1 if s < 0 else 0

# Seconds since this algorithm's start date date = getattr(score, created_name) or datetime.datetime.now() seconds = epoch_seconds(date) - 1349108492

return round(order + sign * seconds / decay_seconds, 7)

class TimeDependentScoreProperty(ndb.ComputedProperty):

def __init__(self, decay_seconds, upvotes_name="upvotes", downvotes_name="downvotes", created_name="created", **kwargs): super(TimeDependentScoreProperty, self).__init__(functools.partial( time_dependent, decay_seconds, upvotes_name, downvotes_name, created_name), **kwargs)

Friday, October 18, 13

Page 48: Teaching Programming Online

Teaching Programming Online

Learn Practice Create Share Help

Friday, October 18, 13