Codecademic Record

(by-)products of my activity as a codecademic

Export a Codecademy Exercise to Plain Text

currently for JavaScript exercises only

What’s this about?

Some Codecademy educators (like myself) want to edit and backup their exercise code outside of the Codecademy editor:

  • using a real text editor
  • using git for collaboration and version control

So I created an export script to allow copying the entire exercise description (with Hint and Solution) into a Markdown file. It'll also help you copy the JavaScript (including Correctness Test) to a JavaScript file. The script will show an overlay with two text areas to copy the Markdown text and the JavaScript code from.

Unfortunately there's no way of getting the content back into the exercise, so the re-import will involve up to 8 copy & paste operations:

  1. Exercise title
  2. Educational text
  3. Exercise instructions
  4. Exercise hint
  5. JavaScript default code
  6. JavaScript SCT code
  7. Solution text
  8. Solution code

OK, so how do I use it?

Just add this bookmarklet to your Bookmarks (e.g. by dragging it to the Bookmarks Bar):

Export Code

It only works on a Codecademy exercise in edit view. Just open one of the exercises you are authoring and click the bookmarklet (tested with Google Chrome on a Mac). It should display something like this.

Source & Credits

The bookmarklet was inspired by the fantastic Correctness Test Viewer bookmarklet written by Michael Tackes. The source code is shown below.

Export Exercise (export_exercise.js) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

// This bookmarklet will help you copy the entire
// exercise instructions of a JS exercise to a Markdown file
// and the entire code (default code plus submission test)
// to a JS file.
// You have to view the *Edit mode* of the exercise.
// last updated: Feb 20, 2013 (uses overlay instead of alert())

(function() {
  try {
    var l  = location.href,
        sd  = CCDATA.creator.sectionData,
        seno = sd.index + 1,                // section number
        ee = sd.exercises,                  // an Array
        id = l.split('/')[6],               // exercise id
        e  = ee.filter(function(el){        // exercise data object
          return el._id === id;
        })[0];
  } catch (x) { return; }
  var prev = e.load_submission_from_previous_exercise,
      link = location.origin + e.preview_url,    // exercise preview link
      name = e.name,                             // exercise title
      exno = e.index + 1,                        // exercise number
      text = e.entry,                            // educational text
      inst = e.instruction,                      // exercise instructions
      hint = e.hint,                             // exercise hint
      code = e.default_code,
      test = e.test_functions,                   // the SCT
      solc = e.solution_code,
      sole = e.solution_entry,
      t = c = '';                                // text and code
  try {
    var se = 'Section '+ seno +', Exercise '+exno;
    t = [
      se + '\n# ['+name+']('+l+') ([preview]('+link+'))',
      '## Text',         text,
      '## Instructions', inst,
      '## Hint',         hint,
      '## Solution Text',sole,
      '## Solution Code',solc+'\n'
    ].join('\n\n');
    c = [
      '// ' + se +'\n// '+ name+'\n// edit:    ' + l+
      '\n// preview: '+ link,
      '// Load submission from previous exercise: '+prev,
      '/*** Default Code    ***/', code,
      '/*** Submission Test ***/', test+'\n'
    ].join('\n\n');
    var $ta = $('<textarea/>').css({overflow:'scroll',height:'100px',width:'98%'});
    $('#overlay').prepend(
      $('<div/>').css({margin:'60px',width:'initial'})
      .append($('<h2/>').text(se))
      .append('<b>Exercise text (as Markdown)</b>')
      .append($ta.text(t))
      .append('<b>JavaScript code</b>')
      .append($ta.clone().text(c))
      .prepend('<a href=\'#\' class=\'close\'>close  ×</a>')
      .append('<p style=\'text-align:right;margin-top:10px;\'>'
        +'<a href=\'http://is.gd/EzJKpi\'>documentation</a></p>'
      )
    ).show();
  } catch (x) {console.log(x.message);}
})();

Comments