Online Test Application Using ASP.NET

Anil Thakur
Jun 28, 2016

55.6k
0
13
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Bookmark

Online Test Application (1).zip

Create a database and a table with the following fields in it,

Put some data in that table, like the below image,

table
Now create a website and add a web form in it (default.aspx),

code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<style>
body {
margin: auto;
}
.main-div {
position: absolute;
display: table;
width: 100%;
height: 100%;
background: #cccca0;
}
.main-inner-div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.main-content {
display: inline-block;
text-align: left;
background: #ddffca;
padding: 200px;
border: 1px solid #000;
border-radius: 10px;
}
.btn {
background: #000000;
background-image: -webkit-linear-gradient(top, #000000, #2980b9);
background-image: -moz-linear-gradient(top, #000000, #2980b9);
background-image: -o-linear-gradient(top, #000000, #2980b9);
background-image: linear-gradient(to bottom, #000000, #2980b9);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 6px;
font-family: Arial;
color: #ffffff;
font-size: 19px;
padding: 3px 20px;
text-decoration: none;
}
.btn:hover {
background: #261c61;
background-image: -webkit-linear-gradient(top, #261c61, #3498db);
background-image: -moz-linear-gradient(top, #261c61, #3498db);
background-image: -o-linear-gradient(top, #261c61, #3498db);
background-image: linear-gradient(to bottom, #261c61, #3498db);
text-decoration: none;
cursor: pointer;
}
</style>
<script>
function StartTest(popUpPage) {
window.open(popUpPage, 'null', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,fullscreen=yes');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="main-div">
<div class="main-inner-div">
<div class="main-content">
<table>
<tr>
<td style="text-align:center;">
<b>
<asp:Label ID="lbstatus" runat="server"></asp:Label>
</b>
</td>
</tr>
<tr>
<td style="text-align:center;"><b>Start You online Asp.Net Test</b></td>
</tr>
<tr>
<td style="text-align: center;">
<asp:Button ID="btnStartTest" Text="Start Test" runat="server" OnClientClick="return StartTest('default2.aspx');" CssClass="btn" />
</td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>

Default.aspx.cs

code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default: System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["timeout"] != null)
{
lbstatus.Text = "You test time expired, please try again!";
}
}
}

Now create a new page for the test question, default2.aspx,

code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
</head>
<body oncontextmenu="return false" style=" background: #cccca0;">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManger" runat="server"></asp:ScriptManager>
<div style="background: #ddffca;margin:0 auto; width:1000px;">
<asp:UpdatePanel ID="updPanel" runat="server" UpdateMode="Always">
<ContentTemplate>
<table style="width: 100%;">
<tr>
<td>
<table style="width: 100%;">
<tr>
<td style="float: left;"><b><span id="timerText"></span><span id="spnthankyou"></span></b></td>
<td style="float: right; background-color: yellow; color: black;"><b><span id="lbresult"></span></b></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<asp:GridView ID="grdquestions" runat="server" AutoGenerateColumns="false" OnRowDataBound="grdquestions_RowDataBound" DataKeyNames="QuestionId" Width="100%">
<Columns>
<asp:TemplateField HeaderText="Asp .Net Online Test">
<ItemTemplate>
<table class="tableclass" id='<%#Eval("QuestionId") %>'>
<tr>
<td><b>Question <%#Eval("QuestionId") %> -: <%#Eval("Question") %></b>
<asp:HiddenField ID="hdnquestionId" runat="server" />
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<table class="tblOptions">
<tr>
<td>
<asp:RadioButton ID="rdOption1" runat="server" Text='<%#Eval("Option1") %>' GroupName='<%#Eval("QuestionId") %>' />
</td>
</tr>
<tr>
<td>
<asp:RadioButton ID="rdOption2" runat="server" Text='<%#Eval("Option2") %>' GroupName='<%#Eval("QuestionId") %>' />
</td>
</tr>
<tr>
<td>
<asp:RadioButton ID="rdOption3" runat="server" Text='<%#Eval("Option3") %>' GroupName='<%#Eval("QuestionId") %>' />
</td>
</tr>
<tr>
<td>
<asp:RadioButton ID="rdOption4" runat="server" Text='<%#Eval("Option4") %>' GroupName='<%#Eval("QuestionId") %>' />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lbquestionstatus" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="correctAnswer">Correct Answer Is -:
<asp:Label ID="lbAnswer" runat="server" Text='<%#Eval("QuestionAnswer") %>'></asp:Label>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="btn" OnClientClick="return CheckIfAllQuestionAnswerHasBeenSubmitted()" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<script>
//Set the number of minutes you need
var mins = 2;
var secs = mins * 60;
var currentSeconds = 0;
var currentMinutes = 0;
var ourtimer;
function StartCountDown() {
ourtimer = setTimeout(Decrement, 1000);
}
function EndCountDown() {
clearTimeout(ourtimer);
}
$(document).ready(function() {
StartCountDown();
}); //start the countdown
function Decrement() {
currentMinutes = Math.floor(secs / 60);
currentSeconds = secs % 60;
if (currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
secs--;
document.getElementById("timerText").innerHTML = "Time Remaining " + currentMinutes + ":" + currentSeconds;
if (secs !== -1) {
setTimeout('Decrement()', 1000);
} else {
window.location.href = "default.aspx?timeout=1"
}
}
function CheckIfAllQuestionAnswerHasBeenSubmitted() {
var numItems = $('.tblOptions').length;
var flagtocheckcount = 0;
$(".tblOptions").each(function() {
var groupname = $('input[type=radio]:first', this).attr('name');
if (!$("input[name='" + groupname + "']:checked").val()) {
$(this).parents(".tableclass").addClass("border");
var tableid = $(this).closest('table [class^="tableclass"]').attr("id");
} else {
flagtocheckcountflagtocheckcount = flagtocheckcount + 1;
}
})
if (parseInt(flagtocheckcount) == parseInt(numItems)) {
var CountFinalResult = 0;
$(".tblOptions").each(function() {
var groupname = $('input[type=radio]:first', this).attr('name');
var radioId = $("input[name='" + groupname + "']:checked").attr("id")
var UserSelectedAnswer = $("label[for='" + radioId + "']").text();
var CorrectAnswer = $('span:last-child', this).text();
var CorrectAnswerSpanId = $('span:last-child', this).attr("id");
var QuestionStatus = $("span:nth-last-child(1)", this).attr("id");
if (CorrectAnswer == UserSelectedAnswer) {
$("#" + QuestionStatus).text("Correct Answer").css("color", "green");
$('td.correctAnswer').find("td.correctAnswer", this).css("display", "none");
CountFinalResultCountFinalResult = CountFinalResult + 1;
} else {
//$('table.tblOptions tbody tr td:last-child').addClass("incorrect");
$('span:last-child', this).css({
'display': 'inline-flex'
});
$("#" + QuestionStatus).text("InCorrect Answer").css({
'color': 'Red'
});
$('td.correctAnswer', this).css({
"display": "block",
"background-color": "yellow",
"color": "red"
});
}
});
$("#lbresult").text("Final Result-:" + CountFinalResult + "/7");
$("#btnSubmit").attr("disabled", "disabled"); //disable button if all questions answer has been given
$("#btnSubmit").removeClass("btn");
$("#btnSubmit").addClass("btndiabled");
EndCountDown();
$("#timerText").css("display", "none");
$("#spnthankyou").append("Thank You for submitting your test.")
$("input[type=radio]").attr('disabled', true); //disable all radio button after test submitted by user
return false;
} else {
return false;
}
}
var CountCheckCheckQuestion = 0; //following function will work on every radio button click
var TotalQuestions = 0;
$("input[type=radio]").click(function() {
var groupname = $(this).attr("name");
$(this).parents(".tableclass").removeClass("border");
CheckTheCountOfQuestionHasBeenAnswered(); //this function to check if all the answer given while selecting radio button you don't need..
// to click on submit button
if (parseInt(CountCheckCheckQuestion) == parseInt(TotalQuestions)) {
CheckIfAllQuestionAnswerHasBeenSubmitted();
}
});
function CheckTheCountOfQuestionHasBeenAnswered() {
TotalQuestions = $('.tblOptions').length;
var TotalGivenAnswerCount = 0;
var flagtocheckcount = 0;
$(".tblOptions").each(function() {
var groupname = $('input[type=radio]:first', this).attr('name');
if (!$("input[name='" + groupname + "']:checked").val()) {} else {
TotalGivenAnswerCountTotalGivenAnswerCount = TotalGivenAnswerCount + 1;
}
})
CountCheckCheckQuestion = TotalGivenAnswerCount;
}
</script>
<style>
.border {
border-color: red;
border-width: 2px;
border-style: solid;
width: 100%;
}
.correctAnswer {
display: none;
width: 950px!important;
}
.tblOptions {
width: 100%;
}
.btn {
background: #000000;
background-image: -webkit-linear-gradient(top, #000000, #2980b9);
background-image: -moz-linear-gradient(top, #000000, #2980b9);
background-image: -o-linear-gradient(top, #000000, #2980b9);
background-image: linear-gradient(to bottom, #000000, #2980b9);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 6px;
font-family: Arial;
color: #ffffff;
font-size: 19px;
padding: 3px 20px;
text-decoration: none;
}
.btn:hover {
background: #261c61;
background-image: -webkit-linear-gradient(top, #261c61, #3498db);
background-image: -moz-linear-gradient(top, #261c61, #3498db);
background-image: -o-linear-gradient(top, #261c61, #3498db);
background-image: linear-gradient(to bottom, #261c61, #3498db);
text-decoration: none;
cursor: pointer;
}
.btndiabled {
background: #bdb3bd;
background-image: -webkit-linear-gradient(top, #bdb3bd, #757575);
background-image: -moz-linear-gradient(top, #bdb3bd, #757575);
background-image: -o-linear-gradient(top, #bdb3bd, #757575);
background-image: linear-gradient(to bottom, #bdb3bd, #757575);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 6px;
font-family: Arial;
color: #ffffff;
font-size: 19px;
padding: 3px 20px;
text-decoration: none;
cursor: none;
}
</style>
</div>
</form>
</body>
</html>

Default2.aspx.cs

code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
public partial class Default2: System.Web.UI.Page
{
DataTable dt = new DataTable();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGrid();
}
}
public void BindGrid()
{
SqlDataAdapter adp = new SqlDataAdapter("select * from tblQuestions", ConfigurationManager.ConnectionStrings["con"].ToString());
adp.Fill(dt);
grdquestions.DataSource = dt;
grdquestions.DataBind();
}
protected void grdquestions_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
RadioButtonList rdlstOptions = (RadioButtonList) e.Row.FindControl("rdlstOptions");
HiddenField hdnquestionId = (HiddenField) e.Row.FindControl("hdnquestionId");
if (rdlstOptions != null && hdnquestionId != null)
{
DataRow[] result = dt.Select("questionid=" + (Convert.ToInt32(hdnquestionId.Value)));
DataView view = new DataView();
view.Table = dt;
view.RowFilter = "questionid=" + (Convert.ToInt32(hdnquestionId.Value));
if (view.Table.Rows.Count > 0)
{
DataTable dt1 = new DataTable();
dt1 = view.ToTable();
}
}
}
}
}

Don't forget to create connection string in the web.config with the name con.

Now the application is ready to run, and it will work and look like the the images I am sharing below,

output

Click on Start Test button, it will open a new window,

output

Here we used all jquery for validation and whatever we have on this page,

output

And at last the final result when you will complete the test,

output

I have used Jquery concepts for most of it.