# Creating Quizzes

Exclusive offer: get 50% off this eBook here

### LiveCode Mobile Development Hotshot — Save 50%

Create your own exciting applications with 10 fantastic projects with this book and ebook

£16.99    £8.50
by Dr. Edward Lavieri | October 2013 | Open Source

In this article by Edward D Lavieri Jr., author of the book LiveCode Mobile Development Hotshot, explains how to create mobile app quizzes.

(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 "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:

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:

 Create your own exciting applications with 10 fantastic projects with this book and ebook
Published: October 2013
eBook Price: £16.99
Book Price: £27.99
See more
Select your format and quantity:

## Dr. Edward Lavieri

Dr. Edward Lavieri has a strong academic background with advanced degrees in Computer Science, Information Systems, Instructional Design, and more. He has 12 years of experience as a college instructor teaching Computer Programming and other Computer Science and Information Systems courses. He retired from the U.S. Navy after 25 years as an Intelligence Specialist and Command Master Chief. He is the founder and creative director of three19, a software design and development studio, where his passions for education and games marry. He is the author of Software Consulting: A Revolutionary Approach published by CreateSpace Independent Publishing Platform and LiveCode Mobile Development Hotshot published by Packt Publishing. He has also authored numerous Computer Science and Information Systems college courses.