Do basic work on a simple editor for combinedopenended
This commit is contained in:
Vik Paruchuri
67
cms/templates/widgets/open-ended-edit.html
Normal file
67
cms/templates/widgets/open-ended-edit.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<%include file="metadata-edit.html" />
|
||||
<section class="combinedopenended-editor editor">
|
||||
<div class="row">
|
||||
%if enable_markdown:
|
||||
<div class="editor-bar">
|
||||
<ul class="format-buttons">
|
||||
<li><a href="#" class="prompt-button" data-tooltip="Prompt"><span
|
||||
class="combinedopenended-editor-icon explanation"></span></a></li>
|
||||
<li><a href="#" class="rubric-button" data-tooltip="Rubric"><span
|
||||
class="combinedopenended-editor-icon multiple-choice"></span></a></li>
|
||||
<li><a href="#" class="tasks-button" data-tooltip="Tasks"><span
|
||||
class="combinedopenended-editor-icon dropdown"></span></a></li>
|
||||
</ul>
|
||||
<ul class="editor-tabs">
|
||||
<li><a href="#" class="xml-tab advanced-toggle" data-tab="xml">Advanced Editor</a></li>
|
||||
<li><a href="#" class="cheatsheet-toggle" data-tooltip="Toggle Cheatsheet">?</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<textarea class="markdown-box">${markdown | h}</textarea>
|
||||
%endif
|
||||
<textarea class="xml-box" rows="8" cols="40">${data | h}</textarea>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/template" id="simple-editor-cheatsheet">
|
||||
<article class="simple-editor-cheatsheet">
|
||||
<div class="cheatsheet-wrapper">
|
||||
<div class="row">
|
||||
<h6>Heading 1</h6>
|
||||
<div class="col sample heading-1">
|
||||
<img src="/static/img/header-example.png" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<pre><code>H1
|
||||
=====
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h6>Prompt</h6>
|
||||
<div class="col prompt">
|
||||
</div>
|
||||
<div class="col">
|
||||
<pre><code>[explanation] A short explanation of the answer. [explanation]</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h6>Rubric</h6>
|
||||
<div class="col sample rubric"><!DOCTYPE html>
|
||||
</div>
|
||||
<div class="col">
|
||||
<pre><code>( ) red
|
||||
( ) green
|
||||
(x) blue</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h6>Tasks</h6>
|
||||
<div class="col sample tasks">
|
||||
</div>
|
||||
<div class="col">
|
||||
<pre><code>[[wrong, (right)]]</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</script>
|
||||
@@ -69,6 +69,7 @@ class CombinedOpenEndedFields(object):
|
||||
version = VersionInteger(help="Current version number", default=DEFAULT_VERSION, scope=Scope.settings)
|
||||
data = String(help="XML data for the problem", scope=Scope.content)
|
||||
weight = StringyFloat(help="How much to weight this problem by", scope=Scope.settings)
|
||||
markdown = String(help="Markdown source of this module", scope=Scope.settings)
|
||||
|
||||
|
||||
class CombinedOpenEndedModule(CombinedOpenEndedFields, XModule):
|
||||
@@ -213,9 +214,8 @@ class CombinedOpenEndedDescriptor(CombinedOpenEndedFields, RawDescriptor):
|
||||
"""
|
||||
Module for adding combined open ended questions
|
||||
"""
|
||||
mako_template = "widgets/raw-edit.html"
|
||||
mako_template = "widgets/open-ended-edit.html"
|
||||
module_class = CombinedOpenEndedModule
|
||||
filename_extension = "xml"
|
||||
|
||||
stores_state = True
|
||||
has_score = True
|
||||
@@ -227,3 +227,23 @@ class CombinedOpenEndedDescriptor(CombinedOpenEndedFields, RawDescriptor):
|
||||
|
||||
#Specify whether or not to pass in open ended interface
|
||||
needs_open_ended_interface = True
|
||||
|
||||
metadata_attributes = RawDescriptor.metadata_attributes
|
||||
|
||||
js = {'coffee': [resource_string(__name__, 'js/src/combinedopenended/edit.coffee')]}
|
||||
js_module_name = "OpenEndedMarkdownEditingDescriptor"
|
||||
css = {'scss': [resource_string(__name__, 'css/editor/edit.scss'), resource_string(__name__, 'css/combinedopenended/edit.scss')]}
|
||||
|
||||
def get_context(self):
|
||||
_context = RawDescriptor.get_context(self)
|
||||
_context.update({'markdown': self.markdown,
|
||||
'enable_markdown': self.markdown is not None})
|
||||
return _context
|
||||
|
||||
@property
|
||||
def non_editable_metadata_fields(self):
|
||||
non_editable_fields = super(CombinedOpenEndedDescriptor, self).non_editable_metadata_fields
|
||||
non_editable_fields.extend([CombinedOpenEndedDescriptor.due, CombinedOpenEndedDescriptor.graceperiod,
|
||||
CombinedOpenEndedDescriptor.markdown])
|
||||
return non_editable_fields
|
||||
|
||||
|
||||
122
common/lib/xmodule/xmodule/css/combinedopenended/edit.scss
Normal file
122
common/lib/xmodule/xmodule/css/combinedopenended/edit.scss
Normal file
@@ -0,0 +1,122 @@
|
||||
.editor-bar {
|
||||
|
||||
.editor-tabs {
|
||||
|
||||
.advanced-toggle {
|
||||
@include white-button;
|
||||
height: auto;
|
||||
margin-top: -1px;
|
||||
padding: 3px 9px;
|
||||
font-size: 12px;
|
||||
|
||||
&.current {
|
||||
border: 1px solid $lightGrey !important;
|
||||
border-radius: 3px !important;
|
||||
background: $lightGrey !important;
|
||||
color: $darkGrey !important;
|
||||
pointer-events: none;
|
||||
cursor: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cheatsheet-toggle {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
padding: 0;
|
||||
margin: 0 5px 0 15px;
|
||||
border-radius: 22px;
|
||||
border: 1px solid #a5aaaf;
|
||||
background: #e5ecf3;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #565d64;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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) 4px);
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
@include transition(width .3s);
|
||||
|
||||
&.shown {
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.combinedopenended-editor-icon {
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 21px;
|
||||
vertical-align: middle;
|
||||
background: url(../img/problem-editor-icons.png) no-repeat;
|
||||
}
|
||||
|
||||
.combinedopenended-editor-icon.multiple-choice {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.combinedopenended-editor-icon.explanation {
|
||||
width: 28px;
|
||||
background-position: -111px 0;
|
||||
}
|
||||
|
||||
.combinedopenended-editor-icon.dropdown {
|
||||
width: 28px;
|
||||
background-position: -111px 0;
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
class @MarkdownEditingDescriptor extends XModule.Descriptor
|
||||
class @OpenEndedMarkdownEditingDescriptor extends XModule.Descriptor
|
||||
# TODO really, these templates should come from or also feed the cheatsheet
|
||||
@multipleChoiceTemplate : "( ) incorrect\n( ) incorrect\n(x) correct\n"
|
||||
@checkboxChoiceTemplate: "[x] correct\n[ ] incorrect\n[x] correct\n"
|
||||
|
||||
@@ -7,6 +7,7 @@ metadata:
|
||||
skip_spelling_checks: False
|
||||
accept_file_upload: False
|
||||
weight: ""
|
||||
markdown: ""
|
||||
data: |
|
||||
<combinedopenended>
|
||||
<rubric>
|
||||
|
||||
Reference in New Issue
Block a user