Demo: Daskalos page

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 these 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.

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 single page web 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.
  • a web API server which hosts these XML files and provides a simple HTTP REST API for working with them. This is implemented with ASP.NET Core 2 and C#.
  • a web application which lets users browse the files and run the selected one in an interactive test environment. This is implemented with TypeScript, Angular5 and Angular Material.

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. Not all the questions and answers found in these samples are correct, but they are just as they were crafted by the students.

Just try my example test (pick the quiz with author = Daniele Fusi) from the demo page 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.

XML Dialect

Given its didactic purpose, the XML schema is very simple:

– each document includes any number of quizzes. Each quiz is a “flow”.
– each flow has any number of steps, each with any number of choices.

The flow element has these attributes:

id to identify it.
label with the flow’s title.
author with the flow’s author(s).
category with an arbitrarily chosen category to group flows into different types.
time with date and time when the flow was created.
minScore with the minimum score value to be reached for the student to be successful when answering the quiz.

Its children elements are:

dsc: a short descriptive text.
step: each step in the flow.

Each step includes:

n attribute with the step number (1, 2, 3…).
l attribute with the step label.
time attribute (optional), with the maximum time allotted to that step. If this time expires, the quiz will automatically present the next question. So this is the maximum time a user has to give an answer. If you leave this attribute out, there is no expiration time. Time is expressed like 1m30s = 1 minute and 30 seconds. For steps with an expiration time, the expired attribute specifies the number of the target step to go to after the step’s time has expired.
– the prompt element contains the prompt to the user.
– the choices child element has 2 or more choice children elements, each representing a possible choice. Each has a score attribute with the score value to be added to the total when the user picks that choice. This can also be a negative number, if you want to add a penalty in case of wrong answers. Also, each choice has a t attribute which specifies the number of the target step to jump to when that choice is selected (0=goto the end of the whole flow). This allows for defining different branches in the text, according to the user’s answers.
– an optional content element can include additional content for that step, e.g. an explanation, an image, and the like. Its content can be HTML code.

A sample fake flow follows:

<?xml version="1.0" encoding="UTF-8"?>
<flows>
  <flow id="sample" label="Pets Trivia" author="Daniele Fusi" category="quiz-closed" time="2014-05-31T17:00:00" minScore="3">
    <dsc>A trivia about pets with timeout, branching and multiple-choices questions.</dsc>
    <step n="1" l="Dogs" time="30s" expired="2">
      <prompt>How do dogs do?</prompt>
      <choices>
        <choice score="1" t="2">bark!</choice>
        <choice score="-1" t="2">meow!</choice>
        <choice score="-1" t="2">quack!</choice>
      </choices>
      <content><![CDATA[<p>Attention: <em>your time is limited!</em>.</p>]]></content>
    </step>
    <step n="2" l="Cats" time="30s" expired="3">
      <prompt>How do cats do?</prompt>
      <choices>
        <choice t="3" score="-1">bark!</choice>
        <choice t="3" score="1">meow!</choice>
        <choice t="3" score="-1">squit!</choice>
      </choices>
    </step>
    <step n="3" l="Choose a realm">
      <prompt>Which realm do you prefer?</prompt>
      <choices>
        <choice t="4">air</choice>
        <choice t="6">sea</choice>
      </choices>
      <content><![CDATA[<p>This step shows flow branching. According to your choice here, you will follow two different branches, each with its own set of questions. Follow the <em>sea</em> step to see an example of a multiple-answers question. By branching according to users' choices, you can build up a very customized and thorough test which 'reacts' to the users' answers and changes its questions accordingly. This is like combining a branching flow diagram with a wizard-like quiz.</p>]]></content>
    </step>
    <!-- air begin -->
    <step n="4" l="Air - Bats" time="30s" expired="5">
      <prompt>When do bats sleep?</prompt>
      <choices>
        <choice t="5" score="1">at day</choice>
        <choice t="5" score="-1">at night</choice>
      </choices>
    </step>
    <step n="5" l="Air - Owls" time="30s" expired="0">
      <prompt>Which city had an owl on its coin?</prompt>
      <choices>
        <choice t="0" score="-1">Sparta</choice>
        <choice t="0" score="1">Athens</choice>
        <choice t="0" score="-1">Thebae</choice>
      </choices>
    </step>
    <!-- air end -->
    <!-- sea begin -->
    <step n="6" l="Sea - Sharks" time="30s" expired="7">
      <prompt>Do sharks eat fishes?</prompt>
      <choices>
        <choice t="7" score="-1">no</choice>
        <choice t="7" score="1">yes</choice>
      </choices>
    </step>
    <step n="7" l="Sea - Octopus" time="35s" expired="0">
      <prompt>What do octopus eat?</prompt>
      <choices max="5">
        <choice t="0" score="0.25">shrimps</choice>
        <choice t="0" score="0.25">lobsters</choice>
        <choice t="0" score="-1">carrots</choice>
        <choice t="0" score="0.25">snails</choice>
        <choice t="0" score="0.25">crabs</choice>
      </choices>
      <content><![CDATA[<p>Check <strong>all</strong> the answers that apply.</p>]]></content>
    </step>
  </flow>
</flows>