So far, all the questions in the quiz contains four answer to choose from.  Let's extend the functionality so that we can support a question with only two answers to choose from, such as in true/false questions.  Once you understand how this works, you can add support for 3, 5, or more choices.

First, I'll modify the first quiz item so that there are only 2 answers to chose from:

<?xml version="1.0"?>
<!DOCTYPE quiz [
	<!ELEMENT quiz (title, items)>
	<!ELEMENT title (#PCDATA)>
	<!ELEMENT items (item)+>	
	<!ELEMENT item (question, answer, answer+)>
	<!ELEMENT question (#PCDATA)>
	<!ELEMENT answer (#PCDATA)>
	<!ATTLIST answer correct (y) #IMPLIED>
]>

<quiz>
  <title>The Quiz</title>
    <items>
      <item>
	<question>10 is &gt; -10.</question>
	<answer correct="y">True</answer>
	<answer>False</answer>
      </item>
      <item>
        <question>Which one cannot swim?</question>
        <answer>Tuna</answer>
        <answer correct="y">Cow</answer>
        <answer>Whale</answer>
        <answer>Lobster</answer>
      </item>		
      <item>
        <question>How many points are on a hexagon?</question>
        <answer>5</answer>
        <answer>6</answer>
        <answer>7</answer>
        <answer correct="y">8</answer>
      </item>		
    </items>
</quiz>

Here's the XML file: quiztf.xml

The bold portion is the changes that I made.  Notice that the > is an entity name (see first part of tutorial if you're not sure that means and why we need it).   So, the question will be translated to: 10 is > than -10.; and the user will have two answers to choose from: True or False.  

Now, we need to modify the Flash side.  Go back to the Action layer, first frame.   We just need to add one function for QuizItem object.  The function will return the number of answers, and it's called: getNumOfAnswers().  The changes are in bold below:

function QuizItem(question)
{
	this.question=question;
	this.answers=new Array();
	this.numOfAnswers=0;
	this.correctAnswer=0;
	this.getQuestion=function()
	{
		return this.question;
	}
	// add answer to multiple choice items     
	this.addAnswer=function(answer, isCorrectAnswer)
	{
		this.answers[this.numOfAnswers]=answer;
		if (isCorrectAnswer)
			this.correctAnswer=this.numOfAnswers;
		this.numOfAnswers++;
	}

	this.getAnswer=function(answerNumberToGet)
	{
		return this.answers[answerNumberToGet];
	}
	
	this.getCorrectAnswerNumber=function()
	{
		return this.correctAnswer;
	}
	
	this.checkAnswerNumber=function(userAnswerNumber)
	{
		if (userAnswerNumber==this.getCorrectAnswerNumber())
			gotoAndPlay("Correct");
		else
			gotoAndPlay("Wrong");
	}
 	this.getNumOfAnswers=function()
	{
		return this.answers.length;	
	}
}

Keep the remaining code intact (except, make sure that the XML file is the new file: quiztf.xml if you're using the new XML file).  If you run the movie now, it should show this:

Now, you can still click the third and fourth answers.  That's not good, we need to make it so that:

1) only valid answers are shown
2) disable the buttons for unused answers

To do 1), we need to convert the those A, B, C, D letters on the screen to symbols, so that we can hide them when necessary.  Let's do the A:

Hide the Buttons layer first.  Select the A shape (or text - depending on how you made the letter), then Convert to Symbol.  Name it A.

Then, select the symbol on the stage, go to its property panel, and assign an instance name to it.  Below, I name it: "answer1Mark".

(Make sure not to put  <SPACE> accidentally at the end and at the beginning of the  name.)

Do the same for B, C, and D.  
For B, name the instance "answer2Mark"
For C, name the instance "answer3Mark"
For D, name the instance "answer4Mark"

Now that we have named those instances (let's call them "answer marks") we can hide them by editing the code in the Actions layer on the ShowQuiz frame:

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

var currentQuizItem=quizItems[currentQuestionNumber-1];
var hasAnswered=false;
question=currentQuizItem.getQuestion();
for (var i=1; i<=currentQuizItem.getNumOfAnswers(); i++)
{
	_root["answer"+i]=currentQuizItem.getAnswer(i-1);
	_root["answer"+i+"Mark"]._visible=true; 
}

for (; i<=4; i++)
{
	_root["answer"+i+"Mark"]._visible=false;
}
stop();

The line 

currentQuizItem.getNumOfAnswers() 

tells Flash to only add as many answers as specified on the XML. 

We then turn off the answer marks by this loop:

for (; i<=4; i++)
{
	_root["answer"+i+"Mark"]._visible=false;
}

Within that loop, this portion of the code:

_root["answer"+i+"Mark"]._visible=false; 

hides the unused answer marks.  

But wait, we need to make sure that those marks are visible again for the next questions, and that's what this does:

_root["answer"+i+"Mark"]._visible=true; 

Now, test the movie with the new XML.  It will show this:
(Note: if for some reasons the code doesn't work, make sure there's no  <SPACE> at the end or the beginning of the instance name.)

The answer marks are gone, but notice that we need to also hide the answer textboxes.  We can do that with the same technique:

Go to the property panel of the answer textboxes and name them in this order from top to bottom: answer1Textbox, answer2Textbox, answer3Textbox, answer4Textbox.

And to hide/show them, add the following code (in bold)

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

var currentQuizItem=quizItems[currentQuestionNumber-1];
var hasAnswered=false;
question=currentQuizItem.getQuestion();
for (var i=1; i<=currentQuizItem.getNumOfAnswers(); i++)
{
	_root["answer"+i]=currentQuizItem.getAnswer(i-1);
	_root["answer"+i+"Mark"]._visible=true; 
	_root["answer"+i+"Textbox"]._visible=true; 
}

for (; i<=4; i++)
{
	_root["answer"+i+"Mark"]._visible=false;
	_root["answer"+i+"Textbox"]._visible=false; 
}
stop();

Run it now.  It should be like this:

That looks good, but if you click your mouse around the area where the third and the fourth answers are used to be, you can still click those non-existent answers.  We need to hide those unused buttons.  Again, we do the same as before: name the button instances, then hide/unhide them.

Go to each button's property panel, then name them in this order from top to bottom: answer1Button, answer2Button, answer3Button, answer4Button.

And to hide/show them, add the following code (in bold)

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

var currentQuizItem=quizItems[currentQuestionNumber-1];
var hasAnswered=false;
question=currentQuizItem.getQuestion();
for (var i=1; i<=currentQuizItem.getNumOfAnswers(); i++)
{
	_root["answer"+i]=currentQuizItem.getAnswer(i-1);
	_root["answer"+i+"Mark"]._visible=true; 
	_root["answer"+i+"Textbox"]._visible=true; 
	_root["answer"+i+"Button"]._visible=true; 
}

for (; i<=4; i++)
{
	_root["answer"+i+"Mark"]._visible=false;
	_root["answer"+i+"Textbox"]._visible=false; 
	_root["answer"+i+"Button"]._visible=false; 
}
stop();

  

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

(C) 2002 F. Permadi
 
Terms of Use