FLASH MX: CREATING A QUIZ APPLICATION USING XML

  

Advertisement

Wow, we have gone a long way and are almost done.  All we need now is to do these:

• Check whether all the quiz has been answered.
• Display the summary screen, showing percentage of the correct answer.

CHECKING WHETHER ALL THE QUIZ HAS BEEN ANSWERED
To do this part, we need to know how many quiz items are in the XML file.  When we parsed the XML data (see LOADING THE QUIZ DATA section on the 1st page), we stored the questions (quiz) in an Array named quizItems.  We can just check the size of this array to find out how many questions are on the XML file.  

Where should we do the check?  We can either do the check on the "Correct" or  "Wrong" frames, but then we'll need to do the check on both places. If we look at the code on both of those frames (see previous sections), they both call gotoAndStop("ShowQuiz"), so it's better to do it there. 

Here's what we need to insert into the beginning of the existing code in the "Actions" layer of "ShowQuiz" frame.

if (currentQuestionNumber>quizItems.length) gotoAndStop("SummaryScreen");

So the action will look like this:

That added code checks the currentQuestionNumber against the number of questions on the XML file.  It also tells Flash to jump to a frame labeled "SummaryScreen" when all the questions has been shown.  

CREATING THE SUMMARY SCREEN
As before, create a key frame at frame 50 or so (make sure this frame is not overlapping the last frame created in any of the previous steps), then in the Labels layer, label the frame "SummaryScreen."  Since you don't want to show the quiz screen except the background at this point of the game, you might want to do Clear Frames to clean the screen and get rid off the buttons.

Let's compose the screen.  Make a key frame on the Animations layer.    For this example, I'll just put up some message and several textboxes.

The good news is that we already have most of the values that we need here.  For the Correct Answer box, we can just display the value of the variable numOfQuestionsAnsweredCorrectly; and for the Incorrect Answer box, we can just display the value of the variable numOfQuestionsAnsweredIncorrectly.  If you recall, we have been updating these variables regularly.   So, in the property dialog for placeholder1, set Var: numOfQuestionsAnsweredCorrectly, and also make sure Dynamic Text is selected.  

In the textbox property dialog for placeholder2, make sure to select Dynamic Text, and to set Var: numOfQuestionsAnsweredIncorrectly. 

Now, for the score, we will need to do some calculation.  We'll do the calculation in a bit later, for now, let's decide a variable name to use.  Let's call the variable: userScore.   So, in the textbox property dialog for placeholder3, make sure to select Dynamic Text, and to set Var: userScore. 

Let's calculate the value of userScore.  We'll calculate it in the Actions layer of the "ShowScreen" frame.  You can use any kind of scoring you want, but for this example, I will be dividing the number of correct answers by the total answers.  And then, I'll multiply the result by 100.  So, the range of score is from 0 to 100.  The code is as follows:

userScore=(numOfQuestionsAnsweredCorrectly*100)/ (numOfQuestionsAnsweredIncorrectly+numOfQuestionsAnsweredCorrectly)

It looks like this in the movie:

Notice that I put a stop() action to make the movie stop at this point.   The Play Again button can be set to restart the quiz by attaching this code:

We are done for now!  
Test the movie. 

Download FLA

SUGGESTIONS

  
If you're running on a local machine, you might notice that the initial screen does not show up or is showing up very quickly.   

 

We can add some delay here.  Look for this code in the frame 1 of Actions layer:

gotoAndPlay("Start");

and replace it with 

gotoAndPlay(_currentFrame+1); 

You then might want to insert some frames between the frame labeled "LoadData" and "Start" to make the delay longer.

You might want to add a text box to show the question number on the screen.  You can do this by adding a textbox with Var: currentQuestionNumber.

You can also show the title of the quiz by adding a textbox with Var set to title.  The title of the quiz is specified in the XML file <title> tag and can be changed.  

RANDOMIZING THE ORDER OF THE QUESTIONS

A reader asked how to randomize the question ordering. Add this to the end of onQuizData function, before gotoAndPlay("Start"):

// Randomize orders
for (i = 0; i<quizItems.length; i++)
{
  var indexToSwap=int(Math.random()*quizItems.length);
  var temp=quizItems[indexToSwap];  
  quizItems[indexToSwap]=quizItems[i];
  quizItems[i]=quizItems[indexToSwap];
}

This code loops through each question and randomly swaps its position, using Math.random(), within the array. Download FLA

LIMITING THE NUMBER OF QUESTIONS DISPLAYED FROM POOL

Another question is how to limit the number of questions to display among the pool of questions. The two places to change is in the in ShowQuiz frame, change the quisItems.length to the number of questions you want to display (4 in the example below):

/*if (currentQuestionNumber>quizItems.length)
   gotoAndStop("SummaryScreen");
*/
if (currentQuestionNumber>4)
   gotoAndStop("SummaryScreen");

This will work but not that flexible.

To make it more flexible, add another node to the XML, such as this <numberOfQuestionsToDisplay> node below the title node:

	<title>The Quiz</title>
	<numberOfQuestionsToDisplay>4</numberOfQuestionsToDisplay>
	<items>
       .........omitted
	</items>

Then make this change on LoadData frame to read it:

	title=quizTitleNode.firstChild.nodeValue;
	numberOfQuestionsToDisplay=int(quizNode.childNodes[1].firstChild.nodeValue);
	trace("numberOfQuestionsToDisplay="+numberOfQuestionsToDisplay);
	
	var i=0;
	var itemsNode=quizNode.childNodes[2];

And in ShowQuiz frame, change to:

  /*if (currentQuestionNumber>quizItems.length)
     gotoAndStop("SummaryScreen");
  */
  if (currentQuestionNumber>numberOfQuestionsToDisplay)
     gotoAndStop("SummaryScreen");

Download FLA

<<MORE IMPROVEMENTS>>
<<MORE TUTORIALS>>

(C) 2002 F. Permadi

Terms of Use