July 13, 2019
Response History With A Sorted Display – Version 2
Comments
(3)
July 13, 2019
Response History With A Sorted Display – Version 2
I am currently a provider of technical training and support in the electronic manufacturing industry. My prior training and work experience as a teacher, network administrator, web design, and instructional design make me well prepared to design it, develop it, and deliver it. I am a father of five, a US Army veteran, and I enjoy playing the guitar as well as performing in local community theater. 
Legend 99 posts
Followers: 153 people
(3)

This post shows a slight adaptation to the sorted display post from the other day. If you missed that one, you can catch up here.

Response History With A Sorted Display – eLearning

This adaptation uses the same concept but instead of simply passing text to our array and displaying the contents we are passing the name of a multi-state object to the array and then using that name to change the state of an object in the blue box.

The reason for this adaptation was an attempt to overcome a possible limitation of characters in a variable. By passing a single word to the array we can have an object state appear that has many more words. In this example one of the object states has over 30 words and more than 150 characters.

The function is essentially the same. I did, however, decide to limit the number of choices to six which opens up a few more opportunities for application in your own projects.

Here is the working file for the multi-state version.

Play

Let’s check out the changes.

The Elements

All of the same variables are used with the exception of fewer item variables. Since we are limiting the choices to six – we only need to have variables  item1  thru  item6.

The  pick1  thru  pick10  variables are still used since we still have 10 selections to pick from.

We still have the variable for our array  histArray.

We still have the variable  sweep  that we use for helping us clear out a deselected choice.

New elements include the six boxes evenly distributed in the blue box. The normal state is a transparent box with no text. Each box is named  box1  thru  box6.

The Code

If you recall from the first example, we have code in three areas. Code for the onEnter action, code on the radio buttons, and code on the ‘Clear All‘ button.

Code for the onEnter action remains the same. We are designating the histArray variable as an array.

The code for the radio buttons and ‘Clear All‘ button, however does change so let’s take a closer look at that.

Radio Buttons

Again, since each radio button is essentially the same, I will share just one of them.

function writeList() {
item1=histArray[0];
item2=histArray[1];
item3=histArray[2];
item4=histArray[3];
item5=histArray[4];
item6=histArray[5];
cp.changeState(“box1”, item1);
cp.changeState(“box2”, item2);
cp.changeState(“box3”, item3);
cp.changeState(“box4”, item4);
cp.changeState(“box5”, item5);
cp.changeState(“box6”, item6);
}

function clearItems() {
cp.changeState(“box1″,”Normal”);
cp.changeState(“box2″,”Normal”);
cp.changeState(“box3″,”Normal”);
cp.changeState(“box4″,”Normal”);
cp.changeState(“box5″,”Normal”);
cp.changeState(“box6″,”Normal”);
writeList();
}

if ((window.pick1==0) && (window.histArray.length<6)) {

pick1=1;
cp.changeState(“c1″,”selected”);
histArray.push(“baseball”);
writeList();
}

else if ((window.pick1==1) && (window.histArray.length<7)){
pick1=0;
cp.changeState(“c1″,”Normal”);
sweep=histArray.indexOf(“baseball”);
histArray.splice(sweep, 1);
writeList();
clearItems();
}

As you can see compared to the other version, this code is a bit longer. We still use the  writeList()  function but we only need to assign six variables to the array and we added in the state change commands this time.

Next, you’ll see that we have added a new function called  clearItems()  which was needed to change states back to  ‘Normal’  for removed choices. It was not as simple as the dynamically updating variable text used in the first example. The easiest way I could find to update the list since we don’t know what items will be chosen was to change them all back to normal and then rewrite the list so you will notice that we call the  writeList()  function from within the  clearItems()  function.

Next, we have the same two blocks for when a choice is either made or deselected but it has been tweaked a little. If you compare with the first version, you’ll see that this one has an additional condition for the if statement to verify that both  pick1  is equal to zero and that the length of our array is less than 6 items.

The second block also has been tweaked to become an else if statement rather than just an else statement and we gave it two conditions. First,  pick1  is equal to 1 and for clearing items we check that the length of the array is less than 7. You could also do it to read less than or equal to 6 but I just went with less than 7. The other change to this part is the addition of calling our clearItems()  function to prep the updated list, which remember, is called again at the end of that function.

The ‘Clear All’ Button

The only change here is to call the  clearItems()  function at the end instead of the  writeList()  function. We still need it but it is called at the end of the  clearItems()  function.

So there you have it. Building this project with for use with object states will allow you to neatly display and update your feedback nicely – no matter the length of text you wish to work with. As I was working on this  –  I thought of creating a custom sequencing question that is checked with a submit button. I was totally like – wow – that would make formatting much better than what you get for sequencing with a native quiz slide. That will be for another post.

3 Comments
2019-07-15 11:28:40
2019-07-15 11:28:40

I am talking about the real length of the variable.  Number of characters displayed is easy to edit, reason why I always recommend to insert by using the X buttno, too many users type in the variable between  $$. In that case you never see the dialog box where you can edit the displayed length. BTW It used to be much smaller in older versions, 10 characters.

Like
2019-07-15 11:06:16
2019-07-15 11:06:16

I know the default visible characters displayed is set to 50 when you use the GUI to insert your variables which can get missed if you just type out your variable in double dollar signs. I have not experimented to see how high I can change that value and still display text.

Not sure I would want to go so far as to insert small paragraphs as variables though – I would switch to this multi-state method long before that anyway.

Attachment

Like
2019-07-15 10:08:31
2019-07-15 10:08:31

Good idea, I also use multistate objects a lot for similar reasons.  For those interested: value of a variable used to be 256 characters (remember 8-bit) but for some reasons has been reduced to about 150).

Looooong time ago I created a custom sequence question with advanced actions. Maybe have to refurbish that blog?

Like
Add Comment