Forum Discussion

MattBotelho's avatar
MattBotelho
Community Member
3 months ago

JavaScript not working

Hello, In an effort to create Dark Mode in JavaScript, I have been attempting using codes that change shapes and text into different colors. For whatever reason, codes that I once used are no longer...
Articulate 360
e-learning development
storyline 360
  • MathNotermans-9's avatar
    MathNotermans-9
    3 months ago

    The first part is easy. You forgot the "" around the color.

    let pointStar = document.querySelector('[data-acc-text="star5Points"]');
gsap.to(pointStar, {duration:0.7,scale:1.5});
let pathElement = pointStar.querySelector('path');
console.log("pathElement: "+pathElement);

pathElement.setAttribute('fill', "#C0504D");



    Then this works fine. Little note to everyone coding in Javascript in Storyline, when testing i noticed giving the variable a numeric as first character...Storyline fails on that.
    So pointStar works fine... 5pointStar will fail ;-)

MathNotermans-9's avatar
MathNotermans-9
Community Member
3 months ago

And as you can see here... text works too. But the biggest issue with text is the way Storyline handles it. Depending on your textfield you might have 1 or multiple spans and divs, thus making it hard to create a generic way to get to the text wanted. I do have a check for that somewhere...trying to find it and then adding it.

https://360.articulate.com/review/content/9d1333c9-0469-48f5-b1d4-a1439e15068b/review

This is the code used in the above.

const texts = document.querySelectorAll('[data-acc-text="text2Change"]');
gsap.to(texts, {duration:0.7,scale:1.5});
texts.forEach(text => {
    const txt = text.querySelector('text');
    if (txt) {
      txt.style.fill = "#C0504D";
    }
  });

 

  • MattBotelho's avatar
    MattBotelho
    Community Member
    3 months ago

    I had to remove the scale portion but that worked for the Shape, thank you. My next question if you'd be so kind, is when I have multiple objects with the same Accessibility (e.g. darkMode is the Accessibility text for 3 parts of the course that should go dark) - should they not all behave the same? It seems to only target one shape, not sure how it even picks between them since they're all copy/pastes.

    I will give the text a try.

     

    Update: The text worked as well. I am currently troubleshooting how to make it affect the entire paragraph, it seems to only change the font color for the first line. I've also come to realize each JavaScript must execute on its own which is probably another reason it wasn't working.

    Your help has been greatly appreciated.

Related Content