How to Use SmartTutor About SmartTutor How to Use SmartTutor 1. 2. 3. Software and Platform Requirement Install SmartTutor in Eclipse Run SmartTutor z z Recording and Replaying User Actions Editing Actions and Authoring Interactive Tutorials About SmartTutor SmartTutor is a plug-in in Eclipse. It can author Eclipse-based interactive tutorials with little programming effort. These tutorials can not only give programmers step-by-step instructions on how to perform tasks in Eclipse such as creating an Swing/SWT project, checking out a CVS project, using the EMF/GMF framework, but also make the tutorial-learning process be interactive. For instance, SmartTutor can help locate onscreen UI objects mentioned in the text, highlight instructions to help novices avoid missing steps while learning, automatically perform some steps while leaving the others to perform manually, … A snapshot of such an interactive tutorial is shown in Fig. 1. SmartTutor is available for download at: http://code.google.com/p/smarttutor/ How to Use SmartTutor 1. Software and Platform Requirement 1) 2) 3) 4) 2. SmartTutor. It is available at: http://code.goodle.com/p/smarttutor/ Eclipse. (version 3.2 or 3.3). http://www.eclipse.org JRE (Java Runtime Environment) (version 1.5 or 1.6) http://java.sun.com/j2se/desktopjava/jre/ Platform Requirement (any of the following OS will be ok) Windows 2000, XP, or Vista; Fedora Linux 6 Fig. 1 A tutorial snapshot Install SmartTutor in Eclipse 1) 2) 3) Please put the SmartTutor plug-in into the “plugins” folder that located under the Eclipse’s installation directory. (The name of the SmartTutor plug-in is “edu.pku.tutorial.plugin_v***.jar”, “*” is the version number) Restart Eclipse You can find the SmartTutor button appeared in the Eclipse’s toolbar (Fig. 2). Click it to run SmartTutor Fig. 2 The toolbar button of SmartTutor. (Click it to run this tool) 3. Run SmartTutor After starting SmartTutor, you can see its basic UI as shown in Fig. 3. Record Click it to record actions SmartTutor Controller Stop Recording Replay All Actions Single Step Replay End Step Use this function for resetting states if replay failed Fig. 3 The basic UI of SmartTutor (Using it for recording and replaying User Actions) z Recording and Replaying User Actions You first click the “Record” button of SmarTutor, then perform a task in Eclipse such as creating an Swing Project, checking out a CVS project, Using the JUnit framework. After finishing this task, please click the “Stop Recording” button of SmarTutor. All the performed user actions will be displayed in a tree-structure in SmartTutor as shown in Fig. 4. The Recorded User Actions Mark as Template Click to Open the Tutorial Editor Fig. 4 The recorded user actions of performing the Fig. 5 The context menu of the action tree. It includes “Run here” (replay the actions to this point), “Edit” CVS checking-out task (open the tutorial editor), “Mark as Template” (substitute input parameters), and “Delete” (delete redundant actions, or so called noisy actions) You can bring out the context menu (Fig. 5) of the action tree by right clicking a recorded action. There are four items in this menu: 1) “Run here”. Use this function to replay the recorded actions to this point; 2) “Edit”. Use it to bring out the extended UI of SmartTutor, which is used for creating interactive tutorials; 3) “Mark as Template”. This function will be disabled if the current action under the mouse is not a parameter-input action, else it will be enabled. It can replace the recorded parameters with placeholders that take the form of “%{VARn}%” (n≥0). When replaying, you can input new parameters to substitute these placeholders. This way, the replaying process can become interactive and suit a user’s special needs. When replaying actions, you can click the “Replay All” button of SmartTutor to playback all the actions in the user action tree, or click the “Single Step” button to playback only one action at a time. You can also use the “Run here” menu item to drive SmartTutor to playback all the recorded actions in front of a given action. If some unexpected errors occurred during the action replaying process, you can use the “End Step” function of SmartTutor to reset its state. z Editing Actions and Authoring Interactive Tutorials You can either use the “Edit” context menu or the “Show editor” menu to bring out SmartTutor’s tutorial editor. The UI of this editor is shown in Fig. 6. Functions provided for authoring an interactive tutorial Fig. 6 The extended UI of SmartTutor (Use it for editing actions and authoring tutorials) When the tutorial editor is shown, the action sequence number will be displayed in front of each action in the action tree. These numbers provide the information for authoring an interactive tutorial. We will discuss more in the next paragraph. By using the “Add Step/Sub-step” function, you can group the actions of performing a task into steps to form the taskoutline of a tutorial. Then you can add a title and a description to each step to act as instructions. Additionally, you should assign an integer to the “stop line” of a step, if this step is created to automatically perform some operations such as bringing out a wizard dialog, inputting some parameters, and navigating through some views. The assigned “stop line” must be sourced from the sequence numbers displayed in front of each action in the User Action Tree, so that the actions between two successive stop lines could be replayed when this tutorial is demonstrated for mentoring. These “stop line” numbers must be incremental in order, so that the recorded actions can be replayed in sequence. The last “stop line” must be “-1” to denote the end of steps. Finally, you can preview this newly created tutorial by clicking the “Preview” button. After that, an interactive tutorial looking like cheat sheet will be generated. Fig. 7 shows the actions under editing in the tutorial editor. Fig. 7 The user actions under editing in the tutorial editor The newly created tutorial will be displayed in a separate window as shown in Fig. 8. (a) (b) Fig. 8 An interactive tutorial for the CVS checking-out task. (a) The instructional steps are collapsed. (b) The instructional steps are expanded When using this tutorial, you can collapse the steps to view the task outline and expand to get detailed instructions of each step. You can select the “Click to perform” hyperlinks presented in some steps (sub-steps) to forward the mentoring process by driving SmartTutor to replay the edited actions in the Eclipse IDE. Fig. 9 Input a new parameter while highlighting the old-input UI We can see from Fig. 9 that SmartTutor will bring out a dialog to receive a new input parameter when replaying an action that has been marked as template. Meanwhile, the original input-UI will be highlighted by drawing a red circle over it. (This effect is obtained by using the draw-methods of GC (Graphics Context) class of Eclipse.) In this way, SmartTutor can substitute these parameters dynamically and make the user focus on the steps during the task-learning process. In addition, if all the actions in a step have been replayed, a checkmark icon will show up left to this step (Fig. 10). That could help the user avoid missing steps while learning. Fig. 10 A checkmark will show up left to a finished step