Skip to content

Master Page

Jump to bottom Edit New page
Mamadou Sy edited this page Mar 22, 2016 · 2 revisions

Master Page

2.1.0 ADP only

The master page is an HTML page which defines the global layout of the survey page.
It must contain special Askia tags that will be replaced by relevant content by the server-side application.

There are few Askia tags but all of them are required and must appear only once!

The Head and Foot content of the ADP will be placed before the Head and Foot content of ADCs.
This will allow overrides by the ADCs.

<askia-head /> and <askia-foot />

Both self-closed tags indicate the head and the foot sections of your page.
All ADP and ADCs content in Head and Foot position will be placed there (generally JavaScript and CSS content).

<askia-form></askia-form> and <askia-questions />

The <askia-form> and </askia-form> tags indicate where to generate the Askia form with all appropriate attributes and hidden inputs.

A web survey is a succession of HTML forms with inputs that will be POSTed to the server.
All inputs are part of the HTML forms. For that reason, the survey content <askia-questions /> must always be placed between the <askia-form> and the </askia-form>.

The <askia-questions /> is a self-closed tag that will be replaced by the elements (Caption, ADC ….) defined in the askiadesign’s Screen mode

@ADXDevelopers

Be careful and place submits button in <askia-form> or use the HTML5 form attribute%*

Example

<!doctype html>
<html>
  <head>
    <title>Survey title</title>
    <link rel="stylesheet" type="text/css" href="MyStyles.css" />
    <script type="text/javascript" src="MyScript.js"></script>
    <askia-head />
  </head>
  <body>
    <header>
      <img src="CompanyLogo.png" alt="Company logo" title="Company this logo" />
      <h1>My survey title</h1>
    </header>

    <section id="main">
       <p>Some disclaimers ...</p>
       <askia-form>
          <div class="my-decorator">
              <askia-questions />
          </div>
          <input type="submit" name="Previous" value="&lt;&lt; Back" />
          <div class="progress-bar">
             <div class="progress-cursor"></div>
          </div>
          <input type="submit" name="Next" value="Next &gt;&gt;" />
       </askia-form>
    </section>

    <footer>
      <p>Powered by myself etc...</p>
    </footer>
    <askia-foot />
  </body>
</html>

Page generation

The system to generate page uses 3 output levels:

  1. Master page for the overall layout [ADP]
  2. Control for question inputs [ADC]
  3. Grid system for all remain elements (questions label, custom labels, alignments…)

The grid system is the only one that is mostly hard-coded by the system.

The <askia-questions /> section not only renders the ADCs but also all other content (such as question/custom labels, grids for alignments, etc…).

ORANGE: Part accessible by the ADP

GREEN: Part accessible by the ADC

YELLOW: Part generated by the grid system, not accessible through ADP nor ADC

In order to maintain control over that hard-coded content through the ADP, we also provide some hard-coded CSS classes.

CSS Class Name Description
askia-question-label Label of question
askia-control Container of responses for response block and ADC
askia-response Container of response
askia-question-XXX All elements associated with a question, `XXX` represent the identifier of the question (Question.Id)
This CSS class is mainly use to manipulate question using live routing
askia-error Indicates an invalid answer.
It must only appear on element with class `askia-question-label` and `askia-control`.
It doesn’t appear on element with the class `askia-response`
For question tables
askia-grid-header Indicates the row header of question table; in <TR> of first row
askia-grid-row Indicates a row of question table; in <TR> of other rows
Use it in conjunction with `askia-question-XXX` and `askia-error`

We recommend that ADP developers implement these CSS classes with Theme variables. Below a descriptive scaffolding of the CSS:

/* General questions layout
    -------------------------- */

/*  Label of the question  */
.askia-question-label  {}

/* Label of the question with error */
.askia-question-label.askia-error {}

/* Container of responses */
.askia-control {}

/* Container of responses with error */
.askia-control.askia-error {}

/* Input element in the responses container
    (when no .askia-response: Open-ended, numeric, date-time)*/
.askia-control input[type=text],
.askia-control input[type=number],
.askia-control textarea {}

/* Response container */
.askia-response {}

/* Label of repsonse */
.askia-response span,
.askia-response label {}

/* Input element in the response container
    (when no .askia-control: Classical responses layout) */
.askia-response input[type=text],
.askia-response input[type=number],
.askia-response textarea {}

/* Part below is used for question tables
    ----------------------------------------- */

/* Header row of the question table (first row of the table)
  ┌─────────┬───────┬───────┐
  │         │  YES  │   NO  │ <▬▬ Selector of this row
  ├─────────┼───────┼───────┤
  │ Item 1  │   Ø   │   Ø   │
  ├─────────┼───────┼───────┤
  │ Item 2  │   Ø   │   Ø   │
  ├─────────┼───────┼───────┤
  │ Item 3  │   Ø   │   Ø   │
  └─────────┴───────┴───────┘
*/
.askia-grid-header {}

/* Top / Left cell of the question table

  Selector of this empty cell
       V
  ┌─────────┬───────┬───────┐
> │         │  YES  │   NO  │
  ├─────────┼───────┼───────┤
  │ Item 1  │   Ø   │   Ø   │
  ├─────────┼───────┼───────┤
  │ Item 2  │   Ø   │   Ø   │
  ├─────────┼───────┼───────┤
  │ Item 3  │   Ø   │   Ø   │
  └─────────┴───────┴───────┘
*/
.askia-grid-header td:nth-child(1) {}

/* Column header cell of the question table

         Selector of YES/NO cells
                V       V
  ┌─────────┬───────┬───────┐
  │         │  YES  │   NO  │ <
  ├─────────┼───────┼───────┤
  │ Item 1  │   Ø   │   Ø   │
  ├─────────┼───────┼───────┤
  │ Item 2  │   Ø   │   Ø   │
  ├─────────┼───────┼───────┤
  │ Item 3  │   Ø   │   Ø   │
  └─────────┴───────┴───────┘
*/
.askia-grid-header .askia-response {}

/* Row of the question table

  ┌─────────┬───────┬───────┐
  │         │  YES  │   NO  │
  ├─────────┼───────┼───────┤
  │ Item 1  │   Ø   │   Ø   │   <▬▬ Selector
  ├─────────┼───────┼───────┤
  │ Item 2  │   Ø   │   Ø   │   <▬▬ of these
  ├─────────┼───────┼───────┤
  │ Item 3  │   Ø   │   Ø   │   <▬▬ rows
  └─────────┴───────┴───────┘
*/
.askia-grid-row {}

/* Row of the question table with error */
.askia-grid-row.askia-error {}

/* Row header cell of the question table

  Selector of Item 1/ Item 2/ Item 3 cells
      V
  ┌─────────┬───────┬───────┐
  │         │  YES  │   NO  │
  ├─────────┼───────┼───────┤
> │ Item 1  │   Ø   │   Ø   │
  ├─────────┼───────┼───────┤
> │ Item 2  │   Ø   │   Ø   │
  ├─────────┼───────┼───────┤
> │ Item 3  │   Ø   │   Ø   │
  └─────────┴───────┴───────┘
*/
.askia-grid-row .askia-question-label {}

/* Response cell of the question table

  ┌─────────┬───────┬───────┐
  │         │  YES  │   NO  │
  ├─────────┼───────┼───────┤
  │ Item 1  │   Ø   │   Ø   │   <▬▬ Selector
  ├─────────┼───────┼───────┤
  │ Item 2  │   Ø   │   Ø   │   <▬▬ of responses
  ├─────────┼───────┼───────┤
  │ Item 3  │   Ø   │   Ø   │   <▬▬ items cells
  └─────────┴───────┴───────┘
                ^       ^
*/
.askia-grid-row .askia-response {}

The below examples are mainly based on the Design 5 HTML generation:

HTML Table generation with classical responses

<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr><td class="askia-caption0 askia-question-label askia-question-0 askia-error"> Long caption of Q1</td></tr>
    <tr><td class="askia-response askia-question-0"><input type="radio" name="U0" value="1" /><span id="cpt0_1">Response A</span></td></tr>
    <tr><td class="askia-response askia-question-0"><input type="radio" name="U0" value="2" /><span id="cpt0_2">Response B</span></td></tr>
    <tr><td class="askia-response askia-question-0"><input type="radio" name="U0" value="3" /><span id="cpt0_3">Response C</span></td></tr>
    <tr><td class="askia-response askia-question-0"><input type="radio" name="U0" value="4" /><span id="cpt0_4">Response D</span></td></tr>
</table>

HTML Table generation with response block

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr><td class="askia-caption0 askia-question-label askia-question-0 askia-error">Long caption of Q1</td></tr>
  <tr>
    <td class="askia-control askia-question-0 askia-error">
      <table>
        <tr><td class="askia-response"><input type="radio" name="U0" value="1"/><span id="cpt0_1">Response A</span></td></tr>
        <tr><td class="askia-response"><input type="radio" name="U0" value="2"/><span id="cpt0_2">Response B</span></td></tr>
        <tr><td class="askia-response"><input type="radio" name="U0" value="3"/><span id="cpt0_3">Response C</span></td></tr>
        <tr><td class="askia-response"><input type="radio" name="U0" value="4"/><span id="cpt0_4">Response D</span></td></tr>
      </table>
    </td>
  </tr>
</table>

HTML Table generation with open-ended question

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr><td class="askia-caption1 askia-question-label askia-question-1 askia-error">Long caption of Q2</td></tr>
  <tr><td class="askia-control askia-question-1 askia-error"><textarea name="S1" rows="0" cols="0"></textarea></td></tr>
</table>

HTML Table generation with numeric question

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr><td class="askia-caption2 askia-question-label askia-question-2 askia-error">Long caption of Q3</td></tr>
  <tr><td class="askia-control askia-question-2 askia-error"><input type="text" name="C2" size="0" value="" /></td></tr>
</table>

HTML Table generation with date/time question

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr><td class="askia-caption3 askia-question-label askia-question-3 askia-error">Long caption of Q4</td></tr>
  <tr>
    <td class="askia-control askia-question-3 askia-error">
      <input type="text" name="D3" value="" />
      <input name="btnD3" type="button" value="..." />
    </td>
  </tr>
  <tr><td class="askia-control askia-question-3 askia-error"><input type="text" name="T3" size="40" value="" /></td></tr>
</table>

HTML Table generation with loop in response block

<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td class="askia-caption4 askia-question-label askia-question-4 askia-error">Loop caption</td>
    </tr>
    <tr>
    <td class="askia-control askia-question-4 askia-error">
        <table>
        <tr class="askia-grid-header">
            <td id="col4_-1"></td>
            <td id="col4_11" class="askia-response">Yes</td>
            <td id="col4_12" class="askia-response">No</td>
        </tr>
        <tr class="askia-grid-row askia-question-4 askia-error">
            <td id="qLbl4" class="askia-question-label askia-error">Item 1</td>
            <td id="cpt4_11" class="askia-response"><input type="radio" name="U4" value="11" /></td>
            <td id="cpt4_12" class="askia-response"><input type="radio" name="U4" value="12" /></td>
        </tr>
        <tr class="askia-grid-row askia-question-5">
            <td id="qLbl5" class="askia-question-label">Item 2</td>
            <td id="cpt5_11" class="askia-response"><input type="radio" name="U5" value="11" /></td>
            <td id="cpt5_12" class="askia-response"><input type="radio" name="U5" value="12" /></td>
        </tr>
        <tr class="askia-grid-row askia-question-6">
            <td id="qLbl6" class="askia-question-label">Item 3</td>
            <td id="cpt6_11" class="askia-response"><input type="radio" name="U6" value="11" /></td>
            <td id="cpt6_12" class="askia-response"><input type="radio" name="U6" value="12" /></td>
        </tr>
        </table>
    </td>
    </tr>
</table>

HTML Table generation with classical responses in a loop

<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td class="askia-caption4 askia-question-label askia-question-4 askia-error" colspan="3">
        Loop caption
    </td>
    </tr>
    <tr class="askia-grid-header">
    <td></td>
    <td align="center" id="col4_11" class="askia-caption4 askia-response askia-question-4">Yes</td>
    <td align="center" id="col4_12" class="askia-caption4 askia-response askia-question-4">No</td>
    </tr>
    <tr class="askia-grid-row askia-question-4 askia-error">
    <td id="qLbl4" class="askia-caption4 askia-question-label askia-question-4 askia-error">Item 1</td>
    <td align="center" class="askia-response askia-question-4"><input type="radio" name="U4" value="11" /><span id="cpt4_11">&nbsp;</span></td>
    <td align="center" class="askia-response askia-question-4"><input type="radio" name="U4" value="12" /><span id="cpt4_12">&nbsp;</span></td>
    </tr>
    <tr class="askia-grid-row askia-question-5">
    <td id="qLbl5" class="askia-caption5 askia-question-label askia-question-5">Item 2</td>
    <td align="center" class="askia-response askia-question-5"><input type="radio" name="U5" value="11" /><span id="cpt5_11">&nbsp;</span></td>
    <td align="center" class="askia-response askia-question-5"><input type="radio" name="U5" value="12" /><span id="cpt5_12">&nbsp;</span></td>
    </tr>
    <tr class="askia-grid-row askia-question-6">
    <td id="qLbl6" class="askia-caption6 askia-question-label askia-question-6">Item 3</td>
    <td align="center" class="askia-response askia-question-6"><input type="radio" name="U6" value="11" /><span id="cpt6_11">&nbsp;</span></td>
    <td align="center" class="askia-response askia-question-6"><input type="radio" name="U6" value="12" /><span id="cpt6_12">&nbsp;</span></td>
    </tr>
</table>

Fixed generation with classical responses

<div class="askia-caption0 askia-question-label askia-question-0 askia-error" >
    Long caption of Q1
</div>
<div class="askia-response askia-question-0">
    <input type="radio" name="U0" value="1" /><span id="cpt0_1">Response A</span>
</div>
<div class="askia-response askia-question-0">
    <input type="radio" name="U0" value="2" /><span id="cpt0_2">Response B</span>
</div>
<div class="askia-response askia-question-0">
    <input type="radio" name="U0" value="3" /><span id="cpt0_3">Response C</span>
</div>
<div class="askia-response askia-question-0">
    <input type="radio" name="U0" value="4" /><span id="cpt0_4">Response D</span>
</div>

Fixed generation with response block

<div class="askia-caption0 askia-question-label askia-question-0 askia-error">
    Long caption of Q1
</div>
<div class="askia-control askia-question-0 askia-error">
    <table>
    <tr><td class="askia-response"><input type="radio" name="U0" value="1" /><span id="cpt0_1">Response A</span></td></tr>
    <tr><td class="askia-response"><input type="radio" name="U0" value="2" /><span id="cpt0_2">Response B</span></td></tr>
    <tr><td class="askia-response"><input type="radio" name="U0" value="3" /><span id="cpt0_3">Response C</span></td></tr>
    <tr><td class="askia-response"><input type="radio" name="U0" value="4" /><span id="cpt0_4">Response D</span></td></tr>
    </table>
</div>

<< Config – Functions | Master Page – Recommendations >>

Add a custom footer
  1. Home
  2. Definition
  3. Structure
  4. Config
    1. Root
    2. Info
    3. Outputs
    4. Properties
    5. Functions
  5. Master Page
    1. Recommendations
  6. Generation Rules
  7. Generate Askia HTML Inputs
  8. Unit tests
  9. Javascript – AJAX – Events
Clone this wiki locally