How do I build a compare runs sim?
A compare runs table allows a facilitator to view the sim run results of users in a comparison against a base run. Note that creating a compare runs table requires having a Basic level account or higher. Accounts can be upgraded here.This tutorial explains how to create and run a compare runs simulation, and is divided into seven parts:
- Importing a Sim Model
- Creating an Interface
- Setting up the Login
- Publishing the Sim
- Accessing the Compare Runs Sim
- Operating the Compare Runs Sim
- Setting a Base Run
After completing this tutorial, you will be familiar with the Forio UI Interface Designer screen, accessing and applying simulation components, and assigning variables and component actions. For a sample of a compare runs simulation, and the end result of this tutorial, click here.
Importing a Sim Model
Forio Simulate uses a modeling language made up of variables and equations that can be manipulated using the Forio Simulate UI Interface components. See below for an example:
![]()
Example: A variable in a sim model
The variable above ('some variable') is a decision variable. If the variable is assigned to a slider decision component, a user can move the slider in either direction to change the value of the variable (see images below).

Example: The slider above is set to 10 making the value of 'some variable' equal to 10.

Example: The slider above is set to 15 making the value of 'some variable' equal to 15.
Components within the sim can be set to trigger actions based on the variables change in value. For example, if the value exceeds 10, a button or video can be set to appear in the sim. Note that the UI Interface Designer and the graphical components are not available until a model has been created. Also note that the model for this simulation has already been written and is available below in step 5. Information about creating your own model is found in the Model section of the user guide.
- Begin by signing in to your account (or creating an account), at http://forio.com/simulate/login.html, and then clicking on the 'Create a new simulation' link located at the top of the Home Page screen and below your login name (see image below).
Home Page (Top of Screen)
- Next, enter a name for the simulation in the 'Name of your simulation' text entry box, and then click the 'Continue' button. Note that if you currently hold a Free account, you will be taken to a screen for choosing an account type. Note that a compare runs simulation can only be created on a Basic level account or higher. Click on the 'Create your simulation' button to continue.
Name Simulation Screen
- After agreeing to the terms, you will be taken to the simulation overview page. Click on the 'Model' tab at the top of the screen (see image below).
Simulation Overview Page (Top of Screen)
- The next screen will ask you to select the model type. Select Forio, and then click the 'Next' button.
Choose Import Type Screen
- The next screen contains the area where the model code is entered. The model for this sim has already been written. Click inside the box below to highlight the entire model, and then right-click and choose 'Copy', or press Ctrl+C to copy the model to your clipboard.
Sim Model:
Basic details about the code for this model, such as how the variables and properties are written, can be found here.
- Click on the right side of the '1' in the model page, and then right-click and choose 'Paste' or press Ctrl+V to paste the code. Then, click 'Save Model' at the bottom of the screen (see the image below).
Model Page with Pasted Text
- After clicking the 'Save Model' button, you will be taken to the 'Model Explorer' screen. The next step is to add components to the user interface. See the following sections to complete the compare runs simulation.
Back To Top
Creating an Interface
This section explains how to set up the interface for a compare runs simulation. The interface is where components, such as graphs, images, videos, and buttons are added to the sim. Variables and equations from the model are assigned to the components to enable actions to occur based on a user's interaction with the sim. For example, a button component can be added to the sim and set to display a picture when clicked on by a user.Note that a model must be created before the interface can be set up. For details on creating a model, see the Importing a Sim Model section of this tutorial.
Creating Sim Pages
Follow the instructions below to create the pages for the compare runs sim example.- From the simulation overview page, click on the 'Interface' tab at the top right corner of the screen (see the image below) to go to the Interface Designer page.
Simulation Overview Page
- The Interface Designer page is made up of three parts, the component panel on the left, the canvas at the center, and the page selection bar on the right (see image below).
Interface Designer Page
- Click on the 'Add Page' button in the page selection bar two times (this will give you a total of three pages). Click inside the text entry box of the first page, and label it 'Login Page'. Note that the text that is placed in the text entry box by default ("Page One") may need to be removed. Then, click inside the text entry box for the second page, and label it 'Results Page'. Next, label the third page as 'Run Managing Page'.
When you are through, the pages in the page selection bar should look like the image below.
Labeled Page Selection Bar
Page One
Follow the instructions below to setup the first page of the compare runs sim example. This section will explain how to add a login component and a label.To begin, go to the page selection bar and click to highlight the 'Login Page' (any components added to the canvas area will now be placed directly on the 'Login Page').
Page Selection Bar ('Login Page' selected)
Adding a Login Components
- Click the 'Add a Component' tab in the component panel. The 'Add a Component' tab displays a list of categorized horizontal tabs.
- Click on the horizontal 'Premium Components' tab.
- Click the 'Login Components' in the 'Premium Components' tab, and then drag and drop the 'Login Components' to the canvas area.
Add a Component Tab
Adding Actions to the Login Components
Selecting an action for the login components determines which page the user or facilitator will be taken to after they login.- When the 'Login Components' has been dragged and dropped onto the canvas area, the component panel displays the 'Login Components Settings' tab (note that the 'Login Components Settings' tab can also be accessed by clicking on the login component after it has been placed in the canvas area). The 'Login Components Settings' tab contains a stack of categorized horizontal tabs (see the image below).
- Click on the horizontal 'Actions' tab to access the 'Actions' properties.
- Inside the 'Actions' tab, click the 'User Destination' drop-down menu arrow and select 'Results Page'.
- Click the 'Facilitator Destination' drop-down menu arrow and select the 'Results Page'.
Login Components Settings: Actions Tab
UI Designer: Login Components
Adding a Label Component
- Click on the 'Add a Component' tab in the component panel.
- Click to select the horizontal 'Text, Images, and Video' tab.
- Drag and drop the 'Text' component to the canvas area above the 'Login Components'.
Add a Component Tab
Enter Text in the Text Component
- Access the 'Text Settings' tab, which appears in the component panel when the text component has been dropped onto the canvas (note that the 'Text Settings' tab can also be accessed by clicking the text component on the canvas area).
- Click the horizontal 'Text and Styles' tab in the component panel
- Type "Welcome to the Rabbit Fox Simulation" in the 'Default Text' text box. Note that you may need to remove the default text first.
Text Settings: Text and Styles Tab
Adjusting the Text Font
- Scroll down in the 'Text and Styles' tab until you see the 'Font Size' spin box.
- Click the up arrow until the number 24 appears in the spin box. Note that the text component on the canvas may need to be adjusted. On the canvas area, click on the text component to make the sizing handles appear. Left-click on a sizing handle located on the far right of the text component and pull to the right while holding down the left mouse button until the text fits in a single line (see image below). Further adjustments can be made as necessary by using the sizing handles.
Text Settings Tab
Page One of the UI Designer Completed
Page Two
Follow the instructions below to setup the second page of the compare runs sim example. This section will explain how to set actions to buttons and assign variables to line charts and a decision slider. To begin, go to the page selection bar and click to highlight the 'Results Page' (any components added to the canvas area will now be placed directly on the 'Results Page').
Page Selection Bar ('Results Page' selected)
Adding the Line Chart Components
- Click on the 'Add a Component' tab in the component panel.
- Click to select the horizontal 'Charts, Tables, and Data' tab to locate the 'Line Chart' component.
- Drag and drop the first 'Line Chart' component to the canvas area (note that the component panel will display the 'Line Chart Settings' tab). To add the second 'Line Chart' component, repeat these steps beginning with step one.
Add a Component Tab
Adjusting the Line Charts
Click on a line chart one time to access the sizing handles. Click on a sizing handle and adjust the chart size by holding down the left mouse button and dragging until the desired size has been reached. Adjust each line chart to make them equal in size, and then individually left click the center of the line charts and hold the mouse button to drag them on the canvas area until they are side by side as shown below. Note that each line chart can only be moved one at a time.
Line Chart Component Sizing Handles
Below is an example of how the UI Designer page should look.
Interface Screen: Results Page
Adding Variables to the Line Charts
First Line Chart- On the canvas area, click on the line chart component that has been placed on the left. The 'Line Chart Settings' tab for this chart (each chart has its own settings tab) will be displayed in the component panel. Inside the 'Line Chart Settings' tab is a stack of categorized horizontal tabs that contain line chart properties.
- Click on the horizontal 'Series' tab in the component panel to open the 'Series' properties.
- In the 'Series' properties, click on the 'Variable Name' drop-down menu arrow to display the available variables in the 'Browse' screen.
- Click on the 'Rabbits' variable, and then click the 'Browse' screen's 'Select' button.
- In the component panel 'Series' tab, click inside the 'Series Name' text entry box and delete the name so that the text entry box is blank.
- Place a check mark in the 'Make a Compare Runs Graph' check box.
- Click the line chart on the right side in the canvas area to display the chart's 'Line Chart Settings' tab.
- Click on the horizontal 'Series' tab in the component panel.
- Click the 'Variable Name' drop-down menu arrow, to display the available variables in the 'Browse' screen.
- Click on the 'Foxes' variable, and then click the 'Browse' screen's 'Select' button.
- In the component panel 'Series' tab, click inside the 'Series Name' text entry box and delete the name so that the text entry box is blank.
- Place a check mark in the 'Make a Compare Runs Graph' checkbox.
Line Chart Settings: Series Tab and Browse Screen
- The UI designer screen will display two legends titled "Current Run". Click on one, and then press the Delete key on your keyboard.
- Click and drag the remaining legend below and between the two line charts as shown below:
Canvas Area
Adding the Button Components
This section will explain how to add four individual buttons to the canvas area.- Click on the 'Add a Component' tab in the component panel
- Click the horizontal 'Actions and Navigation' tab to access the 'Button' component.
Add a Component Tab
- Click on the 'Button' component and drag it to the canvas area below the first line chart.
- Click on the 'Add a Component' tab in the component panel, and then drag and drop the second 'Button' component to the canvas area. Place the button under the first button.
- Click on the 'Add a Component' tab in the component panel, and then drag and drop the third 'Button' component to the canvas area. Place the button on the right side of the first button.
- Click the 'Add a Component' tab in the component panel, and then drag and drop the fourth 'Button' component to the canvas area. Place the button underneath the third button.
When all four buttons have been properly placed, the canvas area should look like the image below:
Canvas Area with Buttons
Setting up Button 1: The 'Run Simulation' Button
This section explains how to add a label and an action your first button.Adding the Label
Follow the directions below to label your first button as the 'Run Simulation' button.- Click on the top left button component in the canvas area to open the 'Button Settings' tab in the component panel.
- Click on the horizontal 'Label' tab to access the label properties.
- Click inside the 'Button Label' text entry box and type "Run Simulation".
Button Settings: Label Tab
Adding an Action
This section explains how to add the 'Step to End' action to your first button.- While still accessing the first button's 'Button Settings' tab in the component panel, click on the horizontal 'Actions' tab.
- Click the 'Add Action' drop-down menu arrow
- Select 'Step to End'. This will place the 'Step to End' action in the 'Button Actions in Order' list box. Setting the 'Step to End' will cause the simulation model to run from the point of when the button is clicked to the last step in the model.
Button Settings: Actions Tab
Setting up Button 2: The 'Reset' Button
This section explains how to add a label and an action to your second button.Adding a Label
This section explains how to label your second button as the 'Reset' button.- Click on the button component directly beneath the 'Run Simulation' button (bottom left button) in the canvas area to open the 'Button Settings' tab in the component panel.
- Click on the horizontal 'Label' tab.
- Click inside the 'Button Label' text entry box and type "Reset".
Button Settings: Label Tab
Adding an Action
This section explains how to add the 'Reset Vars' action to your second button.- While still accessing the second button's 'Buton Settings' tab in the component panel, click on the horizontal 'Actions' tab.
- Click the 'Add Action' drop-down menu arrow.
- Click to select 'Reset Vars'. This will place the 'Reset Vars' action in the 'Button Actions in Order' list box. Setting this action will cause the variables in the simulation model to reset to the default values.
Button Settings: Actions Tab
Setting up Button 3: The Save Run Button
This section explains how to add a label and two actions to your third button.Adding a Label
This section explains how to label your third button as the 'Save Run' button.- Click on the top right button component in the canvas area to open the 'Button Settings' tab in the component panel.
- Click on the horizontal 'Label' tab.
- Click inside the 'Button Label' text entry box and type "Save Run".
Button Settings: Label Tab
Adding Two Actions
This section explains how to add the 'Save Run' and the 'Name and Describe Run' actions to your third button.
Adding the 'Save Run' Action:
- While still accessing the third button's 'Button Settings' tab in the component panel, click on the horizontal 'Actions' tab.
- Click the 'Add Action' drop-down menu arrow.
- Click to select 'Save Run'. This will place the 'Save Run' action in the 'Button Actions in Order' list box. Note that the 'Save Run' action is selected because it will save the results of the sim run for the compare runs table.
Button Settings: Actions Tab
- While still in the third button's horizontal 'Actions' tab in the component panel, click the 'Add Action' drop-down menu arrow.
- Click to select 'Name and Describe Run'. This will place the 'Name and Describe Run' action in the 'Button Actions in Order' list box. Setting this action will display a text entry box after the 'Save Run' button has been clicked.
Button Settings: Actions Tab
Setting up Button 4: The Manage Runs Button
This section explains how to add a label and an action to your fourth button.
Adding a Label
This section explains how to label the fourth button as the 'Manage Runs' button.
- Click on the bottom right button component in the canvas area to open the 'Button Settings' tab in the component panel.
- Click on the horizontal 'Label' tab.
- Click inside the 'Button Label' text entry box and type "Manage Runs".
Button Settings: Label Tab
Adding an Action
This section explains how to add the 'Goto Page' action to your fourth button.
- While still accessing the fourth button's 'Button Settings' tab in the component panel, click on the horizontal 'Actions' tab.
- Click the 'Add Action' drop-down menu arrow.
- Click to select ‘Goto Page’. This will place the ‘Goto Page’ action in the 'Button Actions in Order' list box and make the ‘Destination Page’ drop-down menu appear under the list box. Click on the ‘Destination Page’ drop-down menu arrow and select ‘Run Managing Page’. Setting up this action will take the user to the compare runs table on the 'Run Managing Page' when the 'Manage Runs' button has been clicked.
Button Settings: Actions Tab
The UI Designer with Labeled Buttons
Adding a Slider Component
- Click on the ‘Add a Component’ tab in the component panel.
- Click to select the horizontal ‘Decision Inputs’ tab to locate the 'Slider Decision' component.
Add a Component Tab
- Drag and drop a ‘Slider Decision’ component to the canvas area and place it on the right side of the button group, and under the ‘Foxes’ line chart (see image below).
Canvas Area
Assigning a Variable to the Slider Component
- After dragging the slider decision component to the canvas area, the ‘Decision Slider Settings’ tab will appear in the component panel containing a stack of categorized horizontal tabs (note that the 'Decision Slider Settings' tab can also be accessed by clicking on the slider decision component in the canvas area).
- Click the horizontal ‘Decision’ tab to access the decision properties.
- Click the ‘Decision Variable’ drop-down menu arrow to view all the decision variables in the model. Click the ‘Rabbit Growth Rate’ variable in the ‘Browse’ screen, and then click the 'Select' button.
- Click in the ‘Label’ text entry box, and enter “Rabbit Growth Rate”.
Decision Slider Settings Tab and Browse Screen
Adding Labels to the Decision Slider
- Click in the ‘Maximum’ text entry box and enter “0.5”.
- Scroll down to the bottom of the ‘Decision’ properties in the component panel to enter labels for the slider decision.
- Click inside the text entry box on the right side of the ‘Add Label’ button, and enter “0%”; then, click the ‘Add Label’ button.
- Enter “25%” in the text entry box, and then click the ‘Add Label’ button.
- Enter “50%” in the text entry box, and then click the ‘Add Label’ button.
Decision Slider Settings: Decision Tab
When completed, the decision slider in the canvas will look like the image below:
Labeled Decision Slider Component

Page Three
Follow the instructions below to setup the third and final page of the compare runs sim example. This section will explain how to add a compare runs table.
To begin, go to the page selection bar and click to highlight the 'Run Managing Page' (any components added to the canvas area will now be placed directly on the 'Run Managing Page').
Page Selectin Bar: Run Managing Page
Adding a Compare Runs Table
- Click the ‘Add a Component’ tab in the component panel.
- Click to select the horizontal ‘Premium Components’ tab.
- Drag and drop a ‘Compare Runs Table’ component to the canvas area of the UI designer screen.
Add a Component: Premium Components Tab
Setting up the Compare Runs Table
This section explains how to add the compare runs table to the sim.
- After dragging the ‘Compare Runs Table’ component to the canvas area, the ‘Compare Runs Table Settings’ tab will appear in the component panel containing a stack of categorized horizontal tabs (note that the 'Compare Runs Table Settings' tab can also be accessed by clicking on the compare runs table component in the canvas area).
- Click on the horizontal ‘Text and Styles’ tab in the component panel to access the 'Text and Styles' properties.
Note that the component panel may need to be expanded to access the properties. See the directions below for expanding the component panel:
Expanding the Component Panel
- After accessing the 'Compare Runs Table Settings' tab and selecting the horizontal 'Text and Styles' tab in the component panel, click inside the ‘Confirm Button Text’ text entry box and enter “Confirm Selection".
- Enter "6' in the‘Max Runs’ spin box.
- Click on the ‘Page to Goto After Confirm’ drop-down menu arrow and select “Results Page”. This option will take the user to the results page after they press the ‘Confirm’ button in the compare runs table.
Compare Runs Settings: Text and Styles Tab
Adding a 'Back' Button
This section explains how to add a 'Back' button to the compare runs table to allow users to go to the previous page.
- Click on the 'Add a Component' tab in the component panel.
- Click on the horizontal 'Actions and Navigation' tab.
Add a Component: Actions and Navigation Tab
- Drag and drop a 'Button' component to the canvas, and place it on the compare runs table on the right side of the 'Confirm Selection' button.
Canvas Area: Button Placemenet
This section explains how to add the button label to the button component.
- After dragging the button component to the canvas area, the 'Button Settings' tab will appear in the component panel containing a stack of categorized horizontal tabs (note the 'Button Settings' tab can also be accessed by clicking on the button component in the canvas area). Click on the horizontal 'Label' tab.
- Click in the 'Button Label' text entry box and enter "Back" (note that the default text "Button" will need to be removed).
Button Settings: Label Tab
This section explains how to add the 'Goto Page' action that takes the user to the previous page.
- While remaining in the 'Button Settings' tab in the component panel, click on the horizontal 'Actions' tab.
- Click the 'Add Actions' drop-down menu arrow.
- Click to select 'Goto Page'. This will place the ‘Goto Page’ action in the 'Button Actions in Order' list box and will also make the ‘Destination Page’ drop-down menu appear under the list box.
- Click on the ‘Destination Page’ drop-down menu arrow and select ‘Results Page'. Setting up this action will take the user to the 'Results Page' when the 'Back' button has been clicked.
Button Settings: Actions Tab
Adding a Text Label Component
This section explains how to add a text label component.
- Click the ‘Add a Component’ tab in the component panel.
- Click the horizontal ‘Text, Images, and Video’ tab.
- Drag and drop the ‘Text’ component to the canvas area, and place it above the ‘Compare Runs Table’.
Add a Component: Text, Images, and Video' Tab
This section explains how to enter text in the text label component.
- After the text component has been dragged to the canvas area, the ‘Text Settings’ tab will appear in the component panel containing a stack of categorized horizontal tabs (the ‘Text Settings’ tab can also be accessed by clicking on the text component after it has been placed on the canvas area).
- Click the horizontal 'Text and Styles' tab.
- Click inside the ‘Default Text’ text entry box and type “Choose the Runs that you would like to see”.
- Scroll to the bottom of the ‘Text and Styles’ properties.
- Enter “24” in the ‘Font Size’ spin box.
Text Settings: Text and Styles Tab
When finished, the ‘Run Managing' page should look like the image below:
UI Designer: Run Managing Page

Setting up the Login
Users and facilitators must be logged into their Forio account to access your sim. If they are not logged in, the sim's login components will request them to log into their account. The page they go to after logging in is determined by the settings in the sim. Follow the instructions below to determine the page a user or facilitator sees after and before they log in.
- Click on a blank space of the canvas (not a component) to access the 'Document Settings' tab.
- Click on the horizontal 'On Load Simulation' tab.
- In the 'On Load Simulation' tab, click the 'If user isn't logged in go to' drop-down menu arrow, and select 'Login Page'.
- Click the "If user is logged in go to' drop-down menu arrow, and select 'Results Page'.
- Click the 'If facilitator is logged in go to' drop-down menu arrow and select 'Results Page'.
Document Settings: On Load Simulation Tab

Publishing the Sim
Users cannot access your sim until it has been published. To publish the sim, click on the 'Publish' button above the component panel.
- Interface Screen
Back To TopAccessing the Compare Runs Sim
Follow the directions below to access your sim overview page. The overview page is where you can access the options for making changes to the sim model, interface, public accessibility, and run the simulation. Note that you must be logged in to access your sims.
- Place the mouse pointer on the arrow next to your name at the top of the screen to display the account options drop-down menu.
- Select 'Your simulations'.
- All sims you currently own, or have added as a 'favorite', will be displayed on the page. Locate the compare runs demo you created from the tutorial, and then click on the sim name. This will bring you to the sim's overview page where you can access tabs at the top of the page for making changes to the sim, or to run the sim. For information on running the sim, see the Running the Compare Runs Sim.
Account Options (Top of Screen)
Home Page
Sim Overview Page Tab Options (Top of Screen)
Back To TopOperating the Compare Runs Sim
This section explains how to run, reset, save, and compare runs in the compare runs sim. For information on accesing the sim , see the Accessing the Compare Runs Sim section. For information on setting a base run, see the Setting a Base Run section.
Before running the sim, click on the 'Run Simulation tab on the overview page. Because you are logged in, you will be taken to the 'Results Page' of the sim.
Running the Sim
- Move the 'Rabbit Growth Rate' decision slider towards either direction.
- Click the 'Run Simulation' button. Using the variables and equations entered in the model, the graphs will display the result of the 'Rabbit Growth Rate' you chose.
Simulation Results Page
Reseting the Sim
- Click the 'Reset' button to put the variables back to their default values.
Compare Runs Sim Button Group
Saving a Sim Run
- Click the 'Save Run' button to save a run result. The 'Enter Run Info' box will be displayed.
- Enter a name for the run in the 'Run Name' text entry box (optional).
- Enter a description in the 'Run Description' text entry box (optional).
- Click the 'OK' button when finished.
Compare Runs Sim Button Group and Enter Info Pop-up
Comparing Runs Setup
- Click the 'Manage Runs' button to view all the saved runs in the compare runs table.
- Place a check mark in any of the runs you would like to compare.
- Click the 'Confirm' button.
- Click the 'Yes' button on the 'Info' pop-up window to confirm that you want to load the checked sim runs.
- Click the 'Back' button to view the run results that were checked in the compare runs table.
Compare Runs Sim Button Group, Compare Runs Table, and Info Pop-up
Back To TopSetting a Base Run
Follow the directions below to set a base run for users to compare their runs against.
- Click the 'Interface' tab at the top of the screen.
- Click on a blank space in the canvas area (not on a component). This will open the 'Document Settings' tab in the component panel, which displays a stack of categorized horizontal tabs.
- Click the horizontal 'Default Compare Runs' tab in the component panel to display all of the saved run results.
- Place a check mark in the run result you want to set as a base run, and then click the 'Confirm' button.
- Click the 'Publish' button above the component panel to process the base run selection. The simulation will now automatically display the base run for all users.
Interface Screen
Back To Top
General FAQs | Line Chart Component | Time Bar Chart Component | Comparison Bar Chart Component | Area Chart Component | Compare Runs Table Component | Main Page - While still accessing the third button's 'Button Settings' tab in the component panel, click on the horizontal 'Actions' tab.