9 min read

(For more resources related to this topic, see here.)

Creating a short-answer question

For this task, we will create a card to host an interface for a short-answer question. This type of question allows the user to input their answers via the keyboard. Evaluating this type of answer can be especially challenging, since there could be several correct answers and users are prone to make spelling mistakes.

Engage Thrusters

  1. Create a new card and name it SA.
  2. Copy the Title label from the Main card and paste it onto the new SA card. This will ensure the title label field has a consistent format and location.
  3. Copy the Question label from the TF card and paste it onto the new SA card.
  4. Copy the Progress label from the TF card and paste it onto the new SA card.
  5. Copy the Submit button from the Sequencing card and paste it onto the new SA card.
  6. Drag a text entry field onto the card and make the following modifications:
    1. Change the name to answer.
    2. Set the size to 362 by 46.
    3. Set the location to 237, 185.
    4. Change the text size to 14.
  7. We are now ready to program our interface. Enter the following code at the card level: 
    on preOpenCard
   global qNbr, qArray
   
   # Section 1
   put 1 into qNbr
   # Section 2
   put "" into fld "question"
   put "" into fld "answer"
   put "" into fld "progress"
   # Section 3
   put "What farm animal eats shrubs, can be eaten, and are smaller than
  cows?" into qArray["1"]["question"]
   put "goat" into qArray["1"]["answer"]
   --
   put "What is used in pencils for writing?" into qArray["2"]["question"]
   put "lead" into qArray["2"]["answer"]
   --
   put "What programming language are you learning" into qArray["3"]
  ["question"]
   put "livecode" into qArray["3"]["answer"]
end preOpenCard

    In section 1 of this code, we reset the question counter (qNbr) variable to 1.

    Section 2 contains the code to clear the question, answer, and progress fields.

    Section 3 populates the question/answer array (qArray). As you can see, this is the simplest array we have used. It only contains a question and answer pairing for each row.

  8. Our last step for the short answer question interface is to program the Submit button. Here is the code for that button: 
    on mouseUp
   global qNbr, qArray
   local tResult
   
   # Section 1
   if the text of fld "answer" contains qArray[qNbr]["answer"] then
      put "correct" into tResult
   else
      put "incorrect" into tResult
   end if
   
   #Section 2
   switch tResult
      case "correct"
         if qNbr < 3 then
            answer "Very Good." with "Next" titled "Correct"
         else
            answer "Very Good." with "Okay" titled "Correct"
         end if
         break
      case "incorrect"
         if qNbr < 3 then
            answer "The correct answer is: " & 
                  qArray[qNbr]["answer"] & "." 
                  with "Next" titled "Wrong Answer"
         else
            answer "The correct answer is: " & 
                  qArray[qNbr]["answer"] & "." 
                  with "Okay" titled "Wrong Answer"
         end if
         break
   end switch
   
   # Section 3
   if qNbr < 3 then
      add 1 to qNbr
      nextQuestion
   else
      go to card "Main"
   end if
end mouseUp

Our Submit button script is divided into three sections. The first section (section 1) checks to see if the answer contained in the array (qArray) is part of the answer the user entered. This is a simple string comparison and is not case sensitive.

Section 2 of this button’s code contains a switch statement based on the local variable tResult. Here, we provide the user with the actual answer if they do not get it right on their own.

The final section (section 3) navigates to the next question or to the main card, depending upon which question set the user is on.

Objective Complete – Mini Debriefing

We have successfully coded our short answer quiz card. Our approach was to use a simple question and data input design with a Submit button.

Your user interface should resemble the following screenshot:

Creating a picture question card

Using pictures as part of a quiz, poll, or other interface can be fun for the user. It might also be more appropriate than simply using text. Let’s create a card that uses pictures as part of a quiz.

Engage Thrusters

  1. Create a new card and name it Pictures.
  2. Copy the Title label from the Main card and paste it onto the new Pictures card. This will ensure the title label field has a consistent format and location.
  3. Copy the Question label from the TF card and paste it onto the new Pictures card.
  4. Copy the Progress label from the TF card and paste it onto the new Pictures card.
  5. Drag a Rectangle Button onto the card and make the following customizations:
    1. Change the name to picture1.
    2. Set the size to 120 x 120.
    3. Set the location to 128, 196.
  6. Drag a second Rectangle Button onto the card and make the following customizations:
    1. Change the name to picture2.
    2. Set the size to 120 x 120.
    3. Set the location to 336, 196.

    Upload the following listed files into your mobile application’s Image Library. This LiveCode function is available by selecting the Development pull-down menu, then selecting Image Library. Near the bottom of the Image Library dialog is an Import File button. Once your files are uploaded, take note of the ID numbers assigned by LiveCode:

    • q1a1.png
    • q1a2.png
    • q2a1.png
    • q2a2.png
    • q3a1.png
    • q3a2.png
  7. With our interface fully constructed, we are now ready to add LiveCode script to the card. Here is the code you will enter at the card level: 
    on preOpenCard
   global qNbr, qArray
   
   # Section 1
   put 1 into qNbr 
   set the icon of btn "picture1" to empty
   set the icon of btn "picture2" to empty
   
   # Section 2
   put "" into fld "question"
   put "" into fld "progress"
   
   # Section 3
   put "Which puppy is real?" into qArray["1"]["question"] 
   put "2175" into qArray["1"]["pic1"]
   put "2176" into qArray["1"]["pic2"]
   put "q1a1" into qArray["1"]["answer"]
   --
   put "Which puppy looks bigger?" into qArray["2"]["question"] 
   put "2177" into qArray["2"]["pic1"]
   put "2178" into qArray["2"]["pic2"]
   put "q2a2" into qArray["2"]["answer"]
   --
   put "Which scene is likely to make her owner more upset?" into
   qArray["3"]["question"] 
   put "2179" into qArray["3"]["pic1"]
   put "2180" into qArray["3"]["pic2"]
   put "q3a1" into qArray["3"]["answer"]
end preOpenCard

    In section 1 of this code, we set the qNbr to 1. This is our question counter. We also ensure that there is no image visible in the two buttons. We do this by setting the icon of the buttons to empty.

    In section 2, we empty the contents of the two onscreen fields (Question and Progress).

    In the third section, we populate the question set array (qArray). Each question has an answer that corresponds with the filename of the images you added to your stack in the previous step. The ID numbers of the six images you uploaded are also added to the array, so you will need to refer to your notes from step 7.

  8. Our next step is to program the picture1 and picture2 buttons. Here is the code for the picture1 button: 
    on mouseUp
   global qNbr, qArray
   
   # Section 1
   if qArray[qNbr]["answer"] contains "a1" then
      if qNbr < 3 then
         answer "Very Good." with "Next" titled "Correct"
      else
         answer "Very Good." with "Okay" titled "Correct"
      end if
   else
      if qNbr < 3 then
         answer "That is not correct." with "Next" titled "Wrong Answer"
      else
         answer "That is not correct."  with "Okay" titled "Wrong Answer"
      end if
   end if
   
   # Section 2
   if qNbr < 3 then
      add 1 to qNbr
      nextQuestion
   else
      go to card "Main"
   end if
   
end mouseUp

    In section 1 of our code, we check to see if the answer from the array contains a1, which indicates that the picture on the left is the correct answer. Based on the answer evaluation, one of two text feedbacks is provided to the user. The name of the button on the feedback dialog is either Next or Okay, depending upon which question set the user is currently on. The second section of this code routes the user to either the main card (if they finished all three questions) or to the next question.

  9. Copy the code you entered in the picture1 button and paste it onto the picture2 button. Only one piece of code needs to change. On the first line of the section 1 code, change the string from a1 to a2. That line of code should be as follows: 
       if qArray[qNbr]["answer"] contains "a2" then

Objective Complete – Mini Debriefing

In just 9 easy steps, we created a picture-based question type that uses images we uploaded to our stack’s image library and a question set array. Your final interface should look similar to the following screenshot:

Adding navigational scripting

In this task, we will add scripts to the interface buttons on the Main card.

Engage Thrusters

  1. Navigate to the Main card.
  2. Add the following script to the true-false button: 
    on mouseUp
   set the disabled of me to true
   go to card "TF"
end mouseUp
  3. Add the following script to the m-choice button: 
    on mouseUp
   set the disabled of me to true
   go to card "MC"
end mouseUp
  4. Add the following script to the sequence button: 
    on mouseUp
   set the disabled of me to true
   go to card "Sequencing"
end mouseUp
  5. Add the following script to the short-answer button: 
    on mouseUp
   set the disabled of me to true
   go to card "SA"
end mouseUp
  6. Add the following script to the pictures button: 
    on mouseUp
   set the disabled of me to true
   go to card "Pictures"
end mouseUp
  7. The last step in this task is to program the Reset button. Here is the code for that button: 
    on mouseUp
   global theScore, totalQuestions, totalCorrect
   
   # Section 1
   set the disabled of btn "true-false" to false
   set the disabled of btn "m-choice" to false
   set the disabled of btn "sequence" to false
   set the disabled of btn "short-answer" to false
   set the disabled of btn "pictures" to false
   
   # Section 2
   set the backgroundColor of grc "progress1" to empty
   set the backgroundColor of grc "progress2" to empty
   set the backgroundColor of grc "progress3" to empty
   set the backgroundColor of grc "progress4" to empty
   set the backgroundColor of grc "progress5" to empty
   
   # Section3 
   put 0 into theScore
   put 0 into totalQuestions
   put 0 into totalCorrect
   put theScore & "%" into fld "Score"
end mouseUp

    There are three sections to this code. In section 1, we are enabling each of the buttons. In the second section, we are clearing out the background color of each of the five progress circles in the bottom-center of the screen. In the final section, section 3, we reset the score and the score display.

Objective Complete – Mini Debriefing

That is all there was to this task, seven easy steps. There are no visible changes to the mobile application’s interface.

Summary

In this article, we saw how to create a couple of quiz apps for mobile such as short-answer questions and picture card questions.

Resources for Article:

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here