# 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

\$26.99    \$13.50
by Edward D Lavieri Jr. | 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.)

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 "progress"
# Section 3
put "What farm animal eats shrubs, can be eaten, and are smaller than
cows?" into qArray["1"]["question"]
--
put "What is used in pencils for writing?" into qArray["2"]["question"]
--
put "What programming language are you learning" into qArray["3"]
["question"]
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
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
else
end if
break
end switch

# Section 3
if qNbr < 3 then
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 "Which puppy looks bigger?" into qArray["2"]["question"]
put "2177" into qArray["2"]["pic1"]
put "2178" into qArray["2"]["pic2"]
--
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"]
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 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
else
end if
end if

# Section 2
if qNbr < 3 then
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```
```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:

## LiveCode Mobile Development Hotshot

 Create your own exciting applications with 10 fantastic projects with this book and ebook
Published: October 2013
eBook Price: \$26.99
Book Price: \$44.99
See more

## Edward D Lavieri Jr.

Edward D Lavieri Jr. has a strong academic background with multiple graduate degrees. 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 started his own software design and development studio in 2008. His passion is developing educational games.

As founder and creative director of his own software design and development studio, he is constantly developing software. He uses LiveCode as one of his primary development tools.

He authored a book on software consulting entitled Software Consulting: A Revolutionary Approach and was the technical editor of the Excel Formulas and Functions for Dummies book. He has also authored numerous computer science and information systems college courses.