Creating Quizzes

Exclusive offer: get 50% off this eBook here
LiveCode Mobile Development Hotshot

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


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
Select your format and quantity:

About the Author :


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.

Books From Packt


LiveCode Mobile Development Beginner's Guide
LiveCode Mobile Development Beginner's Guide

 HTML5 Mobile Development Cookbook
HTML5 Mobile Development Cookbook

 Mobile Web Development
Mobile Web Development

 Moodle for Mobile Learning
Moodle for Mobile Learning

 Corona SDK Mobile Game Development: Beginner's Guide
Corona SDK Mobile Game Development: Beginner's Guide

Gideros Mobile Game Development
Gideros Mobile Game Development

Joomla! Mobile Development Beginner’s Guide
Joomla! Mobile Development Beginner’s Guide

 PlayStation®Mobile Development Cookbook
PlayStation®Mobile Development Cookbook


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software