Skip to content
Mamadou Sy edited this page Feb 12, 2016 · 1 revision

Generate Askia HTML Inputs

This section describes how to generate HTML inputs for the Askia form.

In the HTTP protocol, user-agent (mostly the browser) could send and receive data from and to the server.
AskiaWeb usually uses the verbs `GET` and `POST`, both of them have mostly the same behaviour except that one doesn’t write the parameters to send in the URL.

The parameters are sent as a collection of name/value pairs separate by the ampersand symbol like:

name1=value1&name2=value2&name3=value3

All values are automatically encoded by the browser(URIEncode) while using HTML Form.

AskiaWeb expects to obtain the data format as described in the sections below.
In the sections below:

  • XX stand for the id of the question
  • YY stand for the id of the response
  • VAL stand for an arbitrary value (numeric, date, time or text)
  • %20 is the URIEncode for the space character
  • %2C is the URIEncode for the coma character

Numeric question

The input name is the letter C (for Continous) follow by the id of the question: *C*_XX_

CXX=VAL

Example:

C0=12
C1=5.9

Examples of inputs generations

All of the following examples produce the same name/value pair C1=5 that will be recognised on the server-side.

↑ Top of page ↑

Render as regular input text

<input type="text" name="{%= CurrentQuestion.InputName()%}" value="{%= CurrentQuestion.InputValue()%}" />

Produce:

<input type="text" name="C1" value="5" />

↑ Top of page ↑

Render as HTML5 input number

<input type="number" name="{%= CurrentQuestion.InputName()%}" value="{%= CurrentQuestion.InputValue()%}" ↩
  min="{%= CurrentQuestion.MinValue%}" max="{%= CurrentQuestion.MaxValue %}" step="1" />

Produce:

<input type="number" name="C1" value="5" min="1" max="5" step="1" />

↑ Top of page ↑

Render as input radio

{% Dim i
Dim rId
Dim checked
For i = CurrentQuestion.MinValue To CurrentQuestion.MaxValue %}
   {% rId = CurrentQuestion.InputName() + "_" + i %}
   {% checked = On(CurrentQuestion.Value = i, "checked=\"checked\"", "") %}
   <input type="radio" name="{%= CurrentQuestion.InputName()%}" id="{%= rId %}" value="{%= i %}" {%:= checked %} /> ↲
   <label for="{%= rId %}">{%= i %}</label>
{% Next %}

Produce:

<input type="radio" name="C1" id="C1_1" value="1" /><label for="C1_1">1</label>
<input type="radio" name="C1" id="C1_2" value="2" /><label for="C1_2">2</label>
<input type="radio" name="C1" id="C1_3" value="3" /><label for="C1_3">3</label>
<input type="radio" name="C1" id="C1_4" value="4" /><label for="C1_4">4</label>
<input type="radio" name="C1" id="C1_5" value="5" checked="checked" /><label for="C1_5">5</label>

↑ Top of page ↑

Render as combo box

<select name="{%= CurrentQuestion.InputName()%}">
  {% Dim i
  Dim selected
  For i = CurrentQuestion.MinValue To CurrentQuestion.MaxValue %}
      {% selected = On(CurrentQuestion.Value = i, "selected=\"selected\"", "") %}
      <option value="{%= i %}" {%:= selected%}>{%= i %}</option>
 {% Next %}
</select>

Produce:

<select name="C1">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5" selected="selected">5</option>
</select>

↑ Top of page ↑

Not rendered but updated by Javascript

<input type="hidden" name="{%= CurrentQuestion.InputName()%}" value="{%= CurrentQuestion.InputValue()%}" />

Produce:

<input type="hidden" name="C1" value="5" />

↑ Top of page ↑

Open-ended question

The input name is the letter S (for String) follow by the id of the question: *S*_XX_

SXX=VAL

Example:

S0=hello%20world
// Decoded version: S0=Hello world!

↑ Top of page ↑

Examples of inputs generations

All of the following examples produce the same name/value pair S1=Hello world! that will be recognised on the server-side.

↑ Top of page ↑

Render as regular input text

<input type="text" name="{%= CurrentQuestion.InputName()%}" value="{%= CurrentQuestion.InputValue()%}" />

Produce:

<input type="text" name="S1" value="Hello world!" />

↑ Top of page ↑

Render as textarea

<textarea name="{%= CurrentQuestion.InputName()%}">{%= CurrentQuestion.InputValue()%}</textarea>

Produce:

<textarea name="S1">Hellow world!</textarea>

↑ Top of page ↑

Render as input radio


{% dim rId = CurrentQuestion.InputName() + "_1"
dim checked = on(CurrentQuestion.Value = "Hello world!", "checked=\"checked\"", "") %}
<input type="radio" name="{%= CurrentQuestion.InputName()%}" id="{%= rId %}" value="Hello world!" {%:= checked%}/> ↩
   <label for="{%= rId %}">Hello world!</label>
{% rId = CurrentQuestion.InputName() + "_2"%}
{% checked = on (CurrentQuestion.Value = "Good night!", "checked=\"checked\"", "") %}
<input type="radio" name="{%= CurrentQuestion.InputName()%}" id="{%= rId %}" value="Good night!" {%:= checked%}/> ↩
   <label for="{%= rId %}">Good night!</label>

Produce:

<input type="radio" name="S1" id="S1_1" value="Hello world!" checked="checked" /><label for="S1_1">Hello world!</label>
<input type="radio" name="S1" id="S1_2" value="Good night!" /><label for="S1_2">Good night!</label>

↑ Top of page ↑

Render as combo box

<select name="{%= CurrentQuestion.InputName()%}">
  {% dim selected = on(CurrentQuestion.Value = "Hello world!", "selected="\selected\"", "") %}
 <option value="Hello world!" {%:= selected%}>Hello world!</option>
  {% selected = on(CurrentQuestion.Value = "Good night!", "selected="\selected\"", "") %}
 <option value="Good night!" {%:= selected%}>Good night!</option>
</select>

Produce:

<select name="S1">
 <option value="Hello world!" selected="selected">Hello world!</option>
 <option value="Good night!">Good night!</option>
</select>

↑ Top of page ↑

Render as checkbox

{% dim checked = on(CurrentQuestion.Value = "Hello world!", "checked=\"checked\"", "") %}
<input type="checkbox" name="{%= CurrentQuestion.InputName()%}" value="Hello world!" {%:= checked%} />

Produce:

<input type="checkbox" name="S1" value="Hello world!" checked="checked" />

↑ Top of page ↑

Not rendered but updated by Javascript

<input type="hidden" name="{%= CurrentQuestion.Name()%}" value="{%= CurrentQuestion.InputValue()%}" />

Produce:

<input type="hidden" name="S1" value="Hello world!" />

↑ Top of page ↑

Date question

The input name is the letter D (for Date) follow by the id of the question: *D*_XX_

DXX=VAL

Example:

D1=25%2F12%2F2013
// Decoded version: D1=25/12/2013

↑ Top of page ↑

Examples of inputs generations

All of the following examples produce the same name/value pair D1=12/01/2013 that will be recognised on the server-side.

↑ Top of page ↑

Render as regular input text

<input type="text" name="{%= CurrentQuestion.InputName()%}" value="{%= CurrentQuestion.InputValue()%}" />

Produce:

<input type="text" name="D1" value="12/01/2013" />

↑ Top of page ↑

Render as HTML5 input date

<input type="date" name="{%= CurrentQuestion.InputName()%}" value="{%= CurrentQuestion.InputValue()%}" ↩
  min={%= CurrentQuestion.MinDate%}" max="{%= CurrentQuestion.MaxDate%}" />

Produce:

<input type="date" name="D1" value="12/01/2013" min="12/01/2013" max="14/01/2013"/>

↑ Top of page ↑

Render as input radio

{%
dim i
dim maxCount = CurrentQuestion.MaxDate - CurrentQuestion.MinDate
dim currentDate = CurrentQuestion.MinDate
dim rId
dim checked
For i = 0 To maxCount
   currentDate = currentDate + i
   rId = CurrentQuestion.InputName() + "_" + (i + 1)
   checked = on(CurrentQuestion.Value = currentDate, "checked=\"checked\", "")
%}
   <input type="radio" name="{%= CurrentQuestion.InputName()%}" id="{%= rId%}" value="{%= currentDate%}" {%:= checked%} /> ↩
      <label for="{%= rId%}">{%= currentDate%}</label>
{% Next %}

Produce:

<input type="radio" name="D1" id="D1_1" value="12/01/2013" checked="checked" /><label for="D1_1">12/01/2013</label>
<input type="radio" name="D1" id="D1_2" value="13/01/2013" /><label for="D1_2">13/01/2013</label>
<input type="radio" name="D1" id="D1_3" value="14/01/2013" /><label for="D1_3">14/01/2013</label>

↑ Top of page ↑

Render as combo box

<select name="{%= CurrentQuestion.InputName()%}">
  {%
    dim i
    dim maxCount = CurrentQuestion.MaxDate - CurrentQuestion.MinDate
    dim currentDate = CurrentQuestion.MinDate
    dim selected
    For i = 0 To maxCount
        currentDate = currentDate + i
        selected= on(CurrentQuestion.Value = currentDate, "selected=\"selected\", "")
  %}
       <option value="{%= currentDate%}" {%:= selected%} />{%= currentDate%}</option>
  {% Next %}
</select>

Produce:

<select name="D1">
 <option value="12/01/2013" selected="selected">12/01/2013</option>
 <option value="13/01/2013" >13/01/2013</option>
 <option value="14/01/2013" >14/01/2013</option>
</select>

↑ Top of page ↑

Not rendered but updated by Javascript

<input type="hidden" name="{%= CurrentQuestion.InputName()%}" value="{%= CurrentQuestion.InputValue()%}" />

Produce:

<input type="hidden" name="D1" value="12/01/2013" />

↑ Top of page ↑

Time question

The input name is the letter T (for Time) follow by the id of the question: *T*_XX_

TXX=VAL

Example

T0=13%3A50%3A00
// Decoded version: T0=13:50:00

↑ Top of page ↑

Examples of inputs generations

All of the following examples produce the same name/value pair T1=13:25:00 that will be recognised on the server-side.

↑ Top of page ↑

Render as regular input text

<input type="text" name="{%= CurrentQuestion.InputName()%}" value="{%= CurrentQuestion.InputValue()%}" />

Produce:

<input type="text" name="T1" value="13:25:00" />

↑ Top of page ↑

Render as HTML5 input time

<input type="time" name="{%= CurrentQuestion.InputName()%}" value="{%= CurrentQuestion.InputValue()%}" ↩
  min="{%= CurrentQuestion.MinDate.Format("HH:mm:ss")%}" max="{%= CurrentQuestion.MaxDate.Format("HH:mm:ss")%}" />

Produce:

<input type="time" name="T1" value="13:25:00" min="13:25:00" max="14:00:00" />

↑ Top of page ↑

Render as input radio

{% dim i
dim availableTime = {"13:25:00"; "13:50:00"; "14:00:00"}
dim rId
dim checked
For i = 1 To availableTime.Count %}
    {% rId= CurrentQuestion.InputName() + "_" + i %}
    {% checked = On(CurrentQuestion.Value.Format("HH:mm:ss") = availableTime[i], "checked=\"checked\"", "")%}
   <input type="radio" name="{%= CurrentQuestion.InputName()%}" id="{%= rId%}" value="{%= availableTime[i]%} {%:= checked%} ↩
      <label for="{%= rId%}">{%= availableTime[i]%}</label>
{% Next %}

Produce:

<input type="radio" name="T1" id="T1_1" value="13:25:00" checked="checked" /><label for="D1_1">12/01/2013</label>
<input type="radio" name="T1" id="T1_2" value="13:50:00" /><label for="T1_2">13:50:00</label>
<input type="radio" name="T1" id="T1_3" value="14:00:00" /><label for="T1_2">14:00:00</label>

↑ Top of page ↑

Render as combo box

<select name="{%= CurrentQuestion.InputName()%}">
  {%
   dim availableTime = {"13:25:00"; "13:50:00"; "14:00:00"}
   dim i
   dim selected
   For i = 1 To availableTime.Count %}
       {% selected = On(CurrentQuestion.Value.Format("HH:mm:ss") = availableTime[i], "selected=\"selected\"", "") %}
       <option value="{%= availableTime[i] %}" {%:= selected%}>{%= availableTime[i]%}</option>
  {% Next %}
</select>

Produce:

<select name="T1">
 <option value="13:25:00" selected="selected">13:25:00</option>
 <option value="13:50:00" >13:50:00</option>
 <option value="14:00:00" >14:00:00</option>
</select>

↑ Top of page ↑

Not render but updated by Javascript

<input type="hidden" name="{%= CurrentQuestion.InputName()%}" value="{%= CurrentQuestion.InputValue()%}" />

Produce:

<input type="hidden" name="T1" value="13:25:00" />

↑ Top of page ↑

Date/Time question

The date/time question should generate two inputs, one for the date and one for the time. It uses the format of the Date question and the Time question : *D*_XX_ and *T*_XX_

DXX=VAL&TXX=VAL

Example

D0=25%2F01%2F2013&T0=13%3A50%3A00
// Decoded version: D0=25/01/2013&T0=13:50:00

Examples of inputs generations

All of the following examples produce the same name/value pairs D1=25/01/2013&T1=13:25:00 that will be recognised on the server-side.

↑ Top of page ↑

Render as regular input text

<input type="text" name="{%= CurrentQuestion.InputName("date")%}" value="{%= CurrentQuestion.InputValue("date")%}" />
<input type="text" name="{%= CurrentQuestion.InputName("time")%}" value="{%= CurrentQuestion.InputValue("time")%}" />

Produce:

<input type="text" name="D1" value="25/01/2013" />
<input type="text" name="T1" value="13:25:00" />

↑ Top of page ↑

Render as HTML5 input date and input time

<input type="date" name="{%= CurrentQuestion.InputName("date")%}" value="{%= CurrentQuestion.InputValue("date")%}" ↩
  min="{%= CurrentQuestion.MinDate.Format("dd/MM/yyyy")%}" max="{%= CurrentQuestion.MaxDate.Format("dd/MM/yyyy")%}" />
<input type="time" name="{%= CurrentQuestion.InputName("time")%}" value="{%= CurrentQuestion.InputValue("time")%}" ↩
  min="{%= CurrentQuestion.MinDate.Format("HH:mm:ss")%}" max="{%= CurrentQuestion.MaxDate.Format("HH:mm:ss")%}" />

Produce:

<input type="date" name="D1" value="25/01/2013" min="25/01/2013" max="27/01/2013" />
<input type="time" name="T1" value="13:25:00" min="13:25:00" max="14:00:00" />

↑ Top of page ↑

Render as combo box

<select name="{%= CurrentQuestion.InputName("date")%}">
  {%
    dim i
    dim maxCount = CurrentQuestion.MaxDate - CurrentQuestion.MinDate
    dim currentDate = CurrentQuestion.MinDate
    dim selected
    For i = 0 To maxCount
        currentDate = currentDate + i
        selected= on(CurrentQuestion.Value = currentDate, "selected=\"selected\", "")
  %}
       <option value="{%= currentDate%}" {%:= selected%} />{%= currentDate%}</option>
  {% Next %}
</select>
<select name="{%= CurrentQuestion.InputName("time")%}">
  {%
   dim availableTime = {"13:25:00"; "13:50:00"; "14:00:00"}
   For i = 1 To availableTime.Count %}
       {% selected = On(CurrentQuestion.Value.Format("HH:mm:ss") = availableTime[i], "selected=\"selected\"", "") %}
       <option value="{%= availableTime[i] %}" {%:= selected%}>{%= availableTime[i]%}</option>
  {% Next %}
</select>

Produce:

<select name="D1">
 <option value="25/01/2013" selected="selected">25/01/2013</option>
 <option value="26/01/2013" >26/01/2013</option>
 <option value="27/01/2013" >27/01/2013</option>
</select>
<select name="T1">
 <option value="13:25:00" selected="selected">13:25:00</option>
 <option value="13:50:00" >13:50:00</option>
 <option value="14:00:00" >14:00:00</option>
</select>

↑ Top of page ↑

Not render but updated by Javascript

<input type="hidden" name="{%= CurrentQuestion.InputName("date")%}" value="{%= CurrentQuestion.InputValue("date")%}" />
<input type="hidden" name="{%= CurrentQuestion.InputName("time")%}" value="{%= CurrentQuestion.InputValue("time")%}" />

Produce:

<input type="hidden" name="D1" value="25/01/2013" />
<input type="hidden" name="T1" value="13:25:00" />

↑ Top of page ↑

Single closed question

The input name is the letter U (for Unique) follow by the id of the question: *U*_XX_

UXX=YY

Example

U0=256
// The response with the id=256 is selected

↑ Top of page ↑

Examples of inputs generations

All of the following examples produce the same name/value pair U1=256 that will be recognised on the server-side.

↑ Top of page ↑

Render as input radio

{% dim i
dim rId
dim checked
For i = 1 To CurrentQuestion.AvailableResponses.Count %}
    {% rId = CurrentQuestion.InputName() + "_" + i %}
    {% checked = On(CurrentQuestion.AvailableResponses[i].IsSelected, "checked=\"checked\"", "")%}
   <input type="radio" name="{%= CurrentQuestion.InputName()%}" id="{%= rId%}" ↩
      value="{%= CurrentQuestion.AvailableResponses[i].InputValue()%} {%:= checked%} /> ↩
      <label for="{%= rId %}">{%= CurrentQuestion.AvailableResponses[i].Caption%}</label>
{% Next %}

Produce:

<input type="radio" name="U1" id="U1_1" value="256" checked="checked" /><label for="D1_1">Response A</label>
<input type="radio" name="U1" id="U1_2" value="257" /><label for="U1_2">Response B</label>
<input type="radio" name="U1" id="U1_3" value="258" /><label for="U1_3">Response C</label>

↑ Top of page ↑

Render as combo box

<select name="{%= CurrentQuestion.InputName()%}">
  {%
   dim i
   dim selected
   For i = 1 To CurrentQuestion.AvailableResponses.Count %}
       {% selected = On(CurrentQuestion.AvailableResponses[i].IsSelected, "selected=\"selected\"", "") %}
       <option value="{%= CurrentQuestion.AvailableResponses[i].InputValue() %}" {%:= selected%}> ↩
        {%= CurrentQuestion.AvailableResponses[i].Caption%}</option>
  {% Next %}
</select>

Produce:

<select name="U1">
 <option value="256" selected="selected">Response A</option>
 <option value="257" >Response B</option>
 <option value="258" >Response C</option>
</select>

↑ Top of page ↑

Not rendered but updated by Javascript

<input type="hidden" name="{%= CurrentQuestion.InputName()%}" value="{%= CurrentQuestion.InputValue()%}" />

Produce:

<input type="hidden" name="U1" value="256" />

↑ Top of page ↑

Multi-coded question (classical)

The input name is the letter M (for Multiple) follow by the id of the question, follow by a space and the id of the response: *M*_XX_ YY. The value associated is always “on” which indicates that the response is selected. If the response (checkbox) is not selected the browser will not send the information.

MXX%20YY=on

Example

M25%20256=on
// Decoded version: M25 256=on
// The response with the id=256 is selected

↑ Top of page ↑

Examples of inputs generations

All of the following examples produce the same name/value pairs M1 256=on&M1 257=on that will be recognised on the server-side.

↑ Top of page ↑

Render as input checkbox

{% dim i
dim rId
dim checked
For i = 1 To CurrentQuestion.AvailableResponses.Count %}
    {% rId = CurrentQuestion.AvailableResponses[i].InputName().Replace(" ", "_") %}
    {% checked = On(CurrentQuestion.AvailableResponses[i].IsSelected, "checked=\"checked\"", "")%}
   <input type="checkbox" name="{%= CurrentQuestion.AvailableResponses[i].InputName()%}" id="{%= rId%}" {%:= checked%} /> ↩
      <label for="{%= rId %}">{%= CurrentQuestion.AvailableResponses[i].Caption%}</label>
{% Next %}

Produce:

<input type="checkbox" name="M1 256" id="M1_256" checked="checked" /><label for="M1_256">Response A</label>
<input type="checkbox" name="M1 257" id="M1_257" checked="checked"/><label for="M1_257">Response B</label>
<input type="checkbox" name="M1 258" id="M1_258" /><label for="M1_258">Response C</label>

↑ Top of page ↑

Multi-coded question (ranking)

The input name is the letter R (for Ranking) follow by the id of the question, followed by a space and the id of the response: *R*_XX_ YY. The value associated with that response is the order of selection (numeric). Because it’s a ranking the values of the same XX question must be a sequence of successive numbers starting from 1 to the number of the selected answers.

RXX%20YY=VAL

Example

R25%20256=2
// Decoded version: M25 256=2
// The response with the id=256 is the second selected

↑ Top of page ↑

Examples of inputs generations

All of the following examples produce the same name/value pairs R1 256=2&R1 257=1 that will be recognised on the server-side.

↑ Top of page ↑

Render as input text

{% dim i
dim rId
For i = 1 To CurrentQuestion.AvailableResponses.Count %}
    {% rId= CurrentQuestion.AvailableResponses[i].InputName("ranking").Replace(" ", "_") %}
   <label for="{%= rId%}">{%= CurrentQuestion.AvailableResponses[i].Caption%}</label> ↩
      <input type="text" name="{%= CurrentQuestion.AvailableResponses[i].InputName("ranking")%}" id="{%= rId%}"  ↩
       value="{%= CurrentQuestion.AvailableResponses[i].InputValue("ranking")%}" />
{% Next %}

Produce:

<label for="R1_256">Response A</label><input type="text" name="R1 256" id="R1_256" value="2"/>
<label for="R1_256">Response B</label><input type="text" name="R1 257" id="R1_257" value="1"/>
<label for="R1_256">Response C</label><input type="text" name="R1 258" id="R1_256" value=""/>

↑ Top of page ↑

Render as HTML5 input number

{% dim i
dim rId
dim maxValue = CurrentQuestion.MaxValue
For i = 1 To CurrentQuestion.AvailableResponses.Count %}
    {% rId = CurrentQuestion.AvailableResponses[i].InputName("ranking").Replace(" ", "_") %}
   <label for="{%= rId %}">{%= CurrentQuestion.AvailableResponses[i].Caption%}</label> ↩
      <input type="number" name="{%= CurrentQuestion.AvailableResponses[i].InputName("ranking")%}" id="{%= rId%}"  ↩
       value="{%= CurrentQuestion.AvailableResponses[i].InputValue("ranking")%}" min="1" max="{%= maxValue%}" />
{% Next %}

Produce:

<label for="R1_256">Response A</label><input type="number" name="R1 256" id="R1_256" value="2" min="1" max="3"/>
<label for="R1_256">Response B</label><input type="number" name="R1 257" id="R1_257" value="1" min="1" max="3"/>
<label for="R1_256">Response C</label><input type="number" name="R1 258" id="R1_256" value="" min="1" max="3"/>

↑ Top of page ↑

Multi-coded question (list)

The input name is the letter L (for List) follow by the id of the question: *L*_XX_. The value associated are the ids of responses separated with the coma (YY,YY).

LXX=YY
LXX=YY%2CYY

Example:

L1=256
// The response with the id=256 is selected
L1=256%2C257%2C258
// Decoded version: L1=256,257,258
// The responses with the id 256, 257 and 258 are selected

↑ Top of page ↑

Examples of inputs generations

All of the following examples produce the same name/value pairs L1=256,257 that will be recognised on the server-side.

↑ Top of page ↑

Render as select multiple

<select name="{%= CurrentQuestion.InputName("list")%}" multiple="multiple">
  {% dim i
   dim selected
    For i = 1 To CurrentQuestion.AvailableResponses.Count %}
      {% selected = On(CurrentQuestion.AvailableResponses[i].IsSelected, "selected=\"selected\"", "") %}
      <option value="{%= CurrentQuestion.AvailableResponses[i].InputValue()%}" {%:= selected %}> ↩
         {%= CurrentQuestion.AvailableResponses[i].Caption%}</option>
{% Next %}
</select>

Produce:

<select name="L1" multiple="multiple">
  <option value="256" selected="selected">Response A</option>
  <option value="257" selected="selected">Response B</option>
  <option value="258">Response C</option>
</select>

↑ Top of page ↑

Not render but updated by Javascript

<input type="hidden" name="{%= CurrentQuestion.InputName("list")%}" value="{%= CurrentQuestion.InputValue()%}" />

Produce:

<input type="hidden" name="L1" value="256,257" />

↑ Top of page ↑

<< Generation Rules | Unit tests >>

Clone this wiki locally