Forum Discussion

BenKanspedos's avatar
BenKanspedos
Community Member
13 years ago

Copy text from screen of published module?

Are there any work-arounds that would allow the learner to copy text that is on the screen of a published module?  I want them to be able to paste the text elsewhere. Thanks!
storyline 360
PhilRobinson-62's avatar
PhilRobinson-62
Community Member
4 years ago

Hey Josh, I would love to see the script you came up with.

  • JoshOlsen-132a0's avatar
    JoshOlsen-132a0
    Community Member
    4 years ago

    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();

    • PhilRobinson's avatar
      PhilRobinson
      Community Member
      4 years ago

      Thanks for sharing.

    • BogdanHotea-0ef's avatar
      BogdanHotea-0ef
      Community Member
      4 years ago

      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?

      • JoshOlsen-132a0's avatar
        JoshOlsen-132a0
        Community Member
        4 years ago

        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 for "web" publish or the index_lms.html file for "LMS" publish.

        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.