Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor html and js.

Browse Source 
Next:
  - more clear states (logic in python, view in js)
  - style
This commit is contained in:
Victor Shnayder
2012-11-07 18:18:35 -05:00
parent b66a559b1d
commit e3c213dd38
4 changed files with 105 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
common/lib/xmodule/xmodule/js/src/selfassessment/display.coffee
View File

@@ -1,27 +1,46 @@
sa_wrapper_name='section.sa-wrapper'
class @SelfAssessment
constructor: (element) ->
@el = $(element).find('section.self-assessment')
@id = @el.data('id')
@ajax_url = @el.data('ajax-url')
$(document).on('click', "#{sa_wrapper_name} input#show", ( ->
post_url=$("#{sa_wrapper_name} input#ajax_url").attr('url')
final_url="#{post_url}/sa_show"
answer=$("#{sa_wrapper_name} textarea#answer").val()
$.post final_url, {'student_answer' : answer }, (response) ->
if response.success
$("#{sa_wrapper_name} input#show").remove()
$("#{sa_wrapper_name} textarea#answer").remove()
$("#{sa_wrapper_name} p#rubric").append("Your answer: #{answer}")
$("#{sa_wrapper_name} p#rubric").append(response.rubric)
# Where to put the rubric once we load it
@rubric_wrapper = @$('.rubric-wrapper')
@check_button = @$('.submit-button')
@answer_area = @$('textarea.answer')
@errors_area = @$('.error')
@state = 'prompt' # switches to 'eval' after answer is submitted
@bind()
# locally scoped jquery.
$: (selector) ->
$(selector, @el)
bind: ->
@check_button.click @show_rubric
find_eval_elements: ->
# find the elements we'll need from the newly loaded rubric data
@assessment = @$('select.assessment')
@hint = @$('textarea.hint')
@save_message = @$('.save_message')
show_rubric: (event) =>
event.preventDefault()
if @state == 'prompt'
data = {'student_answer' : @answer_area.val()}
$.postWithPrefix "#{@ajax_url}/show", data, (response) =>
if response.success
@rubric_wrapper.html(response.rubric)
@state = 'eval'
@find_eval_elements()
else
@errors_area.html(response.message)
else
$("#{sa_wrapper_name} input#show").remove()
$("#{sa_wrapper_name} p#rubric").append(response.message)
));
$(document).on('click', "#{sa_wrapper_name} input#save", ( ->
assessment=$("#{sa_wrapper_name} #assessment").find(':selected').text()
post_url=$("#{sa_wrapper_name} input#ajax_url").attr('url')
final_url="#{post_url}/sa_save"
hint=$("#{sa_wrapper_name} textarea#hint").val()
$.post final_url, {'assessment':assessment, 'hint':hint}, (response) ->
if response.success
$("#{sa_wrapper_name} p#save_message").append(response.message)
$("#{sa_wrapper_name} input#save").remove()
));
data = {'assessment' : @assessment.find(':selected').text(), 'hint' : @hint.val()}
$.postWithPrefix "#{@ajax_url}/save", data, (response) =>
if response.success
@rubric_wrapper.html(response.message)
else
@errors_area.html('There was an error saving your response.')

68
common/lib/xmodule/xmodule/self_assessment_module.py
View File

@@ -22,25 +22,22 @@ from .editing_module import EditingDescriptor
from .html_checker import check_html
from .stringify import stringify_children
from .x_module import XModule
from .xml_module import XmlDescriptor, name_to_pathname
from .xml_module import XmlDescriptor
from xmodule.modulestore import Location
from xmodule.contentstore.content import XASSET_SRCREF_PREFIX, StaticContent
log = logging.getLogger("mitx.courseware")
#Set the default number of max attempts. Should be 1 for production
#Set higher for debugging/testing
# Set the default number of max attempts. Should be 1 for production
# Set higher for debugging/testing
# attempts specified in xml definition overrides this.
MAX_ATTEMPTS = 1
#Set maximum available number of points. Should be set to 1 for now due to correctness handling,
# Set maximum available number of points. Should be set to 1 for now due to correctness handling,
# which only allows for correct/incorrect.
MAX_SCORE=1
MAX_SCORE = 1
class SelfAssessmentModule(XModule):
js = {'coffee': [resource_string(__name__, 'js/src/selfassessment/display.coffee')]
}
js = {'coffee': [resource_string(__name__, 'js/src/selfassessment/display.coffee')]}
js_module_name = "SelfAssessment"
def get_html(self):
@@ -85,17 +82,21 @@ class SelfAssessmentModule(XModule):
log.debug('Instance state of self-assessment module {0}: {1}'.format(location.url(), instance_state))
# Pull out state, or initialize variables
# lists of student answers, correctness responses ('incorrect'/'correct'), and suggested hints
# lists of student answers, correctness responses
# ('incorrect'/'correct'), and suggested hints
self.student_answers = instance_state.get('student_answers', [])
self.correctness = instance_state.get('correctness', [])
self.hints = instance_state.get('hints', [])
# Used to keep track of a submitted answer for which we don't have a self-assessment and hint yet:
# this means that the answers, correctness, hints always stay in sync, and have the same number of elements.
# Used to keep track of a submitted answer for which we don't have a
# self-assessment and hint yet: this means that the answers,
# correctness, hints always stay in sync, and have the same number of
# elements.
self.temp_answer = instance_state.get('temp_answer', '')
# Used for progress / grading. Currently get credit just for completion (doesn't matter if you self-assessed
# correct/incorrect).
# Used for progress / grading. Currently get credit just for
# completion (doesn't matter if you self-assessed correct/incorrect).
self.score = instance_state.get('score', 0)
self.top_score = instance_state.get('top_score', MAX_SCORE)
@@ -116,21 +117,15 @@ class SelfAssessmentModule(XModule):
#Determine if student has answered the question before. This is used to display
#a "previous answer" message to the student if they have.
previous_answer=''
if len(self.student_answers)>0:
previous_answer=self.student_answers[len(self.student_answers)-1]
previous_answer = self.student_answers[-1] if self.student_answers else ''
#set context variables and render template
self.context = {
context = {
'prompt' : self.prompt,
'rubric' : self.rubric,
'hint_prompt' : self.hint_prompt,
'previous_answer_given' : len(self.student_answers)>0,
'previous_answer' : previous_answer,
'ajax_url' : system.ajax_url,
'section_name' : 'sa-wrapper',
}
self.html = self.system.render_template('self_assessment_prompt.html', self.context)
self.html = self.system.render_template('self_assessment_prompt.html', context)
def get_score(self):
return {'score': self.score}
@@ -153,7 +148,7 @@ class SelfAssessmentModule(XModule):
def handle_ajax(self, dispatch, get):
'''
"""
This is called by courseware.module_render, to handle an AJAX call.
"get" is request.POST.
@@ -161,11 +156,11 @@ class SelfAssessmentModule(XModule):
{ 'progress_changed' : True/False,
'progress' : 'none'/'in_progress'/'done',
<other request-specific values here > }
'''
"""
handlers = {
'sa_show': self.show_rubric,
'sa_save': self.save_problem,
'show': self.show_rubric,
'save': self.save_problem,
}
if dispatch not in handlers:
@@ -182,21 +177,24 @@ class SelfAssessmentModule(XModule):
def show_rubric(self, get):
"""
After the prompt is submitted, show the rubric
After the answer is submitted, show the rubric.
"""
#Check to see if attempts are less than max
# Check to see if attempts are less than max
if(self.attempts < self.max_attempts):
# Dump to temp_answer to keep answer in sync with correctness and hint
self.temp_answer = get['student_answer']
#Return success and return rubric html to ajax call
# Return success and return rubric html to ajax call
rubric_context = {'rubric' : self.rubric,
'hint_prompt' : self.hint_prompt,}
return {
'success': True,
'rubric': self.system.render_template('self_assessment_rubric.html', self.context)
'rubric': self.system.render_template('self_assessment_rubric.html', rubric_context)
}
else:
#If too many attempts, prevent student from saving answer and seeing rubric.
return{
# If too many attempts, prevent student from saving answer and seeing rubric.
return {
'success': False,
'message': 'Too many attempts.'
}
@@ -221,7 +219,7 @@ class SelfAssessmentModule(XModule):
#Create and store event info dict
#Currently points are assigned for completion, so set to 1 instead of depending on correctness.
points=1
points = 1
event_info = dict()
event_info['state'] = {
'student_answers': self.student_answers,
@@ -315,4 +313,4 @@ class SelfAssessmentDescriptor(XmlDescriptor, EditingDescriptor):
for child in ['rubric', 'prompt', 'submitmessage', 'hintprompt']:
add_child(child)
return elt
return elt

25
lms/templates/self_assessment_prompt.html
View File

@@ -1,13 +1,14 @@
<section class="${ section_name }">
${ prompt }
% if previous_answer_given:
<br/>Previous answer: ${ previous_answer }<br/>
% endif
<textarea name="answer" id="answer" cols="50" rows="5"/>
<br/>
<input type="button" value="Check" id ="show" name="show"/>
<p id="rubric">
</p>
<input type="hidden" id="ajax_url" name="ajax_url" url="${ ajax_url }">
<section id="self_assessment_${id}" class="self-assessment" data-ajax-url="${ajax_url}" data-id="${id}">
<div class="error"></div>
<div class="prompt">
${prompt}
</div>
<div>
<textarea name="answer" class="answer" cols="80" rows="20">${previous_answer|h}</textarea>
</div>
<div class="rubric-wrapper"></div>
<input type="button" value="Submit" class="submit-button" name="show"/>
</section>
<br/><br/>

29
lms/templates/self_assessment_rubric.html
View File

@@ -1,17 +1,18 @@
<section class="${section_name}">
<br/><br/><b>Rubric</b>
${ rubric }
Please assess your performance given the above rubric: <br/>
<select name="assessment" id="assessment">
<div class="assessment">
<div class="rubric">
<h3>Self-assess your answer with this rubric:</h3>
${rubric}
</div>
<select name="assessment" class="assessment">
<option value="incorrect">Incorrect</option>
<option value="correct">Correct</option>
</select>
<br/>
${ hint_prompt }
<textarea name="hint" id="hint" cols="50" rows="5"/>
<br/>
<input type="button" value="Save" id="save" name="save"/>
<p id="save_message"></p>
<input type="hidden" id="ajax_url" name="ajax_url" url="${ ajax_url}">
</section>
<br/><br/>
<div class="hint-prompt">
${hint_prompt}
</div>
<textarea name="hint" class="hint" cols="50" rows="5"/>
<div class="save_message"></div>
</div>