Creating random cards interaction using Javascript - help needed

Nov 24, 2021

Hi Storyline Team,

I am quite new in using JS in storyline. I am currently figuring out how to embed JS in my project. Details on the project: Learners will need to choose 3-8 values on the cards (i.e; integrity, honesty,teamwork etc). We have no ideas which cards the learners will choose. After choosing the values/cards randomly, the next layer will show all the values that the learners have chosen upon clicking Next. I have been searching the tutorials on this but could not find this card style random tutorials. The example is like the files attached.

2 Replies
Dominik Rosehnal

I cannot provide you with a working solution without compensation, but here's some code that does what you want to do, although I didn't test it and there may be typos in it etc.

/*
* For each choice, provide a true/false storyline variable and the name to
* display when it is selected.
*/
const choices = [
{variable: 'choice1', name: 'Honesty'},
{variable: 'choice2', name: 'Loyalty'},
/* etc... */
]

// Storyline player for accessing variables
const player = GetPlayer()

/*
* Select the choices for which the given variable is true and then return their
* names.
*/
const getChosenItems = choices => choices
.filter( ({variable}) => player.Get(variable))
.map( ({name}) => name)

// The storyline text variable that the list of choices should be saved in:
const outputVariable = 'listOfChoices'
// How should choices be separated in the output? \n means by newlines.
const separator = '\n'
// If you don't want a bullet in front, set this constant to '':
const bullet = '• '

// Get all selected choices, format their names in a list and put it into the
// output variable.
player.SetVar(outputVariable, getChosenItems(choices)
.map(name => bullet + name)
.join(separator)
)

The idea is that you have a True/False storyline variable for each choice and a text variable for the output. Then create a text box and put '%listOfChoices%' in it (if that's the name of your output variable). When the user submits their choices, run the code above and that should be it.

Please do not ask me for further help. If you need more, you shouldn't use or even sell a course with this. You may use the code at your own risk, under the terms of the Unlicense (https://unlicense.org/).