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 @@
# Imports ###########################################################
import logging
import textwrap
import json
import webob
from xblock.core import XBlock
from xblock.fields import Scope, String
from xblock.fields import Scope, String, Dict
from xblock.fragment import Fragment
from .utils import render_template, load_resource
......@@ -36,22 +35,20 @@ class DragAndDropBlock(XBlock):
question_text = String(
display_name="Question text",
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",
help="JSON spec as generated by the builder",
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=textwrap.dedent("""
# {
# feedback: {},
# items: [],
# zones: [],
# targetImg: 'img/triangle.png'
# }
# """)
default={
'feedback': {},
'items': [],
'zones': [],
'targetImg': None
}
)
def student_view(self, context):
......@@ -66,10 +63,16 @@ class DragAndDropBlock(XBlock):
fragment = Fragment()
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_javascript(load_resource('public/js/vendor/jquery.html5-placeholder-shim.js'))
fragment.add_javascript(load_resource('public/js/vendor/underscore1.6.0.js'))
fragment.add_javascript(load_resource('public/js/drag_and_drop.js'))
fragment.add_css_url(self.runtime.local_resource_url(self,
'public/css/vendor/jquery-ui-1.10.4.custom.min.css'))
fragment.add_css_url(self.runtime.local_resource_url(self,
'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')
......@@ -84,10 +87,16 @@ class DragAndDropBlock(XBlock):
fragment = Fragment()
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_javascript(load_resource('public/js/vendor/jquery.html5-placeholder-shim.js'))
fragment.add_javascript(load_resource('public/js/vendor/underscore1.6.0.js'))
fragment.add_javascript(load_resource('public/js/drag_and_drop_edit.js'))
fragment.add_css_url(self.runtime.local_resource_url(self,
'public/css/vendor/jquery-ui-1.10.4.custom.min.css'))
fragment.add_css_url(self.runtime.local_resource_url(self,
'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')
......@@ -97,11 +106,9 @@ class DragAndDropBlock(XBlock):
def studio_submit(self, submissions, suffix=''):
self.display_name = submissions['display_name']
self.question_text = submissions['question_text']
data = submissions['data']
try:
json.loads(data)
self.data = data
self.data = json.loads(submissions['data'])
except ValueError as e:
return {
'result': 'error',
......@@ -114,4 +121,4 @@ class DragAndDropBlock(XBlock):
@XBlock.handler
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 @@
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.fade { opacity: 0.6; }
......@@ -74,19 +78,19 @@
}
.xblock--drag-and-drop .target-img {
background: url('../img/triangle.png') no-repeat;
width: 100%;
height: 100%;
}
.xblock--drag-and-drop .zone {
/*border: 1px solid #000;*/
position: absolute;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Internet Explorer 10 */
-ms-flex-pack:center;
......@@ -155,5 +159,5 @@
}
.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 @@
background: #fff;
}
.xblock--drag-and-drop h1,
.xblock--drag-and-drop h2,
.xblock--drag-and-drop h3,
.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 .problem-header {
display: inline-block;
margin: 0 0 15px 0;
}
.xblock--drag-and-drop header p,
.xblock--drag-and-drop footer p {
color: #adadad;
line-height: 1.5em;
.xblock--drag-and-drop .problem-progress {
display: inline-block;
padding-left: 5px;
color: #666;
font-weight: 100;
font-size: 1em;
}
.xblock--drag-and-drop .small {
font-size: 0.6em;
.xblock--drag-and-drop .problem p {
margin-bottom: 1.41575em;
}
.xblock--drag-and-drop .drag-container {
......@@ -44,6 +29,9 @@
position: relative;
}
.xblock--drag-and-drop .clear {
clear: both;
}
/** Draggable Items **/
.xblock--drag-and-drop .items {
......@@ -86,20 +74,19 @@
}
.xblock--drag-and-drop .target-img {
background: url(../img/triangle.png) no-repeat;
background: url('../img/triangle.png') no-repeat;
width: 100%;
height: 100%;
}
.xblock--drag-and-drop .zone {
/*border: 1px solid #000;*/
position: absolute;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Internet Explorer 10 */
-ms-flex-pack:center;
......@@ -160,25 +147,13 @@
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 **/
.xblock--drag-and-drop .hidden {
display: none !important;
}
.xblock--drag-and-drop .drag-builder {
/* TODO */
/* TODO avoid buttons scrolling without this hack */
height: 375px;
overflow: scroll;
}
......@@ -389,8 +364,8 @@
top: 2px;
left: 6px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.xblock--drag-and-drop .icon.remove:after {
......@@ -404,8 +379,8 @@
top: 6px;
left: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.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) {
'</li>'
].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() {
return [
'<div id="<%= id %>" class="zone" data-zone="<%= title %>" style="',
......@@ -75,40 +54,6 @@ function DragAndDropBlock(runtime, element) {
'<p><%= title %></p>',
'</div>'
].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) {
_fn.zones.draw();
// Load welcome feedback
_fn.feedback.set( _fn.data.feedback.start );
_fn.feedback.set(_fn.data.feedback.start);
// Init drag and drop plugin
_fn.$items.draggable( _fn.options.drag );
_fn.$zones.droppable( _fn.options.drop );
_fn.$items.draggable(_fn.options.drag);
_fn.$zones.droppable(_fn.options.drop);
// Init click handlers
_fn.clickHandlers.init( _fn.$items, _fn.$zones );
_fn.clickHandlers.init(_fn.$items, _fn.$zones);
// Get count of all active items
_fn.items.init();
// 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() {
......@@ -141,48 +87,48 @@ function DragAndDropBlock(runtime, element) {
_fn.$items.draggable('disable');
// Show final feedback
_fn.feedback.set( _fn.data.feedback.finish );
_fn.feedback.set(_fn.data.feedback.finish);
},
clickHandlers: {
init: function( $drag, $dropzone ) {
init: function($drag, $dropzone) {
var clk = _fn.clickHandlers;
$drag.on( 'dragstart', clk.drag.start );
$drag.on( 'dragstop', clk.drag.stop );
$drag.on('dragstart', clk.drag.start);
$drag.on('dragstop', clk.drag.stop);
$dropzone.on( 'drop', clk.drop.success );
$dropzone.on( 'dropover', clk.drop.hover.in );
$dropzone.on( 'dropout', clk.drop.hover.out );
$dropzone.on('drop', clk.drop.success);
$dropzone.on('dropover', clk.drop.hover.in);
$dropzone.on('dropout', clk.drop.hover.out);
},
drag: {
start: function( event, ui ) {
start: function(event, ui) {
$(event.currentTarget).removeClass('within-dropzone fade');
},
stop: function( event, ui ) {
stop: function(event, ui) {
var $el = $(event.currentTarget),
val = $el.data('value'),
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')
.draggable('disable');
_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();
}
} else {
// Return to original position
_fn.clickHandlers.drag.reset( $el );
_fn.feedback.popup( _fn.feedback.get(val, false), false );
_fn.clickHandlers.drag.reset($el);
_fn.feedback.popup(_fn.feedback.get(val, false), false);
}
},
reset: function( $el ) {
reset: function($el) {
$el.removeClass('within-dropzone fade hover')
.css({
top: '',
......@@ -192,16 +138,16 @@ function DragAndDropBlock(runtime, element) {
},
drop: {
hover: {
in: function( event, ui ) {
in: function(event, ui) {
var zone = $(event.currentTarget).data('zone');
ui.draggable.addClass('hover').data('zone', zone);
},
out: function( event, ui ) {
out: function(event, ui) {
ui.draggable.removeClass('hover');
}
},
success: function( event, ui ) {
success: function(event, ui) {
ui.draggable.addClass('within-dropzone');
}
}
......@@ -215,8 +161,8 @@ function DragAndDropBlock(runtime, element) {
len = items.length,
total = 0;
for ( i=0; i<len; i++ ) {
if ( items[i].zone !== 'none' ) {
for (i=0; i<len; i++) {
if (items[i].zone !== 'none') {
total++;
}
}
......@@ -234,14 +180,14 @@ function DragAndDropBlock(runtime, element) {
_.each(items, function(item) {
if (item.backgroundImage.length > 0) {
list.push( _.template( img_tpl, item ) );
list.push(_.template(img_tpl, item));
} else {
list.push( _.template( tpl, item ) );
list.push(_.template(tpl, item));
}
});
// Update DOM
_fn.$ul.html( list.join('') );
_fn.$ul.html(list.join(''));
// Set variable
_fn.$items = $('.xblock--drag-and-drop .items .option');
......@@ -256,12 +202,12 @@ function DragAndDropBlock(runtime, element) {
i,
len = zones.length;
for ( i=0; i<len; i++ ) {
html.push( _.template( tpl, zones[i] ) );
for (i=0; i<len; i++) {
html.push(_.template(tpl, zones[i]));
}
// Update DOM
_fn.$target.html( html.join('') );
_fn.$target.html(html.join(''));
// Set variable
_fn.$zones = _fn.$target.find('.zone');
......@@ -270,8 +216,8 @@ function DragAndDropBlock(runtime, element) {
test: {
completed: 0,
match: function( id, zone ) {
var item = _.findWhere( _fn.data.items, { id: id } );
match: function(id, zone) {
var item = _.findWhere(_fn.data.items, { id: id });
return item.zone === zone;
}
......@@ -279,17 +225,17 @@ function DragAndDropBlock(runtime, element) {
feedback: {
// Returns string based on user's answer
get: function( id, boo ) {
get: function(id, boo) {
var item,
type = boo ? 'correct' : 'incorrect';
// Null loses its string-ness
if ( id === null ) {
if (id === null) {
id = 'null';
}
// 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];
},
......@@ -309,29 +255,22 @@ function DragAndDropBlock(runtime, element) {
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
$(this).dialog("close");
}
}
});
}
},
data: {
feedback: {},
items: [],
zones: [],
targetImg: 'img/triangle.png'
}
data: null
};
return {
init: _fn.init,
data: _fn.data
};
})(jQuery);
$.ajax(runtime.handlerUrl(element, 'get_data')).done(function(data){
dragAndDrop.init(data);
});
}
drag_and_drop_v2/public/js/drag_and_drop_edit.js
......@@ -28,22 +28,6 @@ function DragAndDropEditBlock(runtime, element) {
// item template
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() {
return [
'<div class="zone-row <%= name %>">',
......@@ -129,19 +113,20 @@ function DragAndDropEditBlock(runtime, element) {
},
target: $('.xblock--drag-and-drop .drag-builder .target-img', element)
},
init: function() {
init: function(data) {
_fn.data = data;
_fn.build.clickHandlers();
_fn.build.form.zone.add();
_fn.$target.css('background', 'url(' + _fn.data.targetImg + ') no-repeat');
},
clickHandlers: function() {
var $fbkTab = _fn.build.$el.feedback.tab,
$zoneTab = _fn.build.$el.zones.tab,
$itemTab = _fn.build.$el.items.tab;
$(element).one( 'click', '.continue-button', function(e) {
$(element).one('click', '.continue-button', function(e) {
e.preventDefault();
_fn.build.form.feedback( _fn.build.$el.feedback.form );
_fn.build.form.feedback(_fn.build.$el.feedback.form);
$fbkTab.addClass('hidden');
$zoneTab.removeClass('hidden');
......@@ -149,7 +134,7 @@ function DragAndDropEditBlock(runtime, element) {
// Placeholder shim for IE9
$.placeholder.shim();
$(this).one( 'click', function(e) {
$(this).one('click', function(e) {
e.preventDefault();
_fn.build.form.zone.setAll();
_fn.build.form.item.add();
......@@ -163,7 +148,7 @@ function DragAndDropEditBlock(runtime, element) {
$(this).addClass('hidden');
$('.save-button', element).parent()
.removeClass('hidden')
.one( 'click', function(e) {
.one('click', function(e) {
e.preventDefault();
_fn.build.form.submit();
});
......@@ -171,21 +156,20 @@ function DragAndDropEditBlock(runtime, element) {
});
$zoneTab
.on( 'click', '.add-zone', _fn.build.form.zone.add )
.on( 'click', '.remove-zone', _fn.build.form.zone.remove )
.on( 'click', '.target-image-form button', function(e) {
.on('click', '.add-zone', _fn.build.form.zone.add)
.on('click', '.remove-zone', _fn.build.form.zone.remove)
.on('click', '.target-image-form button', function(e) {
e.preventDefault();
_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();
});
$itemTab
.on( 'click', '.add-item', _fn.build.form.item.add )
.on( 'click', '.remove-item', _fn.build.form.item.remove );
.on('click', '.add-item', _fn.build.form.item.add)
.on('click', '.remove-item', _fn.build.form.item.remove);
},
form: {
zone: {
......@@ -223,20 +207,20 @@ function DragAndDropEditBlock(runtime, element) {
y: 0
};
_fn.build.form.zone.obj.push( zoneObj );
_fn.build.form.zone.obj.push(zoneObj);
// Add fields to zone position form
$elements.zones.form.append( _.template( inputTemplate, {
$elements.zones.form.append(_.template(inputTemplate, {
title: 'Zone ' + num,
name: name
}));
_fn.build.form.zone.enableDelete();
// 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
_fn.build.form.zone.clickHandler( num );
_fn.build.form.zone.clickHandler(num);
// Placeholder shim for IE9
$.placeholder.shim();
......@@ -257,12 +241,12 @@ function DragAndDropEditBlock(runtime, element) {
$.placeholder.shim();
},
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');
}
},
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');
}
},
......@@ -273,34 +257,34 @@ function DragAndDropEditBlock(runtime, element) {
$form.each(function(i, el) {
var val = $(el).val();
if ( val.length > 0 ) {
zones.push( val );
if (val.length > 0) {
zones.push(val);
}
});
_fn.build.form.zone.list = zones;
_fn.build.form.createDropdown(zones);
},
clickHandler: function( num ) {
clickHandler: function(num) {
var $div = $('#zone-' + num, element),
$form = _fn.build.$el.zones.form.find('.zone-row.zone-' + num);
// Listen to form changes and update zone div position
$form.on('keyup', '.title', function(e) {
var text = $(e.currentTarget).val(),
record = _.findWhere( _fn.build.form.zone.obj, {
record = _.findWhere(_fn.build.form.zone.obj, {
index: num
});
$div.find('p').html(text);
record.title = text;
if ( !record.active ) {
if (!record.active) {
record.active = true;
}
}).on('keyup', '.width', function(e) {
var width = $(e.currentTarget).val(),
record = _.findWhere( _fn.build.form.zone.obj, {
record = _.findWhere(_fn.build.form.zone.obj, {
index: num
});
......@@ -308,7 +292,7 @@ function DragAndDropEditBlock(runtime, element) {
record.width = width;
}).on('keyup', '.height', function(e) {
var height = $(e.currentTarget).val(),
record = _.findWhere( _fn.build.form.zone.obj, {
record = _.findWhere(_fn.build.form.zone.obj, {
index: num
});
......@@ -316,7 +300,7 @@ function DragAndDropEditBlock(runtime, element) {
record.height = height;
}).on('keyup', '.x', function(e) {
var x = $(e.currentTarget).val(),
record = _.findWhere( _fn.build.form.zone.obj, {
record = _.findWhere(_fn.build.form.zone.obj, {
index: num
});
......@@ -324,7 +308,7 @@ function DragAndDropEditBlock(runtime, element) {
record.x = x;
}).on('keyup', '.y', function(e) {
var y = $(e.currentTarget).val(),
record = _.findWhere( _fn.build.form.zone.obj, {
record = _.findWhere(_fn.build.form.zone.obj, {
index: num
});
......@@ -332,39 +316,39 @@ function DragAndDropEditBlock(runtime, element) {
record.y = y;
});
},
cleanObject: function( arr ) {
cleanObject: function(arr) {
var clean = [],
i,
len = arr.length;
for ( i=0; i<len; i++ ) {
for (i=0; i<len; i++) {
if (arr[i].active) {
clean.push( arr[i] );
clean.push(arr[i]);
}
}
return clean;
}
},
createDropdown: function( arr ) {
createDropdown: function(arr) {
var tpl = _fn.tpl.zoneDropdown,
i,
len = arr.length,
dropdown = [],
html;
for ( i=0; i<len; i++ ) {
dropdown.push( _.template( tpl, { value: arr[i] } ) );
for (i=0; i<len; i++) {
dropdown.push(_.template(tpl, { value: arr[i] }));
}
// Add option to include dummy answers
dropdown.push( _.template( tpl, { value: 'none' } ) );
dropdown.push(_.template(tpl, { value: 'none' }));
html = dropdown.join('');
_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 = {
start: $form.find('.intro-feedback').val(),
finish: $form.find('.final-feedback').val()
......@@ -376,12 +360,12 @@ function DragAndDropEditBlock(runtime, element) {
var $form = _fn.build.$el.items.form,
tpl = _fn.tpl.itemInput();
if ( e ) {
if (e) {
e.preventDefault();
}
_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();
// Placeholder shim for IE9
......@@ -400,12 +384,12 @@ function DragAndDropEditBlock(runtime, element) {
$.placeholder.shim();
},
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');
}
},
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');
}
}
......@@ -414,7 +398,7 @@ function DragAndDropEditBlock(runtime, element) {
var items = [],
$form = _fn.build.$el.items.form.find('.item');
$form.each( function(i, el) {
$form.each(function(i, el) {
var $el = $(el),
name = $el.find('.item-text').val(),
backgroundImage = $el.find('.background-image').val();
......@@ -447,7 +431,7 @@ function DragAndDropEditBlock(runtime, element) {
});
_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 = {
'display_name': $(element).find('.display-name').val(),
......@@ -475,48 +459,48 @@ function DragAndDropEditBlock(runtime, element) {
_fn.$items.draggable('disable');
// Show final feedback
_fn.feedback.set( _fn.data.feedback.finish );
_fn.feedback.set(_fn.data.feedback.finish);
},
clickHandlers: {
init: function( $drag, $dropzone ) {
init: function($drag, $dropzone) {
var clk = _fn.clickHandlers;
$drag.on( 'dragstart', clk.drag.start );
$drag.on( 'dragstop', clk.drag.stop );
$drag.on('dragstart', clk.drag.start);
$drag.on('dragstop', clk.drag.stop);
$dropzone.on( 'drop', clk.drop.success );
$dropzone.on( 'dropover', clk.drop.hover.in );
$dropzone.on( 'dropout', clk.drop.hover.out );
$dropzone.on('drop', clk.drop.success);
$dropzone.on('dropover', clk.drop.hover.in);
$dropzone.on('dropout', clk.drop.hover.out);
},
drag: {
start: function( event, ui ) {
start: function(event, ui) {
$(event.currentTarget).removeClass('within-dropzone fade');
},
stop: function( event, ui ) {
stop: function(event, ui) {
var $el = $(event.currentTarget),
val = $el.data('value'),
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')
.draggable('disable');
_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();
}
} else {
// Return to original position
_fn.clickHandlers.drag.reset( $el );
_fn.feedback.popup( _fn.feedback.get(val, false), false );
_fn.clickHandlers.drag.reset($el);
_fn.feedback.popup(_fn.feedback.get(val, false), false);
}
},
reset: function( $el ) {
reset: function($el) {
$el.removeClass('within-dropzone fade hover')
.css({
top: '',
......@@ -526,16 +510,16 @@ function DragAndDropEditBlock(runtime, element) {
},
drop: {
hover: {
in: function( event, ui ) {
in: function(event, ui) {
var zone = $(event.currentTarget).data('zone');
ui.draggable.addClass('hover').data('zone', zone);
},
out: function( event, ui ) {
out: function(event, ui) {
ui.draggable.removeClass('hover');
}
},
success: function( event, ui ) {
success: function(event, ui) {
ui.draggable.addClass('within-dropzone')
}
}
......@@ -549,8 +533,8 @@ function DragAndDropEditBlock(runtime, element) {
len = items.length,
total = 0;
for ( i=0; i<len; i++ ) {
if ( items[i].zone !== 'none' ) {
for (i=0; i<len; i++) {
if (items[i].zone !== 'none') {
total++;
}
}
......@@ -568,14 +552,14 @@ function DragAndDropEditBlock(runtime, element) {
_.each(items, function(item) {
if (item.backgroundImage.length > 0) {
list.push( _.template( img_tpl, item ) );
list.push(_.template(img_tpl, item));
} else {
list.push( _.template( tpl, item ) );
list.push(_.template(tpl, item));
}
});
// Update DOM
_fn.$ul.html( list.join('') );
_fn.$ul.html(list.join(''));
// Set variable
_fn.$items = $('.xblock--drag-and-drop .items .option', element);
......@@ -590,12 +574,12 @@ function DragAndDropEditBlock(runtime, element) {
i,
len = zones.length;
for ( i=0; i<len; i++ ) {
html.push( _.template( tpl, zones[i] ) );
for (i=0; i<len; i++) {
html.push(_.template(tpl, zones[i]));
}
// Update DOM
_fn.$target.html( html.join('') );
_fn.$target.html(html.join(''));
// Set variable
_fn.$zones = _fn.$target.find('.zone');
......@@ -604,8 +588,8 @@ function DragAndDropEditBlock(runtime, element) {
test: {
completed: 0,
match: function( id, zone ) {
var item = _.findWhere( _fn.data.items, { id: id } );
match: function(id, zone) {
var item = _.findWhere(_fn.data.items, { id: id });
return item.zone === zone;
}
......@@ -613,17 +597,17 @@ function DragAndDropEditBlock(runtime, element) {
feedback: {
// Returns string based on user's answer
get: function( id, boo ) {
get: function(id, boo) {
var item,
type = boo ? 'correct' : 'incorrect';
// Null loses its string-ness
if ( id === null ) {
if (id === null) {
id = 'null';
}
// 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];
},
......@@ -640,12 +624,7 @@ function DragAndDropEditBlock(runtime, element) {
}
},
data: {
feedback: {},
items: [],
zones: [],
targetImg: 'https://i.imgur.com/PoI27ox.png'
}
data: null
};
return {
......@@ -657,5 +636,7 @@ function DragAndDropEditBlock(runtime, element) {
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">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<h2 class="problem-header">
{{ title }}
</h2>
......
drag_and_drop_v2/templates/html/drag_and_drop_edit.html
{% load i18n %}
<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">
<div class="tab feedback-tab">
......@@ -21,9 +19,6 @@
<textarea class="final-feedback"></textarea>
</form>
</section>
<!-- <footer class="tab-footer">
<button class="btn continue goto-zones">Continue</button>
</footer> -->
</div>
<div class="tab zones-tab hidden">
......@@ -39,9 +34,6 @@
<div class="target-img"></div>
</div>
</section>
<!-- <footer class="tab-footer">
<button class="btn continue goto-items">Continue</button>
</footer> -->
</div>
<div class="tab items-tab hidden">
......@@ -53,7 +45,6 @@
</section>
<footer class="tab-footer">
<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>
</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