Online Test Application Using ASP.NET

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

database

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

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.     <!DOCTYPE html>  
  3.     <html xmlns="http://www.w3.org/1999/xhtml">  
  4.   
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>  
  8.         <style>  
  9.             body {  
  10.                 margin: auto;  
  11.             }  
  12.               
  13.             .main-div {  
  14.                 position: absolute;  
  15.                 display: table;  
  16.                 width: 100%;  
  17.                 height: 100%;  
  18.                 background: #cccca0;  
  19.             }  
  20.               
  21.             .main-inner-div {  
  22.                 display: table-cell;  
  23.                 vertical-align: middle;  
  24.                 text-align: center;  
  25.             }  
  26.               
  27.             .main-content {  
  28.                 display: inline-block;  
  29.                 text-align: left;  
  30.                 background: #ddffca;  
  31.                 padding: 200px;  
  32.                 border: 1px solid #000;  
  33.                 border-radius: 10px;  
  34.             }  
  35.               
  36.             .btn {  
  37.                 background: #000000;  
  38.                 background-image: -webkit-linear-gradient(top, #000000, #2980b9);  
  39.                 background-image: -moz-linear-gradient(top, #000000, #2980b9);  
  40.                 background-image: -o-linear-gradient(top, #000000, #2980b9);  
  41.                 background-image: linear-gradient(to bottom, #000000, #2980b9);  
  42.                 -webkit-border-radius: 0;  
  43.                 -moz-border-radius: 0;  
  44.                 border-radius: 6px;  
  45.                 font-family: Arial;  
  46.                 color: #ffffff;  
  47.                 font-size: 19px;  
  48.                 padding: 3px 20px;  
  49.                 text-decoration: none;  
  50.             }  
  51.               
  52.             .btn:hover {  
  53.                 background: #261c61;  
  54.                 background-image: -webkit-linear-gradient(top, #261c61, #3498db);  
  55.                 background-image: -moz-linear-gradient(top, #261c61, #3498db);  
  56.                 background-image: -o-linear-gradient(top, #261c61, #3498db);  
  57.                 background-image: linear-gradient(to bottom, #261c61, #3498db);  
  58.                 text-decoration: none;  
  59.                 cursor: pointer;  
  60.             }  
  61.         </style>  
  62.         <script>  
  63.             function StartTest(popUpPage) {  
  64.                 window.open(popUpPage, 'null', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,fullscreen=yes');  
  65.             }  
  66.         </script>  
  67.     </head>  
  68.   
  69.     <body>  
  70.         <form id="form1" runat="server">  
  71.             <div class="main-div">  
  72.                 <div class="main-inner-div">  
  73.                     <div class="main-content">  
  74.                         <table>  
  75.                             <tr>  
  76.                                 <td style="text-align:center;">  
  77.                                     <b>  
  78. <asp:Label ID="lbstatus" runat="server"></asp:Label>  
  79. </b>  
  80.                                 </td>  
  81.                             </tr>  
  82.                             <tr>  
  83.                                 <td style="text-align:center;"><b>Start You online Asp.Net Test</b></td>  
  84.                             </tr>  
  85.                             <tr>  
  86.                                 <td style="text-align: center;">  
  87.                                     <asp:Button ID="btnStartTest" Text="Start Test" runat="server" OnClientClick="return StartTest('default2.aspx');" CssClass="btn" />  
  88.                                 </td>  
  89.                             </tr>  
  90.                         </table>  
  91.                     </div>  
  92.                 </div>  
  93.             </div>  
  94.         </form>  
  95.     </body>  
  96.   
  97.     </html>  
Default.aspx.cs

code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. public partial class _Default: System.Web.UI.Page   
  8. {  
  9.     protected void Page_Load(object sender, EventArgs e)   
  10.     {  
  11.         if (Request.QueryString["timeout"] != null)   
  12.         {  
  13.             lbstatus.Text = "You test time expired, please try again!";  
  14.         }  
  15.     }  
  16. }
Now create a new page for the test question, default2.aspx,

code
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>  
  2.     <!DOCTYPE html>  
  3.     <html xmlns="http://www.w3.org/1999/xhtml">  
  4.   
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>  
  8.     </head>  
  9.   
  10.     <body oncontextmenu="return false" style=" background: #cccca0;">  
  11.         <form id="form1" runat="server">  
  12.             <asp:ScriptManager ID="ScriptManger" runat="server"></asp:ScriptManager>  
  13.             <div style="background: #ddffca;margin:0 auto; width:1000px;">  
  14.                 <asp:UpdatePanel ID="updPanel" runat="server" UpdateMode="Always">  
  15.                     <ContentTemplate>  
  16.                         <table style="width: 100%;">  
  17.                             <tr>  
  18.                                 <td>  
  19.                                     <table style="width: 100%;">  
  20.                                         <tr>  
  21.                                             <td style="float: left;"><b><span id="timerText"></span><span id="spnthankyou"></span></b></td>  
  22.                                             <td style="float: right; background-color: yellow; color: black;"><b><span id="lbresult"></span></b></td>  
  23.                                         </tr>  
  24.                                     </table>  
  25.                                 </td>  
  26.                             </tr>  
  27.                             <tr>  
  28.                                 <td>  
  29.                                     <asp:GridView ID="grdquestions" runat="server" AutoGenerateColumns="false" OnRowDataBound="grdquestions_RowDataBound" DataKeyNames="QuestionId" Width="100%">  
  30.                                         <Columns>  
  31.                                             <asp:TemplateField HeaderText="Asp .Net Online Test">  
  32.                                                 <ItemTemplate>  
  33.                                                     <table class="tableclass" id='<%#Eval("QuestionId") %>'>  
  34.                                                         <tr>  
  35.                                                             <td><b>Question <%#Eval("QuestionId") %> -: <%#Eval("Question") %></b>  
  36.                                                                 <asp:HiddenField ID="hdnquestionId" runat="server" />  
  37.                                                             </td>  
  38.                                                         </tr>  
  39.                                                         <tr>  
  40.                                                             <td>  
  41.                                                                 <table>  
  42.                                                                     <tr>  
  43.                                                                         <td>  
  44.                                                                             <table class="tblOptions">  
  45.                                                                                 <tr>  
  46.                                                                                     <td>  
  47.                                                                                         <asp:RadioButton ID="rdOption1" runat="server" Text='<%#Eval("Option1") %>' GroupName='<%#Eval("QuestionId") %>' />  
  48.                                                                                     </td>  
  49.                                                                                 </tr>  
  50.                                                                                 <tr>  
  51.                                                                                     <td>  
  52.                                                                                         <asp:RadioButton ID="rdOption2" runat="server" Text='<%#Eval("Option2") %>' GroupName='<%#Eval("QuestionId") %>' />  
  53.                                                                                     </td>  
  54.                                                                                 </tr>  
  55.                                                                                 <tr>  
  56.                                                                                     <td>  
  57.                                                                                         <asp:RadioButton ID="rdOption3" runat="server" Text='<%#Eval("Option3") %>' GroupName='<%#Eval("QuestionId") %>' />  
  58.                                                                                     </td>  
  59.                                                                                 </tr>  
  60.                                                                                 <tr>  
  61.                                                                                     <td>  
  62.                                                                                         <asp:RadioButton ID="rdOption4" runat="server" Text='<%#Eval("Option4") %>' GroupName='<%#Eval("QuestionId") %>' />  
  63.                                                                                     </td>  
  64.                                                                                 </tr>  
  65.                                                                                 <tr>  
  66.                                                                                     <td>  
  67.                                                                                         <asp:Label ID="lbquestionstatus" runat="server"></asp:Label>  
  68.                                                                                     </td>  
  69.                                                                                 </tr>  
  70.                                                                                 <tr>  
  71.                                                                                     <td class="correctAnswer">Correct Answer Is -:  
  72.                                                                                         <asp:Label ID="lbAnswer" runat="server" Text='<%#Eval("QuestionAnswer") %>'></asp:Label>  
  73.                                                                                     </td>  
  74.                                                                                 </tr>  
  75.                                                                             </table>  
  76.                                                                         </td>  
  77.                                                                     </tr>  
  78.                                                                 </table>  
  79.                                                             </td>  
  80.                                                         </tr>  
  81.                                                     </table>  
  82.                                                 </ItemTemplate>  
  83.                                             </asp:TemplateField>  
  84.                                         </Columns>  
  85.                                     </asp:GridView>  
  86.                                 </td>  
  87.                             </tr>  
  88.                             <tr>  
  89.                                 <td>  
  90.                                     <asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="btn" OnClientClick="return CheckIfAllQuestionAnswerHasBeenSubmitted()" />  
  91.                                 </td>  
  92.                             </tr>  
  93.                         </table>  
  94.                     </ContentTemplate>  
  95.                 </asp:UpdatePanel>  
  96.                 <script>  
  97.                     //Set the number of minutes you need  
  98.                     var mins = 2;  
  99.                     var secs = mins * 60;  
  100.                     var currentSeconds = 0;  
  101.                     var currentMinutes = 0;  
  102.                     var ourtimer;  
  103.   
  104.                     function StartCountDown() {  
  105.                         ourtimer = setTimeout(Decrement, 1000);  
  106.                     }  
  107.   
  108.                     function EndCountDown() {  
  109.                         clearTimeout(ourtimer);  
  110.                     }  
  111.                     $(document).ready(function() {  
  112.                         StartCountDown();  
  113.                     }); //start the countdown  
  114.                     function Decrement() {  
  115.                         currentMinutes = Math.floor(secs / 60);  
  116.                         currentSeconds = secs % 60;  
  117.                         if (currentSeconds <= 9) currentSeconds = "0" + currentSeconds;  
  118.                         secs--;  
  119.                         document.getElementById("timerText").innerHTML = "Time Remaining " + currentMinutes + ":" + currentSeconds;  
  120.                         if (secs !== -1) {  
  121.                             setTimeout('Decrement()', 1000);  
  122.                         } else {  
  123.                             window.location.href = "default.aspx?timeout=1"  
  124.                         }  
  125.                     }  
  126.   
  127.                     function CheckIfAllQuestionAnswerHasBeenSubmitted() {  
  128.                         var numItems = $('.tblOptions').length;  
  129.                         var flagtocheckcount = 0;  
  130.                         $(".tblOptions").each(function() {  
  131.                             var groupname = $('input[type=radio]:first', this).attr('name');  
  132.                             if (!$("input[name='" + groupname + "']:checked").val()) {  
  133.                                 $(this).parents(".tableclass").addClass("border");  
  134.                                 var tableid = $(this).closest('table [class^="tableclass"]').attr("id");  
  135.                             } else {  
  136.                                 flagtocheckcountflagtocheckcount = flagtocheckcount + 1;  
  137.                             }  
  138.                         })  
  139.                         if (parseInt(flagtocheckcount) == parseInt(numItems)) {  
  140.                             var CountFinalResult = 0;  
  141.                             $(".tblOptions").each(function() {  
  142.                                 var groupname = $('input[type=radio]:first', this).attr('name');  
  143.                                 var radioId = $("input[name='" + groupname + "']:checked").attr("id")  
  144.                                 var UserSelectedAnswer = $("label[for='" + radioId + "']").text();  
  145.                                 var CorrectAnswer = $('span:last-child', this).text();  
  146.                                 var CorrectAnswerSpanId = $('span:last-child', this).attr("id");  
  147.                                 var QuestionStatus = $("span:nth-last-child(1)", this).attr("id");  
  148.                                 if (CorrectAnswer == UserSelectedAnswer) {  
  149.                                     $("#" + QuestionStatus).text("Correct Answer").css("color", "green");  
  150.                                     $('td.correctAnswer').find("td.correctAnswer", this).css("display", "none");  
  151.                                     CountFinalResultCountFinalResult = CountFinalResult + 1;  
  152.                                 } else {  
  153.                                     //$('table.tblOptions tbody tr td:last-child').addClass("incorrect");  
  154.                                     $('span:last-child', this).css({  
  155.                                         'display': 'inline-flex'  
  156.                                     });  
  157.                                     $("#" + QuestionStatus).text("InCorrect Answer").css({  
  158.                                         'color': 'Red'  
  159.                                     });  
  160.                                     $('td.correctAnswer', this).css({  
  161.                                         "display": "block",  
  162.                                         "background-color": "yellow",  
  163.                                         "color": "red"  
  164.                                     });  
  165.                                 }  
  166.                             });  
  167.                             $("#lbresult").text("Final Result-:" + CountFinalResult + "/7");  
  168.                             $("#btnSubmit").attr("disabled", "disabled"); //disable button if all questions answer has been given  
  169.                             $("#btnSubmit").removeClass("btn");  
  170.                             $("#btnSubmit").addClass("btndiabled");  
  171.                             EndCountDown();  
  172.                             $("#timerText").css("display", "none");  
  173.                             $("#spnthankyou").append("Thank You for submitting your test.")  
  174.                             $("input[type=radio]").attr('disabled', true); //disable all radio button after test submitted by user  
  175.                             return false;  
  176.                         } else {  
  177.                             return false;  
  178.                         }  
  179.                     }  
  180.                     var CountCheckCheckQuestion = 0; //following function will work on every radio button click  
  181.                     var TotalQuestions = 0;  
  182.                     $("input[type=radio]").click(function() {  
  183.                         var groupname = $(this).attr("name");  
  184.                         $(this).parents(".tableclass").removeClass("border");  
  185.                         CheckTheCountOfQuestionHasBeenAnswered(); //this function to check if all the answer given while selecting radio button you don't need..  
  186.                         // to click on submit button  
  187.                         if (parseInt(CountCheckCheckQuestion) == parseInt(TotalQuestions)) {  
  188.                             CheckIfAllQuestionAnswerHasBeenSubmitted();  
  189.                         }  
  190.                     });  
  191.   
  192.                     function CheckTheCountOfQuestionHasBeenAnswered() {  
  193.                         TotalQuestions = $('.tblOptions').length;  
  194.                         var TotalGivenAnswerCount = 0;  
  195.                         var flagtocheckcount = 0;  
  196.                         $(".tblOptions").each(function() {  
  197.                             var groupname = $('input[type=radio]:first', this).attr('name');  
  198.                             if (!$("input[name='" + groupname + "']:checked").val()) {} else {  
  199.                                 TotalGivenAnswerCountTotalGivenAnswerCount = TotalGivenAnswerCount + 1;  
  200.                             }  
  201.                         })  
  202.                         CountCheckCheckQuestion = TotalGivenAnswerCount;  
  203.                     }  
  204.                 </script>  
  205.                 <style>  
  206.                     .border {  
  207.                         border-color: red;  
  208.                         border-width: 2px;  
  209.                         border-style: solid;  
  210.                         width: 100%;  
  211.                     }  
  212.                       
  213.                     .correctAnswer {  
  214.                         display: none;  
  215.                         width: 950px!important;  
  216.                     }  
  217.                       
  218.                     .tblOptions {  
  219.                         width: 100%;  
  220.                     }  
  221.                       
  222.                     .btn {  
  223.                         background: #000000;  
  224.                         background-image: -webkit-linear-gradient(top, #000000, #2980b9);  
  225.                         background-image: -moz-linear-gradient(top, #000000, #2980b9);  
  226.                         background-image: -o-linear-gradient(top, #000000, #2980b9);  
  227.                         background-image: linear-gradient(to bottom, #000000, #2980b9);  
  228.                         -webkit-border-radius: 0;  
  229.                         -moz-border-radius: 0;  
  230.                         border-radius: 6px;  
  231.                         font-family: Arial;  
  232.                         color: #ffffff;  
  233.                         font-size: 19px;  
  234.                         padding: 3px 20px;  
  235.                         text-decoration: none;  
  236.                     }  
  237.                       
  238.                     .btn:hover {  
  239.                         background: #261c61;  
  240.                         background-image: -webkit-linear-gradient(top, #261c61, #3498db);  
  241.                         background-image: -moz-linear-gradient(top, #261c61, #3498db);  
  242.                         background-image: -o-linear-gradient(top, #261c61, #3498db);  
  243.                         background-image: linear-gradient(to bottom, #261c61, #3498db);  
  244.                         text-decoration: none;  
  245.                         cursor: pointer;  
  246.                     }  
  247.                       
  248.                     .btndiabled {  
  249.                         background: #bdb3bd;  
  250.                         background-image: -webkit-linear-gradient(top, #bdb3bd, #757575);  
  251.                         background-image: -moz-linear-gradient(top, #bdb3bd, #757575);  
  252.                         background-image: -o-linear-gradient(top, #bdb3bd, #757575);  
  253.                         background-image: linear-gradient(to bottom, #bdb3bd, #757575);  
  254.                         -webkit-border-radius: 0;  
  255.                         -moz-border-radius: 0;  
  256.                         border-radius: 6px;  
  257.                         font-family: Arial;  
  258.                         color: #ffffff;  
  259.                         font-size: 19px;  
  260.                         padding: 3px 20px;  
  261.                         text-decoration: none;  
  262.                         cursor: none;  
  263.                     }  
  264.                 </style>  
  265.             </div>  
  266.         </form>  
  267.     </body>  
  268.   
  269.     </html>
Default2.aspx.cs

code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Configuration;  
  8. using System.Data;  
  9. using System.Data.SqlClient;  
  10. public partial class Default2: System.Web.UI.Page  
  11. {  
  12.     DataTable dt = new DataTable();  
  13.     protected void Page_Load(object sender, EventArgs e)   
  14.     {  
  15.         if (!IsPostBack)   
  16.         {  
  17.             BindGrid();  
  18.         }  
  19.     }  
  20.     public void BindGrid()   
  21.     {  
  22.         SqlDataAdapter adp = new SqlDataAdapter("select * from tblQuestions", ConfigurationManager.ConnectionStrings["con"].ToString());  
  23.         adp.Fill(dt);  
  24.         grdquestions.DataSource = dt;  
  25.         grdquestions.DataBind();  
  26.     }  
  27.     protected void grdquestions_RowDataBound(object sender, GridViewRowEventArgs e)   
  28.     {  
  29.         if (e.Row.RowType == DataControlRowType.DataRow)   
  30.         {  
  31.             RadioButtonList rdlstOptions = (RadioButtonList) e.Row.FindControl("rdlstOptions");  
  32.             HiddenField hdnquestionId = (HiddenField) e.Row.FindControl("hdnquestionId");  
  33.             if (rdlstOptions != null && hdnquestionId != null)   
  34.             {  
  35.                 DataRow[] result = dt.Select("questionid=" + (Convert.ToInt32(hdnquestionId.Value)));  
  36.                 DataView view = new DataView();  
  37.                 view.Table = dt;  
  38.                 view.RowFilter = "questionid=" + (Convert.ToInt32(hdnquestionId.Value));  
  39.                 if (view.Table.Rows.Count > 0)   
  40.                 {  
  41.                     DataTable dt1 = new DataTable();  
  42.                     dt1 = view.ToTable();  
  43.                 }  
  44.             }  
  45.         }  
  46.     }  
  47. }
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.
Ebook Download
View all
Learn
View all