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 190 additions and 287 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/public/css/vendor/jquery-ui-1.10.4.custom.min.css 0 → 100755
/*! jQuery UI - v1.10.4 - 2014-07-03
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.button.css, jquery.ui.dialog.css, jquery.ui.theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
* Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */
.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}.ui-button{display:inline-block;position:relative;padding:0;line-height:normal;margin-right:.1em;cursor:pointer;vertical-align:middle;text-align:center;overflow:visible}.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active{text-decoration:none}.ui-button-icon-only{width:2.2em}button.ui-button-icon-only{width:2.4em}.ui-button-icons-only{width:3.4em}button.ui-button-icons-only{width:3.7em}.ui-button .ui-button-text{display:block;line-height:normal}.ui-button-text-only .ui-button-text{padding:.4em 1em}.ui-button-icon-only .ui-button-text,.ui-button-icons-only .ui-button-text{padding:.4em;text-indent:-9999999px}.ui-button-text-icon-primary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 1em .4em 2.1em}.ui-button-text-icon-secondary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 2.1em .4em 1em}.ui-button-text-icons .ui-button-text{padding-left:2.1em;padding-right:2.1em}input.ui-button{padding:.4em 1em}.ui-button-icon-only .ui-icon,.ui-button-text-icon-primary .ui-icon,.ui-button-text-icon-secondary .ui-icon,.ui-button-text-icons .ui-icon,.ui-button-icons-only .ui-icon{position:absolute;top:50%;margin-top:-8px}.ui-button-icon-only .ui-icon{left:50%;margin-left:-8px}.ui-button-text-icon-primary .ui-button-icon-primary,.ui-button-text-icons .ui-button-icon-primary,.ui-button-icons-only .ui-button-icon-primary{left:.5em}.ui-button-text-icon-secondary .ui-button-icon-secondary,.ui-button-text-icons .ui-button-icon-secondary,.ui-button-icons-only .ui-button-icon-secondary{right:.5em}.ui-buttonset{margin-right:7px}.ui-buttonset .ui-button{margin-left:0;margin-right:-.3em}input.ui-button::-moz-focus-inner,button.ui-button::-moz-focus-inner{border:0;padding:0}.ui-dialog{overflow:hidden;position:absolute;top:0;left:0;padding:.2em;outline:0}.ui-dialog .ui-dialog-titlebar{padding:.4em 1em;position:relative}.ui-dialog .ui-dialog-title{float:left;margin:.1em 0;white-space:nowrap;width:90%;overflow:hidden;text-overflow:ellipsis}.ui-dialog .ui-dialog-titlebar-close{position:absolute;right:.3em;top:50%;width:20px;margin:-10px 0 0 0;padding:1px;height:20px}.ui-dialog .ui-dialog-content{position:relative;border:0;padding:.5em 1em;background:none;overflow:auto}.ui-dialog .ui-dialog-buttonpane{text-align:left;border-width:1px 0 0 0;background-image:none;margin-top:.5em;padding:.3em 1em .5em .4em}.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{float:right}.ui-dialog .ui-dialog-buttonpane button{margin:.5em .4em .5em 0;cursor:pointer}.ui-dialog .ui-resizable-se{width:12px;height:12px;right:-5px;bottom:-5px;background-position:16px 16px}.ui-draggable .ui-dialog-titlebar{cursor:move}.ui-widget{font-family:Verdana,Arial,sans-serif;font-size:1.1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Verdana,Arial,sans-serif;font-size:1em}.ui-widget-content{border:1px solid #aaa;background:#fff url("images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;color:#222}.ui-widget-content a{color:#222}.ui-widget-header{border:1px solid #aaa;background:#ccc url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x;color:#222;font-weight:bold}.ui-widget-header a{color:#222}.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:1px solid #d3d3d3;background:#e6e6e6 url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x;font-weight:normal;color:#555}.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited{color:#555;text-decoration:none}.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{border:1px solid #999;background:#dadada url("images/ui-bg_glass_75_dadada_1x400.png") 50% 50% repeat-x;font-weight:normal;color:#212121}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited{color:#212121;text-decoration:none}.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{border:1px solid #aaa;background:#fff url("images/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x;font-weight:normal;color:#212121}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#212121;text-decoration:none}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #fcefa1;background:#fbf9ee url("images/ui-bg_glass_55_fbf9ee_1x400.png") 50% 50% repeat-x;color:#363636}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#363636}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #cd0a0a;background:#fef1ec url("images/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x;color:#cd0a0a}.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#cd0a0a}.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#cd0a0a}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}.ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}.ui-icon{width:16px;height:16px}.ui-icon,.ui-widget-content .ui-icon{background-image:url("images/ui-icons_222222_256x240.png")}.ui-widget-header .ui-icon{background-image:url("images/ui-icons_222222_256x240.png")}.ui-state-default .ui-icon{background-image:url("images/ui-icons_888888_256x240.png")}.ui-state-hover .ui-icon,.ui-state-focus .ui-icon{background-image:url("images/ui-icons_454545_256x240.png")}.ui-state-active .ui-icon{background-image:url("images/ui-icons_454545_256x240.png")}.ui-state-highlight .ui-icon{background-image:url("images/ui-icons_2e83ff_256x240.png")}.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url("images/ui-icons_cd0a0a_256x240.png")}.ui-icon-blank{background-position:16px 16px}.ui-icon-carat-1-n{background-position:0 0}.ui-icon-carat-1-ne{background-position:-16px 0}.ui-icon-carat-1-e{background-position:-32px 0}.ui-icon-carat-1-se{background-position:-48px 0}.ui-icon-carat-1-s{background-position:-64px 0}.ui-icon-carat-1-sw{background-position:-80px 0}.ui-icon-carat-1-w{background-position:-96px 0}.ui-icon-carat-1-nw{background-position:-112px 0}.ui-icon-carat-2-n-s{background-position:-128px 0}.ui-icon-carat-2-e-w{background-position:-144px 0}.ui-icon-triangle-1-n{background-position:0 -16px}.ui-icon-triangle-1-ne{background-position:-16px -16px}.ui-icon-triangle-1-e{background-position:-32px -16px}.ui-icon-triangle-1-se{background-position:-48px -16px}.ui-icon-triangle-1-s{background-position:-64px -16px}.ui-icon-triangle-1-sw{background-position:-80px -16px}.ui-icon-triangle-1-w{background-position:-96px -16px}.ui-icon-triangle-1-nw{background-position:-112px -16px}.ui-icon-triangle-2-n-s{background-position:-128px -16px}.ui-icon-triangle-2-e-w{background-position:-144px -16px}.ui-icon-arrow-1-n{background-position:0 -32px}.ui-icon-arrow-1-ne{background-position:-16px -32px}.ui-icon-arrow-1-e{background-position:-32px -32px}.ui-icon-arrow-1-se{background-position:-48px -32px}.ui-icon-arrow-1-s{background-position:-64px -32px}.ui-icon-arrow-1-sw{background-position:-80px -32px}.ui-icon-arrow-1-w{background-position:-96px -32px}.ui-icon-arrow-1-nw{background-position:-112px -32px}.ui-icon-arrow-2-n-s{background-position:-128px -32px}.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.ui-icon-arrow-2-e-w{background-position:-160px -32px}.ui-icon-arrow-2-se-nw{background-position:-176px -32px}.ui-icon-arrowstop-1-n{background-position:-192px -32px}.ui-icon-arrowstop-1-e{background-position:-208px -32px}.ui-icon-arrowstop-1-s{background-position:-224px -32px}.ui-icon-arrowstop-1-w{background-position:-240px -32px}.ui-icon-arrowthick-1-n{background-position:0 -48px}.ui-icon-arrowthick-1-ne{background-position:-16px -48px}.ui-icon-arrowthick-1-e{background-position:-32px -48px}.ui-icon-arrowthick-1-se{background-position:-48px -48px}.ui-icon-arrowthick-1-s{background-position:-64px -48px}.ui-icon-arrowthick-1-sw{background-position:-80px -48px}.ui-icon-arrowthick-1-w{background-position:-96px -48px}.ui-icon-arrowthick-1-nw{background-position:-112px -48px}.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.ui-icon-arrowreturn-1-w{background-position:-64px -64px}.ui-icon-arrowreturn-1-n{background-position:-80px -64px}.ui-icon-arrowreturn-1-e{background-position:-96px -64px}.ui-icon-arrowreturn-1-s{background-position:-112px -64px}.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.ui-icon-arrow-4{background-position:0 -80px}.ui-icon-arrow-4-diag{background-position:-16px -80px}.ui-icon-extlink{background-position:-32px -80px}.ui-icon-newwin{background-position:-48px -80px}.ui-icon-refresh{background-position:-64px -80px}.ui-icon-shuffle{background-position:-80px -80px}.ui-icon-transfer-e-w{background-position:-96px -80px}.ui-icon-transferthick-e-w{background-position:-112px -80px}.ui-icon-folder-collapsed{background-position:0 -96px}.ui-icon-folder-open{background-position:-16px -96px}.ui-icon-document{background-position:-32px -96px}.ui-icon-document-b{background-position:-48px -96px}.ui-icon-note{background-position:-64px -96px}.ui-icon-mail-closed{background-position:-80px -96px}.ui-icon-mail-open{background-position:-96px -96px}.ui-icon-suitcase{background-position:-112px -96px}.ui-icon-comment{background-position:-128px -96px}.ui-icon-person{background-position:-144px -96px}.ui-icon-print{background-position:-160px -96px}.ui-icon-trash{background-position:-176px -96px}.ui-icon-locked{background-position:-192px -96px}.ui-icon-unlocked{background-position:-208px -96px}.ui-icon-bookmark{background-position:-224px -96px}.ui-icon-tag{background-position:-240px -96px}.ui-icon-home{background-position:0 -112px}.ui-icon-flag{background-position:-16px -112px}.ui-icon-calendar{background-position:-32px -112px}.ui-icon-cart{background-position:-48px -112px}.ui-icon-pencil{background-position:-64px -112px}.ui-icon-clock{background-position:-80px -112px}.ui-icon-disk{background-position:-96px -112px}.ui-icon-calculator{background-position:-112px -112px}.ui-icon-zoomin{background-position:-128px -112px}.ui-icon-zoomout{background-position:-144px -112px}.ui-icon-search{background-position:-160px -112px}.ui-icon-wrench{background-position:-176px -112px}.ui-icon-gear{background-position:-192px -112px}.ui-icon-heart{background-position:-208px -112px}.ui-icon-star{background-position:-224px -112px}.ui-icon-link{background-position:-240px -112px}.ui-icon-cancel{background-position:0 -128px}.ui-icon-plus{background-position:-16px -128px}.ui-icon-plusthick{background-position:-32px -128px}.ui-icon-minus{background-position:-48px -128px}.ui-icon-minusthick{background-position:-64px -128px}.ui-icon-close{background-position:-80px -128px}.ui-icon-closethick{background-position:-96px -128px}.ui-icon-key{background-position:-112px -128px}.ui-icon-lightbulb{background-position:-128px -128px}.ui-icon-scissors{background-position:-144px -128px}.ui-icon-clipboard{background-position:-160px -128px}.ui-icon-copy{background-position:-176px -128px}.ui-icon-contact{background-position:-192px -128px}.ui-icon-image{background-position:-208px -128px}.ui-icon-video{background-position:-224px -128px}.ui-icon-script{background-position:-240px -128px}.ui-icon-alert{background-position:0 -144px}.ui-icon-info{background-position:-16px -144px}.ui-icon-notice{background-position:-32px -144px}.ui-icon-help{background-position:-48px -144px}.ui-icon-check{background-position:-64px -144px}.ui-icon-bullet{background-position:-80px -144px}.ui-icon-radio-on{background-position:-96px -144px}.ui-icon-radio-off{background-position:-112px -144px}.ui-icon-pin-w{background-position:-128px -144px}.ui-icon-pin-s{background-position:-144px -144px}.ui-icon-play{background-position:0 -160px}.ui-icon-pause{background-position:-16px -160px}.ui-icon-seek-next{background-position:-32px -160px}.ui-icon-seek-prev{background-position:-48px -160px}.ui-icon-seek-end{background-position:-64px -160px}.ui-icon-seek-start{background-position:-80px -160px}.ui-icon-seek-first{background-position:-80px -160px}.ui-icon-stop{background-position:-96px -160px}.ui-icon-eject{background-position:-112px -160px}.ui-icon-volume-off{background-position:-128px -160px}.ui-icon-volume-on{background-position:-144px -160px}.ui-icon-power{background-position:0 -176px}.ui-icon-signal-diag{background-position:-16px -176px}.ui-icon-signal{background-position:-32px -176px}.ui-icon-battery-0{background-position:-48px -176px}.ui-icon-battery-1{background-position:-64px -176px}.ui-icon-battery-2{background-position:-80px -176px}.ui-icon-battery-3{background-position:-96px -176px}.ui-icon-circle-plus{background-position:0 -192px}.ui-icon-circle-minus{background-position:-16px -192px}.ui-icon-circle-close{background-position:-32px -192px}.ui-icon-circle-triangle-e{background-position:-48px -192px}.ui-icon-circle-triangle-s{background-position:-64px -192px}.ui-icon-circle-triangle-w{background-position:-80px -192px}.ui-icon-circle-triangle-n{background-position:-96px -192px}.ui-icon-circle-arrow-e{background-position:-112px -192px}.ui-icon-circle-arrow-s{background-position:-128px -192px}.ui-icon-circle-arrow-w{background-position:-144px -192px}.ui-icon-circle-arrow-n{background-position:-160px -192px}.ui-icon-circle-zoomin{background-position:-176px -192px}.ui-icon-circle-zoomout{background-position:-192px -192px}.ui-icon-circle-check{background-position:-208px -192px}.ui-icon-circlesmall-plus{background-position:0 -208px}.ui-icon-circlesmall-minus{background-position:-16px -208px}.ui-icon-circlesmall-close{background-position:-32px -208px}.ui-icon-squaresmall-plus{background-position:-48px -208px}.ui-icon-squaresmall-minus{background-position:-64px -208px}.ui-icon-squaresmall-close{background-position:-80px -208px}.ui-icon-grip-dotted-vertical{background-position:0 -224px}.ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.ui-icon-grip-solid-vertical{background-position:-32px -224px}.ui-icon-grip-solid-horizontal{background-position:-48px -224px}.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.ui-icon-grip-diagonal-se{background-position:-80px -224px}.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:4px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:4px}.ui-widget-overlay{background:#aaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;opacity:.3;filter:Alpha(Opacity=30)}.ui-widget-shadow{margin:-8px 0 0 -8px;padding:8px;background:#aaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;opacity:.3;filter:Alpha(Opacity=30);border-radius:8px}
\ No newline at end of file
drag_and_drop_v2/public/js/drag_and_drop.js
...@@ -44,27 +44,6 @@ function DragAndDropBlock(runtime, element) { ...@@ -44,27 +44,6 @@ function DragAndDropBlock(runtime, element) {
'</li>' '</li>'
].join(''); ].join('');
}, },
zoneInput: function() {
return [
'<div class="zone-row <%= name %>">',
'<label>Text</label>',
'<input type="text" class="title" placeholder="<%= title %>" />',
'<a href="#" class="remove-zone hidden">',
'<div class="icon remove"></div>',
'</a>',
'<div class="layout">',
'<label>width</label>',
'<input type="text" class="size width" value="200" />',
'<label>height</label>',
'<input type="text" class="size height" value="100" />',
'<label>x</label>',
'<input type="text" class="coord x" value="0" />',
'<label>y</label>',
'<input type="text" class="coord y" value="0" />',
'</div>',
'</div>'
].join('');
},
zoneElement: function() { zoneElement: function() {
return [ return [
'<div id="<%= id %>" class="zone" data-zone="<%= title %>" style="', '<div id="<%= id %>" class="zone" data-zone="<%= title %>" style="',
...@@ -75,40 +54,6 @@ function DragAndDropBlock(runtime, element) { ...@@ -75,40 +54,6 @@ function DragAndDropBlock(runtime, element) {
'<p><%= title %></p>', '<p><%= title %></p>',
'</div>' '</div>'
].join(''); ].join('');
},
zoneDropdown: '<option value="<%= value %>"><%= value %></option>',
itemInput: function() {
return [
'<div class="item">',
'<div class="row">',
'<label>Text</label>',
'<input type="text" class="item-text"></input>',
'<label>Zone</label>',
'<select class="zone-select"><%= dropdown %></select>',
'<a href="#" class="remove-item hidden">',
'<div class="icon remove"></div>',
'</a>',
'</div>',
'<div class="row">',
'<label>Background image URL (alternative to the text)</label>',
'<textarea class="background-image"></textarea>',
'</div>',
'<div class="row">',
'<label>Success Feedback</label>',
'<textarea class="success-feedback"></textarea>',
'</div>',
'<div class="row">',
'<label>Error Feedback</label>',
'<textarea class="error-feedback"></textarea>',
'</div>',
'<div class="row">',
'<label>Width (px - 0 for auto)</label>',
'<input type="text" class="item-width" value="190"></input>',
'<label>Height (px - 0 for auto)</label>',
'<input type="text" class="item-height" value="0"></input>',
'</div>',
'</div>'
].join('');
} }
}, },
...@@ -120,20 +65,21 @@ function DragAndDropBlock(runtime, element) { ...@@ -120,20 +65,21 @@ function DragAndDropBlock(runtime, element) {
_fn.zones.draw(); _fn.zones.draw();
// Load welcome feedback // Load welcome feedback
_fn.feedback.set( _fn.data.feedback.start ); _fn.feedback.set(_fn.data.feedback.start);
// Init drag and drop plugin // Init drag and drop plugin
_fn.$items.draggable( _fn.options.drag ); _fn.$items.draggable(_fn.options.drag);
_fn.$zones.droppable( _fn.options.drop ); _fn.$zones.droppable(_fn.options.drop);
// Init click handlers // Init click handlers
_fn.clickHandlers.init( _fn.$items, _fn.$zones ); _fn.clickHandlers.init(_fn.$items, _fn.$zones);
// Get count of all active items // Get count of all active items
_fn.items.init(); _fn.items.init();
// Set the target image // Set the target image
_fn.$target.css('background', 'url(' + _fn.data.targetImg + ') no-repeat'); if (_fn.data.targetImg)
_fn.$target.css('background', 'url(' + _fn.data.targetImg + ') no-repeat');
}, },
finish: function() { finish: function() {
...@@ -141,48 +87,48 @@ function DragAndDropBlock(runtime, element) { ...@@ -141,48 +87,48 @@ function DragAndDropBlock(runtime, element) {
_fn.$items.draggable('disable'); _fn.$items.draggable('disable');
// Show final feedback // Show final feedback
_fn.feedback.set( _fn.data.feedback.finish ); _fn.feedback.set(_fn.data.feedback.finish);
}, },
clickHandlers: { clickHandlers: {
init: function( $drag, $dropzone ) { init: function($drag, $dropzone) {
var clk = _fn.clickHandlers; var clk = _fn.clickHandlers;
$drag.on( 'dragstart', clk.drag.start ); $drag.on('dragstart', clk.drag.start);
$drag.on( 'dragstop', clk.drag.stop ); $drag.on('dragstop', clk.drag.stop);
$dropzone.on( 'drop', clk.drop.success ); $dropzone.on('drop', clk.drop.success);
$dropzone.on( 'dropover', clk.drop.hover.in ); $dropzone.on('dropover', clk.drop.hover.in);
$dropzone.on( 'dropout', clk.drop.hover.out ); $dropzone.on('dropout', clk.drop.hover.out);
}, },
drag: { drag: {
start: function( event, ui ) { start: function(event, ui) {
$(event.currentTarget).removeClass('within-dropzone fade'); $(event.currentTarget).removeClass('within-dropzone fade');
}, },
stop: function( event, ui ) { stop: function(event, ui) {
var $el = $(event.currentTarget), var $el = $(event.currentTarget),
val = $el.data('value'), val = $el.data('value'),
zone = $el.data('zone') || null; zone = $el.data('zone') || null;
if ( $el.hasClass('within-dropzone') && _fn.test.match( val, zone ) ) { if ($el.hasClass('within-dropzone') && _fn.test.match(val, zone)) {
$el.removeClass('hover') $el.removeClass('hover')
.draggable('disable'); .draggable('disable');
_fn.test.completed++; _fn.test.completed++;
_fn.feedback.popup( _fn.feedback.get(val, true), true ); _fn.feedback.popup(_fn.feedback.get(val, true), true);
if ( _fn.items.allSubmitted() ) { if (_fn.items.allSubmitted()) {
_fn.finish(); _fn.finish();
} }
} else { } else {
// Return to original position // Return to original position
_fn.clickHandlers.drag.reset( $el ); _fn.clickHandlers.drag.reset($el);
_fn.feedback.popup( _fn.feedback.get(val, false), false ); _fn.feedback.popup(_fn.feedback.get(val, false), false);
} }
}, },
reset: function( $el ) { reset: function($el) {
$el.removeClass('within-dropzone fade hover') $el.removeClass('within-dropzone fade hover')
.css({ .css({
top: '', top: '',
...@@ -192,16 +138,16 @@ function DragAndDropBlock(runtime, element) { ...@@ -192,16 +138,16 @@ function DragAndDropBlock(runtime, element) {
}, },
drop: { drop: {
hover: { hover: {
in: function( event, ui ) { in: function(event, ui) {
var zone = $(event.currentTarget).data('zone'); var zone = $(event.currentTarget).data('zone');
ui.draggable.addClass('hover').data('zone', zone); ui.draggable.addClass('hover').data('zone', zone);
}, },
out: function( event, ui ) { out: function(event, ui) {
ui.draggable.removeClass('hover'); ui.draggable.removeClass('hover');
} }
}, },
success: function( event, ui ) { success: function(event, ui) {
ui.draggable.addClass('within-dropzone'); ui.draggable.addClass('within-dropzone');
} }
} }
...@@ -215,8 +161,8 @@ function DragAndDropBlock(runtime, element) { ...@@ -215,8 +161,8 @@ function DragAndDropBlock(runtime, element) {
len = items.length, len = items.length,
total = 0; total = 0;
for ( i=0; i<len; i++ ) { for (i=0; i<len; i++) {
if ( items[i].zone !== 'none' ) { if (items[i].zone !== 'none') {
total++; total++;
} }
} }
...@@ -234,14 +180,14 @@ function DragAndDropBlock(runtime, element) { ...@@ -234,14 +180,14 @@ function DragAndDropBlock(runtime, element) {
_.each(items, function(item) { _.each(items, function(item) {
if (item.backgroundImage.length > 0) { if (item.backgroundImage.length > 0) {
list.push( _.template( img_tpl, item ) ); list.push(_.template(img_tpl, item));
} else { } else {
list.push( _.template( tpl, item ) ); list.push(_.template(tpl, item));
} }
}); });
// Update DOM // Update DOM
_fn.$ul.html( list.join('') ); _fn.$ul.html(list.join(''));
// Set variable // Set variable
_fn.$items = $('.xblock--drag-and-drop .items .option'); _fn.$items = $('.xblock--drag-and-drop .items .option');
...@@ -256,12 +202,12 @@ function DragAndDropBlock(runtime, element) { ...@@ -256,12 +202,12 @@ function DragAndDropBlock(runtime, element) {
i, i,
len = zones.length; len = zones.length;
for ( i=0; i<len; i++ ) { for (i=0; i<len; i++) {
html.push( _.template( tpl, zones[i] ) ); html.push(_.template(tpl, zones[i]));
} }
// Update DOM // Update DOM
_fn.$target.html( html.join('') ); _fn.$target.html(html.join(''));
// Set variable // Set variable
_fn.$zones = _fn.$target.find('.zone'); _fn.$zones = _fn.$target.find('.zone');
...@@ -270,8 +216,8 @@ function DragAndDropBlock(runtime, element) { ...@@ -270,8 +216,8 @@ function DragAndDropBlock(runtime, element) {
test: { test: {
completed: 0, completed: 0,
match: function( id, zone ) { match: function(id, zone) {
var item = _.findWhere( _fn.data.items, { id: id } ); var item = _.findWhere(_fn.data.items, { id: id });
return item.zone === zone; return item.zone === zone;
} }
...@@ -279,17 +225,17 @@ function DragAndDropBlock(runtime, element) { ...@@ -279,17 +225,17 @@ function DragAndDropBlock(runtime, element) {
feedback: { feedback: {
// Returns string based on user's answer // Returns string based on user's answer
get: function( id, boo ) { get: function(id, boo) {
var item, var item,
type = boo ? 'correct' : 'incorrect'; type = boo ? 'correct' : 'incorrect';
// Null loses its string-ness // Null loses its string-ness
if ( id === null ) { if (id === null) {
id = 'null'; id = 'null';
} }
// Get object from data.items that matches val // Get object from data.items that matches val
item = _.findWhere( _fn.data.items, { id: id }); item = _.findWhere(_fn.data.items, { id: id });
return item.feedback[type]; return item.feedback[type];
}, },
...@@ -309,29 +255,22 @@ function DragAndDropBlock(runtime, element) { ...@@ -309,29 +255,22 @@ function DragAndDropBlock(runtime, element) {
modal: true, modal: true,
buttons: { buttons: {
Ok: function() { Ok: function() {
$( this ).dialog( "close" ); $(this).dialog("close");
} }
} }
}); });
} }
}, },
data: { data: null
feedback: {},
items: [],
zones: [],
targetImg: 'img/triangle.png'
}
}; };
return { return {
init: _fn.init, init: _fn.init,
data: _fn.data
}; };
})(jQuery); })(jQuery);
$.ajax(runtime.handlerUrl(element, 'get_data')).done(function(data){ $.ajax(runtime.handlerUrl(element, 'get_data')).done(function(data){
dragAndDrop.init(data); dragAndDrop.init(data);
}); });
} }
drag_and_drop_v2/public/js/drag_and_drop_edit.js
...@@ -28,22 +28,6 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -28,22 +28,6 @@ function DragAndDropEditBlock(runtime, element) {
// item template // item template
tpl: { tpl: {
item: function() {
return [
'<li class="option" data-value="<%= id %>"',
'style="width: <%= size.width %>; height: <%= size.height %>">',
'<%= displayName %>',
'</li>'
].join('');
},
image_item: function() {
return [
'<li class="option" data-value="<%= id %>"',
'style="width: <%= size.width %>; height: <%= size.height %>">',
'<img src="<%= backgroundImage %>" />',
'</li>'
].join('');
},
zoneInput: function() { zoneInput: function() {
return [ return [
'<div class="zone-row <%= name %>">', '<div class="zone-row <%= name %>">',
...@@ -129,19 +113,20 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -129,19 +113,20 @@ function DragAndDropEditBlock(runtime, element) {
}, },
target: $('.xblock--drag-and-drop .drag-builder .target-img', element) target: $('.xblock--drag-and-drop .drag-builder .target-img', element)
}, },
init: function() { init: function(data) {
_fn.data = data;
_fn.build.clickHandlers(); _fn.build.clickHandlers();
_fn.build.form.zone.add(); _fn.build.form.zone.add();
_fn.$target.css('background', 'url(' + _fn.data.targetImg + ') no-repeat');
}, },
clickHandlers: function() { clickHandlers: function() {
var $fbkTab = _fn.build.$el.feedback.tab, var $fbkTab = _fn.build.$el.feedback.tab,
$zoneTab = _fn.build.$el.zones.tab, $zoneTab = _fn.build.$el.zones.tab,
$itemTab = _fn.build.$el.items.tab; $itemTab = _fn.build.$el.items.tab;
$(element).one( 'click', '.continue-button', function(e) { $(element).one('click', '.continue-button', function(e) {
e.preventDefault(); e.preventDefault();
_fn.build.form.feedback( _fn.build.$el.feedback.form ); _fn.build.form.feedback(_fn.build.$el.feedback.form);
$fbkTab.addClass('hidden'); $fbkTab.addClass('hidden');
$zoneTab.removeClass('hidden'); $zoneTab.removeClass('hidden');
...@@ -149,7 +134,7 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -149,7 +134,7 @@ function DragAndDropEditBlock(runtime, element) {
// Placeholder shim for IE9 // Placeholder shim for IE9
$.placeholder.shim(); $.placeholder.shim();
$(this).one( 'click', function(e) { $(this).one('click', function(e) {
e.preventDefault(); e.preventDefault();
_fn.build.form.zone.setAll(); _fn.build.form.zone.setAll();
_fn.build.form.item.add(); _fn.build.form.item.add();
...@@ -163,7 +148,7 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -163,7 +148,7 @@ function DragAndDropEditBlock(runtime, element) {
$(this).addClass('hidden'); $(this).addClass('hidden');
$('.save-button', element).parent() $('.save-button', element).parent()
.removeClass('hidden') .removeClass('hidden')
.one( 'click', function(e) { .one('click', function(e) {
e.preventDefault(); e.preventDefault();
_fn.build.form.submit(); _fn.build.form.submit();
}); });
...@@ -171,21 +156,20 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -171,21 +156,20 @@ function DragAndDropEditBlock(runtime, element) {
}); });
$zoneTab $zoneTab
.on( 'click', '.add-zone', _fn.build.form.zone.add ) .on('click', '.add-zone', _fn.build.form.zone.add)
.on( 'click', '.remove-zone', _fn.build.form.zone.remove ) .on('click', '.remove-zone', _fn.build.form.zone.remove)
.on( 'click', '.target-image-form button', function(e) { .on('click', '.target-image-form button', function(e) {
e.preventDefault(); e.preventDefault();
_fn.data.targetImg = $('.target-image-form input', element).val(); _fn.data.targetImg = $('.target-image-form input', element).val();
_fn.$target.css('background', 'url(' + _fn.data.targetImg + ') no-repeat');
// Placeholder shim for IE9 // Placeholder shim for IE9
$.placeholder.shim(); $.placeholder.shim();
}); });
$itemTab $itemTab
.on( 'click', '.add-item', _fn.build.form.item.add ) .on('click', '.add-item', _fn.build.form.item.add)
.on( 'click', '.remove-item', _fn.build.form.item.remove ); .on('click', '.remove-item', _fn.build.form.item.remove);
}, },
form: { form: {
zone: { zone: {
...@@ -223,20 +207,20 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -223,20 +207,20 @@ function DragAndDropEditBlock(runtime, element) {
y: 0 y: 0
}; };
_fn.build.form.zone.obj.push( zoneObj ); _fn.build.form.zone.obj.push(zoneObj);
// Add fields to zone position form // Add fields to zone position form
$elements.zones.form.append( _.template( inputTemplate, { $elements.zones.form.append(_.template(inputTemplate, {
title: 'Zone ' + num, title: 'Zone ' + num,
name: name name: name
})); }));
_fn.build.form.zone.enableDelete(); _fn.build.form.zone.enableDelete();
// Add zone div to target // Add zone div to target
$elements.target.append( _.template( zoneTemplate, zoneObj ) ); $elements.target.append(_.template(zoneTemplate, zoneObj));
// Listen to changes in form to update zone div // Listen to changes in form to update zone div
_fn.build.form.zone.clickHandler( num ); _fn.build.form.zone.clickHandler(num);
// Placeholder shim for IE9 // Placeholder shim for IE9
$.placeholder.shim(); $.placeholder.shim();
...@@ -257,12 +241,12 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -257,12 +241,12 @@ function DragAndDropEditBlock(runtime, element) {
$.placeholder.shim(); $.placeholder.shim();
}, },
enableDelete: function() { enableDelete: function() {
if ( _fn.build.form.zone.formCount > 1 ) { if (_fn.build.form.zone.formCount > 1) {
_fn.build.$el.zones.form.find('.remove-zone').removeClass('hidden'); _fn.build.$el.zones.form.find('.remove-zone').removeClass('hidden');
} }
}, },
disableDelete: function() { disableDelete: function() {
if ( _fn.build.form.zone.formCount === 1 ) { if (_fn.build.form.zone.formCount === 1) {
_fn.build.$el.zones.form.find('.remove-zone').addClass('hidden'); _fn.build.$el.zones.form.find('.remove-zone').addClass('hidden');
} }
}, },
...@@ -273,34 +257,34 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -273,34 +257,34 @@ function DragAndDropEditBlock(runtime, element) {
$form.each(function(i, el) { $form.each(function(i, el) {
var val = $(el).val(); var val = $(el).val();
if ( val.length > 0 ) { if (val.length > 0) {
zones.push( val ); zones.push(val);
} }
}); });
_fn.build.form.zone.list = zones; _fn.build.form.zone.list = zones;
_fn.build.form.createDropdown(zones); _fn.build.form.createDropdown(zones);
}, },
clickHandler: function( num ) { clickHandler: function(num) {
var $div = $('#zone-' + num, element), var $div = $('#zone-' + num, element),
$form = _fn.build.$el.zones.form.find('.zone-row.zone-' + num); $form = _fn.build.$el.zones.form.find('.zone-row.zone-' + num);
// Listen to form changes and update zone div position // Listen to form changes and update zone div position
$form.on('keyup', '.title', function(e) { $form.on('keyup', '.title', function(e) {
var text = $(e.currentTarget).val(), var text = $(e.currentTarget).val(),
record = _.findWhere( _fn.build.form.zone.obj, { record = _.findWhere(_fn.build.form.zone.obj, {
index: num index: num
}); });
$div.find('p').html(text); $div.find('p').html(text);
record.title = text; record.title = text;
if ( !record.active ) { if (!record.active) {
record.active = true; record.active = true;
} }
}).on('keyup', '.width', function(e) { }).on('keyup', '.width', function(e) {
var width = $(e.currentTarget).val(), var width = $(e.currentTarget).val(),
record = _.findWhere( _fn.build.form.zone.obj, { record = _.findWhere(_fn.build.form.zone.obj, {
index: num index: num
}); });
...@@ -308,7 +292,7 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -308,7 +292,7 @@ function DragAndDropEditBlock(runtime, element) {
record.width = width; record.width = width;
}).on('keyup', '.height', function(e) { }).on('keyup', '.height', function(e) {
var height = $(e.currentTarget).val(), var height = $(e.currentTarget).val(),
record = _.findWhere( _fn.build.form.zone.obj, { record = _.findWhere(_fn.build.form.zone.obj, {
index: num index: num
}); });
...@@ -316,7 +300,7 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -316,7 +300,7 @@ function DragAndDropEditBlock(runtime, element) {
record.height = height; record.height = height;
}).on('keyup', '.x', function(e) { }).on('keyup', '.x', function(e) {
var x = $(e.currentTarget).val(), var x = $(e.currentTarget).val(),
record = _.findWhere( _fn.build.form.zone.obj, { record = _.findWhere(_fn.build.form.zone.obj, {
index: num index: num
}); });
...@@ -324,7 +308,7 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -324,7 +308,7 @@ function DragAndDropEditBlock(runtime, element) {
record.x = x; record.x = x;
}).on('keyup', '.y', function(e) { }).on('keyup', '.y', function(e) {
var y = $(e.currentTarget).val(), var y = $(e.currentTarget).val(),
record = _.findWhere( _fn.build.form.zone.obj, { record = _.findWhere(_fn.build.form.zone.obj, {
index: num index: num
}); });
...@@ -332,39 +316,39 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -332,39 +316,39 @@ function DragAndDropEditBlock(runtime, element) {
record.y = y; record.y = y;
}); });
}, },
cleanObject: function( arr ) { cleanObject: function(arr) {
var clean = [], var clean = [],
i, i,
len = arr.length; len = arr.length;
for ( i=0; i<len; i++ ) { for (i=0; i<len; i++) {
if (arr[i].active) { if (arr[i].active) {
clean.push( arr[i] ); clean.push(arr[i]);
} }
} }
return clean; return clean;
} }
}, },
createDropdown: function( arr ) { createDropdown: function(arr) {
var tpl = _fn.tpl.zoneDropdown, var tpl = _fn.tpl.zoneDropdown,
i, i,
len = arr.length, len = arr.length,
dropdown = [], dropdown = [],
html; html;
for ( i=0; i<len; i++ ) { for (i=0; i<len; i++) {
dropdown.push( _.template( tpl, { value: arr[i] } ) ); dropdown.push(_.template(tpl, { value: arr[i] }));
} }
// Add option to include dummy answers // Add option to include dummy answers
dropdown.push( _.template( tpl, { value: 'none' } ) ); dropdown.push(_.template(tpl, { value: 'none' }));
html = dropdown.join(''); html = dropdown.join('');
_fn.build.form.zone.dropdown = html; _fn.build.form.zone.dropdown = html;
_fn.build.$el.items.form.find('.zone-select').html( html ); _fn.build.$el.items.form.find('.zone-select').html(html);
}, },
feedback: function( $form ) { feedback: function($form) {
_fn.data.feedback = { _fn.data.feedback = {
start: $form.find('.intro-feedback').val(), start: $form.find('.intro-feedback').val(),
finish: $form.find('.final-feedback').val() finish: $form.find('.final-feedback').val()
...@@ -376,12 +360,12 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -376,12 +360,12 @@ function DragAndDropEditBlock(runtime, element) {
var $form = _fn.build.$el.items.form, var $form = _fn.build.$el.items.form,
tpl = _fn.tpl.itemInput(); tpl = _fn.tpl.itemInput();
if ( e ) { if (e) {
e.preventDefault(); e.preventDefault();
} }
_fn.build.form.item.count++; _fn.build.form.item.count++;
$form.append( _.template( tpl, { dropdown: _fn.build.form.zone.dropdown } ) ); $form.append(_.template(tpl, { dropdown: _fn.build.form.zone.dropdown }));
_fn.build.form.item.enableDelete(); _fn.build.form.item.enableDelete();
// Placeholder shim for IE9 // Placeholder shim for IE9
...@@ -400,12 +384,12 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -400,12 +384,12 @@ function DragAndDropEditBlock(runtime, element) {
$.placeholder.shim(); $.placeholder.shim();
}, },
enableDelete: function() { enableDelete: function() {
if ( _fn.build.form.item.count > 1 ) { if (_fn.build.form.item.count > 1) {
_fn.build.$el.items.form.find('.remove-item').removeClass('hidden'); _fn.build.$el.items.form.find('.remove-item').removeClass('hidden');
} }
}, },
disableDelete: function() { disableDelete: function() {
if ( _fn.build.form.item.count === 1 ) { if (_fn.build.form.item.count === 1) {
_fn.build.$el.items.form.find('.remove-item').addClass('hidden'); _fn.build.$el.items.form.find('.remove-item').addClass('hidden');
} }
} }
...@@ -414,7 +398,7 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -414,7 +398,7 @@ function DragAndDropEditBlock(runtime, element) {
var items = [], var items = [],
$form = _fn.build.$el.items.form.find('.item'); $form = _fn.build.$el.items.form.find('.item');
$form.each( function(i, el) { $form.each(function(i, el) {
var $el = $(el), var $el = $(el),
name = $el.find('.item-text').val(), name = $el.find('.item-text').val(),
backgroundImage = $el.find('.background-image').val(); backgroundImage = $el.find('.background-image').val();
...@@ -447,7 +431,7 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -447,7 +431,7 @@ function DragAndDropEditBlock(runtime, element) {
}); });
_fn.data.items = items; _fn.data.items = items;
_fn.data.zones = _fn.build.form.zone.cleanObject( _fn.build.form.zone.obj ); _fn.data.zones = _fn.build.form.zone.cleanObject(_fn.build.form.zone.obj);
var data = { var data = {
'display_name': $(element).find('.display-name').val(), 'display_name': $(element).find('.display-name').val(),
...@@ -475,48 +459,48 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -475,48 +459,48 @@ function DragAndDropEditBlock(runtime, element) {
_fn.$items.draggable('disable'); _fn.$items.draggable('disable');
// Show final feedback // Show final feedback
_fn.feedback.set( _fn.data.feedback.finish ); _fn.feedback.set(_fn.data.feedback.finish);
}, },
clickHandlers: { clickHandlers: {
init: function( $drag, $dropzone ) { init: function($drag, $dropzone) {
var clk = _fn.clickHandlers; var clk = _fn.clickHandlers;
$drag.on( 'dragstart', clk.drag.start ); $drag.on('dragstart', clk.drag.start);
$drag.on( 'dragstop', clk.drag.stop ); $drag.on('dragstop', clk.drag.stop);
$dropzone.on( 'drop', clk.drop.success ); $dropzone.on('drop', clk.drop.success);
$dropzone.on( 'dropover', clk.drop.hover.in ); $dropzone.on('dropover', clk.drop.hover.in);
$dropzone.on( 'dropout', clk.drop.hover.out ); $dropzone.on('dropout', clk.drop.hover.out);
}, },
drag: { drag: {
start: function( event, ui ) { start: function(event, ui) {
$(event.currentTarget).removeClass('within-dropzone fade'); $(event.currentTarget).removeClass('within-dropzone fade');
}, },
stop: function( event, ui ) { stop: function(event, ui) {
var $el = $(event.currentTarget), var $el = $(event.currentTarget),
val = $el.data('value'), val = $el.data('value'),
zone = $el.data('zone') || null; zone = $el.data('zone') || null;
if ( $el.hasClass('within-dropzone') && _fn.test.match( val, zone ) ) { if ($el.hasClass('within-dropzone') && _fn.test.match(val, zone)) {
$el.removeClass('hover') $el.removeClass('hover')
.draggable('disable'); .draggable('disable');
_fn.test.completed++; _fn.test.completed++;
_fn.feedback.popup( _fn.feedback.get(val, true), true ); _fn.feedback.popup(_fn.feedback.get(val, true), true);
if ( _fn.items.allSubmitted() ) { if (_fn.items.allSubmitted()) {
_fn.finish(); _fn.finish();
} }
} else { } else {
// Return to original position // Return to original position
_fn.clickHandlers.drag.reset( $el ); _fn.clickHandlers.drag.reset($el);
_fn.feedback.popup( _fn.feedback.get(val, false), false ); _fn.feedback.popup(_fn.feedback.get(val, false), false);
} }
}, },
reset: function( $el ) { reset: function($el) {
$el.removeClass('within-dropzone fade hover') $el.removeClass('within-dropzone fade hover')
.css({ .css({
top: '', top: '',
...@@ -526,16 +510,16 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -526,16 +510,16 @@ function DragAndDropEditBlock(runtime, element) {
}, },
drop: { drop: {
hover: { hover: {
in: function( event, ui ) { in: function(event, ui) {
var zone = $(event.currentTarget).data('zone'); var zone = $(event.currentTarget).data('zone');
ui.draggable.addClass('hover').data('zone', zone); ui.draggable.addClass('hover').data('zone', zone);
}, },
out: function( event, ui ) { out: function(event, ui) {
ui.draggable.removeClass('hover'); ui.draggable.removeClass('hover');
} }
}, },
success: function( event, ui ) { success: function(event, ui) {
ui.draggable.addClass('within-dropzone') ui.draggable.addClass('within-dropzone')
} }
} }
...@@ -549,8 +533,8 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -549,8 +533,8 @@ function DragAndDropEditBlock(runtime, element) {
len = items.length, len = items.length,
total = 0; total = 0;
for ( i=0; i<len; i++ ) { for (i=0; i<len; i++) {
if ( items[i].zone !== 'none' ) { if (items[i].zone !== 'none') {
total++; total++;
} }
} }
...@@ -568,14 +552,14 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -568,14 +552,14 @@ function DragAndDropEditBlock(runtime, element) {
_.each(items, function(item) { _.each(items, function(item) {
if (item.backgroundImage.length > 0) { if (item.backgroundImage.length > 0) {
list.push( _.template( img_tpl, item ) ); list.push(_.template(img_tpl, item));
} else { } else {
list.push( _.template( tpl, item ) ); list.push(_.template(tpl, item));
} }
}); });
// Update DOM // Update DOM
_fn.$ul.html( list.join('') ); _fn.$ul.html(list.join(''));
// Set variable // Set variable
_fn.$items = $('.xblock--drag-and-drop .items .option', element); _fn.$items = $('.xblock--drag-and-drop .items .option', element);
...@@ -590,12 +574,12 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -590,12 +574,12 @@ function DragAndDropEditBlock(runtime, element) {
i, i,
len = zones.length; len = zones.length;
for ( i=0; i<len; i++ ) { for (i=0; i<len; i++) {
html.push( _.template( tpl, zones[i] ) ); html.push(_.template(tpl, zones[i]));
} }
// Update DOM // Update DOM
_fn.$target.html( html.join('') ); _fn.$target.html(html.join(''));
// Set variable // Set variable
_fn.$zones = _fn.$target.find('.zone'); _fn.$zones = _fn.$target.find('.zone');
...@@ -604,8 +588,8 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -604,8 +588,8 @@ function DragAndDropEditBlock(runtime, element) {
test: { test: {
completed: 0, completed: 0,
match: function( id, zone ) { match: function(id, zone) {
var item = _.findWhere( _fn.data.items, { id: id } ); var item = _.findWhere(_fn.data.items, { id: id });
return item.zone === zone; return item.zone === zone;
} }
...@@ -613,17 +597,17 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -613,17 +597,17 @@ function DragAndDropEditBlock(runtime, element) {
feedback: { feedback: {
// Returns string based on user's answer // Returns string based on user's answer
get: function( id, boo ) { get: function(id, boo) {
var item, var item,
type = boo ? 'correct' : 'incorrect'; type = boo ? 'correct' : 'incorrect';
// Null loses its string-ness // Null loses its string-ness
if ( id === null ) { if (id === null) {
id = 'null'; id = 'null';
} }
// Get object from data.items that matches val // Get object from data.items that matches val
item = _.findWhere( _fn.data.items, { id: id }); item = _.findWhere(_fn.data.items, { id: id });
return item.feedback[type]; return item.feedback[type];
}, },
...@@ -640,12 +624,7 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -640,12 +624,7 @@ function DragAndDropEditBlock(runtime, element) {
} }
}, },
data: { data: null
feedback: {},
items: [],
zones: [],
targetImg: 'https://i.imgur.com/PoI27ox.png'
}
}; };
return { return {
...@@ -657,5 +636,7 @@ function DragAndDropEditBlock(runtime, element) { ...@@ -657,5 +636,7 @@ function DragAndDropEditBlock(runtime, element) {
runtime.notify('cancel', {}); runtime.notify('cancel', {});
}); });
dragAndDrop.builder(); $.ajax(runtime.handlerUrl(element, 'get_data')).done(function(data){
dragAndDrop.builder(data);
});
} }
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