String concatenation question

[Anthonyd]

Hi all,

I need your help!

Just working on something at work so can’t give too many details away unfortunately but I’ll try my best! We’re working on an automated generation of a sentence based on user input. I am trying to get checkboxes to generate on the next page.

So, based on what the user has selected above, we need this to be placed into a global variable (or whatever!) that can be printed on the next page. If someone selects Analytics + Heatmaps + Survey then the string would need to output Analytics, Heatmaps, Survey (in any order). All errors must also be accounted for - selection, unselection and also the order in which these checkboxes are selected and unselected. I’ve got the concatenation working by the means of <[[v2_evidenceboxestotal]], Usability testing> and removal by the means of ,[[v2_evidenceboxestotal.substring(0,v2_evidenceboxestotal.length-17)]]>. The problem I’m having is that based on the order I select and unselect, the unselection would remove off the back of the string which is incorrect in some cases.

Does anyone have any ideas? I’ve had a look at some examples of RP files that people have posted but none work properly!

Many thanks in advance,
Anthony

[nkrisc]

To clarify:
If I select A, then C, then B, the variable should reflect A+C+B. But if I then uncheck B, the variable should reflect A+B?

If so, this seems pretty simple. Assuming our final variable is called String:

Every checkbox will have the same cases, you can copy/paste it to each one. Or you can copy/paste the checkboxes and just change their text.

OnSelectedChange
(If is selected of This equals true)
Set value of variable String to: [[String + ‘$’ + This.text]]
(Else if true)
Set value of variable String to: [[String.replace(’$’ + This.text,’’)]] //Note that the second parameter is two single quotes (an empty string).

The reason we use the dollar sign is so if we concatenated “bath, elm, the” we don’t end up with “bathelmthe” where “the” appears twice now. Instead we get “$bath$elm$the” so we know for sure where the word boundaries are.

[Anthonyd]

To clarify:
If I select A, then C, then B, the variable should reflect A+C+B. But if I then uncheck B, the variable should reflect A+B?

If so, this seems pretty simple. Assuming our final variable is called String:

Every checkbox will have the same cases, you can copy/paste it to each one. Or you can copy/paste the checkboxes and just change their text.

OnSelectedChange
(If is selected of This equals true)
Set value of variable String to: [[String + ‘$’ + This.text]]
(Else if true)
Set value of variable String to: [[String.replace(’$’ + This.text,’’)]] //Note that the second parameter is two single quotes (an empty string).

The reason we use the dollar sign is so if we concatenated “bath, elm, the” we don’t end up with “bathelmthe” where “the” appears twice now. Instead we get “$bath$elm$the” so we know for sure where the word boundaries are.

Thanks for your reply.

I see what you’re saying but we need the output to come out as a perfect string with no $ signs in it as it will be an auto-generated paragraph. Also, I believe your version doesn’t allow for unchecking properly - I’ve just tried it and selecting/unselecting multiple checkboxes doesn’t always clear the string as expected. I’m currently trying to create multiple variables for each checkbox and then deal with the printing on the resulting page with many if statements…

[nkrisc]

I see what you’re saying but we need the output to come out as a perfect string with no $ signs in it

You can totally do that! This is only the first step not a complete solution. This gets you: (1) The words the person selected (2) in the order they selected them. From here you can do whatever you want with it.

Here’s a working example attached. It works perfectly on my end so it’s possible I just didn’t understand exactly what it is you wanted. I’d added a sample output as well that removes the dollar signs.
checkbox-words.rp (54 KB)

[Anthonyd]

You can totally do that! This is only the first step not a complete solution. This gets you: (1) The words the person selected (2) in the order they selected them. From here you can do whatever you want with it.

Here’s a working example attached. It works perfectly on my end so it’s possible I just didn’t understand exactly what it is you wanted. I’d added a sample output as well that removes the dollar signs.

Ah, sorry - I misunderstood you too! Thanks for this, it does the same thing as what I’ve currently got but in a more simplified way.

The thing I’m now struggling with is ensuring that commas are added after the first checkbox. So, if the user selects Checkbox and tree then the output needs to be “Checkbox, tree”. If checkbox is then unselected, the result needs to read “Tree”. Does that make sense? Essentially ‘if it’s the first value then it should not have a comma’. The output order does not matter, so long as it reads “First item, second item, third item”. It’s doing my head in, I’ve been working on it for half of today!

[nkrisc]

I see two additional features you want:

1. Add a comma after each item, except if it’s the last item (if there’s only 1 item, it’s both the first and last item so holds true).
2. Capitalize the first word only (sentence case).

Since most of the items will have a checkbox after them, let’s start by always adding one in by modifying this action to add a comma:

Set value of variable String to: [[String + ‘$’ + This.text + ‘,’]]
And the removal action needs to account for the comma too:
Set value of variable String to: [[String.replace(’$’ + This.text + ‘,’,’’)]]

Now when we display the text, we need to do two things: remove the dollar signs and remove the last comma. This is easy:

Set text: [[String.replace(’$’,’ ').substring(0, String.length - 1)]]

This should work for the commas. The capitalization bit is trickier, but what I would do is normalize everything to lower case in the first two actions above, and then in the last display step capitalize the first letter.

[Anthonyd]

Got it working, thanks for all your help!

[BrandonUX]

I am working on a similar problem, just with days of the week. I have it working with all of the help provided (including the commas), though I am not concerned with the capitalization. However, the new wrinkle I need is sorting. In other words, I always want it to be in the order of: Sun, Mon, Tue, Wed, Thur, Fri, Sat. If one day is removed, it should still follow the same order. If one day is added after, it should insert itself at the appropriate spot. The output could be:

Sun, Wed, Fri
or
Mon, Thur, Sat
or
Tue, Wed, Thur, Sat
or whatever.

checkbox-words.rp (60.6 KB)

Thanks!

[UXProtoTyper]

Take a look at the attached. I added a second set of checkboxes using a repeater to accomplish what you’re looking for.

The repeater has two columns - one with the name, one with a checked indicator.

Within the repeater, when you check the box it sets the indicator to true. When you uncheck, it sets it to false.

Then onItemLoad, all the magic happens (because every time you check or un-check the box the items reload).

Here are the cases:

1 - sets the repeater label to the first column

2 - if it’s the first item in the repeater, we reset the text on output

3 - if Checked is true - we set the checkbox to checked and append the text of the checkbox to output as well as a comma

4 - if last item, remove the trailing comma

This will enforce that your order always matches your predefined order.
checkbox-words -repeater.rp (66.6 KB)

[Anthony_Axure]

[Anthony_Axure]