This article contains interactive elements. make sure you are signed into Activity Builder 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.
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.
This activity fails spectacularly for three reasons:
- There’s a heavy reliance on the teacher to set up and execute pacing in order to keep the number secret.
- Once students are paced to the answer screen they no longer have access to their guess.
- 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
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:
- Where the information is coming from.
- 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.
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
- lets override the content of this note:
- For the content of the note, I want to look inside our input and extract the latex:
We’ve completed our first override! Test it out:
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:
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.
I know that when the input is submitted I want to show the correct answer:
Otherwise, I want to display the prompt:
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:
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:
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:
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:
Your Finished Interaction:
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 screen2. Paste this link into the expression list: 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 component2. Copy and paste the URL of this graph into the expression list 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 component2. Copy and paste the URL of this graph into the expression list 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.