Skip to content

E
edx-platform
Commit f2eb6656 by Tom Giannattasio
Options

cheatsheet and advanced settings added

parent 44fb9561
Showing with 245 additions and 15 deletions
cms/static/coffee/src/views/unit.coffee
...@@ -84,8 +84,6 @@ class CMS.Views.UnitEdit extends Backbone.View ...@@ -84,8 +84,6 @@ class CMS.Views.UnitEdit extends Backbone.View
event.preventDefault() event.preventDefault()
@$componentItem = $('<li>').addClass('editing') @$componentItem = $('<li>').addClass('editing')
$modalCover.show()
$modalCover.bind('click', @closeEditor)
type = $(event.currentTarget).data('type') type = $(event.currentTarget).data('type')
switch type switch type
...@@ -97,23 +95,27 @@ class CMS.Views.UnitEdit extends Backbone.View ...@@ -97,23 +95,27 @@ class CMS.Views.UnitEdit extends Backbone.View
$preview = $($('#problem-preview').html()) $preview = $($('#problem-preview').html())
initProblemEditors(@$editor, $preview) initProblemEditors(@$editor, $preview)
@$editor.find('.save-button').bind('click', => @$editor.find('.save-button, .cancel-button').bind('click', =>
@$componentItem.removeClass('editing') @$componentItem.removeClass('editing')
@closeEditor() @closeEditor()
) )
$componentActions = $($('#component-actions').html()); $componentActions = $($('#component-actions').html())
@$componentItem.append(@$editor) @$componentItem.append(@$editor)
@$componentItem.append($preview) @$componentItem.append($preview)
@$componentItem.append($componentActions); @$componentItem.append($componentActions)
@$componentItem.hide()
@$newComponentItem.before(@$componentItem) @$newComponentItem.before(@$componentItem)
@$componentItem.slideDown(200)
$modalCover.fadeIn(200)
$modalCover.bind('click', @closeEditor)
closeEditor: (event) => closeEditor: (event) =>
console.log('close') @$editor.slideUp(150)
$modalCover.hide() $modalCover.fadeOut(150)
$modalCover.unbind('click', @closeEditor) $modalCover.unbind('click', @closeEditor)
@$editor.remove() @$editor.slideUp(150)
@$componentItem.removeClass('editing') @$componentItem.removeClass('editing')
saveNewComponent: (event) => saveNewComponent: (event) =>
......
cms/static/js/speed-editor.js
var $body; var $body;
var $preview; var $preview;
var $tooltip; var $tooltip;
var $cheatsheet;
var $currentEditor;
var simpleEditor; var simpleEditor;
var xmlEditor; var xmlEditor;
var currentEditor; var currentEditor;
...@@ -8,7 +10,18 @@ var controlDown; ...@@ -8,7 +10,18 @@ var controlDown;
var commandDown; var commandDown;
(function() {
$body = $('body');
$body.on('click', '.editor-bar a', onEditorButton);
$body.on('click', '.editor-tabs .tab', setEditorTab);
$body.on('click', '.cheatsheet-toggle', toggleCheatsheet);
$body.on('click', '.problem-settings-button', toggleProblemSettings);
$(document).bind('keyup', onKeyboard);
})();
function initProblemEditors($editor, $prev) { function initProblemEditors($editor, $prev) {
$currentEditor = $editor;
simpleEditor = CodeMirror.fromTextArea($editor.find('.edit-box')[0], { simpleEditor = CodeMirror.fromTextArea($editor.find('.edit-box')[0], {
lineWrapping: true, lineWrapping: true,
extraKeys: { extraKeys: {
...@@ -40,10 +53,35 @@ function initProblemEditors($editor, $prev) { ...@@ -40,10 +53,35 @@ function initProblemEditors($editor, $prev) {
$(simpleEditor.getWrapperElement()).bind('click', setFocus); $(simpleEditor.getWrapperElement()).bind('click', setFocus);
$preview = $prev.find('.problem'); $preview = $prev.find('.problem');
}
$body.on('click', '.editor-bar a', onEditorButton); function toggleProblemSettings(e) {
$body.on('click', '.editor-tabs a', setEditorTab); e.preventDefault();
$(document).bind('keyup', onKeyboard);
$(this).toggleClass('is-open');
if($(this).hasClass('is-open')) {
$(this).find('.button-label').html('Hide Advanced Settings');
$('.problem-settings').slideDown(150);
} else {
$(this).find('.button-label').html('Show Advanced Settings');
$('.problem-settings').slideUp(150);
}
}
function toggleCheatsheet(e) {
e.preventDefault();
console.log('bam');
if(!$currentEditor.find('.simple-editor-cheatsheet')[0]) {
$cheatsheet = $($('#simple-editor-cheatsheet').html());
$currentEditor.append($cheatsheet);
}
setTimeout(function() {
$cheatsheet.toggleClass('shown');
}, 10);
} }
function setEditorTab(e) { function setEditorTab(e) {
......
cms/static/sass/_graphics.scss
...@@ -309,6 +309,14 @@ ...@@ -309,6 +309,14 @@
background-position: -220px 0; background-position: -220px 0;
} }
.settings-icon {
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
background: url(../img/problem-settings-icon.png) no-repeat;
}
......
cms/static/sass/_unit.scss
...@@ -228,7 +228,12 @@ ...@@ -228,7 +228,12 @@
.editor { .editor {
background: $blue; background: $blue;
padding: 20px; padding: 20px;
border-radius: 3px 3px 0 0;
h5 {
color: #fff;
margin-bottom: 20px;
font-weight: 700;
}
label { label {
display: inline-block; display: inline-block;
...@@ -272,6 +277,22 @@ ...@@ -272,6 +277,22 @@
border-color: #3c3c3c; border-color: #3c3c3c;
} }
.problem-settings-button {
@include blue-button;
@include box-sizing(border-box);
width: 100%;
padding: 12px 0 14px;
text-align: center;
&.is-open {
border-radius: 0 0 3px 3px;
}
.settings-icon {
margin-right: 10px;
}
}
.editor-bar { .editor-bar {
position: relative; position: relative;
@include linear-gradient(top, #d4dee8, #c9d5e2); @include linear-gradient(top, #d4dee8, #c9d5e2);
...@@ -302,7 +323,7 @@ ...@@ -302,7 +323,7 @@
float: left; float: left;
} }
a { .tab {
height: 24px; height: 24px;
padding: 7px 20px 3px; padding: 7px 20px 3px;
border: 1px solid #a5aaaf; border: 1px solid #a5aaaf;
...@@ -318,8 +339,31 @@ ...@@ -318,8 +339,31 @@
border-bottom-color: #fff; border-bottom-color: #fff;
} }
} }
.cheatsheet-toggle {
width: 21px;
height: 21px;
padding: 0;
margin: 3px 5px 0 16px;
border-radius: 22px;
border: 1px solid #a5aaaf;
background: #e5ecf3;
font-size: 13px;
font-weight: 700;
color: #565d64;
text-align: center;
} }
} }
}
.problem-settings {
display: none;
padding: 20px 30px;
background: rgba(0, 0, 0, .1);
border: 1px solid #437fbf;
border-bottom: none;
border-radius: 3px 3px 0 0;
}
.CodeMirror { .CodeMirror {
font-size: 13px; font-size: 13px;
...@@ -576,3 +620,61 @@ ...@@ -576,3 +620,61 @@
display: none; display: none;
} }
} }
.simple-editor-cheatsheet {
position: absolute;
top: 0;
left: 100%;
width: 0;
border-radius: 0 3px 3px 0;
@include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 15px);
background-color: #fff;
overflow: hidden;
@include transition(width .3s);
&.shown {
width: 300px;
}
.cheatsheet-wrapper {
width: 240px;
padding: 20px 30px;
}
h6 {
margin-bottom: 7px;
font-size: 15px;
font-weight: 700;
}
.row {
@include clearfix;
padding-bottom: 5px !important;
margin-bottom: 10px !important;
border-bottom: 1px solid #ddd !important;
&:last-child {
border-bottom: none !important;
margin-bottom: 0 !important;
}
}
.col {
float: left;
&.sample {
width: 60px;
margin-right: 30px;
}
}
pre {
font-size: 12px;
line-height: 18px;
}
code {
padding: 0;
background: none;
}
}
\ No newline at end of file
cms/templates/unit.html
...@@ -16,6 +16,62 @@ ...@@ -16,6 +16,62 @@
<script src="/static/js/speed-editor.js"></script> <script src="/static/js/speed-editor.js"></script>
<script type="text/template" id="simple-editor-cheatsheet">
<article class="simple-editor-cheatsheet">
<div class="cheatsheet-wrapper">
<div class="row">
<h6>Multiple Choice</h6>
<div class="col sample">
<img src="/static/img/choice-example.png" />
</div>
<div class="col">
<pre><code>( ) red
( ) green
(x) blue</code></pre>
</div>
</div>
<div class="row">
<h6>Multiple Check</h6>
<div class="col sample">
<img src="/static/img/multi-example.png" />
</div>
<div class="col">
<pre><code>[ ] earth
[ ] wind
[x] water</code></pre>
</div>
</div>
<div class="row">
<h6>String Response</h6>
<div class="col sample">
<img src="/static/img/string-example.png" />
</div>
<div class="col">
<pre><code>___[dog]</code></pre>
</div>
</div>
<div class="row">
<h6>Numerical Response</h6>
<div class="col sample">
<img src="/static/img/number-example.png" />
</div>
<div class="col">
<pre><code>###[3.14]</code></pre>
</div>
</div>
<div class="row">
<h6>Option Response</h6>
<div class="col sample">
<img src="/static/img/select-example.png" />
</div>
<div class="col">
<pre><code>[[wrong, (right)]]</code></pre>
</div>
</div>
</div>
</article>
</script>
<script type="text/template" id="component-actions"> <script type="text/template" id="component-actions">
<div class="component-actions"> <div class="component-actions">
<a href="#" class="edit-button"><span class="edit-icon white"></span>Edit</a> <a href="#" class="edit-button"><span class="edit-icon white"></span>Edit</a>
...@@ -36,14 +92,37 @@ ...@@ -36,14 +92,37 @@
<li><a href="#" class="dropdown-button" data-tooltip="Dropdown"><span class="problem-editor-icon dropdown"></span></a></li> <li><a href="#" class="dropdown-button" data-tooltip="Dropdown"><span class="problem-editor-icon dropdown"></span></a></li>
</ul> </ul>
<ul class="editor-tabs"> <ul class="editor-tabs">
<li><a href="#" class="simple-tab current">Simple</a></li> <li><a href="#" class="simple-tab tab current">Simple</a></li>
<li><a href="#" class="xml-tab">XML</a></li> <li><a href="#" class="xml-tab tab">XML</a></li>
<li><a href="#" class="cheatsheet-toggle" data-tooltip="Toggle Cheatsheet">?</a></li>
</ul> </ul>
</div> </div>
<textarea class="edit-box"></textarea> <textarea class="edit-box"></textarea>
<textarea class="xml-box"></textarea> <textarea class="xml-box"></textarea>
</div> </div>
<div class="row"> <div class="row">
<div class="problem-settings">
<div class="row">
<label>Show Answer:</label>
<select>
<option>attempted</option>
<option>always</option>
<option>never</option>
<option>closed</option>
</select>
</div>
<div class="row">
<label>Rerandomize:</label>
<select>
<option>always</option>
<option>never</option>
<option>per_student</option>
</select>
</div>
</div>
<a href="#" class="problem-settings-button"><span class="settings-icon"></span><span class="button-label">Show Advanced Settings</span></a>
</div>
<div class="row">
<a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a> <a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
</div> </div>
</div> </div>
......
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