ARTICLE

Creating a Quiz Application in Expression Blend

Posted by Manoj Singh Panwar Articles | Expression Studio November 02, 2011
In this article you will learn how to create a quiz application in which on button click, the user will know instantly the right or wrong answer.
Reader Level:
Download Files:
 

Until now, you should be familiar with the application development in Blend. In this article, you will learn how to create a quiz application which also incorporates in it rich content buttons and radio buttons. I hope it will be useful for you for learning how to work cleanly with Expression Blend.

So here we start creating the application.

Step 1 : Start Expression Blend and select the WPF application. Name the project and get started with the project.

start.gif

Step 2 : Now add a label named "ques" for the question; for this select the label control and right-click go to Edit Text and type the question also to name the label go to the property window and at the top type the name of the label (here it is named "ques") in fornt of <name>.

add-label.gif

Step 3 : After adding the radio buttons you can select all the radio buttons and right-click on them then group into --> stackpanel, this arranges the radio buttons nicely.
arranging-radio-btns.gif

Step 4 : Now add two labels; name them "msg1" and "msg2". Then right-click on msg1 and go to edit text and type "Sorry!! But its not the right answer. Try again" similarly edit text of msg2 by "Congrats!! Its the right answer.". After this go to the Appearance property of msg1 and set the visibility = hidden. Do the same for msg2 also. This is done so that when the user selects wong answer the respective label pops up and other remains hidden.

label.gif

Step 5 : Now the next step is to add a button to check the answer; name it "submit".

button.gif

Step 6 : After this the main job is to add functionality to the button so that when the user clicks the radio button and presses the submit button then the application will tell you whether it is correct or incorrect. For this go to project window, right-click on the "Solution...." tab and select Edit in Visual Studio. This is shown in the figure below:

project.gif

Step 7 :  Now the project opens up in Visual Studio; then open the Solution Explorer. The window appears in Visual Studio as shown in the following figure. Here select the "###.cs" file and double-click it.

editing-in-vs.gif

Step 8 : This opens the code as shown in the figure below, but it is not sufficient; we need to modify this code to bring the desired output.

code-start.gif

Step 9 : Here we add functionality; to do that double-click on the button by going into the "##.Xaml". This creats a button_click method. In this method (here the submit_Click method) add the following code.

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace
Quizing
{
       /// <summary>
       /// Interaction logic for MainWindow.xaml
       /// </summary>
       public partial class MainWindow : Window
       {
              public MainWindow()
              {
                     this.InitializeComponent();
 
                     // Insert code required on object creation below this point.
              }
        private void rb3_Checked(object sender, RoutedEventArgs e)
        {
          
        }
        private void submit_Click(object sender, RoutedEventArgs e)
        {
            if (rb3.IsChecked == true)
            {
               msg2.Visibility =System.Windows.Visibility.Visible ;
               msg1.Visibility = System.Windows.Visibility.Hidden;
 
            }
            else
            if (rb1.IsChecked == true)
            {
                msg1.Visibility = System.Windows.Visibility.Visible;
                msg2.Visibility = System.Windows.Visibility.Hidden;
            }
            else
            if (rb2.IsChecked == true)
            {
                msg1.Visibility = System.Windows.Visibility.Visible;
                msg2.Visibility = System.Windows.Visibility.Hidden;
            }
            else
            if (rb3.IsChecked == true)
            {
                msg1.Visibility = System.Windows.Visibility.Visible;
                msg2.Visibility = System.Windows.Visibility.Hidden;
            }
            else
            if (rb4.IsChecked == true)
            {
                msg1.Visibility = System.Windows.Visibility.Visible;
                msg2.Visibility = System.Windows.Visibility.Hidden;
            }
        }
    }
}

Step 10 :
Now test the application by pressing F5. The output of the application is as follows:

On clicking wrong answer and submitting it:

output.gif

On clicking the correct answer:

output1.gif

In this application I have added just one question and answer but you can add many questions but for this you'll have to add the same number of labels, radio buttons, and buttons and add functionality to every button.

COMMENT USING

Trending up