The Tutorial Framework (or, for short TFW) allows you to create interactive learning environments running inside containers. These environments are capable of automatically guiding users through a set of topics by allowing them to interact with real software through a simple web browser. Users can attack web services, write some code to fix the vulnerabilities they’ve just exploited and use a terminal to deploy their changes. The framework gives you tools to track user progress, run test cases to check their solutions and even offer context dependent help based on the results.
Efficiency in learning can be remarkably improved by presenting the content in a visual context. Using TFW, you can demonstrate problems in an interactive and flexible manner thanks to the framework's messaging system which allows you to communicate with any kind of process that is able to run in a container.
You should also read our blog post on the framework for a short & gentle introduction.
What kind of features does TFW provide?
In the upper-left part of the page you can see our chat bot, which you can use to send messages to users. Right next to it is a custom web application (which can be replaced with an app of your choosing). In the rightmost part is our web editor (based on Monaco), which users can use to edit text files (source code for instance). The component on the bottom-left is a fully-featured xterm terminal emulator (based on xterm.js), with an optional console tab which you can use to display live process logs or arbitrary text. To use components, you can send commands to the TFW server, which will route it to event handlers capable of processing your request, instructing the frontend to display stuff through a WebSocket connection.
Sequence of events
Everything that has a beginning has an end. Generally, you can define the steps of an exercise using a finite-state machine. This means that certain events can trigger a transition from one state to another. For instance, you want the user to login in your web service. If it was successful, you would trigger the next step by sending a message to theTFW server, which will route your message to the FSM instance. This instance attempts to execute your request, and finally the state change happens (if it was valid on the model you've defined). You can also execute additional logic on various FSM events (on_enter, on_exit, etc.)
In the third chapter, you will find a more detailed description of each component.