Skip to content

E
edx-platform
Commit 1abe15d4 by Prem Sichanugrist
Options

Rewrite Problem module

parent 8e7bf4c1
Showing with 90 additions and 126 deletions
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 0 → 100644
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 deleted 100644 → 0
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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment