1) Change the Anchor Link to LinkButton set the CommandArgument value as Name using Eval also add the OnClick Event to set the ActiveStepIndex.
2) You need to change the method GetClassForWizardStep to set the class to check each question is attempted or not for setting its class.
Refer the below Sample code for your reference and Implement it as per your code logic.
HTML
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<style type="text/css">
#wizHeader li .prevStep
{
background-color: #669966;
}
#wizHeader li .prevStep:after
{
border-left-color: #669966 !important;
}
#wizHeader li .currentStep
{
background-color: #C36615;
}
#wizHeader li .currentStep:after
{
border-left-color: #C36615 !important;
}
#wizHeader li .NotattemptedStep
{
background-color: #0A0A11;
}
#wizHeader li .NotattemptedStep:after
{
background-color: #0A0A11 !important;
}
#wizHeader li .nextStep
{
background-color: #C2C2C2;
}
#wizHeader li .nextStep:after
{
border-left-color: #C2C2C2 !important;
}
#wizHeader
{
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
margin: 0px;
padding: 0px;
}
#wizHeader li
{
float: left;
}
#wizHeader li a
{
color: white;
text-decoration: none;
padding: 0px 15px 0px 20px;
background: brown; /* fallback color */
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
#wizHeader li a:after
{
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
#wizHeader li a:before
{
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
#wizHeader li:first-child a
{
padding-left: 10px;
}
#wizHeader li:last-child
{
padding-right: 50px;
}
#wizHeader li a:hover
{
background: #FE9400;
}
#wizHeader li a:hover:after
{
border-left-color: #FE9400 !important;
}
.content
{
height: auto;
padding-top: 75px;
text-align: center;
background-color: #F9F9F9;
font-size: 48px;
}
/* CSS Styles for radio button*/
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:Wizard ID="Wizard1" runat="server" DisplaySideBar="false" OnFinishButtonClick="Wizard1_FinishButtonClick">
<WizardSteps>
<asp:WizardStep ID="WizardStep1" runat="server" Title="1">
<div class="content">
<fieldset>
<legend>Q1 of 40</legend>
<div class="form-group">
<label class="h4">
The main goal of treatment for acute glomerulonephritis is to:</label>
</div>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" CssClass=" ">
<asp:ListItem Value="0">Answer 1</asp:ListItem>
<asp:ListItem Value="1">Answer 2</asp:ListItem>
<asp:ListItem Value="2">Answer 3</asp:ListItem>
<asp:ListItem Value="3">Answer 4</asp:ListItem>
</asp:RadioButtonList>
</fieldset>
</div>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep2" runat="server" Title="2">
<div class="content">
<fieldset>
<legend>Q2 of 40</legend>
<div class="form-group">
<label class="h4">
Nursing diagnoses mostly differ from medical diagnoses in that they are:</label>
</div>
<div class="funkyradio">
<asp:RadioButtonList ID="RadioButtonList2" runat="server">
<asp:ListItem Value="0">Answer 1</asp:ListItem>
<asp:ListItem Value="1">Answer 2</asp:ListItem>
<asp:ListItem Value="2">Answer 3</asp:ListItem>
<asp:ListItem Value="3">Answer 4</asp:ListItem>
</asp:RadioButtonList>
</div>
</fieldset>
</div>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep3" runat="server" Title="3">
<div class="content">
<fieldset class="form-horizontal">
<legend>Q3 of 40</legend>
<div class="form-group">
<label class="h4">
To prevent a common, adverse effect of prolonged use of phenytoin sodium (Dilantin),
patients taking the drug are instructed to:</label>
</div>
<div class="funkyradio">
<asp:RadioButtonList ID="RadioButtonList3" runat="server">
<asp:ListItem Value="0">Answer 1</asp:ListItem>
<asp:ListItem Value="1">Answer 2</asp:ListItem>
<asp:ListItem Value="2">Answer 3</asp:ListItem>
<asp:ListItem Value="3">Answer 4</asp:ListItem>
</asp:RadioButtonList>
</div>
</fieldset>
</div>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep4" runat="server" Title="4">
<div class="content">
<fieldset class="form-horizontal">
<legend>Q4 of 40</legend>
<div class="form-group">
<label class="h4">
To prevent a common, adverse effect of prolonged use of phenytoin sodium (Dilantin),
patients taking the drug are instructed to:</label>
</div>
<div class="funkyradio">
<asp:RadioButtonList ID="RadioButtonList4" runat="server">
<asp:ListItem Value="0">Answer 1</asp:ListItem>
<asp:ListItem Value="1">Answer 2</asp:ListItem>
<asp:ListItem Value="2">Answer 3</asp:ListItem>
<asp:ListItem Value="3">Answer 4</asp:ListItem>
</asp:RadioButtonList>
</div>
</fieldset>
</div>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep5" runat="server" Title="5">
<div class="content">
<fieldset class="form-horizontal">
<legend>Q5 of 40</legend>
<div class="form-group">
<label class="h4">
To prevent a common, adverse effect of prolonged use of phenytoin sodium (Dilantin),
patients taking the drug are instructed to:</label>
</div>
<div class="funkyradio">
<asp:RadioButtonList ID="RadioButtonList5" runat="server">
<asp:ListItem Value="0">Answer 1</asp:ListItem>
<asp:ListItem Value="1">Answer 2</asp:ListItem>
<asp:ListItem Value="2">Answer 3</asp:ListItem>
<asp:ListItem Value="3">Answer 4</asp:ListItem>
</asp:RadioButtonList>
</div>
</fieldset>
</div>
</asp:WizardStep>
</WizardSteps>
<HeaderTemplate>
<ul id="wizHeader">
<asp:Repeater ID="SideBarList" runat="server">
<ItemTemplate>
<li>
<asp:LinkButton class="<%# GetClassForWizardStep(Container.DataItem) %>" ID="LinkButton1"
Text='<%# Eval("Name")%>' runat="server" CommandArgument='<%# Eval("Name")%>'
OnClick="Selected"> </asp:LinkButton>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</HeaderTemplate>
<StartNavigationTemplate>
<table cellpadding="3" cellspacing="3">
<tr>
<td>
<asp:Button ID="btnNext" runat="server" Text="Next >>" CssClass="btn btn-evernote"
CausesValidation="true" CommandName="MoveNext" />
</td>
</tr>
</table>
</StartNavigationTemplate>
<StepNavigationTemplate>
<table cellpadding="3" cellspacing="3">
<tr>
<td>
<asp:Button ID="btnPrevious" runat="server" Text="<< Previous" CausesValidation="false"
CssClass="btn btn-premium" CommandName="MovePrevious" />
<asp:Button ID="btnExit" runat="server" Text="Cancel" CausesValidation="false" CssClass="btn btn-icon"
OnClientClick="return confirm('Are you sure you want to exit');" OnClick="btnExit_Click" />
</td>
<td>
<asp:Button ID="btnCancel" runat="server" Text="Save & Exit" CausesValidation="false"
CssClass="btn btn-ghost" OnClientClick="return confirm('Are you sure you want to Save And Close');"
OnClick="btnCancel_Click" />
</td>
<td>
<asp:Button ID="btnNext" runat="server" Text="Next >>" CssClass="btn btn-evernote"
CausesValidation="true" CommandName="MoveNext" />
</td>
</tr>
</table>
</StepNavigationTemplate>
<FinishNavigationTemplate>
<table cellpadding="3" cellspacing="3">
<tr>
<td>
<asp:Button ID="btnExit" runat="server" Text="Cancel" CausesValidation="false" CssClass="btn btn-icon"
OnClientClick="return confirm('Are you sure you want to exit');" OnClick="btnExit_Click" />
</td>
<td>
<asp:Button ID="btnPrevious" runat="server" Text="<< Previous" CausesValidation="false"
CssClass="btn btn-premium" CommandName="MovePrevious" />
<asp:Button ID="btnFinish" runat="server" Text="Finish" CssClass="btn btn-evernote"
CausesValidation="true" CommandName="MoveComplete" />
</td>
</tr>
</table>
</FinishNavigationTemplate>
</asp:Wizard>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</asp:Content>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Wizard1.ActiveStepIndex = 0;
}
Wizard1.PreRender += new EventHandler(Wizard1_PreRender);
}
protected void Wizard1_PreRender(object sender, EventArgs e)
{
Repeater SideBarList = Wizard1.FindControl("HeaderContainer").FindControl("SideBarList") as Repeater;
SideBarList.DataSource = Wizard1.WizardSteps;
SideBarList.DataBind();
}
protected void Selected(object sender, EventArgs e)
{
Wizard1.ActiveStepIndex = Convert.ToInt32((sender as LinkButton).CommandArgument) - 1;
}
protected string GetClassForWizardStep(object wizardStep)
{
WizardStep step = wizardStep as WizardStep;
if (step == null)
{
return "";
}
int stepIndex = Wizard1.WizardSteps.IndexOf(step);
RadioButtonList1.SelectedIndex.ToString();
if (stepIndex < Wizard1.ActiveStepIndex)
{
string classValue = string.Empty;
switch (stepIndex)
{
case 0:
classValue = RadioButtonList1.SelectedIndex > -1 ? "prevStep" : "NotattemptedStep";
break;
case 1:
classValue = RadioButtonList2.SelectedIndex > -1 ? "prevStep" : "NotattemptedStep";
break;
case 2:
classValue = RadioButtonList3.SelectedIndex > -1 ? "prevStep" : "NotattemptedStep";
break;
case 3:
classValue = RadioButtonList4.SelectedIndex > -1 ? "prevStep" : "NotattemptedStep";
break;
case 4:
classValue = RadioButtonList5.SelectedIndex > -1 ? "prevStep" : "NotattemptedStep";
break;
default:
break;
}
return classValue;
}
else if (stepIndex > Wizard1.ActiveStepIndex)
{
string classValue = string.Empty;
switch (stepIndex)
{
case 0:
classValue = RadioButtonList1.SelectedIndex > -1 ? "prevStep" : "nextStep";
break;
case 1:
classValue = RadioButtonList2.SelectedIndex > -1 ? "prevStep" : "nextStep";
break;
case 2:
classValue = RadioButtonList3.SelectedIndex > -1 ? "prevStep" : "nextStep";
break;
case 3:
classValue = RadioButtonList4.SelectedIndex > -1 ? "prevStep" : "nextStep";
break;
case 4:
classValue = RadioButtonList5.SelectedIndex > -1 ? "prevStep" : "nextStep";
break;
default:
break;
}
return classValue;
}
else
{
return "currentStep";
}
}
protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)
{
Response.Redirect("Thankyou.aspx");
}
protected void btnCancel_Click(object sender, EventArgs e)
{
// Do something with the click ...
Response.Redirect("default.aspx");
}
protected void btnExit_Click(object sender, EventArgs e)
{
// Do something with the click ...
Response.Redirect("wizard.aspx");
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
Wizard1.ActiveStepIndex = 0
End If
AddHandler Wizard1.PreRender, AddressOf Wizard1_PreRender
End Sub
Protected Sub Wizard1_PreRender(sender As Object, e As EventArgs)
Dim SideBarList As Repeater = TryCast(Wizard1.FindControl("HeaderContainer").FindControl("SideBarList"), Repeater)
SideBarList.DataSource = Wizard1.WizardSteps
SideBarList.DataBind()
End Sub
Protected Sub Selected(sender As Object, e As EventArgs)
Wizard1.ActiveStepIndex = Convert.ToInt32(TryCast(sender, LinkButton).CommandArgument) - 1
End Sub
Protected Function GetClassForWizardStep(wizardStep As Object) As String
Dim [step] As WizardStep = TryCast(wizardStep, WizardStep)
If [step] Is Nothing Then
Return ""
End If
Dim stepIndex As Integer = Wizard1.WizardSteps.IndexOf([step])
RadioButtonList1.SelectedIndex.ToString()
If stepIndex < Wizard1.ActiveStepIndex Then
Dim classValue As String = String.Empty
Select Case stepIndex
Case 0
classValue = If(RadioButtonList1.SelectedIndex > -1, "prevStep", "NotattemptedStep")
Exit Select
Case 1
classValue = If(RadioButtonList2.SelectedIndex > -1, "prevStep", "NotattemptedStep")
Exit Select
Case 2
classValue = If(RadioButtonList3.SelectedIndex > -1, "prevStep", "NotattemptedStep")
Exit Select
Case 3
classValue = If(RadioButtonList4.SelectedIndex > -1, "prevStep", "NotattemptedStep")
Exit Select
Case 4
classValue = If(RadioButtonList5.SelectedIndex > -1, "prevStep", "NotattemptedStep")
Exit Select
Case Else
Exit Select
End Select
Return classValue
ElseIf stepIndex > Wizard1.ActiveStepIndex Then
Dim classValue As String = String.Empty
Select Case stepIndex
Case 0
classValue = If(RadioButtonList1.SelectedIndex > -1, "prevStep", "nextStep")
Exit Select
Case 1
classValue = If(RadioButtonList2.SelectedIndex > -1, "prevStep", "nextStep")
Exit Select
Case 2
classValue = If(RadioButtonList3.SelectedIndex > -1, "prevStep", "nextStep")
Exit Select
Case 3
classValue = If(RadioButtonList4.SelectedIndex > -1, "prevStep", "nextStep")
Exit Select
Case 4
classValue = If(RadioButtonList5.SelectedIndex > -1, "prevStep", "nextStep")
Exit Select
Case Else
Exit Select
End Select
Return classValue
Else
Return "currentStep"
End If
End Function
Protected Sub Wizard1_FinishButtonClick(sender As Object, e As WizardNavigationEventArgs)
Response.Redirect("Thankyou.aspx")
End Sub
Protected Sub btnCancel_Click(sender As Object, e As EventArgs)
' Do something with the click ...
Response.Redirect("default.aspx")
End Sub
Protected Sub btnExit_Click(sender As Object, e As EventArgs)
' Do something with the click ...
Response.Redirect("wizard.aspx")
End Sub
Screenshot
