How to Create Quiz Web Application in ASP.NET using SQL Server Database and Visual Studio? [With Source Code]

Hello Guyz, In this tutorial we are gonna learn about how you can create quiz application using ASP.NET.

Before getting into the topic, let’s understand what is the basic concept, how this is programmatically possible and so on. In general quiz application, user select their answer and click send button to submit their answer to the server (in case of online) or to local database (in case of offline) and then they check their answer by click other button. So, we need to understand programmatically what happen when the user select their answer and click on submit button and what is the operation behind when user click on the check button. Being the programmer you have to imagine what logic in our program can accomplished such operation using ASP.NET.

So, our basic concept is when the user select their answer, their answer need to be inserted into the database and return some value when user click the another button for checking answer. So, for this we are going to create one database in our SQL Server Database Application provided by Microsoft if you don’t have this software download from here and install it. And inside that database we are going to create three table. you can give them any name but for our convenient we give the name of these three table as submittedanswer, answer and compare.

And inside each table we are going to create two column i.e. ID is common in all there table and second column name is: sa in submittedanswer table, ans in answer table and value in compare table. We should store correct answer in answer table by ourself.  So when the user click their answer and click submit button, their answer will store in submittedanswer table and at the same time that submitted answer will compare with the previously stored correct answer which is store in answer table and should store either correct or incorrect value in the third table i.e. in compare table. And when the user click the Check Button the compare table value should be display in the message box. So, This is our Basic concept to do this project. So let’s do it.

Steps:

You can see all the below procedure in the following Video:

[sociallocker]

1. To create a database and table in SQL Server Database, open SQL Server application, and Right click over Database and then click new, give the database name whatever you want and click OK. After then expand that Database directory which you can see in the left pane of the SQL Server Studio Software and expand that Database directory and then expand your recently created Database. And then you will see Table directory. Right click that Table Directory click on Table and click OK. You will see the new window which looks like this:

ASP.NET Quiz Application

and then give the column name as i mention earlier for answer table; set the ID data type as int and ans data type as varchar and then right click in that ID column and then click on set primary key. Scroll down below this window and set the identity specification to yes.

ASP.NET Quiz Application

Repeat same process for all three table. And then Right click the answer Table and then select Edit top 200 Rows click OK and then write the correct answer in the ans column and don’t write anything in ID because it is primary key and it will be automatically updated by the system and click close button; this will save the correct answer in answer table.

2. Open Visual Studio and then go to file>new>project. Select Visual C#>Web>ASP.NET Web Application. Give the project name and click OK. Then new window will popup asking you to choose the Templates and select empty and then click OK. Now, right click over your project from solution explorer and then click add>web form, click OK.

3. Now write the following code inside the body tag of the aspx page to design the UI.

<form id="form1" runat="server">
<div>
<table align="center">
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="What is the Height of Mt. Everest?"></asp:Label></td>
</tr>
<tr>
<td>
<asp:RadioButton GroupName="quiz" ID="RadioButton1" runat="server" Text="8848" OnCheckedChanged="RadioButton1_CheckedChanged"/><br />
<asp:RadioButton GroupName="quiz" ID="RadioButton2" runat="server" Text="9848" OnCheckedChanged="RadioButton2_CheckedChanged"/><br />
<asp:RadioButton GroupName="quiz" ID="RadioButton3" runat="server" Text="10848" OnCheckedChanged="RadioButton3_CheckedChanged"/><br />
<asp:RadioButton GroupName="quiz" ID="RadioButton4" runat="server" Text="11848" OnCheckedChanged="RadioButton4_CheckedChanged"/><br />
</td>
</tr>
<tr>
<td>
<asp:Button ID="bntSumbit" runat="server" Text="Submit" OnClick="bntSumbit_Click" />
<asp:Button ID="btnCheck" runat="server" Text="Check" OnClick="btnCheck_Click" /></td>
</tr>
</table>

</div>
</form>

4. We need to connect our application to the database for this, click on the Server Explore which is in the right side of the Toolbox in the left pane of your visual studio. And then right click on the Data Connection>Add connection. New window will appear select your Data Source; in our Case Data Source is Microsoft SQL Server. To do this click on change and select Microsoft SQL Server, Click OK. And then New window will appear,. And then select your Server Name your Database Name and click OK.

4.Now change webform’s view  from source to design view. Then you will be able to see your designed form.

Now Double Click in that submit button and write the following code:

a.import the namespace at the top of the class.

using System.Data.SqlClient;
using System.Data;

b. Declare the variable inside the Class.

string submittedanswer;

c. Double Click each Radio Button and inside each Radio Button clicking event write the following code:

submittedanswer = "8848";

submittedanswer = "9848";

submittedanswer = "10848";

submittedanswer = "11848";

d. Finally write the logic of the program inside the Submit button clicking event by double clicking the Register Button of your web form.

SqlConnection con = new SqlConnection("Data Source = RAN-PC; Initial Catalog = QUIZT; Integrated Security = True");
SqlCommand insertQuery = new SqlCommand(@"INSERT INTO [dbo].[submittedanswer]
([sa])
VALUES
('" + submittedanswer + "')", con);
con.Open();
insertQuery.ExecuteNonQuery();
con.Close();
Response.Write("<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3Ealert('your%20answer%20is%20submitted%20successfully')%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />");

//the below sql query is to select only two column from two table and display the value only if the two column value match.
SqlCommand extractQuery = new SqlCommand("SELECT submittedanswer.sa, answer.ans FROM answer INNER JOIN (SELECT TOP 1 sa FROM submittedanswer order by ID DESC) AS submittedanswer ON submittedanswer.sa=answer.ans", con);
SqlDataAdapter sda = new SqlDataAdapter(extractQuery);
DataTable dt = new DataTable();
sda.Fill(dt);
if (dt.Rows.Count >0)
{
SqlCommand valueQuery= new SqlCommand(@"INSERT INTO [dbo].[compare]
([value])
VALUES
('correct')", con);
con.Open();
valueQuery.ExecuteNonQuery();
con.Close();
}
else
{
SqlCommand valueQuery= new SqlCommand(@"INSERT INTO[dbo].[compare]
([value])
VALUES
('incorrect')", con);
con.Open();
valueQuery.ExecuteNonQuery();
con.Close();
}

NOTE: Change this code in your context (because your connection string (Data Source=RAN-PC;Initial Catalog=quizapplication;Integrated Security=True) is different than mine)

5. Write the following code by double clicking the check button:

SqlConnection con = new SqlConnection("your connection string");
SqlCommand showQuery= new SqlCommand("SELECT TOP 1 value FROM compare ORDER BY ID DESC", con);
SqlDataAdapter sda = new SqlDataAdapter(showQuery);
DataTable dt = new DataTable();
sda.Fill(dt);
Response.Write("your answer is " + dt.Rows[0][0]);

6. Run your project by click the green triangular button in any browser, select any radio button and click submit and click check button to check your submitted answer.

[/sociallocker]

That’s it. And if you like this tutorial don’t forget to share this with your friends and write your perception about this article in your comment section. Thank you 🙂

Watch the video: