Merge pull request #44 from riknos314/dragncss

Add css feed back on submission of dragndrop component

Author: bnmnetp

runestone/dragndrop/css/dragndrop.css

@@ -25,6 +25,10 @@
     background-color: black;
     color: white;
 }
+.drop-incorrect {
+    border: 1px solid red !important;
+    background-color: #f2dede !important;
+}
 .drag-reset:enabled {
     background-color: #474949;
     color: white;

runestone/dragndrop/js/dragndrop.js

@@ -316,7 +316,10 @@ DragNDrop.prototype.dragEval = function () {
     for (var i = 0; i < this.dragPairArray.length; i++) {
         if (!$(this.dragPairArray[i][1]).has(this.dragPairArray[i][0]).length) {
             this.correct = false;
+            $(this.dragPairArray[i][1]).addClass("drop-incorrect");
             this.incorrectNum++;
+        } else {
+            $(this.dragPairArray[i][1]).removeClass("drop-incorrect");
         }
         if (this.hasNoDragChild(this.dragPairArray[i][1])) {
             this.unansweredNum++;

runestone/dragndrop/js/timeddnd.js

@@ -0,0 +1,54 @@
+function TimedDragNDrop (opts) {
+    if (opts) {
+        this.timedInit(opts);
+    }
+}
+TimedDragNDrop.prototype = new DragNDrop();
+
+TimedDragNDrop.prototype.timedInit = function (opts) {
+    this.init(opts);
+    this.renderTimedIcon(this.containerDiv);
+    this.hideButtons();
+};
+
+
+TimedDragNDrop.prototype.hideButtons = function () {
+    $(this.submitButton).hide();
+};
+
+TimedDragNDrop.prototype.renderTimedIcon = function (component) {
+    // renders the clock icon on timed components.    The component parameter
+    // is the element that the icon should be appended to.
+    var timeIconDiv = document.createElement("div");
+    var timeIcon = document.createElement("img");
+    $(timeIcon).attr({
+        "src": "../_static/clock.png",
+        "style": "width:15px;height:15px"
+    });
+    timeIconDiv.className = "timeTip";
+    timeIconDiv.title = "";
+    timeIconDiv.appendChild(timeIcon);
+    $(component).prepend(timeIconDiv);
+};
+
+TimedDragNDrop.prototype.checkCorrectTimed = function () {
+    // Returns if the question was correct.    Used for timed assessment grading.
+    if (this.unansweredNum === this.dragPairArray.length) {
+        this.correct = null;
+    }
+
+    return this.correct;
+};
+
+TimedDragNDrop.prototype.hideFeedback = function () {
+    $(this.feedBackDiv).hide();
+};
+
+TimedDragNDrop.prototype.processTimedSubmission = function () {
+    $(this.resetButton).hide();
+    this.dragEval();
+    for (var i = 0; i < this.dragPairArray.length; i++) {   // No more dragging
+        $(this.dragPairArray[i][0]).attr("draggable", "false");
+        $(this.dragPairArray[i][0]).css("cursor", "initial");
+    }
+};