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

Added styling to the annotationinput capa problem.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

7
common/lib/capa/capa/inputtypes.py
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}

50
common/lib/capa/capa/templates/annotationinput.html
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:

65
common/lib/xmodule/xmodule/css/annotatable/display.scss
View File

@@ -66,56 +66,57 @@
.annotatable-discussion {
display: none;
}
}
.annotatable-problem {
.annotatable-problem {
border: 1px solid #ccc;
border-radius: 1em;
margin: 0 0 1em 0;
}
.annotatable-problem-header {
}
.annotatable-problem-header {
font-weight: bold;
border-bottom: 1px solid #ccc;
.annotatable-problem-index { font-weight: normal; }
}
.annotatable-problem-body {
}
.annotatable-problem-body {
position: relative;
textarea {
display: inline-block;
width: 55%;
}
display: inline-block;
width: 55%;
}
.annotatable-problem-prompt {
font-style: italic;
font-style: italic;
}
ul.annotatable-problem-tags {
display: block;
list-style-type: none;
margin: 1em 0;
padding: 0;
li {
cursor: pointer;
display: inline;
padding: .5em;
margin: 0 .5em 0 0;
background-color: #ccc;
border: 1px solid #000;
&.selected {
background-color: rgba(255,255,10,0.3);
}
display: block;
list-style-type: none;
margin: 1em 0;
padding: 0;
li {
cursor: pointer;
display: inline;
padding: .5em;
margin: 0 .5em 0 0;
background-color: #ccc;
border: 1px solid #000;
&.selected {
background-color: rgba(255,255,10,0.3);
}
}
}
.annotatable-problem-controls {
display: inline-block;
margin: 0 4px 0 8px;
.annotatable-problem-controls {
display: inline-block;
margin: 0 4px 0 8px;
}
}
.annotatable-problem-footer {}
}
.annotatable-problem-footer {}
.annotatable-problem-header,
.annotatable-problem-body,
.annotatable-problem-footer {
.annotatable-problem-header,
.annotatable-problem-body,
.annotatable-problem-footer {
padding: .5em 1em;
}
}
.ui-tooltip.qtip.ui-tooltip {
font-size: $body-font-size;
border: 1px solid #333;

45
common/lib/xmodule/xmodule/css/capa/display.scss
View File

@@ -802,4 +802,49 @@ section.problem {
display: none;
}
}
.annotation-input {
$yellow: rgba(255,255,10,0.3);
border: 1px solid #ccc;
border-radius: 1em;
margin: 0 0 1em 0;
.header {
font-weight: bold;
border-bottom: 1px solid #ccc;
padding: .5em 1em;
}
.body { padding: .5em 1em; }
.prompt { font-style: italic; }
.prompt.prompt-text {
padding: .5em;
color: #333;
background-color: $yellow;
font-style: normal;
border: 1px solid darken($yellow, 10%);
}
.prompt, ul.tags {
margin: .5em 0;
padding: 0;
}
ul.tags {
display: block;
list-style-type: none;
margin-left: 1em;
li {
display: block;
margin: 1em 0 0 1.5em;
span {
cursor: pointer;
display: inline-block;
padding: .25em .5em;
border: 1px solid rgb(102,102,102);
&.selected {
background-color: $yellow;
}
}
}
}
textarea { width: 100%; }
}
}

1
common/static/js/capa/annotationinput.js
View File

@@ -1,4 +1,5 @@
(function () {
console.log('annotation input loaded: ', this);
var update = function() {
alert("o hi");
};