پیاده سازی آزمون آنلاین در Asp.net

دوشنبه 21 تیر 1395

در این مقاله یک آزمون آنلاین با استفاده از jQuery ایجاد میکنم که در این آزمون چند سوال و چند پاسخ ارائه میشود و در آخر نتایج را به ما نشان می دهد.

پیاده سازی آزمون آنلاین در Asp.net

یک بانک اطلاعاتی مانند تصویر زیر پیاده سازی کنید.

داده های زیر را در جدول قرار دهید .

حال یک وبسایت ایجاد کنید و یک صفحه ASP به آن اضافه کنید .

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default1.aspx.cs" Inherits="OnlineTest.DefualtOne" %>

<!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;
            direction: rtl;
        }

        .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>آزمون آنلاین </b></td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">
                                <asp:Button ID="btnStartTest" Text="شروع" runat="server" OnClientClick="return StartTest('default2.aspx');" CssClass="btn" />
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace OnlineTest
{
    public partial class DefualtOne : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (Request.QueryString["timeout"] != null)
            {
                lbstatus.Text = "با تشکر";
            }
        }
    }
}

یک صفحه دیگر به نام  default2.aspx ایجاد کنید .

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default2.aspx.cs" Inherits="OnlineTest.DefualtTow" %>

<!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;" dir="rtl">
    <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>

                        <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="آزمون آنلاین">
                                            <ItemTemplate>
                                                <table class="tableclass" id='<%#Eval("QuestionId") %>'>
                                                    <tr>
                                                        <td><b>سوال <%#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"> جواب  -:
                                                                                    <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="پایان" CssClass="btn" OnClientClick="return CheckIfAllQuestionAnswerHasBeenSubmitted()" />
                            </td>
                        </tr>
                    </>
                </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 {
                            flagtocheckcount = 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("صحیح ").css("color", "green");
                                $('td.correctAnswer').find("td.correctAnswer", this).css("display", "none");
                                CountFinalResult = CountFinalResult + 1;
                            }
                            else {
                                //$('table.tblOptions tbody tr td:last-child').addClass("incorrect");
                                $('span:last-child', this).css({ 'display': 'inline-flex' });
                                $("#" + QuestionStatus).text("اشتباه").css({ 'color': 'Red' });
                                $('td.correctAnswer', this).css({ "display": "block", "background-color": "yellow", "color": "red" });

                            }
                        });
                        $("#lbresult").text("نتایج نهایی-:" + CountFinalResult + "/2");
                        $("#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("با تشکر")
                        $("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 {
                            TotalGivenAnswerCount = 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

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.	}

فراموش نکنید باید یک connection string به پروژه استفاده کنید.

درحال حاضر برنامه قابل اجرا است خروجی برنامه را مشاهده کنید:

زمانی که بر روی شروع کلیک میکنید یک پنجره جدید باز شده و  آزمون شروع می شود.

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید