Quiz Me Tutorial

IntroductionQuizMe is a trivia game (the example uses baseball) you can use as a template to build quizzes on any topic.

The user steps through a series of questions, clicking a button to proceed to the next question.

The user enters an answer for each question and the app reports whether each answer is correct or not.

The quiz questions are always the same unless you, the programmer, change them.

Goals•Defining and displaying lists of information •Sequencing through a list using an index variable -- a variable that keeps track of a position in a list. •Conditional behaviors-- performing certain operations only when a condition is met. •Switching an image to show a different picture at different times.

Add Media1. Click “Add” under

the “Media” header.

2. Click Browse and open a picture you’d like to use for one of the questions of Quiz Me.

3. Click “OK” on the “Upload File…” box.

4. Repeat steps 1 - 3 till there are 3-4 images loaded.

Laying Out Components1. Drag out an Image. Leave the name

as ”Image1”. Set the picture to match your 1st question.

2. Drag out a Label. Name it “QuestionLabel”. This displays questions. Set “Text” to “Question”.

3. Drag out a HorizontalArrangement. Leave name as “HorizontalArrangement1”. This will organize the answer prompt and text box.

4. Drag a Label into “HorizontalArrangement1”. Name it “AnswerPromptLabel”. Set “Text” to “Enter Answer”.

5. Drag a TextBox into “HorizontalArrangement1”. Name it “AnswerText”. Users will type their answers here.

Laying Out Components(cont.)6. Drag out a Label. Name it

“RIghtWrongLabel”. Set the Text to “correct/incorrect”.

7. Drag out a HorizontalArrangement. Leave the name as “HorizontalArrangement2”. This will organize the buttons.

8. Drag a Button into “HorizontalArrangement2”. Name it “AnswerButton”. Set the Text to “Submit”.

9. Drag a Button into “HorizontalArrangement2”. Name it “NextButton”. Set the Text to “Next”.

ListsLists allow us to store multiple values to a single variable, and access those values through a key.

The key in our case will be the index, or the numbered order, starting at 1, of each value in a list.

Other programming languages refer to this data type as an array. Indexes also usually start at 0 in other languages.

Defining Variables1. Click Definitions. Drag out a “def

variable as” block. Change variable name to “QuestionList”.

2. Click Lists. Connect a “call make a list item” block to the “as” slot of “QuestionList”.

3. Connect a “text text” block to the “item” slot of the “call make a list item” block . Change the text to your first question.

4. Repeat step 3 for another 2-3 more questions. Notice each new item added opens a new item slot.

5. Repeat steps 1-4 except the variable will be named “AnswerList” and the items in the List will be the answers, in order, to the questions.

6. Drag out a “def variable as” block. Name the variable “currentQuestionIndex”. This variable will help the app keep track of which question the user is on.

7. Connect a number 123 to the “as” slot of “currentQuestionIndex”. Set the “123” to “1”.

Screen InitializationThis block of code will show the first question from “QuestionList” at the start of the app.

1.Click “My Blocks”. Drag out a “when Screen1.Initialize do” block.2.Connect a “set QuestionLabel.Text to” to the “do” slot of “when Screen1.Initialize do” block.3.Click Lists. Connect a “call select list item list index” block to the to slot of the “set QuestionLabel.Text to” block.4.Click My Blocks. Click My Definitions. Connect a “global QuestionList” to the “list” slot of the “call select list item list index” block. 5.Connect a “number 123” to the “index” slot of the “call select list item list index” block. Change the “123” of “number 123” to “1”.

Clicking the Next ButtonThis code changes the text of the QuestionLabel to the next item from QuestionList, when the NextButton is clicked.

1.Drag out a “when NextButton.Click do” block.2.Click My Blocks. Click My Definitions. Connect a “set global currentQuestionIndex to” to the do slot of “when NextButton.Click do” block.3.Connect a “+” block to the do slot of “when NextButton.Click do” block.4.Connect a “global currentQuestionIndex” to the left slot and a “number 123” to the right slot of the “+” block. Set the “number 123” to “1”.5.Click My Blocks. Click QuestionLabel. Connect a “set QuestionLabel.Text to” block to the do slot of “when NextButton.Click do” block below the “set global currentQuestionIndex to” block.6.Click Lists. Connect a “call select list item list index” to the “to” slot of “set QuestionLabel.Text to” block.7.Connect a “global QuestionList” to the “list” slot of the “call select list item list index” block.8.Connect a “global currentQuestionIndex” to the “index” slot of the “call select list item list index” block.

Conditional Check Preventing Out of IndexIf the next button is clicked past the 3rd question, the “currentQuestionIndex” will be set to “4”, but there’s no 4th entry in “QuestionList”. This causes an error.

1.Click Control. Connect a “if test then-do” block into the “do” slot of “when NextButton.Click do” block, above the “set global currentQuestionIndex to” block.2.Connect a “=“ block to the “test” slot of the “if test then-do” block.3.Connect a “global currentQuestionIndex” to the left slot and a “call length of list list” from Lists to the right slot of the “=“ block. This checks against the size of “QuestionList”, so no matter how many questions are made, an error won’t occur.4.Connect a “global QuestionList” to the “list” slot of “call length of list list” block.5.Connect a “set global currentQuestionIndex to” to the “then-do” slot of the “if test then-do” block.6.Connect a “number 123” to the “to” slot of the “set global currentQuestionIndex to” to the “then-do” block. Set the “number 123” to “0”.

Change Images with QuestionsFirst, create a List of image names.

1.Drag out a “def variable as”. Change the variable name to “PictureList”.2.Connect a “call make a list item” to the “as” slot of “PictureList”.3.Connect a “text text” to the “item” slot of the “call make a list item” block. Change the text to the name of the first image. Don’t forget .jpg at the end. Do this for each image.

Now we must change the image when the “NextButton” is clicked.

1.Connect a “set Image1.Picture to” into the “when NextButton.Click do” block, below “set QuestionLabelText to”.2.Connect a “call select list item list index” to the “to” slot of the “set Image1.Picture to” block.3.Connect a “global PictureList” to “list” slot of the “call select list item item index” block.4.Connect a “global currentQuestionIndex” to the “index” slot of the “call select list item item index” block.

Evaluating AnswersWe must compare the user’s input to our answers in “AswersList”.

1.Drag out a “when AnswerButton.Click do” block.2.Connect an “ifelse test then-do else-do” block into the “do” slot of the “when AnswerButton.Click do” block.3.Connect an “=“ block to the “test” slot of the “ifelse test then do” block.4.Connect an “AnswerText.Text” to the left slot and a “call select list item list index” block to the right slot of the “=“ block.5.Connect a “global AnswerList” to the “list” slot of the “call select list item list index” block.6.Connect a “global currentQUestionIndex” to the “index” slot of the “call select list item list index” block.7.Connect a “set RightWrongLabel.Text to” block to the “then-do” slot of the “ifelse test then-do else-do” block .8.Connect a “text text” to the “to” slot of the “set RightWrongLabel.Text to” block . Set text to ”correct”.9.Connect a “set RightWrongLabel.Text to” block to the “else-do” slot of the “ifelse test then-do else-do” block .10.Connect a “text text” to the “to” slot of the “set RightWrongLabel.Text to” block . Set text to ”incorrect”.

Resetting Between QuestionsWhen the “NextButton” is clicked, the RIghtWrongLabel and AnswerText textbox should clear.

1.Connect a “set RIghtWrongLabel.Text to” block to the “do” slot of the “when Next Button.Click do” block, above the “if test then-do” block.2.Connect a “text text” to the “to” slot of the “set RIghtWrongLabel.Text to” block . Set text to “”(blank).3.Connect a “set AnswerText.Text to” block to the “do” slot of the “when Next Button.Click do” block, below the “set RIghtWrongLabel.Text to” block .4.Connect a “text text” to the “to” slot of the “set AnswerText.Text to” block. Set text to “”(blank).

Final Program Example

Review• Lists were used to store questions, answers

and pictures in an ordered sequence.• Conditional statements were used to judge

the users input against our answers for questions and to prevent an error of the app trying to access values that didn’t exist

• Pictures were changed for each question in one Image component.