Multiple Variable Drag and Drop Demonstration (v1) Steve Gannon, Principal Consultant GanTek Multimedia

Transcription

1 Multiple Variable Drag and Drop Demonstration (v1) Steve Gannon, Principal Consultant GanTek Multimedia Back Story An associate of mine, Marc Lee (a Flash coder and fellow Articulate Storyline developer), was recently working on a Storyline project where he was tasked with presenting the learner with 21 labeled objects, of which the learner could select up to 10. Next, the learner had to place the selected objects into one of three correct panels. 1 At first glance, this did not seem overly difficult to develop, but once he starting formulating a plan for developing this in Storyline, it nearly seemed impossible. After all, there was no way of knowing if the user was going to select three, or seven, or one, or ten of the objects. Plus, the correct/incorrect states of the drop targets would vary depending on which object was selected, dragged and dropped. Marc elected to develop the interaction in Flash, and then later, he cleverly managed to recreate the interaction using a combination of HTML 5, Javascript and JQuery which he could then display in the main Storyline project using a web object. When he presented his solution to me, I took it up as a challenge to recreate the interaction in Storyline. This document and the accompanying Storyline file will guide you through my solution. But first, a disclaimer: This exercise is not designed for the beginning Storyline developer. If you re averse to triggers, you probably don t want to read further! 1 What is the value of such an interaction? While I can t discuss the specific content being used in Marc s project, here s an example that might help make this more relevant. Imagine you re on the organizational development team of your company and you want to help employees understand the competencies the organization deems valuable for various roles. You present a list of these competencies to the employees and ask them to select a few to work on during the coming year. Once the employees make the selections, you ask them to categorize the selected competencies as either Behavioral, Knowledge and Skills, or Managerial (or whatever). This assignment could encourage employees to think about various ways the competencies they ve chosen to focus on might help them contribute to the organization while at the same time help them make progress in achieving their career goals. 1

2 Basic Architecture The demonstration is comprised of two slides. The first slide presents the 21 possible choices and the second presents the actual drag and drop interaction. Slide 1 of 2 Slide 2 of 2 I elected to use the labels of many of the menu options in Storyline s Slide View as the content for this demonstration. The user picks up to 10 menu options to learn about and then on the next slide is challenged to place each of the selected menu options into the correct Slide View menu: Home Menu, View Menu or Insert Menu. Requirements for Slide 1 The interaction on the first slide had the following requirements: possible text options; 2. The learner must choose at least one option but cannot choose more than 10 options; 3. The Next arrow button must be disabled until at least one object is selected and it must go from the normal state back to the disabled state if the user unchecks all checkboxes after checking one or more of them; 4. The number of options selected must be displayed and update as checkboxes are selected or unselected; and, 5. Once 10 options are selected, the checkboxes for the remaining options must be disabled and a message must be displaying instructing the user to uncheck one or more boxes if he/she wants to select different options. Requirements for Slide 2 The interaction on the second slide had the following requirements: 1. The labels of the options selected on Slide 1 must appear on draggable rectangles; 2. There must not be any more draggable rectangles than options selected on the Slide 1; 3. Three empty columns must be provided as drop targets; 4. If a rectangle is dropped anywhere except within one of the three boxes beneath the column headers, the rectangle must pop back to its starting position; 2

3 5. If a rectangle is dropped into an incorrect drop target, it must remain in that target and be marked with an X ; 6. An incorrectly placed rectangle must remain movable, enabling the user to drag it to another box; 7. If a rectangle is dropped into the correct drop target, it must remain in that target and be marked with a checkmark; 8. A correctly placed rectangle must become unmovable, preventing the user from moving it again; and, 9. Rectangles placed into drop targets must stack neatly from top to bottom. SLIDE 1 Let s look at the setup and functionality of Slide 1. 3

4 Displayed Objects The 21 objects are displayed using standard Storyline checkboxes. By default, checkboxes in Storyline include the following states: Normal Hover Down Disabled Selected The only change I made to the default checkbox button was to make the text of the Disabled state gray. Here s a tip: when setting up buttons (or any object that you re going to have multiple copies of), be sure to get the states of the first one you establish to be exactly as you want it; then copy and paste it. If I didn t set up the Disabled state of my first checkbox as I wanted it before duplicating it 20 times, I would have had to change the state for all 21 checkbox buttons individually. I just randomly ordered the 21 objects. It s possible to use Storyline, in conjunction with Javascript, to assign the labels of the checkboxes randomly so that they would always appear in a different order but I didn t want to overly complicate things. First, this wasn t a requirement of the client s; second, the user would only encounter this interaction once; and third, this isn t a graded activity. In the lower left I added a text box with the message indicating that only 10 options could be selected. However, I set the initial state of this message display to Hidden. Once the user selects 10 checkboxes, a trigger changes the state of this object to Normal. Another trigger changes its state back to Hidden if the user unchecks one of the 10 options selected. This text appears in the lower right of the screen: Options selected: %Count% Count is a variable I created to track the number of options selected. On the right side of the screen, I placed an arrow in a circle to be used as the Next Slide button. I created four different color variations and applied them to four states: Normal Disabled Down Hover I set the initial state of the Next arrow button to disabled. A trigger changes the state to Normal as soon as a checkbox is selected. Another trigger disables the button once again if the user unchecks all checkboxes. 4

5 Triggers We ll look at the Slide 1 Triggers panel next. If you look closely at the first 21 triggers, you will note that they each disable one of the 21 checkboxes ( Button 1 through Button 21 ) if three things are true: 1. The counter variable ( Count ) changes; 2. If Count is equal to 10; and, 3. If the button in question is not currently selected. The purpose of these first 21 triggers is to disable any unselected checkboxes if the user has now selected 10 checkboxes total. The next two triggers are responsible for displaying or hiding the message to the user that indicates whether or not they ve reached the limit of 10 selections. If Count changes and Count is equal to 10 (that is, 10 checkboxes have been checked), the message s state is changed to Normal. If Count is less than 10, the message s state is Hidden. 5

6 The next 21 triggers reactivate the disabled checkboxes (i.e., changes their state from Disabled back to Normal ) when the user unchecks one of 10 selected checkboxes. I have this apply only to checkboxes that are not selected because I want selected checkboxes to always remain active on this slide. 42 triggers follow, two for each checkbox button. The first button trigger increments the Count variable by one if that button was just clicked and its state is now Selected. The second trigger decrements the Count variable by one if the button was clicked and its state is no longer Selected. 6

7 The next two triggers determine whether or not the user can click the Next arrow button or not. First, the button is set to Disabled if none of the checkboxes have been selected. The trigger that follows changes the Next arrow button s state to Normal if any of the checkboxes are selected. The next 21 triggers assign a value to a corresponding variable. There are 21 checkbox buttons so I created 21 variables labeled btn01 through btn21. Their initial value is blank. This set of triggers works through the 21 checkboxes and assigns the label of the checkbox to the respective btnxx variable if that checkbox is selected. Otherwise, the value of that variable remains blank. 7

8 A similar set of 21 triggers follows, but in this case, the btnxx variable is set back to blank if the checkbox is not selected. The activity on this slide is now complete. The user has made his/her selections and those selections have been recorded in a btn01 through btn21 variable. The last trigger on Slide 1 jumps to Slide 2 when the Next arrow button is clicked. 8

9 SLIDE 2 Did you think Slide 1 was complicated? We re just getting started! Let s look at the setup and functionality of Slide 2. Displayed Objects The second slide begins with instructions at the top, a Back arrow button on the far left, the draggable rectangles on the left side of the slide, and three labeled columns on the right side of the slide. The Back arrow button is always active. This allows users to go back to Slide 1 and change their selections. There may be up to 10 draggable rectangles on the left side of the slide, each one labeled with one of the selected checkbox labels from Slide 1. How does Storyline know what label belongs on each rectangle? I used a bit of JavaScript to help with that task. We ll get to that. For now, just know that those aren t hard-coded labels on the rectangles; instead, each rectangle s label is actually represented with a variable. 9

10 Before we get into the intricacies of how the draggable rectangles get their names, let s look at the drop targets. This interaction is not a typical Storyline Drag and Drop interaction. In fact, it doesn t use the Freeform Drag and Drop interaction feature in Storyline. Instead, we re going to use Storyline s handy Drop Incorrect state to make this work. When you assign a Drop Correct or Drop Incorrect state to an object, it enables the object to become draggable. In Storyline s Timeline, I have labeled the three vertical gradient rectangles as: Column 1 target; Column 2 target; and, Column 3 target. These are the drop targets. If the user drops one of the draggable rectangles in any other location on the slide except in one of these three boxes, the rectangle will fly back to its starting point. There s no trigger required to send it back; Storyline takes care of that automatically. 10

11 In a moment, we ll go through the list of triggers just as we did earlier for Slide 1. But first, let s take a look at the Variables panel. Recall that I established 21 variables beginning with the prefix btn. These hold the labels of the checkboxes on Slide 1, but only those actually selected. If a checkbox was not selected, that btnxx variable s value will be blank. In addition, I created 10 variables with the prefix card. These variables are going to work in conjunction with the btn variables, via some Javascript, to place the labels on the draggable rectangles. If you look at Slide 2 within Storyline, the draggable rectangles actually appear as shown here. Each rectangle has an embedded cardxx variable on it. The first rectangle will always be visible (because of the way we set up the Next arrow button on the previous slide, the user can t get to this slide until at least one checkbox on Slide 1 is selected). We can t know beforehand, however, which (if any) of the remaining rectangles will be active. The state of rectangles 2 through 10 are therefore set to Hidden initially. 11

12 Each draggable rectangle has three states: Normal; Drop Incorrect; and, Disabled. You re probably wondering why the image of the Disabled state (the rectangle with a checkmark) is not used for a Drop Correct state instead. If you look back at the requirements for the interaction on pages 2 and 3 of this document, you ll see that one of the requirements is that the object must no longer be movable once it s been placed in the correct box. By using the Disabled state, we re able to indicate to the user via the checkmark that he/she dropped the object in the correct box; at the same time, we re ensuring that the rectangle is no longer movable. If we used Drop Correct instead, the user could move the object once more, taking it from its correct location and placing it incorrectly in one of the other two boxes; it doesn t make sense to permit the user to do that. So now you re probably wondering, well, why do we allow rectangles with the Drop Incorrect state to remain movable? Since this activity is more of a self-evaluation rather than a graded exercise, it makes sense to permit the user to try moving the object again until it s placed correctly. Triggers OK, with that introduction behind us, we can now dig into the trigger panel. The first trigger executes a JavaScript 2 script as soon as the timeline for the slide starts. 2 Remember, the Articulate Mobile Player app for the ipad does not support JavaScript. This interaction won t work in the app but should work in the mobile Safari browser via Storyline s HTML 5 publishing option. 12

13 If you open that trigger and examine the Javascript, you will see the listing below. Don t freak out! It s really pretty straightforward. However, I won t explain this script in detail in this document because the comment lines those that begin with // explain what s happening. //If you take some time to study the code below, you'll find it's not that complicated. //All we're doing here is dumping out the names of the objects that weren't selected //on the previous slide and identifying those that were selected. It's possible to do //this with a gazillion triggers but Javascript makes it much easier. // //Initiate communication between Storyline and Javascript var player = GetPlayer(); // //Create a new array to temporarily hold all the names of the draggable objects //If an object wasn't selected, that button's value will be null (i.e., empty, nothing) var array = new Array(); // //Put each button name (even if it's null) into a slot in the array. //There are 21 objects in this demo so the array will have 21 slots. //Note that all of the btnxx variables in the 21 lines below are custom variables we //added to our Variables panel in Storyline. This won't work if those variables are not //first created using the New Variable feature in Storyline. array.push(player.getvar("btn01")); array.push(player.getvar("btn02")); array.push(player.getvar("btn03")); array.push(player.getvar("btn04")); array.push(player.getvar("btn05")); array.push(player.getvar("btn06")); array.push(player.getvar("btn07")); array.push(player.getvar("btn08")); array.push(player.getvar("btn09")); array.push(player.getvar("btn10")); array.push(player.getvar("btn11")); array.push(player.getvar("btn12")); array.push(player.getvar("btn13")); array.push(player.getvar("btn14")); array.push(player.getvar("btn15")); array.push(player.getvar("btn16")); array.push(player.getvar("btn17")); array.push(player.getvar("btn18")); array.push(player.getvar("btn19")); array.push(player.getvar("btn20")); array.push(player.getvar("btn21")); // //The line of code below essentially removes any null value and its slot from the array var array = array.filter(boolean); // //The demo allows for up to 10 draggable objects, or "cards" as we call them here. //Therefore, at the most, the array will have 10 actual values. //We're going to assign the values in the array to 10 card variables. //Note that the first slot in the array is actually numbered zero, not one; //that's just the way Javascript and many other programming languages work. var card01 = array[0]; 13

14 var card02 = array[1]; var card03 = array[2]; var card04 = array[3]; var card05 = array[4]; var card06 = array[5]; var card07 = array[6]; var card08 = array[7]; var card09 = array[8]; var card10 = array[9]; // //Just like we created the btnxx variables discussed above, we also created 10 //custom variables in Storyline called cardxx (i.e., card01, card02, card03...) //The 10 lines of code below pass the value of the card variables we assigned above //back to the 10 cardxx custom variables we created earlier in Storyline. //The variable names you create in Storyline can be different; we just used the same //names in Storyline and Javascript to simplify things. The variable names in Storyline //are those at the beginning of the player.setvar function; i.e., the names with quotes. player.setvar("card01",card01); player.setvar("card02",card02); player.setvar("card03",card03); player.setvar("card04",card04); player.setvar("card05",card05); player.setvar("card06",card06); player.setvar("card07",card07); player.setvar("card08",card08); player.setvar("card09",card09); player.setvar("card10",card10); and that s how the names of the checkboxes the user selected on Slide 1 end up as the labels on the draggable rectangles! 14

15 The next 9 triggers are used to change the state of the 2 nd through 10 th rectangles from Hidden to Normal if the value of Count from the previous slide is at least as high the current rectangle (or Card ) number. The next trigger is assigned to the Back arrow button, enabling users to jump back to Slide 1 to make any changes desired to their selections. And now things get interesting, or rather, laborious! For every Card (that is, draggable rectangle), I have created 42 triggers, for a total of 420 triggers (no, we won t go through each one in this document!). These triggers are essentially establishing the correct and incorrect answers. If the user drops a rectangle in the correct location, that Card is disabled and displays the checkmark indicating it s correctly placed. If the rectangle is placed in the incorrect location, its state is changed to Drop Incorrect, displaying an X. 15

16 You re probably saying, but that s so difficult! It s not so much difficult as it is time consuming. And then you ask, but isn t there an easier way? Yes, with more Javascript triggers I could have created three correct answer arrays, one for each drop target, and compared the value of the cardxx variable of the rectangle just dropped to the contents of the correct answer array for that box. I didn t do so because I wanted to demonstrate what was possible using triggers. But again, I did include one JavaScript trigger initially on Slide 2 because I wanted to avoid having to use thousands (as opposed to hundreds) of triggers. That s it! If you can leverage an interaction such as this in your own projects, take some time to play with the published version and then study the states and triggers. A lot of the work here is just repetition laborious to implement but not difficult to follow and understand if you re comfortable with triggers. Because I only developed this interaction as a proof of concept, I haven t tested it exhaustively. Some of the drag and drop placements may be incorrect. That being said, hopefully this will open some possibilities for you. - Steve Gannon 16