Teaching Programming Online Guide

Teaching Programming Online
pamela fox
@pamelafox

Friday, October 18, 13

What is Khan Academy?


K-12 Subject Tutorials


Exercises & Videos


Personalized Learning


Teacher-facing Analytics


The Tech Stack
Backend

Frontend

Handlebars
jQuery
Backbone


LESS

FB React

Heavy on Open Source
Using

Contributing

Blogging
http://bjk5.com/
http://mattfaus.com/

https://github.com/Khan

What should we teach, exactly?


So many options
Ruby C++
Haskell
Scheme
Java Python Lua
JavaScript

Languages

Websites Mobile
Games Hardware
Animation

Uses

Robotics Simulation
Data Science

Our goals
No Installation Needed
Fun for Anyone
Shareable
Gateway Drug


So many options
Ruby C++
Haskell
Scheme
Java Python Lua
JavaScript

Languages

Websites Mobile
Games Hardware
Animation
Robotics Simulation
Data Science

Uses


How do students program?


ACE editor

ProcessingJS
JSHint ! BabyHint ! Loop Checker


ACE Editor
number scrubber


color picker

ProcessingJS

http://processingjs.org/reference


JSHint
var myName = “spaghetti
errors

if (i == 0) {
warnings
}

best
practices

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


BabyHint
elipse(10, 10, 20, 30);
spelling

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


Inﬁnite Loop Checker
var i = 0;
while(i < 10) {
ellipse(i, i, 30, 30);
}

Web Worker


Now, how do we teach?


Usual way to teach: Videos

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


Our approach: “talk-throughs”
Making passive instruction interactive!

Uses same environment they program in
https://www.khanacademy.org/cs/programming/drawing-basics/p/intro-to-drawing

Playing talk-throughs
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},...]

SoundManager2.js
var player = soundManager.createSound({
url: revision.getMp3Url(),
whileplaying: function() {
updateTimeLeft(Record.currentTime());
Record.trigger("playUpdate");
}
});


<audio> or <object>

Creating talk-throughs

canvas controls

recording controls


Recording audio
getUserMedia()
var multirecorder = new MultiRecorder();
multirecorder.startRecording();

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

multirecorder.stopRecording();

getInterleaved();
encodeWAV();

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


How can we assess learning?


Usual way to assess: Exercises

Repeated multiple times with variants

Our approach: coding challenges

Structured yet ﬂexible.
More than one way to code the solution.

...and they’re fun!


How do we “grade” challenges?

staticTest


StructuredJS

Esprima

Esprima
AST
JavaScript
var theNumber = 50;
if (theNumber > 0) {
}

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

StructuredJS
structure:

user code:

var $numVar = $numVal;

var theNumber = 10;

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

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

it’s a match!
http://khan.github.io/structuredjs/index.html


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);
});


...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


How do we get feedback on challenges?

<form action=”https://docs.google.com/a/khanacademy.org/forms/
d/1OmFRH5NoBusswiSaSYkoDiUPayycXLnpQh8IX60tJbM/formResponse”
method="post" target="hidden_iframe">


Spreadsheet of user feedback
pivot table!


...plus automated statistics


How can we create a community?


Questions & Answers


Wilson Voting Algorithm, GAE’d
def 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)


Spin-offs!


The Hot Programs


Reddit Voting Algorithm, GAE’d
def 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)


Teaching Programming Online

Learn


Practice

Create

Share

Help

Teaching Programming Online Guide

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (15)

Similar to Teaching Programming Online Guide

Similar to Teaching Programming Online Guide (20)

More from Pamela Fox

More from Pamela Fox (20)

Recently uploaded

Recently uploaded (20)

Teaching Programming Online Guide

Editor's Notes