How to: Make a quiz in AS3.. Setting up Questions and Answers

Next, lets take a look at Main.as. This class is a little longer, so I’ll explain function by function. First off, the variables:

	private var ButtonI:Loader = new Loader();
	private var ButtonI2:Loader = new Loader();
	private var ButtonI3:Loader = new Loader();
	private var Button1:Sprite = new Sprite();
	private var Button2:Sprite = new Sprite();
	private var Button3:Sprite = new Sprite();

	private var QuestionText:TextField = new TextField();
	private var A1Text:TextField = new TextField();
	private var A2Text:TextField = new TextField();
	private var A3Text:TextField = new TextField();
	private var pointText:TextField = new TextField();
	private var point:int = 0;

	private var _questions:Questions;

The first bunch is the buttons. These are, of course, used for input. Loaders are used to load images for the buttons, while the sprites will function as the buttons themself.

The second bunch is the text in the application. Not much to it. The last variable in the bunch (point) is int. This variable is used to keep count on the points.

Last, but not least, we establish the initial connection to the other class (Questions.as).

Next, the constructor looks a little like this:

public function Main():void 
{
	_questions = new Questions();
	addChild(_questions);

	ButtonI.load(new URLRequest("Button.png"));
	ButtonI2.load(new URLRequest("Button.png"));
	ButtonI3.load(new URLRequest("Button.png"));

	setup();
	newQuestion();

	addEventListener(Event.ENTER_FRAME, onEveryFrame);
}

First, the connection to Questions.as is fully established, allowing us to call functions in that class. Then, we load the images we’re using for buttons.

The initial layout setup is run, via the function setup.

Questions are displayed, via the function newQuestion().

Then, finally, we add an EventListener, for every frame. The function onEveryFrame, will be runned every time the application enters a new frame. In this case, thats 30 times every second  (30 fps).

The function called setup, looks like this:

public function setup():void 
{
	QuestionText.x = 100; QuestionText.y = 100;
	QuestionText.width = 600;
	QuestionText.selectable = false;
	addChild(QuestionText);

	Button1.addChild(ButtonI);
	Button1.addChild(A1Text);
	A1Text.x = Button1.width / 2; A1Text.y = Button1.height / 2;
	Button1.x = 0; Button1.y = 300;
	addChild(Button1);
	Button1.addEventListener(MouseEvent.MOUSE_DOWN, onAnswerClick);

	Button2.addChild(ButtonI2);
	Button2.addChild(A2Text);
	A2Text.x = Button2.width / 2; A2Text.y = Button2.height / 2;
	Button2.x = Button1.width + 200; Button2.y = 300;
	addChild(Button2);
	Button2.addEventListener(MouseEvent.MOUSE_DOWN, onAnswerClick);

	Button3.addChild(ButtonI3);
	Button3.addChild(A3Text);
	A3Text.x = Button3.width / 2; A3Text.y = Button3.height / 2;
	Button3.x = (Button1.width*2)+400; Button3.y = 300;
	addChild(Button3);
	Button3.addEventListener(MouseEvent.MOUSE_DOWN, onAnswerClick);

	pointText.x = stage.width / 2;
	pointText.y = 500;
	pointText.selectable = false;
	addChild(pointText);
}

This one is pretty simple. All the function does, it defining the text and buttons, and adding it to the stage. As for the buttons, let me break it down for you line by line:

– The loaded image (remember the Loader?) is added to the sprite.
– The textfield (the answer) is added to the sprite.
– The position of the text is corrected (based on the position of the sprite).
– The position of the sprite is corrected.
– The sprite is added to the stage.
– An EventListener is added to the sprite. Clicking the sprite will now call the function onAnswerClick.

Next up is the onAnswerClick function:

public function onAnswerClick(e:MouseEvent):void
{
	switch(e.currentTarget)
	{
	case Button1:
		if (A1Text.text == _questions.answer1()) {
			trace("right");
			point ++;
		} else if (A1Text.text == _questions.answer2()) {
			trace("wrong");
			point --;
		} else if (A1Text.text == _questions.answer3()) {
			trace("wrong");
			point --;
		}
		newQuestion();
		break;
	case Button2:
		if (A2Text.text == _questions.answer1()) {
			trace("right");
			point ++;
		} else if (A2Text.text == _questions.answer2()) {
			trace("wrong");
			point --;
		} else if (A2Text.text == _questions.answer3()) {
			trace("wrong");
			point --;
		}
		newQuestion();
		break;
	case Button3:
		if (A3Text.text == _questions.answer1()) {
			trace("right");
			point ++;
		} else if (A3Text.text == _questions.answer2()) {
			trace("wrong");
			point --;
		} else if (A3Text.text == _questions.answer3()) {
			trace("wrong");
			point --;
		}
		newQuestion();
		break;
	}
}

Now, this might look a bit intimidating… it’s not.

Basicly, we set up a switch-statement, to check which button is pressed. When the button is pressed, we then compare the text of the button, to the possible answers. Since the first answer is always the correct one, a point is given if the text of the sprite correlates  with the text of the first answer. If the text does not correlates, a point is substracted.

Finally, the function newQuestion is called. Lets have a look at that function:

public function newQuestion():void
{
	QuestionText.text = _questions.question();
	
	var randomA:int = Math.ceil(
	Math.random() * 101 - 1);
			
	if (randomA < 33) {
		A1Text.text = _questions.answer1();
		A2Text.text = _questions.answer2();
		A3Text.text = _questions.answer3();
	} else if (randomA > 32 && randomA < 66) {
		A1Text.text = _questions.answer2();
		A2Text.text = _questions.answer3();
		A3Text.text = _questions.answer1();
	} else if (randomA > 65) {
		A1Text.text = _questions.answer3();
		A2Text.text = _questions.answer1();
		A3Text.text = _questions.answer2();
	}
}

Basicly, this function changes the text of the textfields, so that the user is presented with a question and three answers. As you can see, it’s completly random which textfield receives which answer. To ensure the randomness (that’s a word, right?), we make use of the if-statement, and a randomly generated number.

At last, lets check out the function onEveryFrame:

public function onEveryFrame(e:Event):void
{
	pointText.text = "Total points: " + String(point);
}

This one is super simple. It changes the textfield called pointText, to display the correct amount of points. Notice the way the int-value “point”, is converted to a string-value.

That’s pretty much it. In my application, I’ve building upon this simple structure, to incorporate different game-modes, and better visuals. At the moment, I don’t intend to write a posts on these.
If you have any questions, please comment, and I’ll get back to you ASAP!

Pages: 1 2