Skip to content

E
edx-platform
Commit 05da125a by kimth
Options

Merge pull request #600 from MITx/feature/kfiedler/hints 

Added styles for problems
parents 20e48e66 440539c0
Showing with 259 additions and 38 deletions
common/lib/capa/capa/templates/filesubmission.html
<section id="filesubmission_${id}" class="filesubmission"> <section id="filesubmission_${id}" class="filesubmission">
<input type="file" name="input_${id}" id="input_${id}" value="${value}" multiple="multiple" data-required_files="${required_files}" data-allowed_files="${allowed_files}"/><br /> <div class="grader-status file">
% if state == 'unsubmitted': % if state == 'unsubmitted':
<span class="unanswered" style="display:inline-block;" id="status_${id}"></span> <span class="unanswered" style="display:inline-block;" id="status_${id}">Unanswered</span>
% elif state == 'correct': % elif state == 'correct':
<span class="correct" id="status_${id}"></span> <span class="correct" id="status_${id}">Correct</span>
% elif state == 'incorrect': % elif state == 'incorrect':
<span class="incorrect" id="status_${id}"></span> <span class="incorrect" id="status_${id}">Incorrect</span>
% elif state == 'queued': % elif state == 'queued':
<span class="processing" id="status_${id}"></span> <span class="processing" id="status_${id}">Queued</span>
<span style="display:none;" class="xqueue" id="${id}" >${queue_len}</span> <span style="display:none;" class="xqueue" id="${id}" >${queue_len}</span>
% endif % endif
<span style="display:none;" class="debug">(${state})</span> <p class="debug">${state}</p>
<br/>
<span class="message">${msg|n}</span> <input type="file" name="input_${id}" id="input_${id}" value="${value}" multiple="multiple" data-required_files="${required_files}" data-allowed_files="${allowed_files}"/>
<br/> </div>
<div class="message">${msg|n}</div>
</section> </section>
common/lib/capa/capa/templates/textbox.html
...@@ -7,26 +7,28 @@ ...@@ -7,26 +7,28 @@
<span id="answer_${id}"></span> <span id="answer_${id}"></span>
% if state == 'unsubmitted': <div class="grader-status">
<span class="unanswered" style="display:inline-block;" id="status_${id}"></span> % if state == 'unsubmitted':
% elif state == 'correct': <span class="unanswered" style="display:inline-block;" id="status_${id}">Unanswered</span>
<span class="correct" id="status_${id}"></span> % elif state == 'correct':
% elif state == 'incorrect': <span class="correct" id="status_${id}">Correct</span>
<span class="incorrect" id="status_${id}"></span> % elif state == 'incorrect':
% elif state == 'queued': <span class="incorrect" id="status_${id}">Incorrect</span>
<span class="processing" id="status_${id}"></span> % elif state == 'queued':
<span style="display:none;" class="xqueue" id="${id}" >${queue_len}</span> <span class="processing" id="status_${id}">Queued</span>
% endif <span style="display:none;" class="xqueue" id="${id}" >${queue_len}</span>
% if hidden: % endif
<div style="display:none;" name="${hidden}" inputid="input_${id}" />
% endif
<br/>
<span style="display:none;" class="debug">(${state})</span>
<br/>
<span class="message">${msg|n}</span>
<br/>
<br/> % if hidden:
<div style="display:none;" name="${hidden}" inputid="input_${id}" />
% endif
<p class="debug">${state}</p>
</div>
<div class="external-grader-message">
${msg|n}
</div>
<script> <script>
// Note: We need to make the area follow the CodeMirror for this to work. // Note: We need to make the area follow the CodeMirror for this to work.
...@@ -45,12 +47,4 @@ ...@@ -45,12 +47,4 @@
}); });
}); });
</script> </script>
<style type="text/css">
.CodeMirror {
border: 1px solid black;
font-size: 14px;
line-height: 18px;
resize: both;
}
</style>
</section> </section>
common/lib/xmodule/xmodule/css/capa/display.scss
...@@ -16,6 +16,7 @@ h2 { ...@@ -16,6 +16,7 @@ h2 {
} }
} }
section.problem { section.problem {
@media print { @media print {
display: block; display: block;
...@@ -171,8 +172,54 @@ section.problem { ...@@ -171,8 +172,54 @@ section.problem {
top: 6px; top: 6px;
} }
} }
.grader-status {
padding: 9px;
background: #F6F6F6;
border: 1px solid #ddd;
border-top: 0;
margin-bottom: 20px;
@include clearfix;
span {
text-indent: -9999px;
overflow: hidden;
display: block;
float: left;
margin: -7px 7px 0 0;
}
p {
line-height: 20px;
text-transform: capitalize;
margin-bottom: 0;
float: left;
}
&.file {
background: #FFF;
margin-top: 20px;
padding: 20px 0 0 0;
border: {
top: 1px solid #eee;
right: 0;
bottom: 0;
left: 0;
}
p.debug {
display: none;
}
input {
float: left;
}
}
}
} }
ul { ul {
list-style: disc outside none; list-style: disc outside none;
margin-bottom: lh(); margin-bottom: lh();
...@@ -246,6 +293,69 @@ section.problem { ...@@ -246,6 +293,69 @@ section.problem {
} }
code {
margin: 0 2px;
padding: 0px 5px;
white-space: nowrap;
border: 1px solid #EAEAEA;
background-color: #F8F8F8;
@include border-radius(3px);
font-size: .9em;
}
pre {
background-color: #F8F8F8;
border: 1px solid #CCC;
font-size: .9em;
line-height: 1.4;
overflow: auto;
padding: 6px 10px;
@include border-radius(3px);
> code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}
}
.CodeMirror {
border: 1px solid black;
font-size: 14px;
line-height: 18px;
resize: both;
pre {
@include border-radius(0);
border-radius: 0;
border-width: 0;
margin: 0;
padding: 0;
background: transparent;
font-family: inherit;
font-size: inherit;
white-space: pre;
word-wrap: normal;
overflow: hidden;
resize: none;
&.CodeMirror-cursor {
z-index: 10;
position: absolute;
visibility: hidden;
border-left: 1px solid black;
border-right: none;
width: 0;
}
}
}
.CodeMirror-focused pre.CodeMirror-cursor {
visibility: visible;
}
hr { hr {
background: #ddd; background: #ddd;
border: none; border: none;
...@@ -280,4 +390,96 @@ section.problem { ...@@ -280,4 +390,96 @@ section.problem {
@extend .blue-button; @extend .blue-button;
} }
} }
div.capa_alert {
padding: 8px 12px;
border: 1px solid #EBE8BF;
border-radius: 3px;
background: #FFFCDD;
font-size: 0.9em;
margin-top: 10px;
}
.hints {
border: 1px solid #ccc;
h3 {
border-bottom: 1px solid #e3e3e3;
text-shadow: 0 1px 0 #fff;
padding: 9px;
background: #eee;
font-weight: bold;
font-size: em(16);
}
div {
border-bottom: 1px solid #ddd;
&:last-child {
border-bottom: none;
}
p {
margin-bottom: 0;
}
header {
a {
display: block;
padding: 9px;
background: #F6F6F6;
@include box-shadow(inset 0 0 0 1px #fff);
}
}
section {
padding: 9px;
}
}
}
.test {
padding-top: 18px;
header {
margin-bottom: 12px;
h3 {
font-size: 0.9em;
font-weight: bold;
font-style: normal;
text-transform: uppercase;
color: #AAA;
}
}
> section {
border: 1px solid #ddd;
padding: 9px 9px 20px;
margin-bottom: 10px;
background: #FFF;
position: relative;
@include box-shadow(inset 0 0 0 1px #eee);
@include border-radius(3px);
p:last-of-type {
margin-bottom: 0;
}
.shortform {
margin-bottom: .6em;
}
a.full {
@include position(absolute, 0 0 1px 0px);
font-size: .8em;
padding: 4px;
text-align: right;
width: 100%;
display: block;
background: #F3F3F3;
@include box-sizing(border-box);
}
}
}
} }
common/lib/xmodule/xmodule/js/src/capa/display.coffee
...@@ -263,8 +263,8 @@ class @Problem ...@@ -263,8 +263,8 @@ class @Problem
@el.find('.capa_alert').remove() @el.find('.capa_alert').remove()
alert_elem = "<div class='capa_alert'>" + msg + "</div>" alert_elem = "<div class='capa_alert'>" + msg + "</div>"
@el.find('.action').after(alert_elem) @el.find('.action').after(alert_elem)
@el.find('.capa_alert').animate(opacity: 0, 500).animate(opacity: 1, 500) @el.find('.capa_alert').css(opacity: 0).animate(opacity: 1, 700)
save: => save: =>
Logger.log 'problem_save', @answers Logger.log 'problem_save', @answers
$.postWithPrefix "#{@url}/problem_save", @answers, (response) => $.postWithPrefix "#{@url}/problem_save", @answers, (response) =>
......
lms/templates/problem.html
...@@ -32,3 +32,27 @@ ...@@ -32,3 +32,27 @@
</section> </section>
</section> </section>
<%block name="js_extra">
<script type="text/javascript" charset="utf-8">
$(function(){
// this should be brought back into problems
$('.longform').hide();
$('.shortform').append('<a href="#" class="full">See full output</a>');
$('.full').click(function() {
$(this).parent().siblings().slideToggle();
$(this).parent().parent().toggleClass('open');
var text = $(this).text() == 'See full output' ? 'Hide output' : 'See full output';
$(this).text(text);
return false;
});
$('.collapsible section').hide()
$('.collapsible header a').click(function() {
$(this).parent().siblings().slideToggle();
$(this).parent().parent().toggleClass('open');
return false
});
});
</script>
</%block>
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