drag-and-dropadobe-captivate

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.


Solution

  • 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.