This post is born out of a discussion about the need to track several choices that a user makes and populate those choices into a single text box.
You can read the discussion here.

Concatenation to build (populate) history text box

As with most of my solutions to things – this uses JavaScript try and accomplish what our friend is looking to do.
Here is the working project.

Let’s examine how I pulled it off.

The Elements

This project is made up of 22 variables

1. Ten for the radio button selection toggles named  pick1 – pick10
2. Ten for each of the item entries in the blue box named  item1 – item10
3. One for the array named  histArray
4. One for the purpose of storing the index value of the selected item named  sweep

There are 10 radio buttons which are nothing more than a circle with no fill that has an additional state with a smaller circle inside that is filled. The states are labeled ‘Normal’ and ‘selected’. Each radio button is named c1 thru c10 (c for circle) for ease of typing.

There are 10 SmartShape labels for each radio button to designate what that particular selection is.

The single blue box has a number value at the front and each of the item variables after it. So line one is  ( 1.  $$item1$$ )  skip a couple lines  ( 2.  $$item2$$ )  etc.

The ‘Clear All’ button has all the code needed to reset all the variables and to clear the array.

Code can be found on each of the radio buttons, on the ‘Clear All’ button, and as an onEnter action to the slide.
Let’s look at each of these areas.

Code for the onEnter Action

I have a single line of code that runs onEnter to the slide.

var histArray=[];

This is to designate my histArray variable as an array.

Code for the Radio Buttons

The code on each of the buttons is essentially the same so I will only share one of them and discuss it. This is the code for the Baseball radio button.

function writeList() {
item1=histArray[0];
item2=histArray[1];
item3=histArray[2];
item4=histArray[3];
item5=histArray[4];
item6=histArray[5];
item7=histArray[6];
item8=histArray[7];
item9=histArray[8];
item10=histArray[9];
}

if (window.pick1==0) {
pick1=1;
cp.changeState(“c1″,”selected”);
histArray.push(“Baseball”);
writeList();
}

else {
pick1=0;
cp.changeState(“c1″,”Normal”);
var sweep=histArray.indexOf(“Baseball”);
histArray.splice(sweep, 1);
writeList();
}

There are essentially three blocks of code at work here.
We start out at the top by simply defining the writeList() function. Here we set each of our item list variables to each of the values of the array such that item 1 is always the first item in the array which has an index of zero. I wrote this as a function since it was going to be called more than once and it just made things shorter. I called it writeList() since that is basically what it was going to do – write out my list.

In the second block of code we are running an if statement. This is the first item in the list alphabetically so “Baseball” gets stuck with  pick1  as its variable. All of the radio buttons are deselected by default so all values are going to be zero at the start. That means our if statement will execute the first time the button is pressed.

If pick1 equals zero – and it does –

1. go ahead and change pick1 to a value of 1.
2. change the state of c1 to ‘selected’.
3. push the value “Baseball” out to the array  (this will automatically place it in the next available slot.)
4. call the writeList() function to update the list on the side.

The next time the button is pressed – the value of pick1 will be 1 which means that the if statement will be ignored and the else statement will execute instead.

Since pick1 does not equal zero –

1. go ahead and change pick1 back to a value of zero
2. change the state of our button back to ‘Normal‘
3. set our sweep variable to the index value of where ever “Baseball” falls in the array. We do this first since we don’t know what order this will be chosen.
4. Now that we know the index value of “Baseball” – we can splice it out using the value of sweep. (This will allow other members of the array to move up if necessary.)
5. call the writeList() function to update the list on the side.

Code for the ‘Clear All’ Button

So just a big reset here – nothing fancy.

cp.changeState(“c1″,”Normal”);
cp.changeState(“c2″,”Normal”);
cp.changeState(“c3″,”Normal”);
cp.changeState(“c4″,”Normal”);
cp.changeState(“c5″,”Normal”);
cp.changeState(“c6″,”Normal”);
cp.changeState(“c7″,”Normal”);
cp.changeState(“c8″,”Normal”);
cp.changeState(“c9″,”Normal”);
cp.changeState(“c10″,”Normal”);

pick1=0;
pick2=0;
pick3=0;
pick4=0;
pick5=0;
pick6=0;
pick7=0;
pick8=0;
pick9=0;
pick10=0;

histArray=[];

writeList();

We change all the radio buttons back to a deselected state.
We change all the pick choices back to zero

The histArray=[]; code resets the array to an empty state.

Then after all of that we call that writeList() function again – which since the array is empty now – there is nothing to write – but that effectively clears the blue box.

**I believe there would be issues depending on the length of text you plan to cram into the array. If one is adventurous enough, you could make your text feedback into SmartShapes with multiple states for each of your selections and simply have those appear instead of the actual text as in this example. Basically – instead of $$item1$$ – you would have however many SmartShapes you needed neatly arranged. Instead of setting your item variables to each array index – just push a keyword to the array for each piece of feedback and make sure that name matches what you name that state in your state view. Then you have a line of code to change to the corresponding state.

**It will take a little more work to have the history box on multiple slides with choices to be made on multiple slides as well but you should be able to extend this idea forward to make that happen if necessary.

Hopefully this is helpful and provides some food for thought for all of you in some future projects.