Forum Discussion

JennaG's avatar
JennaG
Community Member
2 months ago
Solved

Changing the Matching dropdown graded quiz/survey colors

Hello! I'm hoping someone can help me out with a question about changing the colors for the choices in the matching dropdown options. 

I was able to find the answer on how to change the hover color and have successfully done so within my project. However, I've been searching for an answer on how to change the color for currently selected answers for hours and haven't had any luck.

I've included the image below for reference:

Is there a way to change the yellow fill color for currently selected options? If so, how would I do that?

Thank you 😄

advice
community
e-learning development
storyline 360
  • Nedim's avatar
    Nedim
    2 months ago

    You’ll need to inject JavaScript to target the selected state. To do this, add an Execute JavaScript trigger that runs when the timeline starts on the slide:

    const style = document.createElement('style');
style.innerHTML = `
  .drop-list-item-selected {
    fill: #87CEEB !important; 
  }
`;
document.head.appendChild(style);

7 Replies

  • Nedim's avatar
    Nedim
    Community Member
    2 months ago

    You’ll need to inject JavaScript to target the selected state. To do this, add an Execute JavaScript trigger that runs when the timeline starts on the slide:

    const style = document.createElement('style');
style.innerHTML = `
  .drop-list-item-selected {
    fill: #87CEEB !important; 
  }
`;
document.head.appendChild(style);
    • Ange's avatar
      Ange
      Community Member
      2 months ago

      Fantastic Nedim​ I wish I'd known that a few months back. I had do similar: change colors and fonts, and add images on quite a few of the same quiz type to match branding, a laborious task using triggers, layers, variables... This is a keeper! Thank you for sharing your expertise.

    • JennaG's avatar
      JennaG
      Community Member
      2 months ago

      Nedim​ Wow, thank you so much! This absolutely worked. Is it possible to also change the font color using JavaScript? If so, what would I need to enter?

      • Nedim's avatar
        Nedim
        Community Member
        2 months ago

        More CSS properties you can play with:

        const style = document.createElement('style');
style.innerHTML = `
  .drop-list-item-selected {
    fill: #87CEEB !important; 
}
  .drop-list text {
    fill: #2a2b2c !important;
}
  .drop-list-drop-down text {
    fill: #fff !important;
}
  .drop-list-item-out {
    fill: #222 !important;
}
  .drop-list-item-over {
    fill: #aaa !important;
}
   #drop-list-gradient stop:first-child {
    stop-color: #222 !important;
}
   #drop-list-gradient stop:last-child {
    stop-color: #aaa !important;
}
  .drop-list-top > rect {
    fill: aliceblue !important;
}
`;
document.head.appendChild(style);
  • LucianaPiazza's avatar
    LucianaPiazza
    Staff
    2 months ago

    Hello JennaG, 

    Thanks for reaching out! I want to confirm that the yellow fill color for selected answers cannot be modified at this time. I have shared your insight with our product team. We'll be sure to share any future updates in this thread so everyone is in the loop. 

    Have a great weekend!