GCI 2010 Student Pages - Revision history

Admin at 21:56, 26 November 2010

2010-11-26T21:56:03Z

← Older revision		Revision as of 23:56, 26 November 2010
Line 54:		Line 54:
	===Inserting a company logo in to the template.===		===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 ~~the footer~~ 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;		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.		Once you have the file on your server we need to add the reference to it.

Admin at 17:29, 25 November 2010

2010-11-25T17:29:13Z

← Older revision		Revision as of 19:29, 25 November 2010
Line 18:		Line 18:
	''At this point the admin panel is open''		''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. ~~This~~ can be changed by selecting a different one from the drop down list. ~~You can also~~ see what your template looks like at different screen resolutions. You ~~can~~ also ~~see~~ the different screens of your ~~survey~~ by selecting from this drop down list.		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. We're going to copy the default~~ template. This can be done by ~~clicking~~ copy template. You will then be prompted to enter a name. 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.		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.		In the centre of the page we can see the code that is in the file that is selected on the left hand side.

Admin at 22:19, 24 November 2010

2010-11-24T22:19:56Z

Admin at 22:16, 24 November 2010

2010-11-24T22:16:16Z

← Older revision		Revision as of 00:16, 25 November 2010
Line 54:		Line 54:
	===Inserting a company logo in to the template.===		===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 ~~it in~~ the ~~footer of the page~~. All the code for the footer is kept in ~~endpage~~.pstpl so click on it to see the code related to it. We can see that at the moment the file ~~just~~ has the ~~closing tags~~ of the table. We are going to add ~~another row to the table and place~~ our logo ~~inside this~~. 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;		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 the footer 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.		Once you have the file on your server we need to add the reference to it.
Line 68:		Line 68:
	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.		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.		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.===		===Customizing the survey description page.===

	On the customising survey description page I will show the user how to embed a youtube video ~~(?) or add an image~~ to the welcome text.		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.===		===Customizing the end page.===

	On this page I will show how to add an image into the thank you text. This ~~could~~ be ~~a twitter image which~~ the user ~~could press~~ to ~~visit twitter with~~ a tweet about them completing a survey that was created using LimeSurvey.		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.

Admin at 20:32, 23 November 2010

2010-11-23T20:32:48Z

← Older revision		Revision as of 22:32, 23 November 2010
Line 71:		Line 71:

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

			On the customising survey description page I will show the user how to embed a youtube video (?) or add an image to the welcome text.

	===Customizing the end page.===		===Customizing the end page.===

			On this page I will show how to add an image into the thank you text. This could be a twitter image which the user could press to visit twitter with a tweet about them completing a survey that was created using LimeSurvey.

Admin at 20:17, 23 November 2010

2010-11-23T20:17:58Z

← Older revision		Revision as of 22:17, 23 November 2010
Line 27:		Line 27:

	===An explanation of the different screens.===		===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 date.

			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.===		===Inserting a company logo in to the template.===

Admin at 19:17, 23 November 2010

2010-11-23T19:17:01Z

← Older revision		Revision as of 21:17, 23 November 2010
Line 30:		Line 30:
	===Inserting a company logo in to the template.===		===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 it in the footer of the page. All the code for the footer is kept in endpage.pstpl so click on it to see the code related to it.		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 it in the footer of the page. All the code for the footer is kept in endpage.pstpl so click on it to see the code related to it. We can see that at the moment the file just has the closing tags of the table. We are going to add another row to the table and place our logo inside this. 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.===		===Basic adjustments in the css to modify the appearance of questions.===

			In order 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.

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

	===Customizing the end page.===		===Customizing the end page.===

Admin at 18:34, 23 November 2010

2010-11-23T18:34:44Z

← Older revision		Revision as of 20:34, 23 November 2010
Line 16:		Line 16:
	So let's get started. First load the template editor. This can be accessed from the main admin panel by clicking on this button		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 ~~a screen~~ the admin panel is open''		''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. This can be changed by selecting a different one from the drop down list. You can also see what your template looks like at different screen resolutions. You can also see the different screens of your survey by selecting from this drop down list.		The screen you now see is the main template editor page. In the centre is the template that you are currently working on. This can be changed by selecting a different one from the drop down list. You can also see what your template looks like at different screen resolutions. You can also see the different screens of your survey by selecting from this drop down list.
Line 29:		Line 29:

	===Inserting a company logo in to the template.===		===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 it in the footer of the page. All the code for the footer is kept in endpage.pstpl so click on it to see the code related to it.

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

Admin at 18:22, 23 November 2010

2010-11-23T18:22:32Z

← Older revision		Revision as of 20:22, 23 November 2010
(No difference)

Admin at 18:22, 23 November 2010

2010-11-23T18:22:10Z

New page

__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 a 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 a screen 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. This can be changed by selecting a different one from the drop down list. You can also see what your template looks like at different screen resolutions. You can also see the different screens of your survey by selecting from this drop down list.

However, in order to customise our own templates we need to create a new template. We're going to copy the default template. This can be done by clicking copy template. You will then be prompted to enter a name. 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.===

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

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

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

===Customizing the end page.===

← Older revision		Revision as of 00:19, 25 November 2010
Line 10:		Line 10:
	===An overview of the template editor and a description of what each area of the template editor is used for.===		===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 a introduction frame''		''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.		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.
Line 20:		Line 20:
	The screen you now see is the main template editor page. In the centre is the template that you are currently working on. This can be changed by selecting a different one from the drop down list. You can also see what your template looks like at different screen resolutions. You can also see the different screens of your survey by selecting from this drop down list.		The screen you now see is the main template editor page. In the centre is the template that you are currently working on. This can be changed by selecting a different one from the drop down list. You can also see what your template looks like at different screen resolutions. You can also see the different screens of your survey by selecting from this drop down list.

	However, ~~in order~~ to customise our own templates we need to create a new template. We're going to copy the default template. This can be done by clicking copy template. You will then be prompted to enter a name. 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.		However, to customise our own templates we need to create a new template. We're going to copy the default template. This can be done by clicking copy template. You will then be prompted to enter a name. 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.		In the centre of the page we can see the code that is in the file that is selected on the left hand side.
Line 46:		Line 46:
	The load survey screen is used to load a survey that the user has previously saved and wishes to continue to fill out.		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 ~~date~~.		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 answers screen is used once a user has completed a survey and you wish to print the answers out.
Line 54:		Line 54:
	===Inserting a company logo in to the template.===		===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 the footer 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;		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 the footer 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.		Once you have the file on your server we need to add the reference to it.
Line 64:		Line 64:
	===Basic adjustments in the css to modify the appearance of questions.===		===Basic adjustments in the css to modify the appearance of questions.===

	~~In order 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".		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.		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.