Enrollment Progress Meter

You can add a progress meter to your Enrollment pages which will show how much of the process a user has completed.

Colors for the Progress Meter bars and border are determined in the Style Sheet (.awProgress and td.StepDone).  You can also display a What's This link that will open the Enrollment Progress Meter page which explains the registration process.  The text of the Meter Explanation page is taken from the Meter.htm template.

To use the Enrollment Progress Meter, complete the following steps:  

1. Add the ##ProgressBar()## tag to the appropriate Enrollment templates.  The ##ProgressBar()## tag has two parameters:

1. Numeric Return Value (Required):  the number of completion bars that should show on the particular enrollment page. The average step is 5 completion bars.
2. Logical (Optional): determines if the What's If link should show next to the Progress Meter.

2. The Progress Meters has 20 bars that will be "filled in" as users complete each step. The ##ProgressBar()## tag, with the appropriate bar number, should be placed in the designated spot on the following templates:

1. XCourseStatus.htm - should be placed just above the ##Standard.Section3## tag. Since the Adding the Course to the Enrollment Card is the first step in the process, parameter 1 should be set to 0. If you want to include the What's This link, set parameter 2 to.t. (as in the above example).
2. XenrollCard.htm - should be placed in 2 places on this template:  1) just above the ##-AddProxy-## tag ,and 2) just above the ##-NoEntries-## tag.

Parameter 1 should be set to 5 in both places on this template.

3. Supplemental Data Pages - should be placed just above the ##Standard.Section3## tag on ALL supplemental data pages you use.  Parameter 1 should be set to 10.
4. Register.htm - should be placed just above the ##Standard.Section3## tag.  Parameter 1 should be set to 15.
5. Regconfirm.htm - should be placed just above the ##Standard.Section3## tag.  Parameter 1 should be set to 20.

3. Add the following elements to your Style sheet and adjust the colors to suit your web design:

.awProgress /* Style for Enrollment Progress Meter Table */
{
border: solid 1px /*sC01*/ #1e505c /*eC01*/;
padding: 0;
}

.awProgress td.awStepDone /* Style for Completed Bars in Enrollment Progress Meter */
{
background-color: /*sC04*/ #b5dde7 /*eC04*/;
padding: 0;
width: 6px;
font-size: 50%;
}

.awProgress td.awStepNot /* Style for Uncompleted Bars in Enrollment Progress Meter  */
{
background-color: /*sC04*/ #ffffff /*eC04*/;
padding: 0;
width: 6px;
font-size: 50%;
text-align: center;
}

4. Obtain a copy of the Meter.htm template from your ACEware Systems technician and place it in your Templates folder (e.g. wconnect/ace).  Edit the text, if desired.  

 

Related Topics