Creating a Quiz Application in Expression Blend

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.

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

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.

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.

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

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:

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.

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.

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:

On clicking the correct answer:

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.