21 Replies
Rebecca Fleisch Cordeiro

Hi Ben,

Not sure where you want to copy to, but here's a couple thoughts:

If you're using the Windows OS and have a Windows keyboard, you can use the Windows+S key combo to copy a selection off the screen. That will display a window asking where you'd  like to copy it to. From there, you can use CTRL+V, or right-click and paste.

This pastes the info in as a picture. If you have OneNote, and you paste it into OneNote, you can right-click the "picture" and choose copy text from picture from the shortcut menu.

Ben Kanspedos

Hi,

Thanks for replying. I'm actually trying to allow the users to copy text from the screen of the published module, so they can paste the text while chatting with customers.

I'm creating an expandable decision tree in the form of a flow chart. This will be used by agents during actual contacts.  I want to direct agents down the correct path when taking contacts on a certain big call driver. It's basically one slide with lots of layers.

Since some contacts are via chat, one feature I wanted to include was to have the option of copying what they should tell the customer at that point. Then they could paste into the chat interface they are using with their customer. This would make it easier for agents and allow for consistent messaging at key points int he troubleshooting process.

I think this may be possible using javascript triggers but I'm really confused about it, I can't get any javascript to work...even the javascript examples articulate has on their website.

Nena Erickson Oakes

Hey I know this thread is dated but there doesn't seem to be another option. I need the learners to be able to copy a link to a shared drive from the module screen. I tried adding it as a hyperlink but I don't have the same access as my learners will so I really need it to be accessible for copy and paste.

Josh Olsen

Hey everyone 👋

I've got a prototype workaround for enabling selectable text in published Storyline courses.

It involves CSS and JavaScript.

CSS:

svg text,
svg text * {
  user-select: text;
}

JavaScript:

Code to remove the "uneventable" class from all parents of SVG "g" elements with the class of "vector-text-item".

Happy to post the JavaScript if anyone's interested.

Josh Olsen

Hey Phil,

The Script has to regularly poll the DOM and iterate over the SVG text elements.

It's not perfect, hence being a prototype, but it solves a problem I have.

var a11y = {
  intervalId: null,
  toUnlock: [],
  pollForSVGTextElements: function() {
    var textEls = document.querySelectorAll('svg g.vector-text-item');
    a11y.toUnlock = [];
    var textElParent = null;
    textEls.forEach((textEl) => {
      textElParent = textEl.parentElement;
      if (textElParent.classList.contains('uneventable')) {
        a11y.toUnlock.push(textElParent);
      }
    });
    a11y.removeClass();
  },
  removeClass: function() {
    a11y.toUnlock.forEach((lockedEl) => {
      lockedEl.classList.remove('uneventable');
    });
  },
  init: function() {
    a11y.intervalId = setInterval(function() {
      a11y.pollForSVGTextElements();
    }, 1000);
  }
}
a11y.init();

Bogdan Hotea

Hi Josh,

I'm interested in trying out your solution for this, but don't know where to begin.

Can you please tell me where the CSS and JS need to go?

For example, once I export the slides I need, which file (or files) do I need to open to insert the code? Is there a specific spot inside the file that the code needs to be added to?

Josh Olsen

Hey Bogdan 👋

Sorry for the late reply. I don't seem to be getting alerts.

You need to publish the slides as either "web" or "LMS".

Both the CSS and JS go in the published story.html file.

Place the CSS within an existing STYLE element in the HEAD element of the HTML file:

<head>
...
<style>
html, body { height: 100%; padding: 0; margin: 0 }
#app { height: 100%; width: 100%; }

-->> add CSS here <<--

</style>
...
</head>

And add the JS in a new SCRIPT tag before the closing BODY tag:

...
<link rel="stylesheet" href="html5/data/css/output.min.css" data-noprefix/>

<script>
-->> add JS here <<--
</script>
</body>

This is a post-publish hack so you'll need to make the above changes every time you make a change to the .story file.