Sectional Components

Discussion
1

Hi Everyone,

Is there a way to change the color of a blocked sectional component? I have not been able to find a solution.

2

The color-changing is a special feature of things like a <problem> or a <question>, which typically have awards associated with credit, or for a <section> when it is enclosed within a <cascade>.
If you want not-for-credit normal sections to have a different color, you can put them inside a cascade and not include problems, which means they start off at the “correct color” which can be specified with the completedColor attribute.

So, this is a hack and Duane probably won’t love it, but it seems to work.

<problem boxed completedColor="purple">
  here is a problem. it's already purple because there is no credit associated
</problem>

<section boxed colorCorrectness="true">
  here is a section, it doesn't change color on it's own, even with the colorCorrectness attribute and having credit associated...
  <answer>1</answer>
</section>

Here's the hack: 
<cascade revealAll>
  <section boxed completedColor="purple">
    here is a section inside a cascade that doesn't have credit associated. So, it's already purple
  </section>
</cascade>
1 Like
3

A <section> does not automatically aggregate scores unless it is in a <cascade>. (I assumed that people don’t want in general want the scores equally weighted across sections/subsections. A cascade does not work if each section does not have its own score, hence the exception.)

You can add the aggregateScores attribute to a section if you want it to have its own score and behave like a <problem>, <exercise> or <question>.

4

The completed color for cascade fails accessibility. Do you know how to fix that?

5

Can you explain how they fail accessibility? Are you changing the text color? For the default text color, I calculate that the color contrast for completedColor is 15.7:1 for the black text in light mode and is 7.87:1 for the white text in dark mode, which is beyond the 4.5:1 needed for WCAG AA compliance.

If you change completedColor to drop below 4.5:1, then Doenet should show an accessibility warning with an explanation of insufficient color contrast.

Is an accessibility scanner indicating a failure in color contrast for completed color? If so, what message is it giving?

6

Sorry, I have an error with 4:5:1, I don’t know how to change to 4;5:1, thats all

7

What colors are you using that get you below 4.5:1 for completedColor? If you are using light mode, which means that text is black, you can increase the color contrast by making it lighter (in RGB space, increase red, green, and blue).

8

I figured it out! Thank you!