Difference between revisions of "Change progress bar images of questionnaire"
Cg huyphong (talk | contribs) |
|||
| (2 intermediate revisions by one other user not shown) | |||
| 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. |
| − | + | Questionnaire on cg.catglobe.com site: '''Javascript demo 04''' (172339)<br> | |
| − | <source lang = javascript> | + | <source lang="javascript"> |
<SCRIPT type=text/javascript> | <SCRIPT type=text/javascript> | ||
| Line 61: | Line 60: | ||
} | } | ||
</SCRIPT> | </SCRIPT> | ||
| + | </source> | ||
| + | |||
| + | == Another solution to change the progress bar == | ||
| + | |||
| + | Open the js of the question, paste this below code and update the number of the progress you want like below : | ||
| + | |||
| + | <source lang="javascript"> | ||
| + | quest.progress.pct = 90; | ||
</source> | </source> | ||
Latest revision as of 08:40, 14 February 2012
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.
Questionnaire on cg.catglobe.com site: Javascript demo 04 (172339)
<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>
Another solution to change the progress bar
Open the js of the question, paste this below code and update the number of the progress you want like below :
quest.progress.pct = 90;
