Explorable Explanations

Curvenote can be used for interactive, explorable explanations. Define variables and interact with them through buttons and sliders, and update your narrative text in real-time. Each interactive component can be accessed using the keyboard shortcuts detailed below or the command menu.

Video Demo 📺¶

Using Interactive Text¶

Here’s a short example of interactive text using variables. Try out the slider to see what happens to the text below.

Park Admission¶

:name: "visitors"
:value: "3"
:format: ".0f"

:name: "cost"
:value: "10"
:format: ".0f"

rValue="visitors", rChange="{visitors: value}"Visitors

If there are rValue="visitors" visitors and the admission cost is rValue="cost", format="$", the park will make rValue="visitors*cost", format="$".

Create a Variables¶

When using our interactive text tools, you’ll first need to create a variable. Variables look like this:

:name: "variable"
:value: "0"
:format: ".0f"

To do this:

• Ensure you are on a new line in your article (you cannot create in-line variables)

• Type in the variable name

• Type in the equal sign =

• Type in the value for that variable

• Hit enter

Display a Variable¶

To display a variable:

• Place your cursor in the area you’d like to display the variable

• Use two curly brackets {{ to open the variable menu

• Select the variable you’d like to display

• Hit enter

Functions¶

To display a function output (like multiplying two variables together):

• Place your cursor in the area you’d like to display the function output

• Use two curly brackets {{ to open the variable menu

• Type in the variables and relevant mathematical operations (e.g. visitors * cost)

• Hit enter

Sliders¶

You can link your variables to sliders, which will update any variable displays in your text in real-time. To create a slider:

• Place your cursor in the area you’d like to display the slider

• Type in two equal signs ==

• Enter in the name of the variable you’d like to link the slider to

• Type in two more equal signs ==

Dynamic Text¶

Similar to sliders, you can also a display a variable as dynamic text, where you can drag the number left to decrease the value or right to increase. To create a section of dynamic text:

• Place your cursor in the area you’d like to display the inline slider

• Type \dynamic to insert the text, and type the variable you would like to hook up