Lab 11: Create a survey

Step 0: Getting started

Download the lab11 folder, which contains a file named QuestionsAndAnswers.txt. Open it to examine its formatting. It contains quadrubles of lines: Question, followed by three answers, each one in its own line.

Step 1: Create your GUI layout in App Designer

Open App Designer and create the visual layout for your GUI in the Design View, with these GUI components:

Notice:

• The Text Area towards the top of the figure. Let's call it MessageArea. It will be used to present different messages to the user, depending on the state of the survey.
• The initial screen presents an (almost) empty question, and three "place holders" for the possible answers.
• There are four buttons on the figure, but only two of them are "Enabled". The "Submit Answer" and "Show Results" buttons are starting out as "Disabled", as there is no point clicking on them at this stage.

When saving your App for the first time, be sure to save it in your lab11 folder.

Step 2: Create new properties to store survey information

We will need the following properties in our implementation:

• questionsAndAnswers: A cell array to contain all the questions and their possible answers. It will later be populated by reading that information from the provided .txt file. Initialize it to an empty cell array ({}).
• userAnswers: A vector to hold the number of the user's selection (1, 2, or 3) to each question. Initialize it to an empty vector ([]).
• currentQNum: The number of the current question. Initialize it to zero.
• numOfQs: The number of all the survey questions included in the provided .txt file. Initialize it to zero.
• The following two cell arrays, just for fun:
  1. teaResults = {'You like tea in a fine English tradition!' 'The finest way to drink tea!' 'Your tea is a true American beverage!'};
  2. eggResults = {'An omelette is a fine French treat!' 'Creamed eggs are an American original!' 'Egg drop soup for a wonderful Chinese meal!'};

Step 3: Create a startupFcn callback function

An App has a startup function that you can define, which is executed automatically when the App starts up. For this program, you'll create a startup function to read the contents of your text file into the property you just created (questionsAndAnswers) to store this information. To do this, follow these steps:

• select app.UIFigure in the Component Browser (or click on the background canvas)
• under the Callbacks tab, select the <add StartupFcn callback> option from the drop-down menu labeled StartupFcn. A skeleton for a function named startupFcn will appear in the Code View
• add code that uses fopen, textscan and fclose to read the content of your text file into the property you created in the previous Step. For textscan, use a format string that is a single '%s' and set the Delimiter property to '\n' so that each line is read as a separate string
• the textscan function will return a cell array of strings nested inside another cell array, which you can assign directly to the property, e.g. app.questionsAndAnswers = textscan( ... ). Reassign the property to the inner cell array, e.g. app.questionsAndAnswers = app.questionsAndAnswers{1}

Step 4: Create a callback function for the "Quit button"

As you've done in previous Apps, add a callback function that terminates the program when you push the quit button.

Step 5A: Add a callback function to the "Start Button"

In this function, add code to do the following:

1. Present the first question on the GUI, together with its three possible answers.
2. Set the currentQNum property to 1, as we are now dealing with the first question.
3. Enable the "Submit Answers" button, so it becomes clickable.
4. Hide (i.e make it disappear!) the "Start" button.
5. Update the message in the "Message Area", to instruct the user to choose their answer for the presented question, and then click on the "Submit" button.

Step 5B: Add a callback function to the "Submit Button"

In this function, add code to do the following:

1. Read which of the three radio buttons is clicked by the user.
2. Record that choice in the userAnswers property: just add it at the end of the userAnswers vector.
3. Present the next Question on the GUI, together with its three possible answers for the user to choose from. Hint: the currentQNumber can be used to determine the index of those strings in the questionsAndAnswers cell array.
4. Increament the currentQNumber, as we are now dealing with the next question.

However, the steps 3 and 4 above should only be performed, if there are still questions to be asked in the survey! When all available questions are exhausted, you should:

• Disable the "Submit" Button
• Update the message in the "Message Area", to instruct the user on how to get their results
• Enable the "Show Results" Button

Step 5C: Add a callback function to the "Show Results Button"

Show in the "Message Area" the user's answers to the questions. First, just show the number of their choice, for each question, like 2 and 3, if they chose they clicked on the second radio button for the first question, and the third radio button for the second question. If you want to be funcy, choose the corresponding string from the provided teaResults and eggResults cell arrays, and show them.

Sampe screen snapshots

The following snapshots show one progression through the demonstration program: