From 3be48e5012e0bdffd94f510128f5d5f035ae9555 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Thu, 23 Aug 2012 16:12:09 -0400
Subject: [PATCH] Formatted new hints and testing blocks
---
common/lib/capa/capa/templates/textbox.html | 69 ++++++----
.../lib/xmodule/xmodule/css/capa/display.scss | 130 +++++++++++++++++-
2 files changed, 170 insertions(+), 29 deletions(-)
diff --git a/common/lib/capa/capa/templates/textbox.html b/common/lib/capa/capa/templates/textbox.html
index 19c43482a87..7800e6031e1 100644
--- a/common/lib/capa/capa/templates/textbox.html
+++ b/common/lib/capa/capa/templates/textbox.html
@@ -7,26 +7,28 @@
<span id="answer_${id}"></span>
- % if state == 'unsubmitted':
- <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
- % elif state == 'correct':
- <span class="correct" id="status_${id}"></span>
- % elif state == 'incorrect':
- <span class="incorrect" id="status_${id}"></span>
- % elif state == 'queued':
- <span class="processing" id="status_${id}"></span>
- <span style="display:none;" class="xqueue" id="${id}" >${queue_len}</span>
- % endif
- % if hidden:
- <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/>
+ <div class="grader-status">
+ % if state == 'unsubmitted':
+ <span class="unanswered" style="display:inline-block;" id="status_${id}">Unanswered</span>
+ % elif state == 'correct':
+ <span class="correct" id="status_${id}">Correct</span>
+ % elif state == 'incorrect':
+ <span class="incorrect" id="status_${id}">Incorrect</span>
+ % elif state == 'queued':
+ <span class="processing" id="status_${id}">Queued</span>
+ <span style="display:none;" class="xqueue" id="${id}" >${queue_len}</span>
+ % endif
+
+ % 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>
// Note: We need to make the area follow the CodeMirror for this to work.
@@ -43,14 +45,25 @@
indentWithTabs: true,
smartIndent: false
});
+
+ // this should be brought back into problems
+ $('.longform-body').hide();
+ $('.longform-header').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>
- <style type="text/css">
- .CodeMirror {
- border: 1px solid black;
- font-size: 14px;
- line-height: 18px;
- resize: both;
- }
- </style>
</section>
diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss
index e7b2250f026..cca951ce08e 100644
--- a/common/lib/xmodule/xmodule/css/capa/display.scss
+++ b/common/lib/xmodule/xmodule/css/capa/display.scss
@@ -16,6 +16,7 @@ h2 {
}
}
+
section.problem {
@media print {
display: block;
@@ -171,6 +172,30 @@ section.problem {
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;
+ }
+ }
}
ul {
@@ -246,6 +271,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 {
background: #ddd;
border: none;
@@ -308,7 +396,7 @@ section.problem {
a {
display: block;
padding: 9px;
- background: #f3f3f3;
+ background: #F6F6F6;
@include box-shadow(inset 0 0 0 1px #fff);
}
}
@@ -318,4 +406,44 @@ section.problem {
}
}
}
+
+ .test {
+ border-top: 1px solid #aaa;
+ padding-top: 18px;
+
+ header {
+ margin-bottom: 12px;
+ }
+
+ .shortform, .longform {
+ border: 1px solid #d3d3d3;
+ padding: 9px;
+ margin-bottom: 12px;
+ @include box-shadow(inset 0 0 0 1px #f3f3f3);
+
+ p:last-of-type {
+ margin-bottom: 0;
+ }
+ }
+
+ a.full {
+ @include position(absolute, 0 0 0px 0px);
+ font-size: .8em;
+ padding: 4px;
+ text-align: right;
+ width: 100%;
+ display: block;
+ background: #F3F3F3;
+ @include box-sizing(border-box);
+ }
+
+ .longform {
+ position: relative;
+ padding-bottom: 20px;
+ }
+
+ .longform-header {
+ margin-bottom: lh();
+ }
+ }
}
--
GitLab