Project on github

Using ASQ Elements

Install and include elements

Be sure to install and include the ASQ elements that you need. The following installs all ASQ elements. Notice that we also install the webcomponents polyfill.

1
$ bower install --save webcomponentsjs ASQ-USI-Elements/asq-elements

Let’s include them in our presentation now.

1
2
3
<!-- index.html -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> 
<link rel="import" href="bower_components/asq-elements/asq-elements.html">

Welcome element

The <asq-welcome> element allows the presenter to display the the URL of the presentation for viewers to connect. It also displays QR code for the URL and the number of connected viewers.

1
2
3
4
5
<!-- in index.html -->
<div id="intro" class="step">
  <h1> My first ASQ talk!</h1>
  <asq-welcome></asq-welcome>
</div>

Settings element

The asq-settings element allows you to configure settings for the whole presentation. They can be overwrited on a per-exercise level.

1
2
3
4
5
6
7
8
9
<!-- in index.html -->
<!--
This presentation will allow for a max of 2 submission per question, will have the viewer
slides follow the presenter ones and will not perform any kind of assessment.
-->
<asq-settings max-num-submissions="2" slideflow="ctrl" assessment="none"></asq-settings>
<div id="impress">
  <!-- slides go here-->
</div>

Exercise and Question elements

Each <asq-exercise> element can have one or more question elements. Always use question elements inside a <asq-exercise> element. You can put as many <asq-exercise> elements in a slide as you want, but be careuful of the amount of space you have.

1
2
3
4
5
6
7
8
9
10
<!-- in index.html -->
<div id="one-question" class="step">
  <h1> This slide has one exercise with one question</h1>
   <asq-exercise max-num-submissions="-1"> 
    <asq-stem><h2>&lt;asq-text-input-q&gt; question</h2></asq-stem>
    <asq-text-input-q>
      <asq-stem><h3>What's your name?</h3></asq-stem>
    </asq-text-input-q>
  </asq-exercise>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- in index.html -->
<div id="multiple-questions" class="step">
  <h1> This slide has one exercise with two questions and allows for only infinite submissions</h1>
   <asq-exercise max-num-submissions="-1"> 
    <asq-stem><h2>&lt;asq-multi-choice-q&gt; question</h2></asq-stem>
    <asq-multi-choice-q selected="op3">
      <asq-stem><h3>Here you can pick just one answer:</h3></asq-stem>
      <asq-option name="op0">Option 0</asq-option>
      <asq-option name="op1">Option 1</asq-option>
      <asq-option name="op2">Option 2</asq-option>
      <asq-option name="op3">Option 3</asq-option>
    </asq-multi-choice-q>
    <asq-multi-choice-q selected-values='["op1", "op2"]' multi stats-layout="vertical">
      <asq-stem><h3>Here you can pick as many as you want</h3></asq-stem>
      <asq-option name="op0">Option 0</asq-option>
      <asq-option name="op1">Option 1</asq-option>
      <asq-option name="op2">Option 2</asq-option>
      <asq-option name="op3">Option 3</asq-option>
    </asq-multi-choice-q>
  </asq-exercise>
</div>