I am trying hard to change the color of a text after clicking on it but not getting success.
There are 6 labels :- one for question, four for answer options and one for correct ans
When I click on any of the four option then it should compare with the correct answer and if the answer is correct the the text of the option should turn to green otherwise it should turn to red(if answer is incorrect).
But it is not happening like that. I can't find out why.
Have a look at my code. Show me where I am making mistake and what is the solution.
What I have tried:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.3/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.3/jquery-ui.js"></script>
<script type="text/javascript">
var currentTab = 0;
$(function () {
$("#tabs").tabs({
select: function (e, i) {
currentTab = i.index;
}
});
});
$("#btnNext").live("click", function () {
var tabs = $('#tabs').tabs();
var c = $('#tabs').tabs("length");
currentTab = currentTab == (c - 1) ? currentTab : (currentTab + 1);
tabs.tabs('select', currentTab);
$("#btnPrevious").show();
if (currentTab == (c - 1)) {
$("#btnNext").hide();
} else {
$("#btnNext").show();
}
});
$("#btnPrevious").live("click", function () {
var tabs = $('#tabs').tabs();
var c = $('#tabs').tabs("length");
currentTab = currentTab == 0 ? currentTab : (currentTab - 1);
tabs.tabs('select', currentTab);
if (currentTab == 0) {
$("#btnNext").show();
$("#btnPrevious").hide();
}
if (currentTab < (c - 1)) {
$("#btnNext").show();
}
});
$(function () {
document.getElementById('form1').onsubmit = function () {
return false;
}
$(".panelButton").click(function () {
var $thisButton = $(this);
var $ansPanel = $(this).parent().find('.AnswerPanel');
if ($ansPanel.is(":hidden")) {
$ansPanel.show();
}
else {
$ansPanel.hide();
}
if ($thisButton.val() == "Show Answer") {
$thisButton.val("Hide Answer");
} else {
$thisButton.val("Show Answer");
}
});
$(".optionclass").click(function () {
var $thisoption = $(this);
var $corrans = $(".correctans");
if ($thisoption.val() == $corrans.val()) {
$thisoption.css("color", "green");
}
else {
$thisoption.css("color", "red");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
<li><a href="#tabs-4">Tab 4</a></li>
<li><a href="#tabs-5">Tab 5</a></li>
</ul>
<div id="tabs-1">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Panel ID="Panel1" runat="server">
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Question") %>'></asp:Label>
<br />
<br />
<br />
<span>A-</span> <asp:Label class="optionclass" ID="Label2" runat="server" Text='<%#Eval("Option1")%>'></asp:Label>
<br />
<br />
<span>B-</span> <asp:Label class="optionclass" ID="Label3" runat="server" Text='<%#Eval("Option2")%>'></asp:Label>
<br />
<br />
<span>C-</span> <asp:Label class="optionclass" ID="Label4" runat="server" Text='<%#Eval("Option3")%>'></asp:Label>
<br />
<br />
<span>D-</span> <asp:Label class="optionclass" ID="Label5" runat="server" Text='<%#Eval("Option4")%>'></asp:Label>
<br />
<br />
<asp:Button class="panelButton" runat="server" Text="Show Answer" ClientIDMode="Static" />
<br />
<asp:Panel ID="anspanel" class="AnswerPanel" runat="server" ClientIDMode="Static">
<span>Correct Answer is :-</span><asp:Label class="correctans" ID="Label6" runat="server" Text='<%#Eval("CorrectAns")%>'></asp:Label>
<br />
<br />
<asp:Label ID="Label7" runat="server" Text='<%#Eval("Explanation")%>'></asp:Label>
</asp:Panel>
</asp:Panel>
<br />
<br />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div id="tabs-3">
Tab 3 Content
</div>
<div id="tabs-4">
Tab 4 Content
</div>
<div id="tabs-5">
Tab 5 Content
</div>
</div>
<input type="button" id="btnPrevious" value="Previous" style = "display:none"/>
<input type="button" id="btnNext" value="Next" />
</div>
</form>
</body>
</html>
.cs :-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
public partial class Student_Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GridView1.DataSource = GetData("SELECT top 2 Question, Option1, Option2, Option3, Option4, CorrectAns, Explanation FROM Questions");
GridView1.DataBind();
foreach (GridViewRow row in GridView1.Rows)
{
if (row.RowType == DataControlRowType.DataRow)
{
Panel panel1 = (Panel)row.FindControl("Panel1");
Panel anspanel = (Panel)panel1.FindControl("anspanel");
anspanel.Style.Add("display", "none");
}
}
}
private DataSet GetData(string query)
{
string conString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
SqlCommand cmd = new SqlCommand(query);
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds);
return ds;
}
}
}
}
}
Submit an article or tip