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
event.preventDefault()
@$componentItem = $('<li>').addClass('editing')
$modalCover.show()
$modalCover.bind('click', @closeEditor)
type = $(event.currentTarget).data('type')
switch type
......@@ -97,23 +95,27 @@ class CMS.Views.UnitEdit extends Backbone.View
$preview = $($('#problem-preview').html())
initProblemEditors(@$editor, $preview)
@$editor.find('.save-button').bind('click', =>
@$editor.find('.save-button, .cancel-button').bind('click', =>
@$componentItem.removeClass('editing')
@closeEditor()
)
$componentActions = $($('#component-actions').html());
$componentActions = $($('#component-actions').html())
@$componentItem.append(@$editor)
@$componentItem.append($preview)
@$componentItem.append($componentActions);
@$componentItem.append($componentActions)
@$componentItem.hide()
@$newComponentItem.before(@$componentItem)
@$componentItem.slideDown(200)
$modalCover.fadeIn(200)
$modalCover.bind('click', @closeEditor)
closeEditor: (event) =>
console.log('close')
$modalCover.hide()
@$editor.slideUp(150)
$modalCover.fadeOut(150)
$modalCover.unbind('click', @closeEditor)
@$editor.remove()
@$editor.slideUp(150)
@$componentItem.removeClass('editing')
saveNewComponent: (event) =>
......
cms/static/js/speed-editor.js
var $body;
var $preview;
var $tooltip;
var $cheatsheet;
var $currentEditor;
var simpleEditor;
var xmlEditor;
var currentEditor;
......@@ -8,7 +10,18 @@ var controlDown;
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) {
$currentEditor = $editor;
simpleEditor = CodeMirror.fromTextArea($editor.find('.edit-box')[0], {
lineWrapping: true,
extraKeys: {
......@@ -40,10 +53,35 @@ function initProblemEditors($editor, $prev) {
$(simpleEditor.getWrapperElement()).bind('click', setFocus);
$preview = $prev.find('.problem');
}
$body.on('click', '.editor-bar a', onEditorButton);
$body.on('click', '.editor-tabs a', setEditorTab);
$(document).bind('keyup', onKeyboard);
function toggleProblemSettings(e) {
e.preventDefault();
$(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) {
......
cms/static/sass/_graphics.scss
......@@ -309,6 +309,14 @@
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 @@
.editor {
background: $blue;
padding: 20px;
border-radius: 3px 3px 0 0;
h5 {
color: #fff;
margin-bottom: 20px;
font-weight: 700;
}
label {
display: inline-block;
......@@ -272,6 +277,22 @@
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 {
position: relative;
@include linear-gradient(top, #d4dee8, #c9d5e2);
......@@ -302,7 +323,7 @@
float: left;
}
a {
.tab {
height: 24px;
padding: 7px 20px 3px;
border: 1px solid #a5aaaf;
......@@ -318,9 +339,32 @@
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 {
font-size: 13px;
border: 1px solid #3c3c3c;
......@@ -576,3 +620,61 @@
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 @@
<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">
<div class="component-actions">
<a href="#" class="edit-button"><span class="edit-icon white"></span>Edit</a>
......@@ -36,14 +92,37 @@
<li><a href="#" class="dropdown-button" data-tooltip="Dropdown"><span class="problem-editor-icon dropdown"></span></a></li>
</ul>
<ul class="editor-tabs">
<li><a href="#" class="simple-tab current">Simple</a></li>
<li><a href="#" class="xml-tab">XML</a></li>
<li><a href="#" class="simple-tab tab current">Simple</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>
</div>
<textarea class="edit-box"></textarea>
<textarea class="xml-box"></textarea>
</div>
<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>
</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