diff --git a/common/lib/xmodule/xmodule/js/src/selfassessment/display.coffee b/common/lib/xmodule/xmodule/js/src/selfassessment/display.coffee
index aabe0cc0e5..91582642b8 100644
--- a/common/lib/xmodule/xmodule/js/src/selfassessment/display.coffee
+++ b/common/lib/xmodule/xmodule/js/src/selfassessment/display.coffee
@@ -1,21 +1,148 @@
-show: =>
-  Logger.log 'sa_show', problem: @id
-  $.postWithPrefix "#{@url}/sa_show", (response) =>
-    answers = response.answers
-    $.each answers, (key, value) =>
-      if $.isArray(value)
-        for choice in value
-          @$("label[for='input_#{key}_#{choice}']").attr correct_answer: 'true'
+class @SelfAssessment
+
+  constructor: (element) ->
+    @el = $(element).find('.sa-wrapper')
+    @id = @el.data('sa-id')
+    @element_id = @el.attr('id')
+    @url = @el.data('url')
+    @render()
+
+  $: (selector) ->
+    $(selector, @el)
+
+  bind: =>
+
+    window.update_schematics()
+
+    problem_prefix = @element_id.replace(/sa_/,'')
+    @inputs = @$("[id^=input_#{problem_prefix}_]")
+
+    @$('input:button').click @refreshAnswers
+    #@$('section.action input.check').click @check
+    @$('input.show').click @show
+    @$('input.save').click @save
+
+    # Collapsibles
+    Collapsible.setCollapsibles(@el)
+
+    # Dynamath
+    @$('input.math').keyup(@refreshMath)
+    @$('input.math').each (index, element) =>
+      MathJax.Hub.Queue [@refreshMath, null, element]
+
+  updateProgress: (response) =>
+    if response.progress_changed
+      @el.attr progress: response.progress_status
+      @el.trigger('progressChanged')
+
+  show: =>
+    $.postWithPrefix "#{@url}/sa_show", (response) =>
+      answers = response.answers
+      @el.addClass 'showed'
+
+  save: =>
+    $.postWithPrefix "/sa_save", @answers, (response) =>
+      if response.success
+       @$('p.rubric').replace(response.rubric)
+
+  render: (content) ->
+    if content
+      @el.html(content)
+      JavascriptLoader.executeModuleScripts @el, () =>
+        @setupInputTypes()
+        @bind()
+    else
+      $.postWithPrefix "#{@url}/problem_get", (response) =>
+        @el.html(response.html)
+        JavascriptLoader.executeModuleScripts @el, () =>
+          @setupInputTypes()
+          @bind()
+
+  setupInputTypes: =>
+    @inputtypeDisplays = {}
+    @el.find(".capa_inputtype").each (index, inputtype) =>
+      classes = $(inputtype).attr('class').split(' ')
+      id = $(inputtype).attr('id')
+      for cls in classes
+        setupMethod = @inputtypeSetupMethods[cls]
+        if setupMethod?
+          @inputtypeDisplays[id] = setupMethod(inputtype)
+
+  gentle_alert: (msg) =>
+    if @el.find('.capa_alert').length
+      @el.find('.capa_alert').remove()
+    alert_elem = "<div class='capa_alert'>" + msg + "</div>"
+    @el.find('.action').after(alert_elem)
+    @el.find('.capa_alert').css(opacity: 0).animate(opacity: 1, 700)
+
+  refreshAnswers: =>
+    @$('input.schematic').each (index, element) ->
+      element.schematic.update_value()
+    @$(".CodeMirror").each (index, element) ->
+      element.CodeMirror.save() if element.CodeMirror.save
+    @answers = @inputs.serialize()
+
+  inputtypeSetupMethods:
+
+    'text-input-dynamath': (element) =>
+      ###
+      Return: function (eqn) -> eqn that preprocesses the user formula input before
+                it is fed into MathJax. Return 'false' if no preprocessor specified
+      ###
+      data = $(element).find('.text-input-dynamath_data')
+
+      preprocessorClassName = data.data('preprocessor')
+      preprocessorClass = window[preprocessorClassName]
+      if not preprocessorClass?
+        return false
       else
-        answer = @$("#answer_#{key}, #solution_#{key}")
-        answer.html(value)
-        Collapsible.setCollapsibles(answer)
+        preprocessor = new preprocessorClass()
+        return preprocessor.fn
+
+    javascriptinput: (element) =>
+
+      data = $(element).find(".javascriptinput_data")
+
+      params        = data.data("params")
+      submission    = data.data("submission")
+      evaluation    = data.data("evaluation")
+      problemState  = data.data("problem_state")
+      displayClass  = window[data.data('display_class')]
+
+      if evaluation == ''
+        evaluation = null
+
+      container = $(element).find(".javascriptinput_container")
+      submissionField = $(element).find(".javascriptinput_input")
+
+      display = new displayClass(problemState, submission, evaluation, container, submissionField, params)
+      display.render()
+
+      return display
+
+  inputtypeShowAnswerMethods:
+    choicegroup: (element, display, answers) =>
+      element = $(element)
+
+      element.find('input').attr('disabled', 'disabled')
+
+      input_id = element.attr('id').replace(/inputtype_/,'')
+      answer = answers[input_id]
+      for choice in answer
+        element.find("label[for='input_#{input_id}_#{choice}']").addClass 'choicegroup_correct'
+
+    javascriptinput: (element, display, answers) =>
+      answer_id = $(element).attr('id').split("_")[1...].join("_")
+      answer = JSON.parse(answers[answer_id])
+      display.showAnswer(answer)
+
+  inputtypeHideAnswerMethods:
+    choicegroup: (element, display) =>
+      element = $(element)
+      element.find('input').attr('disabled', null)
+      element.find('label').removeClass('choicegroup_correct')
+
+    javascriptinput: (element, display) =>
+      display.hideAnswer()
 
-    @$('.show').val 'Hide Answer'
-    @el.addClass 'showed'
 
-save: =>
-  Logger.log 'sa_save', @answers
-  $.postWithPrefix "#{@url}/sa_save", @answers, (response) =>
-    if response.success
-     @$('p.rubric').replace(response.rubric)
diff --git a/common/lib/xmodule/xmodule/js/src/selfassessment/display.js b/common/lib/xmodule/xmodule/js/src/selfassessment/display.js
new file mode 100644
index 0000000000..e3b92cbff5
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/src/selfassessment/display.js
@@ -0,0 +1,20 @@
+
+    show: function() {
+      Logger.log('sa_show', {
+        problem: _this.id
+      });
+      return $.postWithPrefix("" + _this.url + "/sa_show", function(response) {
+        var answers;
+        answers = response.answers;
+        return _this.el.addClass('showed');
+      });
+    }
+
+    save: function() {
+      Logger.log('sa_save', _this.answers);
+      return $.postWithPrefix("" + _this.url + "/sa_save", _this.answers, function(response) {
+        if (response.success) {
+          return _this.$('p.rubric').replace(response.rubric);
+        }
+      });
+    }
diff --git a/common/lib/xmodule/xmodule/self_assessment_module.py b/common/lib/xmodule/xmodule/self_assessment_module.py
index 41ac6a4f7b..56ac0d7911 100644
--- a/common/lib/xmodule/xmodule/self_assessment_module.py
+++ b/common/lib/xmodule/xmodule/self_assessment_module.py
@@ -19,12 +19,12 @@ from xmodule.contentstore.content import XASSET_SRCREF_PREFIX, StaticContent
 
 log = logging.getLogger("mitx.courseware")
 
-problem_form=('<form action="save()"><input type="text" name="answer" '
-'id="answer"/><br/><input type="submit" value="Check" id ="save"/></form><p id="rubric"></p>')
+problem_form=('<section class="sa-wrapper" sa_id="one"><input type="text" name="answer" '
+'id="answer"/><br/><input type="button" value="Check" id ="save" name="save"/><p id="rubric"></p></section>')
 
-rubric_form=('<form action="show()"><input type="radio" name="assessment" value="correct"/>Correct<br/>'
+rubric_form=('<section class="sa-wrapper" sa_id="two"><input type="radio" name="assessment" value="correct"/>Correct<br/>'
             '<input type="radio" name="assessment" value="incorrect">'
-            'Incorrect<input type="submit" value="Submit" id="show"/></form>')
+            'Incorrect<br/><input type="button" value="Save" id="show" name="show"/></section>')
 
 def only_one(lst, default="", process=lambda x: x):
     """