Do You Like Scary Movies?

Thanks BelleHabs​. Most of the footage was created using Google Flow. There are five videos in total, based on these three images:

But when the teddy bear speaks, that was created using the Articulate's AI Avatar tool. I find it produces much more consistent and expressive results than Google Flow, especially for non-human characters:

 

The entire interaction is contained in one slide, with most of the videos stacked on top of each other on the base slide. I use the visibility settings in the layers to show / hide each each video when it's needed. In this way, there's no lag between each video, as we're not moving to another slide. It's a trick I've used for years to create short branching video experiences.

The shuffle effect on the cassettes is achieved with motion paths, variables, and JavaScript, which changes the z-index position of the three cassettes while keeping the control buttons always above them. Having the three cassettes stacked on top of one another was a great way to save space in my layout, and made the process of reviewing and selecting the answer a little more interesting.

And here's the Javascript:

var player = GetPlayer();
var IDS = { A: "5vd1pYkVtu0", B: "63DH1h7iHLj", C: "6k3mzhmV3ID" };
var TOP_IDS = ["5xU0Xiccp2s", "6L8mN7guBDE"]; // PLAY, SHUFFLE
var ORDERS = { 1: ["A", "B", "C"], 2: ["B", "C", "A"], 3: ["C", "A", "B"] };
var DELAY_MS = 450;
var BASE_Z = 1000;
var TOP_Z = BASE_Z + 100; // always above the cassettes

function setZ(id, z) {
  var els = document.querySelectorAll('[data-model-id="' + id + '"]');
  for (var j = 0; j < els.length; j++) {
    els[j].style.zIndex = z;
  }
}

function applyTop() {
  for (var t = 0; t < TOP_IDS.length; t++) {
    setZ(TOP_IDS[t], TOP_Z);
  }
}

function applyOrder(order) {
  for (var i = 0; i < order.length; i++) {
    setZ(IDS[order[i]], BASE_Z + (order.length - i));
  }
  applyTop();
}

if (window.cassetteWatcher) {
  clearInterval(window.cassetteWatcher.interval);
  clearTimeout(window.cassetteWatcher.timeout);
  window.removeEventListener("resize", window.cassetteWatcher.onResize);
}

var state = { last: player.GetVar("Cassette"), current: null, timeout: null };

state.onResize = function () {
  setTimeout(function () {
    if (state.current) {
      applyOrder(state.current);
    } else {
      applyTop();
    }
  }, 100);
};
window.addEventListener("resize", state.onResize);

state.interval = setInterval(function () {
  var value = player.GetVar("Cassette");
  if (value === state.last) { return; }
  state.last = value;
  var order = ORDERS[value];
  if (!order) { return; }
  clearTimeout(state.timeout);
  state.timeout = setTimeout(function () {
    state.current = order;
    applyOrder(order);
  }, DELAY_MS);
}, 100);

applyTop(); // lift PLAY and SHUFFLE straight away
window.cassetteWatcher = state;

Hope that helps!