An XML-based RadioButton Quiz in Flash CS3

The application below shows a fully functioning quiz, albeit with only two questions. Note that the structure we set up on the stage works as we proposed, but the content (title text, question text, and answer choices) are created at run-time. That is, we did not put the questions and answers on the stage when authoring the problems.

This example is getting data from the file QuizData.xml, shown below:

<?xml version="1.0" encoding="utf-8"?>

<quiz>

<setup claim="What was the name of the Simon Stevin 1586 pamphlet that popularized decimals?"

questionWidth="500" questionHeight="50" fontSize="12" fontColor="0x000000" answerHeight="30"/>

</question>

</question>

</quiz>

The application itself is virtually the same as on the previous page. We do now have the ability to have different sizes and colors for question text as well as different vertical spacing for answers.

The code

The following code replaces the definition of variables that control the size of question and answer box, including the font color and size for the questions.

// We declare a series of arrays to receive data from the file called QuizData.xml.

var tSize:Number;

var arrQuestion:Array = new Array();

var arrQHeight:Array = new Array();

var arrQWidth:Array = new Array();

var arrAHeight:Array = new Array();
var arrQFontSize:Array = new Array();

var arrQFontColor:Array = new Array();

var arrAnswers:Array = new Array();

var arrCorrect:Array = new Array();

var arrUserAnswers:Array = new Array();

var arrDone:Array = new Array();

// Number of questions for this set and a variable "index" for the current question.

var numExamples:int;

var index:int;

// Loader for the XML file

var xmlLoader:URLLoader = new URLLoader(new URLRequest("QuizData.xml"));

xmlLoader.addEventListener(IOErrorEvent.IO_ERROR, noFile);

xmlLoader.addEventListener(Event.COMPLETE, initData);

// To respond correctly to an IO error, we simply put an appropriate message on the screen.

function noFile(evt:IOErrorEvent):void {

txtFeedback.text = "Error. Data file not found.";

}

/*
The initData function puts the Title information and the names of the image files into the stTitle variable and the arrImgURLs array. Finally we call the custom ImageLoader class to load all of the images.
*/

function initData(evt:Event):void {

var dataXML:XML = XML(xmlLoader.data);

var i,j:int;

txtTitle.text = dataXML.globalSettings.@titleText.toString();

tSize = Number(dataXML.globalSettings.@titleSize.toString());

numExamples = dataXML.question.length();

for (i=0; i<numExamples; i++) {

arrQuestion[i] = dataXML.question[i].setup.@claim.toString();

arrQWidth[i] = dataXML.question[i].setup.@questionWidth.toString();

arrQHeight[i] = dataXML.question[i].setup.@questionHeight.toString();

arrQFontSize[i] = dataXML.question[i].setup.@fontSize.toString();

arrQFontColor[i] = dataXML.question[i].setup.@fontColor.toString();

arrAHeight[i] = dataXML.question[i].setup.@answerHeight.toString();

arrUserAnswers[i]=0;

arrDone[i]=0;

arrAnswers[i] = new Array();

for (j=0; j<dataXML.question[i].answers.length(); j++) {

arrAnswers[i][j] = dataXML.question[i].answers[j].@choice.toString();

if (Number(dataXML.question[i].answers[j].@correct.toString()) == 1) {

arrCorrect[i] = j;

}

index=0;

setup();

}

In the setup function, we add some local variables in order to use the same names we used in the previous example. Each local variable gets its value at the beginning from the appropriate array of data loaded above. We only show the beginning of the function since the rest has been unchanged.

function setup():void {

var j:int;

var qWidth:Number = arrQWidth[index];

var qHeight:Number = arrQHeight[index];

var qSize:Number = arrQFontSize[index];

var qColor:Number = arrQFontColor[index];

var aHeight:Number = arrAHeight[index];

Since qHolder has no children other than questions and answers, we remove all of its children to clear the previous question.

while (qHolder.numChildren > 0) {

qHolder.removeChild(qHolder.getChildAt(0));

}

etc.

The remaining functions from the previous example are all the same in this version. The only other script change is the removal of the call to the setup function at the end of the script. The initial call to the setup function is now done on completion of the loading of the xml data file within the initData function, defined above.

Downloads

Download the sample xml data file and the well-commented fla file for the application shown above.

Note

The "ComboBox" component provides roughly the same level of interactivity but has different screen constraints (they take less room), so it might be a desirable alternative to radio buttons. See the tutorial, Using the combo box component for matching problems, in the Basic section of this site for details on using the ComboBox component.

An XML-based RadioButton Quiz in Flash CS3

Contents

The code

Note

Sponsored Links