Skip to content

X
xblock-drag-and-drop-v2
Commit 15fca813 by Filippo Valsorda
Options

Wide refactor of style and hacks

parent 0290f4ff
Showing with 66 additions and 91 deletions
drag_and_drop_v2/drag_and_drop_v2.py
...@@ -4,12 +4,11 @@ ...@@ -4,12 +4,11 @@
# Imports ########################################################### # Imports ###########################################################
import logging import logging
import textwrap
import json import json
import webob import webob
from xblock.core import XBlock from xblock.core import XBlock
from xblock.fields import Scope, String from xblock.fields import Scope, String, Dict
from xblock.fragment import Fragment from xblock.fragment import Fragment
from .utils import render_template, load_resource from .utils import render_template, load_resource
...@@ -36,22 +35,20 @@ class DragAndDropBlock(XBlock): ...@@ -36,22 +35,20 @@ class DragAndDropBlock(XBlock):
question_text = String( question_text = String(
display_name="Question text", display_name="Question text",
help="The question text that is displayed to the user", help="The question text that is displayed to the user",
scope=Scope.settings scope=Scope.settings,
default=""
) )
data = String( data = Dict(
display_name="Drag and Drop", display_name="Drag and Drop",
help="JSON spec as generated by the builder", help="JSON spec as generated by the builder",
scope=Scope.content, scope=Scope.content,
default='{"feedback":{"start":"Intro","finish":"Final"},"items":[{"displayName":"A","zone":"Uno","id":0,"feedback":{"correct":"Si","incorrect":"No"},"size":{"width":"190px","height":"auto"},"backgroundImage":""},{"displayName":"B","zone":"none","id":1,"feedback":{"correct":"","incorrect":""},"size":{"width":"190px","height":"auto"},"backgroundImage":""}],"zones":[{"title":"Uno","id":"zone-1","active":true,"index":1,"width":200,"height":100,"x":0,"y":0},{"title":"Due","id":"zone-2","active":true,"index":2,"width":200,"height":100,"x":"300","y":"210"}],"targetImg":"https://i.imgur.com/PoI27ox.png"}' default={
# default=textwrap.dedent(""" 'feedback': {},
# { 'items': [],
# feedback: {}, 'zones': [],
# items: [], 'targetImg': None
# zones: [], }
# targetImg: 'img/triangle.png'
# }
# """)
) )
def student_view(self, context): def student_view(self, context):
...@@ -66,10 +63,16 @@ class DragAndDropBlock(XBlock): ...@@ -66,10 +63,16 @@ class DragAndDropBlock(XBlock):
fragment = Fragment() fragment = Fragment()
fragment.add_content(render_template('/templates/html/drag_and_drop.html', context)) fragment.add_content(render_template('/templates/html/drag_and_drop.html', context))
fragment.add_css(load_resource('public/css/drag_and_drop.css')) fragment.add_css_url(self.runtime.local_resource_url(self,
fragment.add_javascript(load_resource('public/js/vendor/jquery.html5-placeholder-shim.js')) 'public/css/vendor/jquery-ui-1.10.4.custom.min.css'))
fragment.add_javascript(load_resource('public/js/vendor/underscore1.6.0.js')) fragment.add_css_url(self.runtime.local_resource_url(self,
fragment.add_javascript(load_resource('public/js/drag_and_drop.js')) 'public/css/drag_and_drop.css'))
fragment.add_javascript_url(self.runtime.local_resource_url(self,
'public/js/vendor/jquery.html5-placeholder-shim.js'))
fragment.add_javascript_url(self.runtime.local_resource_url(self,
'public/js/vendor/underscore1.6.0.js'))
fragment.add_javascript_url(self.runtime.local_resource_url(self,
'public/js/drag_and_drop.js'))
fragment.initialize_js('DragAndDropBlock') fragment.initialize_js('DragAndDropBlock')
...@@ -84,10 +87,16 @@ class DragAndDropBlock(XBlock): ...@@ -84,10 +87,16 @@ class DragAndDropBlock(XBlock):
fragment = Fragment() fragment = Fragment()
fragment.add_content(render_template('/templates/html/drag_and_drop_edit.html', context)) fragment.add_content(render_template('/templates/html/drag_and_drop_edit.html', context))
fragment.add_css(load_resource('public/css/drag_and_drop_edit.css')) fragment.add_css_url(self.runtime.local_resource_url(self,
fragment.add_javascript(load_resource('public/js/vendor/jquery.html5-placeholder-shim.js')) 'public/css/vendor/jquery-ui-1.10.4.custom.min.css'))
fragment.add_javascript(load_resource('public/js/vendor/underscore1.6.0.js')) fragment.add_css_url(self.runtime.local_resource_url(self,
fragment.add_javascript(load_resource('public/js/drag_and_drop_edit.js')) 'public/css/drag_and_drop_edit.css'))
fragment.add_javascript_url(self.runtime.local_resource_url(self,
'public/js/vendor/jquery.html5-placeholder-shim.js'))
fragment.add_javascript_url(self.runtime.local_resource_url(self,
'public/js/vendor/underscore1.6.0.js'))
fragment.add_javascript_url(self.runtime.local_resource_url(self,
'public/js/drag_and_drop_edit.js'))
fragment.initialize_js('DragAndDropEditBlock') fragment.initialize_js('DragAndDropEditBlock')
...@@ -97,11 +106,9 @@ class DragAndDropBlock(XBlock): ...@@ -97,11 +106,9 @@ class DragAndDropBlock(XBlock):
def studio_submit(self, submissions, suffix=''): def studio_submit(self, submissions, suffix=''):
self.display_name = submissions['display_name'] self.display_name = submissions['display_name']
self.question_text = submissions['question_text'] self.question_text = submissions['question_text']
data = submissions['data']
try: try:
json.loads(data) self.data = json.loads(submissions['data'])
self.data = data
except ValueError as e: except ValueError as e:
return { return {
'result': 'error', 'result': 'error',
...@@ -114,4 +121,4 @@ class DragAndDropBlock(XBlock): ...@@ -114,4 +121,4 @@ class DragAndDropBlock(XBlock):
@XBlock.handler @XBlock.handler
def get_data(self, request, suffix=''): def get_data(self, request, suffix=''):
return webob.response.Response(body=self.data) return webob.response.Response(body=json.dumps(self.data))
drag_and_drop_v2/public/css/drag_and_drop.css
...@@ -57,6 +57,10 @@ ...@@ -57,6 +57,10 @@
padding: 10px; padding: 10px;
} }
.xblock--drag-and-drop .drag-container .items .option img {
max-width: 100%;
}
.xblock--drag-and-drop .option.hover { background: #ccc; } .xblock--drag-and-drop .option.hover { background: #ccc; }
.xblock--drag-and-drop .option.fade { opacity: 0.6; } .xblock--drag-and-drop .option.fade { opacity: 0.6; }
...@@ -74,19 +78,19 @@ ...@@ -74,19 +78,19 @@
} }
.xblock--drag-and-drop .target-img { .xblock--drag-and-drop .target-img {
background: url('../img/triangle.png') no-repeat;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.xblock--drag-and-drop .zone { .xblock--drag-and-drop .zone {
/*border: 1px solid #000;*/
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -moz-box; display: -moz-box;
display: -ms-flexbox; display: -ms-flexbox;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
/* Internet Explorer 10 */ /* Internet Explorer 10 */
-ms-flex-pack:center; -ms-flex-pack:center;
...@@ -155,5 +159,5 @@ ...@@ -155,5 +159,5 @@
} }
.no-close .ui-dialog-titlebar-close { .no-close .ui-dialog-titlebar-close {
display: none; display: none;
} }
drag_and_drop_v2/public/css/drag_and_drop_edit.css
...@@ -6,36 +6,21 @@ ...@@ -6,36 +6,21 @@
background: #fff; background: #fff;
} }
.xblock--drag-and-drop h1, .xblock--drag-and-drop .problem-header {
.xblock--drag-and-drop h2, display: inline-block;
.xblock--drag-and-drop h3, margin: 0 0 15px 0;
.xblock--drag-and-drop h4,
.xblock--drag-and-drop h5,
.xblock--drag-and-drop h6,
.xblock--drag-and-drop p,
.xblock--drag-and-drop li,
.xblock--drag-and-drop a {
font-family: Arial;
}
.xblock--drag-and-drop h1 {
color: #adadad;
}
.xblock--drag-and-drop h2 {
color: #333;
margin: 0;
text-transform: uppercase;
} }
.xblock--drag-and-drop header p, .xblock--drag-and-drop .problem-progress {
.xblock--drag-and-drop footer p { display: inline-block;
color: #adadad; padding-left: 5px;
line-height: 1.5em; color: #666;
font-weight: 100;
font-size: 1em;
} }
.xblock--drag-and-drop .small { .xblock--drag-and-drop .problem p {
font-size: 0.6em; margin-bottom: 1.41575em;
} }
.xblock--drag-and-drop .drag-container { .xblock--drag-and-drop .drag-container {
...@@ -44,6 +29,9 @@ ...@@ -44,6 +29,9 @@
position: relative; position: relative;
} }
.xblock--drag-and-drop .clear {
clear: both;
}
/** Draggable Items **/ /** Draggable Items **/
.xblock--drag-and-drop .items { .xblock--drag-and-drop .items {
...@@ -86,20 +74,19 @@ ...@@ -86,20 +74,19 @@
} }
.xblock--drag-and-drop .target-img { .xblock--drag-and-drop .target-img {
background: url(../img/triangle.png) no-repeat; background: url('../img/triangle.png') no-repeat;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.xblock--drag-and-drop .zone { .xblock--drag-and-drop .zone {
/*border: 1px solid #000;*/
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -moz-box; display: -moz-box;
display: -ms-flexbox; display: -ms-flexbox;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
/* Internet Explorer 10 */ /* Internet Explorer 10 */
-ms-flex-pack:center; -ms-flex-pack:center;
...@@ -160,25 +147,13 @@ ...@@ -160,25 +147,13 @@
text-align: center; text-align: center;
} }
/*** FEEDBACK ***/
.xblock--drag-and-drop .feedback {
width: 740px;
border-top: #ccc 1px solid;
margin: 20px 10px;
padding-top: 10px;
}
.xblock--drag-and-drop .feedback .message {
margin: 5px 0 0;
}
/** Builder **/ /** Builder **/
.xblock--drag-and-drop .hidden { .xblock--drag-and-drop .hidden {
display: none !important; display: none !important;
} }
.xblock--drag-and-drop .drag-builder { .xblock--drag-and-drop .drag-builder {
/* TODO */ /* TODO avoid buttons scrolling without this hack */
height: 375px; height: 375px;
overflow: scroll; overflow: scroll;
} }
...@@ -389,8 +364,8 @@ ...@@ -389,8 +364,8 @@
top: 2px; top: 2px;
left: 6px; left: 6px;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg); -ms-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
} }
.xblock--drag-and-drop .icon.remove:after { .xblock--drag-and-drop .icon.remove:after {
...@@ -404,8 +379,8 @@ ...@@ -404,8 +379,8 @@
top: 6px; top: 6px;
left: 0; left: 0;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg); -ms-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
} }
.xblock--drag-and-drop .remove-item .icon.remove { .xblock--drag-and-drop .remove-item .icon.remove {
......
drag_and_drop_v2/templates/html/drag_and_drop.html
<section class="xblock--drag-and-drop"> <section class="xblock--drag-and-drop">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<h2 class="problem-header"> <h2 class="problem-header">
{{ title }} {{ title }}
</h2> </h2>
......
drag_and_drop_v2/templates/html/drag_and_drop_edit.html
{% load i18n %} {% load i18n %}
<div class="xblock--drag-and-drop editor-with-buttons"> <div class="xblock--drag-and-drop editor-with-buttons">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<section class="drag-builder"> <section class="drag-builder">
<div class="tab feedback-tab"> <div class="tab feedback-tab">
...@@ -21,9 +19,6 @@ ...@@ -21,9 +19,6 @@
<textarea class="final-feedback"></textarea> <textarea class="final-feedback"></textarea>
</form> </form>
</section> </section>
<!-- <footer class="tab-footer">
<button class="btn continue goto-zones">Continue</button>
</footer> -->
</div> </div>
<div class="tab zones-tab hidden"> <div class="tab zones-tab hidden">
...@@ -39,9 +34,6 @@ ...@@ -39,9 +34,6 @@
<div class="target-img"></div> <div class="target-img"></div>
</div> </div>
</section> </section>
<!-- <footer class="tab-footer">
<button class="btn continue goto-items">Continue</button>
</footer> -->
</div> </div>
<div class="tab items-tab hidden"> <div class="tab items-tab hidden">
...@@ -53,7 +45,6 @@ ...@@ -53,7 +45,6 @@
</section> </section>
<footer class="tab-footer"> <footer class="tab-footer">
<a href="#" class="add-item add-element"><div class="icon add"></div>Add an item</a> <a href="#" class="add-item add-element"><div class="icon add"></div>Add an item</a>
<!-- <button class="btn continue goto-exercise">Finish</button> -->
</footer> </footer>
</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