In most courses of mine I usually devote some hours to the practical application of the simplest and most widely used technologies, like HTML, CSS or XML. When time allows it, students take part in a workshop where they are asked to create some digital content using one or more technologies. This is just a simple exercise, but it can effectively show them the practical application and relevance of several principles studied in the course.
One of the latest workshops gave us the opportunity of publishing the students work, so they can effectively have a glance at the outcome of their efforts. This is especially useful when dealing with technologies requiring them to create contents which are completely independent from their presentation, as it happens e.g. with most XML dialects. An example of such workshop is represented by building XML content representing online tests.
Building Online Tests: Daskalos
The main purposes of this workshop were:
- getting the students work with XML.
- let the students review the main topics of their course by formulating some questions about them, in the form of an online test.
- let the students experience the concept of a rich web, single page application, backed by an API server.
To this end, I created a tiny system with these main parts:
- a simple XML dialect developed for representing tests and flows, with a corresponding XSDL schema. Students will have to create XML files manually, and validate them against the schema, as the purpose of the exercise is letting them play with XML code. Freeware tools for helping them in this workshop are (among many others) generic text editors like Notepad++ or Sublime Text, and XML editors like XML Copy Editor.
- a web API server which hosts these XML files and provides a simple HTTP REST API for working with them. This was implemented with ASP.NET MVC WebAPI 2 and C#.
- a web application which lets users browse the files and run the selected one in an interactive test environment. This was implemented with TypeScript, AngularJS and Twitter Bootstrap.
The XML dialect represents a flow, structured into a sequence of steps, which can just be linear, or follow several different paths according to the user's choices. Each step offers a set of choices and the user must select one (or more) of them; according to his selection, he is directed to another step, and so forth until the flow ends. At that time, for tests a final score is displayed. A timeout period can be specified for every step, and (for tests) a specific, positive or negative score can be assigned to every choice.
Just visit my example test to gain an immediate feeling of what this tiny application is all about. This test also shows a minimal branching in the flow, and served as a model for my students. Here is a reduced screenshot from the first step of the flow:
As you can see, there is a set of choices, a small optional note below them (which can be HTML code), and a navigation bar to go forward or back, with the current step number and the remaining time before the timeout expires.