Change progress bar images of questionnaire - Revision history

Cg huyphong at 07:40, 14 February 2012

2012-02-14T07:40:14Z

@@ Line 60: / Line 60: @@
+}
 </SCRIPT>
 </source>

Cg loc at 10:25, 6 February 2012

2012-02-06T10:25:39Z

← Older revision		Revision as of 10:25, 6 February 2012
Line 11:		Line 11:
	Step 3: Paste this code below (include open and close SCRIPT tag) into HTML tab of Questionnaire layout editor.		Step 3: Paste this code below (include open and close SCRIPT tag) into HTML tab of Questionnaire layout editor.

	Questionnaire on cg.catglobe.com site: ~~172339 (~~Javascript demo 04)<br>		Questionnaire on cg.catglobe.com site: '''Javascript demo 04''' (172339)<br>

	<source lang="javascript">		<source lang="javascript">

Cg loc at 10:24, 6 February 2012

2012-02-06T10:24:55Z

← Older revision		Revision as of 10:24, 6 February 2012
Line 1:		Line 1:
	== Change progress bar images of questionnaire layout ==		== Change progress bar images of questionnaire layout ==

	We have 12 images used for progress bar in questionnaire layout.		We have 12 images used for progress bar in questionnaire layout. To change them, we will override the function quest.progress.getHTML().
	To change them, we will override the function quest.progress.getHTML().

	@Note: The way I used below is only used in Questionnaire layout template because in "Questionnaire layout template" we can insert javascript inside HTML tab.		@Note: The way I used below is only used in Questionnaire layout template because in "Questionnaire layout template" we can insert javascript inside HTML tab.

	Step 1: Upload 12 images in any folder, better if you store them in the Images tab of Questionnaire layout editor to handle easly in future.		Step 1: Upload 12 images in any folder, better if you store them in the Images tab of Questionnaire layout editor to handle easly in future.

	Step 2: Get their links and replace in the javascript below (in step 3).		Step 2: Get their links and replace in the javascript below (in step 3).

	Step 3: Paste this code below (include open and close SCRIPT tag) into HTML tab of Questionnaire layout editor.		Step 3: Paste this code below (include open and close SCRIPT tag) into HTML tab of Questionnaire layout editor.

	~~You can check the example in CG~~ site~~. Questionnaire~~: "Javascript demo 04"		Questionnaire on cg.catglobe.com site: 172339 (Javascript demo 04)<br>

	<source lang = javascript>		<source lang="javascript">

	<SCRIPT type=text/javascript>		<SCRIPT type=text/javascript>

Cg loc at 10:23, 6 February 2012

2012-02-06T10:23:28Z

← Older revision		Revision as of 10:23, 6 February 2012
Line 11:		Line 11:

	Step 3: Paste this code below (include open and close SCRIPT tag) into HTML tab of Questionnaire layout editor.		Step 3: Paste this code below (include open and close SCRIPT tag) into HTML tab of Questionnaire layout editor.

			You can check the example in CG site. Questionnaire: "Javascript demo 04"

	<source lang = javascript>		<source lang = javascript>

Cg huutrung: /* Change progress bar images of questionnaire layout */

2010-12-14T07:57:14Z

Change progress bar images of questionnaire layout

← Older revision		Revision as of 07:57, 14 December 2010
Line 4:		Line 4:
	To change them, we will override the function quest.progress.getHTML().		To change them, we will override the function quest.progress.getHTML().

	@Note: The way I used below is only used in ~~questionnaire~~ layout template, because ~~only~~ in "Questionnaire layout template" we can insert javascript inside HTML tab.		@Note: The way I used below is only used in Questionnaire layout template because in "Questionnaire layout template" we can insert javascript inside HTML tab.

	Step 1: Upload 12 images in any folder, better if you store them in the Images tab of Questionnaire layout editor to handle easly in future.		Step 1: Upload 12 images in any folder, better if you store them in the Images tab of Questionnaire layout editor to handle easly in future.

Cg huutrung: Created page with '== Change progress bar images of questionnaire layout == We have 12 images used for progress bar in questionnaire layout. To change them, we will override the function quest.pro…'

2010-12-14T07:54:25Z

Created page with '== Change progress bar images of questionnaire layout == We have 12 images used for progress bar in questionnaire layout. To change them, we will override the function quest.pro…'

New page

== Change progress bar images of questionnaire layout ==

We have 12 images used for progress bar in questionnaire layout.
To change them, we will override the function quest.progress.getHTML().

@Note: The way I used below is only used in questionnaire layout template, because only in "Questionnaire layout template" we can insert javascript inside HTML tab.

Step 1: Upload 12 images in any folder, better if you store them in the Images tab of Questionnaire layout editor to handle easly in future.

Step 2: Get their links and replace in the javascript below (in step 3).

Step 3: Paste this code below (include open and close SCRIPT tag) into HTML tab of Questionnaire layout editor.

<source lang = javascript>

<SCRIPT type=text/javascript>
if (typeof quest != "undefined")
{
//Replace your image links here
quest.progress.images[0] = "/Images/GetImage.aspx?rid=5b9cb0ba-aec2-4dab-9e40-4f2c9b65f439";
quest.progress.images[1] = "/Images/GetImage.aspx?rid=b345753b-0421-4057-80b8-1a352381be39";
quest.progress.images[2] = "/Images/GetImage.aspx?rid=e53d9e52-0626-4e89-8585-6eda036b1404";
quest.progress.images[3] = "/Images/GetImage.aspx?rid=a5c7bc2f-295b-45c4-9b27-f4680fc09d26";
quest.progress.images[4] = "/Images/GetImage.aspx?rid=17e47887-4e55-45dc-b318-c6bd0649bab6";
quest.progress.images[5] = "/Images/GetImage.aspx?rid=17bcf8b5-ffd5-4242-ad35-86692c58024a";
quest.progress.images[6] = "/Images/GetImage.aspx?rid=3d6b6526-8731-4bc1-a40a-9dac1abe4f7f";
quest.progress.images[7] = "/Images/GetImage.aspx?rid=f8c61240-c39b-49b5-ab80-ade5e8a94ad0";
quest.progress.images[8] = "/Images/GetImage.aspx?rid=b52bf511-5bdc-4427-b750-bf4e757572a2";
quest.progress.images[9] = "/Images/GetImage.aspx?rid=575979f6-b780-45a6-adf4-cc1f564c8084";
quest.progress.images[10] = "/Images/GetImage.aspx?rid=2027ea23-b428-4a87-80ee-f180966beb8d";
quest.progress.images[11] = "/Images/GetImage.aspx?rid=5ce8fa51-e815-4007-a77e-c66e11f370e5";

quest.progress.getHTML = function()
{
var i, j;
var sres = "";
if (this.images.length > 0) this.step = 100 / this.images.length;
sres += "<table border="+this.bordersize+">";
sres += "<tr><td>";
sres += "<table border=0 cellspacing=0 cellpadding=0>";
sres += "<tr>";
if (this.type == 0) {
j = 0;
for (i = 0; i < this.pct; i += this.step) {
sres += "<td><img src=\"" + this.images[j++]+ "\"></td>";
}
}
else {
j = Math.floor(this.pct / this.step);
if (j >= this.images.length && j > 0) j = this.images.length - 1;
sres += "<td><img src=\"" + this.images[j]+"\"></td>";
}
sres += "</tr>";
sres += "</table>";
sres += "</td></tr>";
sres += "</table>";
return sres;
}
}
</SCRIPT>
</source>