Change progress bar images of questionnaire

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.

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

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