Javascript not working in full screen

Hi jliu

1. Claim Key

The issue here is displayed in the browser console when going full screen- Blocked aria-hidden on a <div> element because the element that just received focus must not be hidden from assistive technology users.

Therefore I think you would achieve the result you need far simpler using the Clipboard API, which is actually built directly into vanilla JS! Try this:

var text = getVar("ClaimKey");
copyFunction(text);

function copyFunction(tt) {
  navigator.clipboard.writeText(tt)
    .then(() => {
      console.log('Text copied to clipboard');
    })
    .catch(err => {
      console.error('Failed to copy text: ', err);
    });
}

(The GetPlayer method isn't actually needed anymore as long as you are working with the latest SL360 version.)

2. Confetti

Unfortunately I don't think the original post implemented this script particularly well, as in their version they don't seem to have created the canvas element that the confetti object would need to display on top of. (I guess it's trying to draw the object in another part of the HTML document which when you switch to full screen is getting it confused.)

The way I would approach this would be to draw a background rectangle shape onto your slide, give it an Alt Text value in the Accessibility options, and target the shape that way in your JS. Something like this:

(async () => {
  var slidearea = document.querySelector('[data-acc-text*="background"]');

  // We'll attempt to retrieve the existing canvas first if it exists
  var canvas = document.getElementById('confetti-canvas');

  if (!canvas) {
    // If not, let's create it...
    canvas = document.createElement('canvas');
    canvas.id = 'confetti-canvas';
    canvas.style.width = '100%';
    canvas.style.height = '100%';
    canvas.style.position = 'absolute';
    canvas.style.top = '0';
    canvas.style.left = '0';

    slidearea.appendChild(canvas);

    function resizeCanvas() {
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
    }

    // We should also listen for browser resize events to adjust the canvas size...
    window.addEventListener('resize', resizeCanvas);
    resizeCanvas(); // Set initial size
  }

  canvas.confetti = canvas.confetti || (await confetti.create(canvas, { resize: true }));

  // Your existing particle effect settings...
  var duration = 5 * 1000;
  var animationEnd = Date.now() + duration;
  var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };

  function randomInRange(min, max) {
    return Math.random() * (max - min) + min;
  }

  var interval = setInterval(function() {
    var timeLeft = animationEnd - Date.now();
    if (timeLeft <= 0) {
      return clearInterval(interval);
    }
    var particleCount = 50 * (timeLeft / duration);
    // since particles fall down, start a bit higher than random
    canvas.confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
    canvas.confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
  }, 250);
})();

(In Storyline you're also running the script to attach the JS library to the document every time the user clicks the button. This should only be ran once, so I recommend changing the Execute JS trigger for this to activate when the Timeline Starts rather than when the button is clicked.)

Hope that helps, good luck with your project! Chris