Teaching Programming Online (CodeMotion)

A talk delivered at CodeMotion about teaching programming online on Khan Academy.

Transcript

1. Teaching Programming Online
   pamela fox @pamelafox
2. My Background Computer Science Linguistics 3d Animation + + Developer Relations 2002 ! ! ! 2007 2007 ! ! ! 2011 2012 ! 2013 Frontend Engineer
3. August 2013 - ??????
4. What is Khan Academy?
5. K-12 Subject Tutorials
6. Exercises & Videos
7. Personalized Learning
8. Teacher-facing Analytics
9. Todo traducido
10. The Tech Stack Backend Frontend Backbone FB React jQuery Handlebars LESS
11. Heavy on Open Source Using Contributing https://github.com/Khan Blogging http://bjk5.com/ http://mattfaus.com/
13. What should we teach, exactly?
14. So many options Languages Uses Java Python C++ Haskell JavaScript Ruby Scheme Games Animation Hardware Robotics Data Science Simulation Mobile Websites Lua
15. Our goals No Installation Needed Shareable Fun for Anyone Gateway Drug
16. So many options Languages Uses Java Python C++ Haskell JavaScript Ruby Scheme Games Animation Hardware Robotics Data Science Simulation Mobile Websites Lua
17. How do students program?
18. ACE editor JSHint ! BabyHint ! Loop Checker ProcessingJS
19. ACE Editor number scrubber color picker
20. ProcessingJS http://processingjs.org/reference
21. JSHint var myName = “spaghetti if (i == 0) {! ! } var i = 2;! if (i == 0) {! ! } errors warnings best practices
22. BabyHint elipse(10, 10, 20, 30); spelling wrong arguments ellipse(1, 1, 20, 30, 5);
23. Infinite Loop Checker var i = 0;! while(i < 10) {! ellipse(i, i, 30, 30);! } Web Worker
24. Now, how do we teach?
25. Usual way to teach: Videos https://www.khanacademy.org/science/computer-science/v/python-lists
26. 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
27. 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");! }! });
28. Creating talk-throughs canvas controls recording controls
29. 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();
30. How we improve talk-throughs Analytics
31. How we improve talk-throughs BEFORE AFTER
32. How can we assess learning?
33. Usual way to assess: Exercises Repeated multiple times with variants
34. Our approach: coding challenges Structured yet flexible. More than one way to code the solution.
35. ...and they’re fun!
36. How do we “grade” challenges? staticTest StructuredJS Esprima
37. Esprima http://esprima.org/demo/parse.html# var theNumber = 50;! ! if (theNumber > 0) {! ! }! AST JavaScript
38. 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!
39. 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);! });!
40. ...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
41. How we improve challenges Challenges Attempted: 244,168 ! Challenges Completed: 162,858 ! Challenge Completion Rate: 67% Overall Analytics
42. How we improve challenges Manual Feedback
43. Giving more opportunity for practice: Projects
44. Peer evaluations for projects
45. How can we create a community?
46. Questions & Answers
47. 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)! !
48. Spin-offs!
49. The Hot Programs
50. 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)!
51. Similarity Diffing diff = difflib.SequenceMatcher(! # Ignore differences in spacing! isjunk=lambda x: x in " \t\n",! a=origin_revision.code.strip(),! b=self.revision.code.strip(),! autojunk=True)! ! # Compute the ratio difference between the two revisions! # If the code is really large then we just do a quick ratio! # instead to try and speed up the comparison! if (len(origin_revision.code) > max_ratio_size or! len(self.revision.code) > max_ratio_size):! similarity = diff.quick_ratio()! else:! similarity = diff.ratio() Uh oh, Re-posts!
52. Teaching Programming Online Learn Practice Create Share Help
53. Want to help? github.com/khan/live-editor