At the end of June, Desmos gave you access to our most powerful creation tool yet: the new Activity Builder editor. It allows you to add as many components to a screen as you want and lets you rearrange them into one or two columns in any order you want. This month, we want to share with you two of our favorite layouts using the new editor, highlighting specifically the CL that makes them tick.
Component Switcher
We love providing students with multiple ways of quantifying a situation, and in the past, multiple representations needed to be compressed to fit into a single graph display, like this one.
We can now display all of our representations properly in a single column.
But stacking components vertically makes screen navigation laborious. Rather than force students to scroll up and down to see each representation, we can make use of the hidden: sink and a multiple choice component to make what we call a component switcher. Here’s how:
| Arrange all of the components that you want to switch between in a single column. | |
| Add a choice component to the top of the stack. Make one choice for each representation. |
Here’s where the CL comes in. We’ll use the hidden: sink to hide the components we don’t want to see. The hidden: sink hides an entire component when it's set to true or the condition you indicate is true. You can read more about it in the CL documentation.
Here, we want to show a component only when it’s corresponding choice is selected. In other words, we want to hide the component when its corresponding choice is not selected. For example, hidden: not(choice.isSelected(1)) hides a component when the first choice in the multiple choice component is not selected.
Apply this sink to all of your components to hide every component that is not selected.
One other thing we like to do:
Clicking on the ellipses at the top of the multiple choice component brings up a menu. Check the “Always have a selected option” box to make sure one component is always visible.
You’ve just made a component switcher! You can check out the final version here.