Dynamic Interfaces - CMUCTAT/CTAT GitHub Wiki
Steps in a behavior graph can be either student-performed (steps the student should perform) or tutor-performed (steps that the tutor itself should perform). While a student-performed step specifies behavior the student should perform while using the tutor, a tutor-performed step specifies an action that the tutor software will perform on the interface. Tutor-performed steps are therefore powerful links that can be used to complete problem-solving steps, make changes to the student interface such as hiding or showing a widget, or perform other actions that you specify.
By default, demonstrated steps are stored in the behavior graph as correct steps that a student should perform when using the tutor. Steps such as these have an actor of "Student"; that is, they are performed by the student. For steps where the tutor performs the step, the actor is the tutor itself—a tutor-performed action.
-
Create a new link (optional) - while in Demonstrate mode, demonstrate a step in the student interface. For steps that cannot be demonstrated (e.g., hiding an interface widget), create a blank step in the graph by right-clicking a node in the graph and choosing Add Blank Step.
-
Right-click (Windows) or Control+Click (Mac) on the action label of the link in the graph for which you'd like to specify a tutor-performed action.
-
Select Edit Student Input Matching
-
Set the Selection, Action, and Input fields. The selection is the value of the
idattribute for the component, the action is the function (such asSetVisible), and the input is a value passed to the function. -
To the right of Actor, select Tutor (unevaluated)
A tutor-performed action (TPA) can be evaluated or unevaluated. An evaluated TPA is executed by the tutor as if the student performed the step, while an unevaluated TPA means that the tutor will execute the step but will not evaluate the specified input or lock the component. Use unevaluated TPAs for steps that cannot be demonstrated, such as hiding, locking and highlighting widgets, and for configuring the initial settings of a component (e.g., CTATNumberLine) at the beginning of a problem.
Note
The Any actor can be used for evaluated steps that either the student or tutor can perform.
A tutor-performed action can be state-triggered or link-triggered. This option can be set at the bottom of the Edit Student Input Matching dialog. If "On current state" is selected, the tutor-performed action link is activated when the state preceding it becomes the current state. If "On previous link" is selected, the tutor-performed action link is activated when the link preceding it is traversed.
In addition to component-specific actions, all components support a common set of actions that can be used in TPAs. Below is the list of actions common to all CTAT components:
| Action | Input | Notes |
|---|---|---|
| SetVisible |
true or false
|
Show or hide the component named by the selection |
| lock | N/A | Disable a component for input. This is reversible by calling unlock. |
| unlock | N/A | Enable a component for input. This is reversible by calling lock. |
| highlight | N/A | Show a yellow glowing highlight halo around the component. This is the same method as used by the tutoring engine to show to a user that a certain step should be taken. |
| unhighlight | N/A | Remove a previously set highlight glow. |
You can use the TPA methodology to call your own JavaScript functions directly from the graph. In order to do so, create a new empty link in the graph and open the Edit Student Input Matching dialog for that link.
- For the Selection enter "_root".
- The Action can be any function name you define in JavaScript. Your function can take no more than one argument; the argument value is passed as a String.
- The Input field can hold any string you want to pass to your function, or you can leave it blank if your JavaScript function does not require an argument.
Make sure that you set the Actor to Tutor (unevaluated) at the bottom of the dialog window. You can see the matcher configuration we've used for the corresponding JavaScript example below:
<html>
<head>
...
<script>
function myFunction(anInput)
{
// call this function from the graph with S ("root"), A ("myFunction"), I ("Some Value")
alert(anInput);
}
</script>
</head>
<body>
...
</body>
</html>