How to make the scene say something different each time?

[Kalaborative]

Here is my code (using JavaScript and Jinja templating):

var myOffers = [{% for o in offers %}"{{ o }}",{% endfor %}];
var rand = myOffers[Math.floor(Math.random() * myOffers.length)];
theater
  .addScene('jjbot:' + rand, 900)
  .addScene('jjbot:')
  })

Basically every time an element is clicked, it runs theater.play(). The problem is, I would like it, if clicked again, to say something different (i.e. a different string in rand). I've tried doing theater.replay() but it only keeps displaying the same text. Is there a way to do this? Thanks!

[zhouzi]

You could create the whole scenario once by adding each offers in a random order, something like:

// offers = list of strings
// random = function that returns a random int between min and max

while (offers.length) {
  var randomIndex = random(0, offers.length);
  var randomOffer = offers.splice(randomIndex, 1);
  theater.addScene('jjbot:' + randomOffer);
}

// Add a replay scene to loop over the scenario
// when all ofers have been written
theater.addScene(theater.replay);

And then, you could stop the scenario after each scene and wait for the user to click the element to play the next scene.

Let me know if that works for you.

[Kalaborative]

@zhouzi thanks for your help on this!

I'm stuck on the while loop part. Is there any way to break out of the loop? The page just loads indefinitely for me.

[zhouzi]

I made a jsfiddle with comments: jsfiddle.net/2bu4h9v5. It should clear things up 👍

[Kalaborative]

This definitely helps.
Thank you so much for that clarity. Cheers!