CITI-SENSE widgets - schools pilot


Widgets for embedding into http://horten.citi-sense.eu portal

In order to embed the questionnaire widget into the schools portal load jquery and load the questionnaire widget script

<script src="http://citisense.u-hopper.com/widgets/perceptions/jquery.questionnaire.js"></script>
add the container for embedding the questionnaire, changing if needed the height and width of the container
<div id="YOUR_CONTAINER_ID" style="width: 300px; height: 500px;"></div>
and use the following code to actually load the questionnaire in the container
<script>
  $(function() {
    $("YOUR_CONTAINER_ID").questionnaire({
      id: "schools",
      hideAfterParticipation: false,
      callback: function(response) {
        // put here any callback function invoked after users submit their reponses
      }
    });
  });
</script>

The look & feel of the questionnaire can be changed by overriding default styles (see the default styles);

The questionnaire should look as follows

In order to embed the questionnaire statistics widget into the schools portal load jquery and load the questionnaire statistics widget script

<script src="http://citisense.u-hopper.com/widgets/perceptions/jquery.questionnaire.statistics.js"></script>

The widget provides two types of statistics: the overall participation timeline and the single question statistics.

In order to visualize the participation timeline add the container for its embedding, changing if needed the height and width of the container

<div id="YOUR_TIMELINE_CONTAINER_ID" style="width: 600px; height: 200px;"></div>

and use the following code to actually load the timeline in the container

<script>
  $(function() {
    $("#YOUR_TIMELINE_CONTAINER_ID").questionnairestatistics({
      type: 'timeline',
      id: "schools",
      title: "Perceptions timeline",
      subtitle: "Number of responses on the timeline",
    });
  });
</script>

The script should construct the following visualization:

In order to visualize the single question statistics add the container for its embedding, changing if needed the height and width of the container

<div id="YOUR_QUESTION_1_CONTAINER_ID" style="width: 300px; height: 300px;"></div>

and use the following code to actually load the statistics in the container

<script>
  $(function() {
    $("#YOUR_QUESTION_1_CONTAINER_ID").questionnairestatistics({
      type: 'question',
      id: "schools",
      question: "1",
      title: "Perceptions timeline",
      subtitle: "Number of responses on the timeline",
    });
  });
</script>

The script should construct the following visualization:

In a similar vein one can embed statistics for the other questions

e.g., question 2:

or question 3:

Scan the code below to open mobile version of the questionnaire

TO BE ADDED