Added styling to the annotationinput capa problem.

This commit is contained in:
Arthur Barrett
2013-02-21 13:52:22 -05:00
parent cc7f791078
commit a8178de497
5 changed files with 109 additions and 59 deletions

View File

@@ -970,6 +970,7 @@ class AnnotationInput(InputTypeBase):
def setup(self):
xml = self.xml
self.title = xml.findtext('./title', 'Annotation Exercise')
self.text = xml.findtext('./text')
self.comment_prompt = xml.findtext('./comment_prompt')
self.tag_prompt = xml.findtext('./tag_prompt')
@@ -981,15 +982,15 @@ class AnnotationInput(InputTypeBase):
for option in self.xml.findall('./options/option'):
options.append({
'id': index,
'tag': option.text,
'description': option.get('description', ''),
'description': option.text,
'score': option.get('score', 0)
})
index += 1
return options
def _extra_context(self):
return {'text': self.text,
return {'title': self.title,
'text': self.text,
'comment_prompt': self.comment_prompt,
'tag_prompt': self.tag_prompt,
'options': self.options}

View File

@@ -1,34 +1,36 @@
<form class="annotation-input">
TODO: make the textline hidden once it all works
<div class="script_placeholder" data-src="/static/js/capa/annotationinput.js"/>
<p>Text: ${text}</p>
<div class="header">${title}</div>
<div class="body">
<div class="prompt prompt-text">${text}</div>
<div class="prompt">${comment_prompt}</div>
<textarea id="input_${id}_comment" name="input_${id}_comment"/>
<div class="prompt">${tag_prompt}</div>
<ul class="tags">
% for option in options:
<li data-id="${option['id']}"><span>${option['description']}</span></li>
% endfor
</ul>
<p>Comment prompt: ${comment_prompt}</p>
<!--
<textarea id="input_${id}_comment" name="input_${id}_comment"/>
Value: ${value} <input type="text" style="" name="input_${id}" id="input_${id}"/>
TODO: make the textline hidden once it all works
<span id="answer_${id}"></span>
<p>Tag prompt: ${tag_prompt}</p>
% if status == 'unsubmitted':
<span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
% elif status == 'correct':
<span class="correct" id="status_${id}"></span>
% elif status == 'incorrect':
<span class="incorrect" id="status_${id}"></span>
% elif status == 'incomplete':
<span class="incorrect" id="status_${id}"></span>
% endif
<input type="text" style="" name="input_${id}" id="input_${id}"/>
Value: ${value}
% for option in options:
<p>${option['id']}, ${option['tag']}, ${option['description']}, ${option['score']}</p>
% endfor
<span id="answer_${id}"></span>
% if status == 'unsubmitted':
<span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
% elif status == 'correct':
<span class="correct" id="status_${id}"></span>
% elif status == 'incorrect':
<span class="incorrect" id="status_${id}"></span>
% elif status == 'incomplete':
<span class="incorrect" id="status_${id}"></span>
% endif
-->
</div>
</form>
% if msg: