Rewrite Problem module

djangoapps/courseware/modules/capa_module.py

@@ -61,12 +61,6 @@ class Module(XModule):
                                'ajax_url':self.ajax_url,
                                })
 
-    def get_init_js(self):
-        return render_to_string('problem.js', 
-                              {'id':self.item_id, 
-                               'ajax_url':self.ajax_url,
-                               })
-
     def get_problem_html(self, encapsulate=True):
         html = self.lcp.get_html()
         content={'name':self.name, 
@@ -130,8 +124,8 @@ class Module(XModule):
 
         html=render_to_string('problem.html', context)
         if encapsulate:
-            html = '<div id="main_{id}">'.format(id=self.item_id)+html+"</div>"
-            
+            html = '<div id="problem_{id}" class="problem" data-url="{ajax_url}">'.format(id=self.item_id)+html+"</div>"
+
         return html
 
     def __init__(self, system, xml, item_id, state=None):

static/coffee/spec/courseware_spec.coffee

@@ -27,7 +27,7 @@ describe 'Courseware', ->
 
     it 'binds the sequential content change event', ->
       @courseware.bind()
-      expect($('#seq_content')).toHandleWith 'change', @courseware.render
+      expect($('#seq_content')).toHandleWith 'contentChanged', @courseware.render
 
   describe 'render', ->
     beforeEach ->

static/coffee/spec/courseware_spec.js

@@ -30,7 +30,7 @@
       });
       return it('binds the sequential content change event', function() {
         this.courseware.bind();
-        return expect($('#seq_content')).toHandleWith('change', this.courseware.render);
+        return expect($('#seq_content')).toHandleWith('contentChanged', this.courseware.render);
       });
     });
     return describe('render', function() {

static/coffee/src/courseware.coffee

@@ -12,9 +12,12 @@ class @Courseware
 
   bind: ->
     if $('#seq_content').length
-      $('#seq_content').change @render
+      $('#seq_content').bind 'contentChanged', @render
 
   render: ->
     $('.course-content .video').each ->
       id = $(this).attr('id').replace(/video_/, '')
       new Video id, $(this).data('streams')
+    $('.course-content .problems-wrapper').each ->
+      id = $(this).attr('id').replace(/problem_/, '')
+      new Problem id, $(this).data('url')

static/sass/courseware/_courseware.scss

@@ -54,6 +54,13 @@ div.course-wrapper {
         display: table-cell;
         vertical-align: top;
 
+        &.problem-header {
+          section.staff {
+            margin-top: 30px;
+            font-size: 80%;
+          }
+        }
+
         @media screen and (max-width:1120px) {
           display: block;
           width: auto;

templates/coffee/src/modules/problem.coffee

+class @Problem
+  constructor: (@id, url) ->
+    @element = $("#problem_#{id}")
+    @content_url = "#{url}problem_get?id=#{@id}"
+    @render()
+
+  $: (selector) ->
+    $(selector, @element)
+
+  bind: =>
+    MathJax.Hub.Queue ["Typeset",MathJax.Hub]
+    window.update_schematics()
+    @$('section.action input:button').click @refreshAnswers
+    @$('section.action input.check').click @check
+    @$('section.action input.reset').click @reset
+    @$('section.action input.show').click @show
+    @$('section.action input.save').click @save
+
+  render: (content) ->
+    if content
+      @element.html(content)
+      @bind()
+    else
+      @element.load @content_url, @bind
+
+  check: =>
+    Logger.log 'problem_check', @answers
+    $.post "/modx/problem/#{@id}/problem_check", @answers, (response) =>
+      switch response.success
+        when 'incorrect', 'correct'
+          @render(response.contents)
+        else
+          alert(response.success)
+
+  reset: =>
+    Logger.log 'problem_reset', @answers
+    $.post "/modx/problem/#{@id}/problem_reset", id: @id, (content) =>
+      @render(content)
+
+  show: =>
+    Logger.log 'problem_show', problem: @id
+    $.post "/modx/problem/#{@id}/problem_show", (response) =>
+      $.each response, (key, value) =>
+        @$("#answer_#{key}").text(value)
+
+  save: =>
+    Logger.log 'problem_save', @answers
+    $.post "/modx/problem/#{@id}/problem_save", @answers, (response) =>
+      if response.success
+        alert 'Saved'
+
+  refreshAnswers: =>
+    @answers = {}
+    @$('input.schematic').each (index, element) ->
+      element.schematic.update_value()
+    $.each @$("[id^=input_#{@id}_]"), (index, input) =>
+      @answers[$(input).attr('id')] = $(input).val()

templates/coffee/src/modules/sequence.coffee

@@ -39,7 +39,7 @@ class window.Sequence
 
       MathJax.Hub.Queue(["Typeset",MathJax.Hub])
       @position = new_position
-      $('#seq_content').change()
+      $('#seq_content').trigger 'contentChanged'
 
   goto: (event) =>
     event.preventDefault()

templates/problem.html

 <%namespace name='static' file='static_content.html'/>
-<h2 class="problem-header">${ problem['name'] }
-% if problem['weight']:
-: ${ problem['weight'] } points
-% endif
-% if settings.QUICKEDIT:
-<span class="staff">
-<br/>
-<br/>
-<br/>
-<br/>
-<font size=-2><a href=${MITX_ROOT_URL}/quickedit/${id}>Quick
-Edit Problem</a></font></span>
-% endif
+<h2 class="problem-header">
+  ${ problem['name'] }
+  % if problem['weight']:
+    : ${ problem['weight'] } points
+  % endif
+
+  % if settings.QUICKEDIT:
+  <section class="staff">
+    <a href=${MITX_ROOT_URL}/quickedit/${id}>Quick Edit Problem</a>
+  </section>
+  % endif
 </h2>
 
 <section class="problem">
@@ -21,16 +19,16 @@ Edit Problem</a></font></span>
     <input type="hidden" name="problem_id" value="${ problem['name'] }">
 
     % if check_button:
-    <input id="check_${ id }" type="button" value="${ check_button }" >
+    <input class="check" type="button" value="${ check_button }">
     % endif
     % if reset_button:
-    <input id="reset_${ id }" type="button" value="Reset" >
+    <input class="reset" type="button" value="Reset">
     % endif
     % if save_button:
-    <input id="save_${ id }" type="button" value="Save" >
+    <input class="save" type="button" value="Save">
     % endif
     % if answer_available:
-    <input id="show_${ id }" type="button" value="Show Answer" >
+    <input class="show" type="button" value="Show Answer">
     % endif
     % if explain :
     <a href="/courseware/6.002_Spring_2012/${ explain }" class="new-page">Explanation</a>
@@ -42,3 +40,4 @@ Edit Problem</a></font></span>
     % endif
   </section>
 </section>
+

templates/problem.js

-function ${ id }_content_updated() {
-  MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
-  update_schematics();
-
-  $('#check_${ id }').unbind('click').click(function() {
-  $("input.schematic").each(function(index,element){ element.schematic.update_value(); });
-  $(".CodeMirror").each(function(index,element){ if (element.CodeMirror.save) element.CodeMirror.save(); });
-    var submit_data={};
-    $.each($("[id^=input_${ id }_]"), function(index,value){
-	    if (value.type==="checkbox"){
-		if (value.checked) {
-		    if (typeof submit_data[value.name] == 'undefined'){
-			submit_data[value.name]=[];
-		    }
-		    submit_data[value.name].push(value.value);
-		}
-	    }
-	    if (value.type==="radio"){
-		if (value.checked) {
-		    submit_data[value.name]= value.value;
-		}
-	    }
-	    else{
-		submit_data[value.id]=value.value;
-	    }
-    });
-    postJSON('${ MITX_ROOT_URL }/modx/problem/${ id }/problem_check',
-      submit_data,
-      function(json) {
-        switch(json.success) {
-        case 'incorrect': // Worked, but answer not 
-        case 'correct':
-          $('#main_${ id }').html(json.contents);
-          ${ id }_content_updated();
-          break;
-        default:
-          alert(json.success);
-      }}
-    );
-    log_event('problem_check', submit_data);
-  });
-
-  $('#reset_${ id }').unbind('click').click(function() {
-    var submit_data={};
-    $.each($("[id^=input_${ id }_]"), function(index,value){
-      submit_data[value.id]=value.value;
-    });
-
-    postJSON('${ MITX_ROOT_URL }/modx/problem/${ id }/problem_reset', {'id':'${ id }'}, function(html_as_json) {
-      $('#main_${ id }').html(html_as_json);
-      ${ id }_content_updated();
-    });
-    log_event('problem_reset', submit_data);
-  });
-
-  // show answer button
-  // TODO: the button should turn into "hide answer" afterwards
-  $('#show_${ id }').unbind('click').click(function() {
-    postJSON('${ MITX_ROOT_URL }/modx/problem/${ id }/problem_show', {}, function(data) {
-      for (var key in data) {
-	  if ($.isArray(data[key])){
-	      for (var ans_index in data[key]){
-		  var choice_id = 'input_'+key+'_'+data[key][ans_index];
-		  $("label[for="+choice_id+"]").attr("correct_answer", "true");   
-	      }
-	  }
-	  $("#answer_"+key).text(data[key]);
-    }
-  });
-
-    log_event('problem_show', {'problem':'${ id }'});
-  });
-
-  $('#save_${ id }').unbind('click').click(function() {
-    $("input.schematic").each(function(index,element){ element.schematic.update_value(); });
-    var submit_data={};
-    $.each($("[id^=input_${ id }_]"), function(index,value) {
-      submit_data[value.id]=value.value;
-    });
-    postJSON('${ MITX_ROOT_URL }/modx/problem/${ id }/problem_save',
-      submit_data,
-      function(data) {
-        if(data.success) {
-          alert('Saved');
-    }});
-    log_event('problem_save', submit_data);
-  });
-}
-
-function ${ id }_load() {
-  $('#main_${ id }').load('${ ajax_url }problem_get?id=${ id }', ${ id }_content_updated);
-}
-
-$(function() {
-  ${ id }_load();
-});

templates/problem_ajax.html

-<section id="main_${id}" class="problems-wrapper"></section>
+<section id="problem_${id}" class="problems-wrapper" data-url="${ajax_url}"></section>