Hello
logo Advanced Templating Page
Note we changed here the Survey Title
This page is for advanced users and use custom HTML and CSS.

This is a sticky header zone

Label
Option: Label and Description prefixes:
 Label can have prefixes :
  • Hide:not visible. can be used as remark in Excel
  • Show:visible in the label zone
  • TopHtml: not visible and overrides TopHtml zone
  • LeftHTML:not visible and overrides LeftHTML zone
  • BottomHTML:not visible and overrides BottomHTML zone
  • RightHTML:not visible and overrides RightHTML zone
if no prefixe is specified, default is show for normal panels with data question inside and hide for inline panels.

Description
Description prefixes :are
  • Hide:not visible, used as remark in Excel
  • Show:Visible even if there is no label
  • Label:set as tooltip for label Zone
  • TopHtml:set as tooltip for TopHtml Zone
  • LeftHTML:set as tooltip for LeftHTML Zone
  • BottomHTML:set as tooltip for BottomHTML Zone
  • RightHTML:set as tooltip for RightHTML Zone

if no prefixe is specified, default is show for normal panels with data question inside and first available (label, tophtml..) for inline panels.

this is a label prefixed with topHTML 🚩description is prefixed with TopHTML, so it goes to Tooltip.
Note here that text zone is disabled and prefilled with tagged text {{Name}} wich will be replaced by then Name taken from the mail list.
To summarize, we try to apply a default value for the prefixes which is best suited to the context. If you don't like this value, you have to give your own prefixes.

When you double click on a cell in column Template in survey sheet , the cell cntent is converted into an excel Table in sheet QDet where all allowed properties are visible.
Each header in QDet contain an explanatory comment.

Here, we will focus on some columns.

Responsive
Option: Responsive:
 when Row template option is set to true (default) then in the smartphone mode, the sub panels becomes 100% width, from up to dow, in this order: ( 1-TopHtml 2-LeftHtml 3-Control Area 4-RightHtml 5-BottomHtml )
LabelFormat
Option: LabelFormat:
 Overrides the default survey Par_LabelFormat (question Type) at the survey level.
Please note also that:
  • rank numerotation skip questions where "rank" doesnt appear in labelformat.

  • "rank3" or similar restart numerotation from 3 or similar
  • by default, light panels have no label format (if you want one, you have to specify it in the question template.)
CSS
Each question template has a custom CSS in wich you can add your own CSS
For example, for the first question , we added Css to underline description. 
  <style>
      #myPanel .sQDescription {
      	text-decoration: underline;
        text-decoration-color: red;  
        text-decoration-style: double;
        text-decoration-thickness: 3px;}
  </style>
#myPanel is automatically replaced with the Question ID making this piece of CSS valid only for this question without worrying about the final Codification of this question.
(Q164) Test CSS Row and Label Format
This is a description with underline defined in Row template CSS Custom
Login
Notice that since labelFormat is specified for this question and doesn't contains #rank, not only question Rank doesn't appears but also this question is skipped in the numerotation.
You have the possibility to make several customizations in the presentation of your Survey.
The most important are pre-configured (example of the Question Types starting with th* which produce the theme colors).
More customizations can be done using HTML and CSS languages and allow you to change quite everything.

HTML and CSS are standard languages and what you learn will be useful outside of this application. In addition, AI (artificial intelligence) is now able to produce them for you. The AI is also quite capable of offering you questions on a given subject (Human ressources ...).

You have 4 levels where you can insert your custom css:
  • The survey level (question type: css_custom)
  • The page level (question type: css_Page_Custom)
  • The question level (in the template of question like example below)
  • The modality level in the HTMLModality text.
for example, here , we used css_Page_Custom to put the lateral bands with logos on HTML questions for this page.

In addition, you can add text that depends on survey mode (Anonymous link or mailed Survey):
HTML body has class mailedSurvey or anonymousSurvey wich you can use for such dependent text.

This Survey was mailed to {{Nom}} with Email={{EmailTo}}, Tel={{Tel}} and myKey3={{myKey3}}

This survey was not sent by email.

40 - Q169 : Using Javascript: Age filled by javascript and collected by survey
BirthDate
Age
Note: this an example and this calculation can be done directly in the analysis dashboard without using a question for age.
41 - Q173 : Customized background
This example illustrate overriding of ExcelSurveys CSS.
Here we set different background for selected Items

Below an example of inteactive customization you can do:

this works because we linked the button ( a label in fact) to a checkbox in a header level so we can access by selectors any element on the page.



Notice that we changed page theme in this page .
hemes questions are part of page dependant question:
  • S_BrowserTitle,
  • S_BrowserIcon;
  • S_Header ,
  • S_Title ,
  • S_Header2,
  • S_Footer.
  • css_Page_Custom.
  • all theme question type (starting with th_).
This means that we can change them for each page. New values stays valid until the end of survey if not changed in a following page.

Note concerning themes colors Variables

form data questions: th_bc_light th_bc_base th_bc_dark

we mix colors th_bc_light and th_bc_base to generate colors th_bc_l5 to th_bc
--th_bc_l1 --th_bc_l2 --th_bc_l3 --th_bc_l4 --th_bc_l5

and we mix colors th_bc_base to generate colors from th_bc to th_bs_d5
--th_bc_d1 --th_bc_d2 --th_bc_d3 --th_bc_d4 --th_bc_d5

from fore colors (th_fc_Light and th_fc_Dark), we generate fore colors th_fc_l1 to th_fc_l2 and th_fc_d1 to th_fc_d5 and use them with corresponding background colors.

Notice that All Css variables we use are replaced in server code and cannot be changed by you.
However, you can use own declared Css Variables.
Please note that Microsoft Parser don't use CSS variables and remove them. This happens when you click on Parse button or when you fill code Pane (right Pane) from Desing Pane (left pane)

Advanced Panel Layout
42 - Q202 : Some Rating
See Wselection Page for how to do
43 - Q203 : a Switcher
See WSelection Page for how to do
Here, we have used
vertical-align = bottom
in CSS Row Template
44 - Q207 : Question 1
panel Type=Normal inline
Login
45 - Q208 : Question 2
panel Type=Normal inline
Login
46 - Q209 : Question 3
panel Type=Normal inline
Login
47 - Q210 : Question 4
panel Type=Normal inline
Login
48 - Q211 : Question 5
panel Type=Normal inline
Login
Validation Error. Please check your responses.

This is a sticky footer zone