Simple Templates

After you have created your survey the next thing that you really need to do is to create a look and feel. While mrInterview allows you to do lots of customization via the script you will always need to create templates to add more content. This set of steps shows you how to start creating a template from scratch and some of the pitfalls that you need to look out for.

Basic HTML

The first thing we need to do is to create a basic html file. In this example we are going to use Notepad as our editor but if you like you can use things like Front Page etc. The reason I start with notepad is that all the other packages although they are much better than what they used to be , put lots of code in the files that you don’t really need. When we create an HTML file we need to have some basic tags, they are

Specifies that this is an HTML document. All html documents begin and end with this tag. (The file extension .html also indicates that as well)
Creates a container for meta information, such as the document’s title, keywords and description info for search engine crawling, etc to be added to the document (This information is not displayed on the page). The head element contains the title.
Creates a “title” for the document. Anything you add inside this tag, the browser displays it in the title bar of the browser window.
Creates a container for the document’s content (text, images etc). This is where all the “viewable” content will be inserted.

Now we know the basic information type the following into notepad and save the file as Template1.htm


         
         My first Dimensions Template
         
 My Fist Page 

To see what your template looks like so far just double click on it. It should then be displayed inside of your browser. Notice the location of the words “My first Dimensions Template” and “My First Page”.

My first Dimensions template

The next thing we will do is add the dimensions tags into the script. These tags allow you to specify the location of where your question, navigation buttons etc will sit within the page. Dimensions offers several tags but we, at this stage will concentrate on the basic ones, these are:

Specifies the location of the Page Title. This is normally added to the title section of the header for the html page.

This tag specifies the location of any banners added in the IOM script.
This tag defines the position of the question and its response list.
[Text]
This tag defines the location of navigation buttons. [Text] is any text of your choice. The interviewing program ignores this text, but it is useful if you want to test your template by opening the .htm file in your browser or with a program such as Front Page. In this case the text will be displayed in the position and with the attributes defined in the file.

Add the tags into your template and save it.



      <mrPageTitle/>


    
    
    NavBars

The next thing we need to do is to add the template to our survey. We can do this in many ways, in this case we are going to add a template to a specific question so we will use the following iom code.

' Metadata section
    Gender "Please select your gender" categorical [1..1]
    {
        Male "Male",
        Female "Female"
    };
 ' Routing Section
    Gender.LayoutTemplate = "Template2.htm"
    Gender.ask()

After running the script , if all is ok, you will see the following.

Gender Question

If you did not see the above when you tried to create the template then this could be for a number of reasons. One of the main mistakes that get made when creating templates is incorrect HTML so show this, we will make a mistake in the HTML and see what happens. The code that we are going to modify is this code we are going to take of the last two characters /> so we will end up the following If we run the survey we will see that the template does not get used. This is because mrInterview requires XML compliant html code. To check to see if we have compliant code rename the file with a .XML extension and then double click it with your browser. You should then see the following.

Invalid XML

Once you have corrected the XML you will see the following, this tells us your html file is XML complient. Dimensions should like your template file now so rename it back to a html.

Valid XML

So now we have our template we need to add some simple formatting to it. In this example we are only going to use some basic html formatting commands, but with them we can make our survey look better. We are going to use the following html commands.

something This command will make something bold.

This command will draw a horizontal line across the page.
This command will insert a graphic into your html page. The graphic was created with PowerPoint by just using the word art option. Once you have the image you want you can then take a screen shot and paste it into something like paint, trim the image and then save it to you computer. Please not in this example we are not using image cache when showing the logo. Image cache will be explained in another section or you can search the DDL Dimensions Development Library to find out more.
Something This command will change the colour of Something to red. Notice that you can use words to describe the colour want for example you can use “red,yellow,pink,green,blue,white,black”
This command will also change the colour of Something to red. This is a far better way of specifying colours. Using the hex codes will allow you to get more colours and shades. You can use any search engine to find a complete list of the hex numbers you can use.

So where are we going to put all this new HTM. We will start with the template. Add this code to your existing template.



    <mrPageTitle/>


    
     
     
    
     NavBars    

Next we will add some code to the metadata section of the survey script. We would normally try and avoid directly adding html code into our survey as this information will get displayed when we do other things with the metadata, but for this example we will add the following.

' Metadata section
    Gender "Q1. Please select your gender" categorical [1..1]
     {
     Male "Male",
     Female "Female"
     };

Once you have made all these changes and everything is working you should see the following in your browser.

Final Look

As you can see it is very easy to get something up and running that is quite smart. In other sections of this library you will see how we can achieve more advanced looks using different methods.

Leave a Comment