Skip to content
This repository was archived by the owner on Jun 7, 2023. It is now read-only.

Commit 135029d

Browse files
riknos314riknos314
committed
updated css on dragndrop to work with safari
1 parent 2a1a16d commit 135029d

File tree

4 files changed

+139
-7
lines changed

4 files changed

+139
-7
lines changed

‎runestone/dragndrop/css/dragndrop.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
.draggable {
22
margin-left: 2%;
33
margin-top: 5px;
4-
display:inline-block;
4+
display:inline;
5+
float:left;
56
text-align: left;
67
vertical-align: top;
78
background-color: #efefff;
@@ -10,7 +11,7 @@
1011
padding-bottom: 10px;
1112
min-width: 48%;
1213
max-width: 48%;
13-
border: 1px solid #efefff;;
14+
border: 1px solid #efefff;
1415
box-sizing: border-box;
1516
}
1617
.drag-button {

‎runestone/dragndrop/dndtest.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<link rel="stylesheet" href="../assess/bower_components/jquery-ui/themes/base/jquery-ui.css"/>
7+
<link rel="stylesheet" href="../assess/testPages/bootstrap.min.css"/>
8+
<link rel="stylesheet" href="css/dragndrop.css"/>
9+
<script type="text/javascript" src="../assess/bower_components/jquery/dist/jquery.js"></script>
10+
<script type="text/javascript" src="../assess/bower_components/jquery-ui/jquery-ui.js"></script>
11+
<script type="text/javascript" src="../common/js/runestonebase.js"></script>
12+
<script type="text/javascript" src="../assess/bower_components/bootstrap/dist/js/bootstrap.js"></script>
13+
<script type="text/javascript" src="js/dragndrop.js"></script>
14+
<script type="text/javascript" src="../assess/js/timed.js"></script>
15+
<script type="text/javascript" src="http://www.interactivepython.org/runestone/static/thinkcspy/_static/bootstrap-3.0.0/js/bootstrap.min.js"></script>
16+
<script type="text/javascript">
17+
eBookConfig = {};
18+
eBookConfig.host = 'http://interactivepython.org' ? 'http://interactivepython.org' : 'http://127.0.0.1:8000';
19+
eBookConfig.app = eBookConfig.host+'/runestone';
20+
eBookConfig.ajaxURL = eBookConfig.app+'/ajax/';
21+
eBookConfig.course = 'thinkcspy';
22+
eBookConfig.logLevel = 10;
23+
eBookConfig.loginRequired = false
24+
eBookConfig.build_info = "3.1.1";
25+
eBookConfig.isLoggedIn = false;
26+
</script>
27+
28+
29+
</head>
30+
<body>
31+
32+
<ul data-component="dragndrop" id="dd1">
33+
<span data-component="question">The Question goes here.</span>
34+
<span data-component="feedback">This is feedback that is displayed when this is answered incorrectly.</span>
35+
36+
<li data-component="draggable" id="dd1_drag1">Drag to Answer A</li>
37+
<li data-component="dropzone" for="dd1_drag1">Answer A</li>
38+
39+
<li data-component="draggable" id="dd1_drag2">Drag to Answer B</li>
40+
<li data-component="dropzone" for="dd1_drag2">Answer B</li>
41+
42+
<li data-component="draggable" id="dd1_drag3">Drag to Answer C</li>
43+
<li data-component="dropzone" for="dd1_drag3">Answer C</li>
44+
45+
46+
</ul>
47+
48+
<ul data-component="dragndrop" id="dd2">
49+
<span data-component="question">The Question goes here.</span>
50+
<span data-component="feedback">This is feedback that is displayed when this is answered incorrectly.</span>
51+
52+
<li data-component="draggable" id="dd1_drag4">Drag to Answer A</li>
53+
<li data-component="dropzone" for="dd1_drag4">Answer A</li>
54+
55+
<li data-component="draggable" id="dd1_drag5">Drag to Answer B</li>
56+
<li data-component="dropzone" for="dd1_drag5">Answer B</li>
57+
58+
<li data-component="draggable" id="dd1_drag6">Drag to Answer C</li>
59+
<li data-component="dropzone" for="dd1_drag6">Answer C</li>
60+
61+
62+
</ul>
63+
64+
65+
66+
</body>
67+
68+
</html>

‎runestone/dragndrop/js/dragndrop.js‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -82,14 +82,18 @@ DragNDrop.prototype.createNewElements = function () {
8282
$(this.containerDiv).text(this.question);
8383
this.containerDiv.appendChild(document.createElement("br"));
8484

85+
this.dragDropWrapDiv = document.createElement("div"); // Holds the draggables/dropzones, prevents feedback from bleeding in
86+
$(this.dragDropWrapDiv).css("display", "block");
87+
this.containerDiv.appendChild(this.dragDropWrapDiv);
88+
8589
this.draggableDiv = document.createElement("div");
8690
$(this.draggableDiv).addClass("draggable dragzone");
8791
this.addDragDivListeners();
8892

8993
this.dropZoneDiv = document.createElement("div");
9094
$(this.dropZoneDiv).addClass("draggable");
91-
this.containerDiv.appendChild(this.draggableDiv);
92-
this.containerDiv.appendChild(this.dropZoneDiv);
95+
this.dragDropWrapDiv.appendChild(this.draggableDiv);
96+
this.dragDropWrapDiv.appendChild(this.dropZoneDiv);
9397

9498
this.createButtons();
9599
this.checkLocalStorage();
@@ -100,8 +104,12 @@ DragNDrop.prototype.createNewElements = function () {
100104
if (!this.hasStoredDropzones) {
101105
this.minheight = $(this.draggableDiv).height();
102106
}
103-
104107
this.draggableDiv.style.minHeight = this.minheight.toString() + "px";
108+
if ($(this.dropZoneDiv).height() > this.minheight) {
109+
this.dragDropWrapDiv.style.minHeight = $(this.dropZoneDiv).height().toString() + "px";
110+
} else {
111+
this.dragDropWrapDiv.style.minHeight = this.minheight.toString() + "px";
112+
}
105113
};
106114

107115
DragNDrop.prototype.addDragDivListeners = function () {
@@ -368,7 +376,8 @@ DragNDrop.prototype.checkLocalStorage = function () {
368376
=================================*/
369377
$(document).ready(function () {
370378
$("[data-component=dragndrop]").each(function (index) {
371-
ddList[this.id] = new DragNDrop({"orig": this});
379+
if ($(this.parentNode).data("component") !== "timedAssessment") { // If this element exists within a timed component, don't render it here
380+
ddList[this.id] = new DragNDrop({"orig": this});
381+
}
372382
});
373-
374383
});

‎runestone/dragndrop/js/timeddnd.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
function TimedDragNDrop (opts) {
2+
if (opts) {
3+
this.timedInit(opts);
4+
}
5+
}
6+
TimedDragNDrop.prototype = new DragNDrop();
7+
8+
TimedDragNDrop.prototype.timedInit = function (opts) {
9+
this.init(opts);
10+
this.renderTimedIcon(this.containerDiv);
11+
this.hideButtons();
12+
};
13+
14+
15+
TimedDragNDrop.prototype.hideButtons = function () {
16+
$(this.submitButton).hide();
17+
};
18+
19+
TimedDragNDrop.prototype.renderTimedIcon = function (component) {
20+
// renders the clock icon on timed components. The component parameter
21+
// is the element that the icon should be appended to.
22+
var timeIconDiv = document.createElement("div");
23+
var timeIcon = document.createElement("img");
24+
$(timeIcon).attr({
25+
"src": "../_static/clock.png",
26+
"style": "width:15px;height:15px"
27+
});
28+
timeIconDiv.className = "timeTip";
29+
timeIconDiv.title = "";
30+
timeIconDiv.appendChild(timeIcon);
31+
$(component).prepend(timeIconDiv);
32+
};
33+
34+
TimedDragNDrop.prototype.checkCorrectTimed = function () {
35+
// Returns if the question was correct. Used for timed assessment grading.
36+
if (this.unansweredNum === this.dragPairArray.length) {
37+
this.correct = null;
38+
}
39+
40+
return this.correct;
41+
};
42+
43+
TimedDragNDrop.prototype.hideFeedback = function () {
44+
$(this.feedBackDiv).hide();
45+
};
46+
47+
TimedDragNDrop.prototype.processTimedSubmission = function () {
48+
$(this.resetButton).hide();
49+
this.dragEval();
50+
for (var i = 0; i < this.dragPairArray.length; i++) { // No more dragging
51+
$(this.dragPairArray[i][0]).attr("draggable", "false");
52+
$(this.dragPairArray[i][0]).css("cursor", "initial");
53+
}
54+
};

0 commit comments

Comments
 (0)