CODEWITHSUNDEEP
drag-and-dropadobe-captivate
user10672588
user10672588

Reputation:

Adobe Captivate - Drag and Drop

I am using Adobe Captivate to produce an online learning activity, We are using the drag and drop which works well. Only issue is that it is not dynamic, therefore once a student has got it correct they can just follow position to get correct again. Is it possible to shuffle the position of drag or drop objects so as to show that the sudent has understanding of the question and not just following a remembered pattern.

Upvotes: 2

Views: 296

Answers (1)

Chris Walker
Chris Walker

Reputation: 144

Not out of the box. There's no like "Shuffle Drag Sources" checkbox like there is for say multiple choice answers. It would be possible to achieve something like you are asking by putting this script into your OnEnter action and selecting "Execute Javascript":

$(function () {
  var dss = cp.DD.CurrInteractionManager.m_ActiveInteraction.m_dsList;
  var ypos = dss.map((i) => {
    return $("div[id='" + i.n + "']").css("top");
  });
  ypos = shuffle(ypos);
  dss.forEach((o, i) => {
    $("div[id='re-" + o.n + "c']").css("top", ypos[i]);
    $("div[id='" + o.n + "']").css("top", ypos[i]);
  });
  function shuffle(arr) {
    for (var i = 0; i < arr.length; i++) {
      var randId = Math.floor(Math.random() * arr.length);
      var tmp = arr[i];
      arr[i] = arr[randId];
      arr[randId] = tmp;
    }
    return arr;
  }
});

I didn't put comments in here for copy/paste purposes because that awful Captivate JavaScript window is very flaky with whitespace, so a statement by statement walkthrough is here:

var dss = cp.DD.CurrInteractionManager.m_ActiveInteraction.m_dsList;

Collects all of the drag sources into an array.

var ypos = dss.map((i) => {return $("div[id='" + i.n + "']").css("top")});

Extracts the Y position of each object.

ypos = shuffle(ypos);

Calls the function (defined below) to shuffle the order of the array of Y positions randomly.

dss.forEach((o, i) => {$("div[id='re-" + o.n + "c']").css("top", ypos[i]);
$("div[id='" + o.n + "']").css("top", ypos[i]);});

Cycles through the drag sources and places each into its new position, bringing the canvas along with it.

Couple of caveats here.

  • If more than one attempt is allowed, the "Reset button will place the drag sources back to their original locations.
  • This assumes the drag sources are all lined up with the same horizontal position. If they are scattered about, the X position would also need to be accounted for.
  • I didn't test this on a responsive or flex project, I'm not sure how Adobe does the positioning for object in those cases, this will work on fixed-sized projects.
  • Arrow functions might not be supported in IE11, if you need to support that, you might need to re-write the callback functions using traditional syntax.

Upvotes: 0

Related Questions