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

r:var - Unknown Directive
:name: "visitors"
:value: "3"
:format: ".0f"
r:var - Unknown Directive
: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:

r:var - Unknown Directive
: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