Change progress bar images of questionnaire: Difference between revisions

Revision as of 07:57, 14 December 2010

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

<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>

@@ Line 4: / Line 4: @@
 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.