# Computation Layer 101

**URL:** <https://cl.desmos.com/t/computation-layer-101/8414>\
**Category:** Articles\
**Tags:** sketch\
**Created:** [November 25, 2025, 11:35pm UTC](https://cl.desmos.com/t/computation-layer-101/8414 "2025-11-25T23:35:14Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![JayChow](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/jaychow/32/1674_2.png) [@JayChow](https://cl.desmos.com/u/JayChow)\
**Post date:** [November 25, 2025, 11:35pm UTC](https://cl.desmos.com/t/computation-layer-101/8414/1 "2025-11-25T23:35:14Z")

</div>

_This article contains interactive elements. make sure you are signed into [Activity Builder](https://classroom.amplify.com/discover?login=) before continuing._

_Note: This article is a companion piece to our Introduction to CL webinar. You can view and register for upcoming webinars by visiting our [PD page](https://go.info.amplify.com/fy25_amplifyclassroom_professionallearning_national_webinars_webinar-series_content-only_optin)._

## Do I Need CL?

Lets start with something simple: On screen 1 we’ll tell the students we’re thinking of a number between 1 and 10. On screen 2 we’ll share our number with the class and see who’s closest.

https://classroom.amplify.com/activity/695d2c061e0deedf46694afd#preview/b896bf89-2805-4497-af85-e807a3df0a4e

This activity fails spectacularly for three reasons:

1. There’s a heavy reliance on the teacher to set up and execute pacing in order to keep the number secret.
2. Once students are paced to the answer screen they no longer have access to their guess.
3. This activity can and has been done for decades in a fraction of the time using a paper, clipboard, etc.

Digging into the third reason, you want your activities to be worth the time it takes to create, refine, and deliver using Activity Builder. This doesn’t always require the use of CL (think graph explorations, marbleslides, and basic challenge creators), but often do. In this article we’ll use our simple _Guess My Number_ activity as an example to show you how to use CL to add interactivity to your Activity Builder creations.

* * *

The first thing we want to do is condense this interaction down to a single screen. For obvious reasons, simply combining the components won’t work:

In order to hide the solution we’ll need to add our first line of CL, but first…

## Your Big Override Button

In the past we’ve described CL as connective tissue between components, power lines, or a series of “getters” and “setters”. Here, we’ll introduce what CL actually does, which is in essence overriding anything you set during authoring.

Don’t like what your note says? Override it!

Variable in a graph set incorrectly? Change it!

Don’t like the tool a student starts with or the initial color of a sketch? Make it what you want!

The CL Documentation has a long list of things we can override in a component. We call these overrides _ **sinks** _.

For example. I can tell a note component to override it’s content using the content sink:  
`content: "Hello World"`

Or I can use a number sink in a graph to change the value of a variable:  
`number(`A`): 5`

I can even make a component hide itself completely:  
`hidden: true`

We’ll use this method for part 1 of our upgrade.

## Override? With What?

You can hard code your CL by telling it exactly what you want the override to be.

“add a string of text”

Set it to a number, e.g. 5

https://classroom.amplify.com/activity/695d3f873398a0bde12cfbac/edit-readonly/published#step=f310b0b2-bce7-4b86-a62a-271982cfdf8b&script=component/c2b5f962-3b8c-4d46-8860-be0058a1b6a9

However, most times you’ll want to apply something from another component as the override of placeholder text or values. In these cases you’ll need to know:

1. Where the information is coming from.
2. What information you want to use.

This brings us to our first tip:

> _ **Tip** _ #1: _ **Give names to your components and develop your own conventions for naming them.** _
> 
> Naming components beforehand, especially components that contain information you’ll want to use later saves you the trouble of having to break your train of thought to exit a scripting window to name a component later.

With your component named, you now have a pathway to gather the information you want to use for your override.

Let’s use this tip and apply it on screen 2 so that students can compare their answer with the correct one:

#### Example: Overriding Note Content

Before we begin, lets make sure we’ve named the math input on screen 1.

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/desmos/original/2X/9/99eaf22ebea3db9e99be6df61dc5a346da3ce927.png)

I’m going to make a note component with that prompts the response, and below it, add a note component to bring in the student’s response. We can add some placeholder text here, remember that we’ll be overriding it with CL

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/desmos/original/2X/f/ff293dc102e48349bd9dc3e3ec816e7fef42c7eb.png)

1. lets override the content of this note:  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/desmos/original/2X/c/ca778096cd0b348882bf6dd5f68f70d1ffbaa3a1.png)
2. For the content of the note, I want to look inside our input and extract the latex:  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/desmos/original/2X/8/89a4562078ee1beb540b426a751beca04c5cef6e.png)

We’ve completed our first override! Test it out:

https://classroom.amplify.com/activity/695d46cb581ee73bd2e963be/edit-readonly/published?#step=b896bf89-2805-4497-af85-e807a3df0a4e&preview

> #### _Tip #2: Use the CL Documentation Reference_
> 
> Curious about what else you can override in a component or what you can use in a component to override something in another component? Use the handy reference found in every CL scripting window. Try overriding a few other things yourself. Here are a few examples you can start with:
> 
> - Change the screen title
> - Add a subtitle
> - Edit the submit button of an input
> - Add some placeholder text to the input

The two screen layout still feels like too much for such a simple screen. An improvement would be to condense it down to a single screen.

#### Example: Conditional Statements

We can write a simple override on screen 1 to replace the prompt with the correct answer. But after previewing, you’ll see that we haven’t specified when to display the answer, which is a problem:

https://classroom.amplify.com/activity/695d47cfbc89d248f425a9b2/edit-readonly/published#step=b896bf89-2805-4497-af85-e807a3df0a4e&script=component/2a7d38fc-2417-434e-b559-8efd87ab06c0

To fix this, we’ll need to write some conditional statements. These statements say _when_ to override to something you want and what to set it to _otherwise_. You can read more about conditional statements [here](https://cl.desmos.com/t/cl-newsletter-january-2020-ordering-conditional-statements/5439).

I know that when the input is submitted I want to show the correct answer:  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/desmos/original/2X/2/2e2fe0ea58e77806a24f98af90d993dfe0a4b2e5.png)

Otherwise, I want to display the prompt:  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/desmos/original/2X/5/544cd6b6fa44640ae941d2dabc6c822d4f31583c.png)

This works very similarly to “if” and “else” statements in other programming languages. You can list as many “when” statements (conditions to meet) as you want that must be followed by a single “otherwise” (default) statement.

Finally, I want to make sure a student doesn’t submit a response, see the answer, and then change their response. In order to do that, let’s disable the input after a student has submitted one response.

#### Example: Disabling The Math Input

I want to override whether or not a student can submit a response so I start by going into the input component and searching for a sink that will allow me to override that setting:

 ![Screenshot 2026-01-06 at 7.45.48 AM](https://canada1.discourse-cdn.com/flex031/uploads/desmos/original/2X/c/c3bceda98c5291b55318a54874ba945d2ab1deb7.png)

Then I write come conditions that extract the number of times the input has been submitted and set appropriate true and false conditions to enable and disable the editability of the input:  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/desmos/original/2X/b/bf3f7cf85e557174dcf3f75316af5ce3e1d15682.png)

Fun Fact: We can change two things to simplify our code here.

> #### _Tip_ #3: Use “this”
> 
> When you’re using information from the same component that you are attempting the override in, “this” can be used in place of the component name:  
> ![Jan-06-2026 07-53-28](https://canada1.discourse-cdn.com/flex031/uploads/desmos/original/2X/8/85f6d76a19b4c502126acece4d1a4ea674f04150.gif)  
> Useful in case the name of your component changes later!

> #### Tip #4: Boolean Shortcut
> 
> Boolean (true/false) sinks don’t always require conditional statements! In many cases, listing just the condition you want to set the sink to “true” will do the trick:  
> ![Jan-06-2026 07-55-51](https://canada1.discourse-cdn.com/flex031/uploads/desmos/original/2X/a/adbca37eb7ae906f36eb056265f9f6e20df1fc9e.gif)

Your Finished Interaction:

https://classroom.amplify.com/activity/695d48e2f4c3be1c7c48fcb8/edit-readonly/published#step=b896bf89-2805-4497-af85-e807a3df0a4e&preview
### Next Steps

You’ve completed your interaction, but don’t stop improving! Pick one or a few of these add-ons to really make your interaction dynamic:

> **Tell Students "Higher" or Lower"**
>
> For this we're going to make a change to the conditional statements in the note component.  
> 1. We'll set an initial condition to display the prompt whenever the math input is not submitted.  
> 2. Then, we'll generate a "Too low!" message whenever an answer of less than your target is entered.  
> 3. We'll do the same for answers that are too high.  
> 4. Finally, we'll set our default statement to say "Correct!" if none of the previous statements are true.

> **Add a Guess Counter**
>
> Note: For this add-on, use the "Higher or Lower" add-on or similar.  
> 1. Add a new note component to your screen  
> 2. Use CL to override the content of the note to say "Number of guesses:"  
> 3. We want to \*interpolate\* the number of guesses into this string. to do this, add ${ } at the end of your string.  
> 4. Fill it with the submission count from the math input:

> **Add a Target Graph**
>
> 1. Add a new graph component to your screen  
> 2. Paste this link into the expression list: [https://www.desmos.com/calculator/e0ae70ed74](https://www.desmos.com/calculator/e0ae70ed74)  
> 3. Override the `g_{uess}` and `t_{ime}` values in the graph using CL

> **Use Any Number**
>
> 1. Start by completing the "Add a Target Graph" add-on.  
> 2. Use CL to override the bounds of the graph. Take a look at the `bounds` sink and `makeBounds` function to learn more.  
> 3. In the graph, change the `t_{arget}` and `t_{olerance}` variables to adjust the target and the size of the onscreen window.

> **Start A Timer**
>
> 1. Add a new graph component  
> 2. Copy and paste the URL of this graph into the expression list [https://www.desmos.com/calculator/gdxlpqtokn](https://www.desmos.com/calculator/gdxlpqtokn)  
> 3. use CL to override the `g_{uess}`, `t_{ime}`, and `p_{ressCount}` variables.

> **Add a Contextual Animation**
>
> 1. Add a new graph component  
> 2. Copy and paste the URL of this graph into the expression list [https://www.desmos.com/calculator/txleelehjs](https://www.desmos.com/calculator/txleelehjs)  
> 3. use CL to override the `g_{uess}` and `t_{ime}` variables.

> **Advanced: Tell students if They're Getting "Warmer" or "Colder"**
>
> We're going to rewrite our conditional statements in the note, but first we need to set a few things up:  
> 1. Go into the input component and create a _capture_. Give it a name.  
> 2. In the math input we're going to create a variable. Variables use an "=" instead of a ":". Call this variable "previous".  
> 5. For this variable, I want to recall not the most recent captured value, but the one before it. We can do this by looking up the capture history and extracting the captured value _before_ the most recent captured value:  
> 6. Lets make another variable for "last". this one is a bit simpler, pulling the `lastValue` from the capture history.  
> 7. Now, lets write a function that calculates the difference between your target and another value:  
> 8. Finally, we can rewrite our note conditions to display "Getting warmer!" when the _last_ value is less than the _previous_ value and "Colder!" when the _last_ value is greater than the _previous_ value.   
> 9. You'll also need to add a condition that says something else when stthe two values are equal, but I'll leave that up to you.

---

<div class="post-metadata">

**Author:** ![JayChow](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/jaychow/32/1674_2.png) [@JayChow](https://cl.desmos.com/u/JayChow)\
**Post date:** [January 7, 2026, 6:53pm UTC](https://cl.desmos.com/t/computation-layer-101/8414/2 "2026-01-07T18:53:04Z")

</div>

Closed on January 7, 2026, 6:53pm UTC