Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Application to Khan Academy

Steph Jang
September 14, 2013

Application to Khan Academy

Steph Jang

September 14, 2013
Tweet

Other Decks in Programming

Transcript

  1. Dear  Khan  Academy,  

    View full-size slide

  2. I’m  Stephanie,  a.k.a.  stchangg,  
    Pre-­‐unibrow  removal  

    View full-size slide

  3. And  I’d  like  to  work  for  you.  

    View full-size slide

  4. This  graph,  and  what  it  implies.  

    View full-size slide

  5. Holy  sh**.  

    View full-size slide

  6. I’m  so  excited  about  KA’s  ability  to  
    empower  students  like  this  one.  

    View full-size slide

  7. Inspired  by  cool  interacEve  exercises,  I  
    set  out  to  make  one  myself.  
    WOAH…  
    INTERACTIVE!  

    View full-size slide

  8. Enter…  
     
    Telling  Eme,  
    interacEve!  
     
    (renamed  to  telling_Eme_2.html)  

    View full-size slide

  9. It  involved  some  feedback  and  
    iteraEon…  
    I  am  Eny!  

    View full-size slide

  10. With  a  good  deal  of  digging  into  the  uEls  library,  
    as  documentaEon  was  sparse.  

    View full-size slide

  11. In  addiEon  to  creaEng  the  exercise,  

    View full-size slide

  12. I  refactored  exisEng  exercises  

    View full-size slide

  13. and  added  some  funcEons  to  help  with  
    polar-­‐coordinate  graphing.  

    View full-size slide

  14. A  few  weeks  ago,  the  exercise  was  pushed  
    live.  Thanks,  @beneater  and  @mwahl!  

    View full-size slide

  15. Wahoo!  Try  it  out  for  yourself:  
    hQp://www.khanacademy.org/exercise/telling_Eme_2    

    View full-size slide

  16. It  was  a  great  learning  
    experience.  

    View full-size slide

  17. While  making  the  exercise,  I  found  
    myself  thinking  about  how  the  
    Exercises  UI  could  be  improved.  

    View full-size slide

  18. It’s  very  funcEonal,  but  I  think  
    there  are  a  few  weaknesses:  

    View full-size slide

  19. A  typical  exercise  

    View full-size slide

  20. Too  much  whitespace  

    View full-size slide

  21. Redundancy  –  which  should  I  look  at?  

    View full-size slide

  22. Redundancy  again…  which  do  people  actually  click  on?  

    View full-size slide

  23. Too  much  text  

    View full-size slide

  24. Hints  are  far  down  the  page;  scrolling  is  not  automaEc  

    View full-size slide

  25. AWer  some  paper  sketches,  

    View full-size slide

  26. I  quickly  mocked  up  the  
    following  low-­‐fidelity  design  

    View full-size slide

  27. ANSWER  
    Check  answer  
    Get  a  hint  
    Watch  a  video  
    Simple multiplication!
    EXERCISES  
    How  much  wood  would  25  
    woodchucks  chuck  if  a  
    woodchuck  could  chuck  17  
    pieces  of  wood?  
    25  
    HINTS  
    How  many  woodchucks  are  
    there?  25.  
     
    Okay,  now  that  we  have  
    the  number  of  
    woodchucks,  how  much  
    wood  can  each  woodchuck  
    chuck?  17  pieces.  
     
    So  if  each  woodchuck  
    could  chuck  17  pieces  of  
    wood,  and  there  are  25  
    woodchucks  at  work,  we  
    have  25  *  17  pieces  total.  
     
    =  25  *  (10  +  7)    
    =  250  +  (20  +  5)  *  7    
    =  250  +  140  +  35    
    =  250  +  175  
    =  300  +  125  
    =  425  pieces  of  wood  total  
    17   Get  a  hint   0  hints  
    leO  

    View full-size slide

  28. Then,  I  set  out  to  build  a  working  
    prototype  using  KA’s  actual  
    exercises  codebase.  

    View full-size slide

  29. It  ended  up  looking  a  liQle  different,  
    but  sEll  aimed  to  address  issues  
    idenEfied  with  the  current  design.  

    View full-size slide

  30. Here  it  is.  Now,  let’s  see  how  it  works…  

    View full-size slide

  31. Click  for  a  hint…  

    View full-size slide

  32. Hints  panel  appears  

    View full-size slide

  33. Click  again…  

    View full-size slide

  34. Hints  panel  automaEcally  scrolls  to  the  
    newest  hint  

    View full-size slide

  35. No  more  hints!  Click  to  watch  a  video…  

    View full-size slide

  36. Video  panel  slides  from  leW.  

    View full-size slide

  37. Now,  back  to  the  problem…  

    View full-size slide

  38. Let’s  make  a  guess…  

    View full-size slide

  39. No  cigar.  =(    
    Let’s  try  again…  

    View full-size slide

  40. Yay!  Onto  the  next  problem…  

    View full-size slide

  41. Voila,  next  problem!  

    View full-size slide

  42. Here’s  an  exercise  with  a  massive  
    graphie  element  

    View full-size slide

  43. The  user  can  scroll  down  and    
    sEll  use  the  answer  area  buQons  
    (consistent  with  the  current  design)  

    View full-size slide

  44. A  few  other  examples:  

    View full-size slide

  45. A  summary  of  the  major  changes  
    Bigger  problem  text  
    Centered  problem  
    Can  view  hints  and  
     problem  together  
    AutomaEc  scrolling  
    for  hints  
    Less  text,    
    bigger  buQons  

    View full-size slide

  46. The  aim:  a  more  streamlined,  Zen  
    environment  for  problem-­‐solving  

    View full-size slide

  47. For  reference,  here’s  the  same  exercise,    
    in  the  current  design  

    View full-size slide

  48. You  can  try  the  mockup  for  
    yourself*  by  cloning  a  branch  of  my  
    repo.  (Link  provided  at  the  end  to  
    hold  your  aQenEon.)  
     
    *Please  use  a  recent  version  of  Chrome  for  best  results.  Other  browsers/versions  have  
    not  been  fully  tested…  
     

    View full-size slide

  49. A  few  disclaimers,  though!  

    View full-size slide

  50. This  is  meant  to  be  a  discussion  
    starter,  and  by  no  means  a  final  
    design.    

    View full-size slide

  51. Some  funcEonality,  like  the  beloved  
    streak  bar,  hasn’t  been  
    incorporated.  

    View full-size slide

  52. And  this  mockup  doesn’t  play  
    well  with  all  exercises.  

    View full-size slide

  53. For  example,  the  hints  sidebar  is  too  
    narrow  for  some  hints  with  graphie  
    elements.  

    View full-size slide

  54. But  these  issues  are  all  solvable.  

    View full-size slide

  55. So,  yerp.  This  is  one  of  the  things  
    I  can  do  for  you.  

    View full-size slide

  56. Here  is  the  
    hypotheEcal  
    table.  
    IKEA    
    VIKA  AMON/
    VIKA  CURRY  
    Table,  white  
     
    $39.99  

    View full-size slide

  57. To  it,  I  can  bring  the  following  
    things:  

    View full-size slide

  58. Skills  
    -­‐  JavaScript,  jQuery,  Handlebars.js  
    -­‐  HTML,  CSS,  SCSS/Compass,  Photoshop  
    -­‐  Java  
    -­‐  Some  Ruby  on  Rails,  Python,  C++  
     
    Preferred  environment  (but  I  can  adapt)  
    -­‐  Textmate,  vi  
    -­‐  Chrome  Developer  Tools  
    -­‐  Mac  OS  X  
    -­‐  Bash  

    View full-size slide

  59. Plus!  A  hearty  appeEte  for  
    learning  new  things  and  
    internalizing  best  pracEces.  

    View full-size slide

  60. I  don’t  need  hand-­‐holding.  The  
    proof  is  in  the  pudding  past  
    work.  

    View full-size slide

  61. But  I’m  also  not  afraid  of  
    feedback,  because  that’s  one  of  
    the  quickest  ways  to  learn.  

    View full-size slide

  62. So,  uh,  who  am  I?  

    View full-size slide

  63. PRESENT
    Currently,  I  work  as  a  PM  for  
    MicrosoW  in  Silicon  Valley,  

    View full-size slide

  64. PRESENT
    In  a  small  group  charged  with  
    bringing  MicrosoW’s  search  ads  to  
    Bing  and  Yahoo!  in  internaEonal  
    markets.  

    View full-size slide

  65. PRESENT
    However,  aWer  working,  I’ve  realized  
    how  important  it  is  for  me  to  do  
    work  that’s  imagining  and  creaEng  a  
    beQer  future.  

    View full-size slide

  66. PRESENT
    I’d  rather  fight  the  good  fight  and  
    lose.  

    View full-size slide

  67. PAST PRESENT
    In  May  2011,  I  graduated  from  
    Duke  University,  

    View full-size slide

  68. PAST PRESENT
    Where  I  majored  in  Electrical  and  
    Computer  Engineering  (ECE)  and  
    minored  in  Computer  Science.  

    View full-size slide

  69. PAST PRESENT
    At  Duke,  I  was  very  involved  with  
    our  Engineers  Without  Borders  
    chapter.  

    View full-size slide

  70. PAST PRESENT
    I  led  a  10-­‐student  team  which  
    designed  and  built  a  3,000  sq.  W.  
    government-­‐endorsed  health  clinic  
    in  rural  Honduras.  

    View full-size slide

  71. PAST PRESENT
    Summer  2009  
    Summer  2008  

    View full-size slide

  72. PAST PRESENT
    AWer  my  junior  year,  I  interned  at  a  
    venture-­‐funded  clean-­‐tech  startup  
    called  Redwood  Systems.  

    View full-size slide

  73. PAST PRESENT
    A  fellow  intern  and  I  developed  a  
    Python  package  to  simplify  sensor  
    data  analysis.  We  fondly  named  it  
    Pynecone.  

    View full-size slide

  74. PAST PRESENT
    In  another  project,  I  used  MATLAB  
    to  generate  a  Eme-­‐lapsed  
    visualizaEon  of  moEon  sensor  data  
    for  use  in  VC  and  customer  pitches.  

    View full-size slide

  75. PAST PRESENT
    A  screenshot  from  the  animaEon:  
    no  moEon  
    lots  of  moEon  

    View full-size slide

  76. PAST PRESENT
    In  my  senior  year,  I  led  a  team  to  
    second  place  overall  and  a  $10k  
    prize  in  the  university-­‐wide  Duke  
    Start-­‐Up  Challenge.  

    View full-size slide

  77. PAST PRESENT
    Our  idea,  70  Sesame,  was  like  
    GroupMe  for  China,  with  features  to  
    help  with  group  planning  and  
    polling.  

    View full-size slide

  78. PAST PRESENT
    A  screenshot  from  our  demo  video,    
    in  English  for  the  audience:  
    Full  vid  here:  hQp://stchangg.com/projects/70sesame    

    View full-size slide

  79. PAST PRESENT
    However,  we  did  not  conEnue  with  
    the  idea  as  we  weren’t  quite  ready  
    to  do  business  in  China...  

    View full-size slide

  80. PAST PRESENT
    (To  be  fair,  
    this  was  just  
    one  of  several  
    reasons.)  

    View full-size slide

  81. PAST PRESENT
    Finally,  before  Duke,  I  went  to  a  
    math  &  science  high  school  where  
    students  worked  in  small  groups  
    during  class,  like  in  KA’s  LASD  pilots.  
    It  was  preQy  great.  

    View full-size slide

  82. In  the  future,  I  want  to  build  a  
     
    {company,  nonprofit,  or  social  movement}  
     
    that  helps  people  change  their  
    mindset  to  achieve  their  goals.  

    View full-size slide

  83. So,  you  see,  helping  build  out  KA’s  
    exercises  plazorm  is  an  exciEng  
    opportunity  to  learn  firsthand  how  
    to  do  this  in  educaEon.  

    View full-size slide

  84. Looking  forward  to  hearing  back  
    from  you!  
    •  hQp://stchangg.com/projects/  
    •  Porzolio  site  with  recent  projects  (2011+)  
    •  hQp://www.linkedin.com/in/stchangg  
    •  More  tradiEonal  resume,  no  side  projects  
     

    View full-size slide

  85. Code  Links  
    •  Redesign  code:  
    – hQps://github.com/stchangg/khan-­‐exercises/
    tree/redesign    
    •  KA  pull  requests:  
    – Telling  Time  2:  created  the  exercise  
    •  hQps://github.com/Khan/khan-­‐exercises/pull/8913    
    – Slope  of  a  Line:  added  a  problem  type  (interacted  
    with  @marcia)  
    •  hQps://github.com/Khan/khan-­‐exercises/pull/6124  

    View full-size slide