View source for GCI 2010 Student Pages


__TOC__

=Tasks=

==Create a video tutorial for creating a custom survey template (Training) - recKz==

The main video will comprise of six individual videos. They will be about:

===An overview of the template editor and a description of what each area of the template editor is used for.===

''Video starts off with the LimeSurvey logo and an introduction frame''

Hello and welcome to this LimeSurvey training video. Today we will be looking at how you can customise your surveys further by changing the appearance of forms or inserting your own logo.

So let's get started. First load the template editor. This can be accessed from the main admin panel by clicking on this button

''At this point the admin panel is open''

The screen you now see is the main template editor page. In the centre is the template that you are currently working on. The template can be changed by selecting a different one from the drop down list. The preview box allows you to see what your template looks like at different screen resolutions. You are also to change the preview different screens of your template, by selecting from this drop down list.

However, to customise our own templates we need to create a new template.This can be done by copying the default template. To do this click copy template. You will then be prompted to enter a name for it. You are now presented with the editing template page.On the left side we can see all the code that are being used to create this screen of this template. On the right hand side we can see any extra resources such as images that are being used in your survey template.

In the centre of the page we can see the code that is in the file that is selected on the left hand side.

There are also template management tools in this toolbar. Here we can rename a template or delete a template. We can also export and import templates for transfer between LimeSurvey sites.

===An explanation of the different screens.===

Before we start editing our template we need to know what screens represent each page.

''At this point I will go through all the screens showing what they look like and what they do''

The survey list screen contains a list of available surveys when a user visits your site. This is what they see when they first visit your site.

The welcome screen is shown to the user when they have selected a survey to take but haven't yet started it. This will contain a welcome message as well as how many questions they are going to be asked.

The question screen dictates how the questions are going to be presented to the user.

The completed screen is shown to a user once they have completed a survey and it has been sent to you.

The clear all screen appears when a user has decided to reset all their answers.

The register screen is shown when you require a user to register before they take the survey.

The load survey screen is used to load a survey that the user has previously saved and wishes to continue to fill out.

The save survey screen is used when the user can no longer fill out the survey but wishes to come back to it at a later.

The print answers screen is used once a user has completed a survey and you wish to print the answers out.

The print survey screen can be printed by you and given out to fill in by hand. It is fairly minimal in styling.

===Inserting a company logo in to the template.===

We are now going to add a logo to all the pages of our template. The file that needs to be edited depends on where we want the logo to be placed. In this video tutorial we are going to place on the welcome screen. All the code for this is kept in welcome.pstpl so click on it to see the code related to it. We can see that at the moment the file has the cells of the table being used to position the content. We are going to add our logo into one of these rows. However, we first need to have the logo on the server. To do this choose upload file and select the file. Then press upload and wait till the file has been uploaded to your server;

Once you have the file on your server we need to add the reference to it.

''I will then write the code on screen as well as say it''

Now that the code has been written hit save changes and see your logo in the preview pane.

===Basic adjustments in the css to modify the appearance of questions.===

To modify the appearance of the questions we need to look at the CSS of the page. All of our CSS data is kept in template.css so click on that. We can see in the question.pstpl file that the question is style using the class "questiontext".

If we switch back to the CSS file and search for questiontext we come across td.questiontext. Inside the curly brackets is where the question is styled. So say we wanted to change the colour of the text, we would add a new property called color and add a colour value after it. If we save and refresh the preview page we will now see that the colour of the text has changed.  Alternatively we may want to increase the size of the text. This is done by changing the value of font-size to the value we would like.

Lastly, we may wish to underline our question. To do this we have to add the property text-decoration and set it's value to underline. We can also style the questions, such as changing the background-color of the survey box. To do this we have to get the class of question that we wish to style, which is available from the LimeSurvey documentation. Then we have to go into the CSS file again and add the CSS properties we want.

===Customizing the survey description page.===

On the customising survey description page I will show the user how to embed a youtube video to the welcome text. At the moment the welcome text also contains a string telling the user how many questions the survey has. We're going to remove this and replace it with the survey ID. The user will also be told that they can find other field strings on a web page and I will show them this site.

===Customizing the end page.===

On this page I will show how to add a publish to twitter image into the thank you text. This can be pressed by the user, after which they will be taken to the Twitter site. This will create a pre-formatted a tweet about them completing a survey that was created using LimeSurvey.