Forum Discussion

JennaG's avatar
JennaG
Community Member
4 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...
advice
community
e-learning development
storyline 360
  • Nedim's avatar
    Nedim
    4 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);
JennaG's avatar
JennaG
Community Member
4 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
4 months ago

I don't see a way to change the font color only for the selected answer. You can add another CSS rule (e.g., .drop-list text), but it seems to affect the font color of all drop-list items.

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