In several of AskiaWeb's dialogs, it is possible to enter HTML or CSS fragments to customize the appearance of your survey. The following notes are for guidance only when adding these to your survey, and we recommend you refer to a specialist book on HTML and/or CSS for further information.
The basic structure of an HTML document is as such:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
All HTML documents must be laid out with each of these sections. </…> closes a section (e.g. </b> ends a section of bold text).
Within Askia, all major changes to the layout of a survey are made within the <Head> tag. For reference, take a look at our example survey within WebProd.
The following tags may be useful to you when setting up your survey:
<B>bold text</B>
<I>italicized text</I>
<U>underlined text</U>
<TABLE><TR><TD>
Table, row, column: </TD></TR></TABLE>
<LINK REL=STYLESHEET HREF="/webprod/resources/internalsurveyname/stylesheet.css" TYPE="text/css">: to insert a link to an external stylesheet in the <HEAD> section (see below for details of external style sheets)
<script language="JavaScript" src="/webprod/ resources/internalsurveyname/javascipt.js "></script>: to insert a link to an external JavaScript document in the <HEAD> section
<script language="JavaScript">Insert javascript directly into the <Head> section here</script>
<font color=”#FF0000” size=”1” face=”verdana”>Apply attributes to this font</font>
<img src="/webprod/resources/internalsurveyname/image.jpg" border=”1px” class=”image”>: to insert an image; in this case we also applied a border size (always black if assigned directly in an HTML tag) and a class (so that if we later assign any attributes to images in general they will be applied to this (for instance, size, position, etc).
<img value="Previous"> specifies that the text "previous" will appear as a tooltip when the respondent holds his/her mouse pointer over the image in question.
The following HTML code is often inserted in the Final page section of the AskiaWeb survey Edit page. It simply closes the final window as soon as it is opened (this appears after the final page created by the survey administrator):
<html>
<body onload="window.close();"></body>
</html>
The following code changes an image when it is moused over by the respondent; it is useful for animating buttons as the user moves his/her mouse pointer over them:
onmouseover=’this.src=''/images/next2.jpg''’; onmouseout=’this.src=''/images/next.jpg'’’;
In the above case, the image "next2.jpg" will be loaded when the respondent holds his/her mouse over it, and then the image "next.jpg" will be loaded when the respondent moves his/her mouse pointer away (you would normally want this to be the normal image).
A CSS (or Cascading Style Sheet) file is an external file that defines the properties of certain elements within an HTML document. The survey can link to a specific CSS file in its <HEAD> tag.
Here is an example CSS file. Below it, you will find notes.
/* --- My Survey’s Properties --- */
HTML
{
scrollbar-base-color: black;
scrollbar-arrow-color: #B3B3B3;
scrollbar-track-color: black;
scrollbar-shadow-color: black;
scrollbar-lightshadow-color: black;
scrollbar-darkshadow-color: black;
scrollbar-highlight-color: black;
scrollbar-3dlight-color: black;
}
A:link {color: #EEEEEE; text-decoration: none;}
A:visited {color: #EEEEEE; text-decoration: none;}
A:active {color: #EEEEEE;text-decoration: none;}
A:hover {color: #FF6A6A; text-decoration: none;}
BODY
{
background-color: #000000;
}
TD.Q
{
align:left;
valign: top;
margin: 10px;
font: #000066 bold 10pt;
}
P
{
align:left;
margin-left: 15px;
font: #000000 8pt;
}
.intro
{
font: #990000;
}
/* --- End of Properties ---*/
In the above example, you will see various ways of assigning attributes. For example, the section headed HTML refers to the default elements of the page. This is mainly used to control the appearance of links and scroll-bars, both of which have been changed in our example.
A:link refers to a link on a page, and A:visited to a visited link. A:hover refers to the appearance of a link when the mouse pointer is over it (before it has been clicked), and A:active to a link that is currently being viewed.
Next you’ll see the Body selector, which refers to the attributes of the main body of the page. Here, you can define attributes such as the background color, and font settings (size, color, weight and style, margins, etc.). These are the default properties that will be assigned to elements if they are not given attributes at any other point.
TD.Q refers to a specific type or column in a table (<TD> being the tag used to begin a cell within the <TABLE> and <TR> tags). When the browser reads the style-sheet, it will first read TD and start to look for a <TD> tag. It will then see .Q and try to find a tag that includes this class="Q" (i.e. <TD class="Q">). Once found, the properties included in the selector will be assigned to the relevant elements (in this case the column alignment and margins, as well as the text within).
P is a selector referring specifically to paragraphs using the <P> tag, so all of your <P> paragraphs will have those attributes (unless specifically over-ridden with tags such as P.intro or .intro).
.intro refers to any tag given the class "intro" (e.g. <TD class=”intro”>, <P class=”intro”>, <TABLE class=”intro”> and so on).
Style-sheet attributes are applied in the following order, in increasing order of precedence:
Browser default
External style sheet (i.e. in a .css file, as discussed above)
Internal style sheet (inside the <head> tag of the HTML page)
Inline style (inside an HTML element)
If the inline style only refers to one attribute, all other attributes assigned to this element will be taken from the internal style-sheet, external style-sheet, then browser default, in that order, depending on which have been specified.
Within a CSS document, style attributes are applied in much the same way. For example, if the class .intro defines specific font elements (e.g. color and type), but omits the font size, then the font size will be taken from the class <P>, as defined within the style-sheet.
For a complete CSS Reference, we recommend you visit www.w3schools.com.