Hello! I am developing a menu selection course for students and I need assistance. Students will choose items to build their meal. Each item has a button associated with it. Each button is associated with (6) variables-- calories, fats, proteins, carbs/sugars, True/False, Text. When students 'checkout' they will be brought to a results slide which will breakdown the nutritional value of their 'meal' and list their selections. On my results slide, all of the nutritional values of the selected items appear. I was also able to use JavaScript that I adapted from a previous storyline discussion thread to compile my list of selected items on the result slide: var player = GetPlayer();var List_Smash = player.GetVar("List_Smash");var Bacon = player.GetVar("Bacon");var Concate = List_Smash + Bacon;player.SetVar("List_Smash",Concate); For each item to appear in list format, I have the following triggers: Trigger #1: Set ItemT/FVariable to value True When the state of ItemButton is selected. Trigger #2: Execute JavaScript (example above) When user clicks ItemButton, if ItemT/FVariable = value True My only issue is, every time the associated button of an item is selected, SL adds the item to a list. I am unsure what I have to do in order to make sure only selected items are added to the list. I am hoping this is possible! Thank you in advance for your assistance!

Looks like this was built form a sample a posted a long time ago, sorry this was not an elegant build as I just kept building on top of what I had rather than rewriting the whole thing (which I should have done). Maths solution is a good elegant solution, if you wanted to fix what you have I would have added the triggers to a layer and added a trigger to reset concate variable and show the layer each time you click a checkbox, nowhere near as elegant as Math's solution!

Math: I just incorporated your array into my SL and finalized it for review; it worked for all 52 items! I am indebted to you for all of your assistance and cannot convey how thankful I am. Everyone's tips provided a lot of education and demonstrated the multiple ways I could build future courses. For this reason, I look forward to learning and creating more in SL. Thanks again! ~ Christine

My only issue is, every time the associated button of an item is selected, SL adds the item to a list. I am unsure what I have to do in order to make sure only selected items are added to the list. As I read this, it says, "Selected items are added. How do I add selected items?" Maybe you could re-write your question to give it more clarity. Better yet, attach your .story file here, and explain what it does that is different than what you want it to do. See if that gets you some help.

Although as Walt says its hard to figure out exactly whats wrong without a sample... i do have 2 suggestions that might help.Remove the Trigger#2 from the list and add it to a 'When variable changes'. That way you can only trigger it a wanted change of some variable.Also be aware that variables in Storyline are always strings. So i do think the line in your code...var Concate = List_Smash + Bacon;is a bit weird. As i see it both List_Smash and Bacon are 2 text variables and all you do is adding them together. In fact the same as concat( ) does in Javascript but it would be good to use descriptive names as that makes life easier. So something like..var breakfastString = List_Smash + Bacon;would make more sense to me. You can always use this to detect what type a value is...console.log("List_Smash is: "+typeof List_Smash);But to really help you...add the Storyline.

Hello Walt and Math: Thank you both for review. I did not proofread my post and can see how it was unclear. I have attached by Storyline file for review. Essentially, when an item is picked, I would like it to appear in list form on a 'results' slide along with the item's nutritional values so that students can see their selections and proceed with questions following the exercise. I've placed a table on my 'dessert' slide for the purposes of this post. In the example below, I have selected chocolate milkshake, fruit cup, and chocolate chip cookie. These items appear in the table along with their nutritional counts. This is exactly what I want to happen. For each item, I have a combination of triggers and variables associated to a object checkbox (e.g. ChocChip). Variables: Triggers: One Javascript trigger for the listing of items: var player = GetPlayer();var List_Dessert = player.GetVar("List_Dessert");var ChocChip = player.GetVar("ChocChip");var ChocChip_Button = player.GetVar("ChocChip_Button");var Concate = List_Dessert + ChocChip;player.SetVar("List_Dessert",Concate); 4 Javascript triggers for the listing of each nutritional value. Calorie listing example below: var player = GetPlayer();var List_Dessert_Calories = player.GetVar("List_Dessert_Calories");var unitPrice = player.GetVar("ChocChip_Cal");unitPrice = unitPrice.toFixed(0)var displayPrice = unitPrice + "<br />";var Concate = List_Dessert_Calories + displayPrice;player.SetVar("List_Dessert_Calories",Concate); The problem I am facing is, when items are unselected, they are added again to the table instead of being removed or not showing up. Here is an example below. I don't know what the issue is so, your assistance is appreciated! Lastly, referencing Math's comment: Also be aware that variables in Storyline are always strings. So i do think the line in your code...var Concate = List_Smash + Bacon;is a bit weird. As i see it both List_Smash and Bacon are 2 text variables and all you do is adding them together. In fact the same as concat( ) does in Javascript but it would be good to use descriptive names as that makes life easier. So something like..var breakfastString = List_Smash + Bacon;would make more sense to me. You can always use this to detect what type a value is...console.log("List_Smash is: "+typeof List_Smash); I adapted all of my JS codes from this post: https://community.articulate.com/discussions/building-better-courses/building-a-text-list-using-variables-9076700d-32e3-4351-b09c-0a333ae871cf. So, if there is a better way of typing the JS command, please let me know. Thank you both! ~ Christine

Using JavaScript with True/False Buttons

23 Replies

ChristineSawh
Community Member
4 years ago
Hello Math:

This is my 1st experience building in Storyline so, I will definitely check out the other editors you referenced.

I used the array you provided for the item names-- it worked perfectly.

I then used the array you provided for the nutritional values and ran into trouble. The array removes duplicates and I don't need this feature when it comes to the nutritional values. For example:

Water = 0 cal, 0 protein, 0 fat, 0 carbs

Soda = 245 cal, 0 protein, 0 fat, 66 carbs

Lemonade = 260 cal, 0 protein, 0 fat, 70 carbs

All of these have the same values for protein and fat so, I would like these values listed 3 times in the protein and fat columns when the items are selected.

Currently, if these items are selected together, then, protein and fat columns do not have '0' listed 3 times, its left blank.

I'm unsure if there is a work around for this. Hope this makes sense!

~ Christine
- MathNotermans-9
  Community Member
  4 years ago
  For sure there is... let me jump on it...
  I guess... as the values are always the same for the ingredients... its a table or multidimensional array from which you select the appropriate values. I make a sample of it.
ChristineSawh
Community Member
4 years ago
Thank you for taking this on. I'm bumbling through this but, learning soo much!
MathNotermans-9
Community Member
4 years ago
Although this works..
https://360.articulate.com/review/content/5a979e06-302f-4ba4-9c7f-dcd53e8af038/review

Im not completly happy with it... as the alignment of the values of the ingredients is tough to get right... as its pure text.

I wanted to use a multidimensional Array, but for a quick solution i used a simple array and pass along the index ( arrays are always zero-based ) from Storyline.
If this works for you its good...if you too don't like the alignment and rather have more textboxes so you can finetune alignment in Storyline... i fix it when i got some time...

Caitlin_s_Bistro_Multivalues.story275 KB
ChristineSawh
Community Member
4 years ago
Hello Math!

Thank you again for your assistance. I adapted your code for all of my slides and then noticed something odd. So, I checked out your linked file and noticed it as well.

If I choose any items out of order, the 1st item in the list that shows us is 'Chocolate Milkshake' as it is the 1st item in the ListArray and so forth . Here are 2 examples below:

Do you have a suggestion?

Thank you again for your assistance!

~ Christine
- MathNotermans-9
  Community Member
  4 years ago
  Mmm...gonna check and fix that...also had an idea tonight about aligment and layout.
MathNotermans-9
Community Member
4 years ago
So got that fixed...
https://360.articulate.com/review/content/5a979e06-302f-4ba4-9c7f-dcd53e8af038/review

Basically it was getting the wrong index from the array... it should use the value returned from the click on the ingredients.. Well thats fixed inhere.

Im now gonna add different textfields and arrays for calories, protein, fat and carbs to make it better alignable.
Caitlin_s_Bistro_Multivalues.story265 KB
MathNotermans-9
Community Member
4 years ago
And here that version is. Splitted up the array into separate ones for calories, protein...etc. and using those now.
https://360.articulate.com/review/content/923fee11-6b92-4251-85a1-259c4462382a/review

One thing to watch with this approach is the length of your items name / textfield. If its too short it will wrap to a next line...and when that doesnot happen with your nutrition values...well then it rapidly becomes hard to decipher for your student.

Have a nice day,
Math
Caitlin_s_Bistro_AlignedValues.story290 KB
ChristineSawh
Community Member
4 years ago
Math:

I just incorporated your array into my SL and finalized it for review; it worked for all 52 items! I am indebted to you for all of your assistance and cannot convey how thankful I am.

Everyone's tips provided a lot of education and demonstrated the multiple ways I could build future courses. For this reason, I look forward to learning and creating more in SL.

Thanks again!

~ Christine
MathNotermans-9
Community Member
4 years ago
No problem Christine. Love to help. Just shout out in the forum whenever you need any help.
Math

Forum Discussion

Using JavaScript with True/False Buttons

23 Replies

Related Content

Using True/False Variables in Storyline

JavaScript For the Rest of Us: The Basics of JavaScript in Storyline 360

Exploring the New Storyline JavaScript API Capabilities

JavaScript for the Rest of Us: Getting Creative with Advanced JavaScript in Storyline 360

Stepping Up to Intermediate JavaScript in Storyline 360

Learn

Connect

Discover

Community

Company

Trust Center