Quiz_page

Write the method "managePage" in the quiz class that builds the pages

public function managePage(w_pag:Number):Void
{
quiz_page = createChild( "Quiz_page", "quiz_page_w_" + w_pag, 100 + w_pag);
quiz_page.setup(w_pag)
}

and set the variable in the Quiz class

private var quiz_page:MovieClip;

Right. at this point we have a function in the Quiz class that istance the class Quiz_page (finally!). Lets write some code in the quiz_page so we start to build a generic page.

public function Quiz_page()
{
ZigoEngine.simpleSetup();
quiz_page = this
}
public function setup(w_pag:Number)
{
//storing the number of the page
my_pag = w_pag
//storing in an array the info for the questions to display
my_content = Quiz.quiz_content[my_pag-1]
//the number of the questions
total_length = Quiz.quiz_content.length
//calling the setupScreen method
setupScreen()
}
private function setupScreen()
{
trace("im a page hi")
}

if you don't see the trace in the output window download here the latest file
copy the main frames in the MC Quiz_page from the final source file and paste in the main frame of our Quiz_page MC that now is empty. Now lets write the code in the setupScreen

private function setupScreen()
{
//*****the question is the first node in the xml and so this is the reason we are writing here childNodes[0]
quiz_page.question.text = my_content.childNodes[0].childNodes
//*****setting the start values of the movieClip inside Quiz_page MC so we can launch the animation
quiz_page.question._alpha = 0
quiz_page.next_bt._alpha = 0
quiz_page.next_bt._xscale = 0
quiz_page.next_bt._yscale = 0
quiz_page.next_bt._alpha = 0
quiz_page.next_bt._visible = false;
quiz_page.back._alpha = 0
//*****create a MC where to attach all the option of the question
tk_options = this.createEmptyMovieClip("tk_options",10)
tk_options._y = 200
//*****reading the number of the questions
myArrLength= my_content.childNodes[1].childNodes.length
//****doing the for cycle to attach all the option for the question
for(var i:Number = 0;i<myArrLength;i++)
{
var option:MovieClip = tk_options.attachMovie("option","option"+i,i)
//***writing the option on the button
option.option_txt.text = my_content.childNodes[1].childNodes[i].childNodes
//***storing the points on the button to check the final results
option.my_points = my_content.childNodes[1].childNodes[i].attributes.points
//***showing the buttons like a list on _y
option._y = i*distance_buttons
//***start values for the buttons
option._xscale = 0
option._yscale = 0
option.option_txt._alpha = 0
//***storing the number of the button on a variable
option.mynr = i
}
//****calling the animation to show the options
showScreen()
}

Right.at this point we wrote the code to attach the page and we can start the animation. the last line of the setupScreen method call the method showScreen()

private function showScreen()
{
//**we are creating a new istance for fuse to manage the animation
var myFuse = new Fuse()
//**first event that will appear in the animation will be
myFuse.push({target:quiz_page.back,width:600,x:400,rotation:10,y:100,height:300,alpha:100,ease:"easeOutCubic",seconds:.5})
//**creation of two array to manage more animation together for the second and third fase of the animation
var myArrFase1:Array=new Array()
var myArrFase2:Array=new Array()
//**so for every option in the page we are putting the scale animation in the first animation
//** and the color animation and the text alpha on the second animation
for(var i:Number = 0;i<myArrLength;i++)
{
var option:MovieClip = tk_options["option"+i]
myArrFase1.push({ target:option,x:400,yscale:100,xscale:100,ease:"easeOutCubic",seconds:.5,delay: arr_delay[option.mynr]})
myArrFase1.push({ target:option.back,width:700,ease:"easeOutCubic",seconds:1.2,delay: arr_delay[option.mynr+1]})


myArrFase2.push({ target:option.back,start_color:0xffffff,color:0x000000,ease:"linear",seconds:.5,delay: arr_delay[option.mynr]})
myArrFase2.push({ target:option.option_txt,alpha:100,ease:"linear",seconds:0,delay: arr_delay[option.mynr]})

}
//**in the first animation we put as well the alpha of the question
myArrFase1.push({ target:quiz_page.question,alpha:100,ease:"linear",seconds:.5})
//**in the secondo animation we set the next button
myArrFase2.push({scope:this,func:setup_gonext})

myFuse.push(myArrFase1)
myFuse.push(myArrFase2)
//**at the end of these animations we will set the option buttons calling the method setup_option
myFuse.push({scope:this,func:setup_option})
//**destroy my fuse at the end
myFuse.push({scope:this,func:destroyFuse,args:[myFuse] })
myFuse.start()
}

Create now two empty method called "setup_option" and "setup_gonext" so we can check the animation without receveing error messages but obviously don't forget to set the variables that you are using in these methods

private var myArrLength :Number;
private var tk_options:MovieClip;
private var distance_buttons:Number = 30;
private var arr_delay:Array = new Array(".1",".2",".3",".4",".5",".6",".7",".8",".9")

Like always if your application is not working you can grab the latest version from here
Ok. Now lets complete the two empty method to set the option buttons and to setup the next button. so the code to set the option buttons will be:

private function setup_option():Void
{
for(var i:Number = 0;i<myArrLength;i++)
{
var option:MovieClip = tk_options["option"+i]

option.onRollOver = function()
{
this.back.tween("_width",800,.8,"easeOutElastic")
this.back.tween("_height",30,1.3,"easeOutElastic")
}
option.onRollOut= function()
{
this.back.tween("_width",700,.8,"easeOutElastic")
this.back.tween("_height",20,1.3,"easeOutElastic")
}
option.onPress = Proxy.create(this,recordPoints,option)
}
}

we are using zigo to scale the button back mc on rollover and on rollout. at on Press event we call the method recordPoints (using Proxy) and passing option like a value. so we are going to write and empty method called recordPoints.
Forget for now the "setup_gonext" and lets finish the recordPoint method. here the commented code

private function recordPoints(w_option:MovieClip):Void
{
//** now that an option is pressed we can show the next button (if there is no choice you can't go in the next page
quiz_page.next_bt.alphaTo(100,.5,"linear")
quiz_page.next_bt.tween("_xscale",100,.5,"easeOutCubic")
quiz_page.next_bt.tween("_yscale",100,.5,"easeOutCubic")
//**every option will come back to initial position ( in case you are changing your choice
for(var i:Number = 0;i<myArrLength;i++)
{
var option:MovieClip = tk_options["option"+i]
option.enabled = true;
option.back.colorTo(0x000000,0,"linear")
option.onRollOut()
}
//** disable this option and changing the color (now is a some kind of yellow)
w_option.enabled = false;
w_option.back.colorTo(0xccff22,0,"linear")
//**storing the points of the choice in the myPoints variable
myPoints = w_option.my_points;
}

Don't forget to set the variable myPoints like a number in the Quiz_page class. here we will store the results of the page, and we will use this value to check the final result
Now set up the "setup_gonext" method so we can move through the pages. write this code for the setup_gonext method

private function setup_gonext()
{
quiz_page.next_bt._visible = true;
quiz_page.next_bt.onRollOver = function()
{
this.back.tween("_xscale",130,.5,"easeOutElastic")
this.back.tween("_yscale",130,.8,"easeOutElastic")
}
quiz_page.next_bt.onRollOut = function()
{
this.back.tween("_xscale",100,.5,"easeOutElastic")
this.back.tween("_yscale",100,.8,"easeOutElastic")
}
var w_pag:Number = my_pag +1
quiz_page.next_bt.onPress = Proxy.create(this,cleanScreen,w_pag)
setupGotoPage()
}

This method set the next button that at onPress event will call the cleanScreen and will pass the value of the nex pag to load. Let's write the code for the cleanScreen:

private function cleanScreen(w_pag:Number):Void
{
//** deleting the next button
destroyMc(quiz_page.next_bt)
//** delete the MC gotoPagers that contains the navigation in the previous pages
destroyMc(quiz_page.tk_gotoPagers)
//**create a new istance of fuse
var myFuse = new Fuse()
var myArrFase1:Array=new Array()
var myArrFase2:Array=new Array()
for(var i:Number = 0;i<myArrLength;i++)
{
var option:MovieClip = tk_options["option"+i]
//**first we are deleting the option txt
myArrFase1.push({ target:option.option_txt,alpha:0,ease:"linear",seconds:.3})
//**second we are scaling the back of the option
myArrFase2.push({ target:option.back,width:0,ease:"easeOutCubic",seconds:.5,delay: arr_delay[option.mynr]})
}

myArrFase2.push({ target:quiz_page,alpha:0,ease:"linear",seconds:.5,delay:.5})
myFuse.push(myArrFase1)
myFuse.push(myArrFase2)
//**checking if there is another page we call the managePage on the main app
if(w_pag<=(total_length))
{
myFuse.push({ scope:quiz_page._parent,func:"managePage",args:[w_pag]})
}
//** else it means that the quiz is done and we can call on the main app the method showResults
else
{
myFuse.push({ scope:quiz_page._parent,func:"showResult"})
}
myFuse.push({scope:this,func:destroyMc,args:[quiz_page.tk_options]})
myFuse.push({scope:this,func:destroyFuse,args:[myFuse]})
myFuse.start()
}

So in the Quiz class we will add the method "showResults":

public function showResult():Void
{
}

If you are lost you can download from here the latest version
Lets finish the Quiz_page class with the method "setupGotoPage". first thing copy from the final source the MC "nr_pagers".

private function setupGotoPage()
{
//**create a container for the nr to navigate in the previous pages
tk_gotoPagers = this.createEmptyMovieClip("tk_gotoPagers",20)
tk_gotoPagers._x =5
tk_gotoPagers._y = 580
//**create the numbers till the number of the page
for(var i:Number = 1;i<=my_pag;i++)
{
var nr_pagers:MovieClip = tk_gotoPagers.attachMovie("nr_pagers","nr_pagers"+i,i)
//**write the number in the textfield of the code
nr_pagers.nr_txt.text ="[" + i + "]"
nr_pagers.mynr = i
nr_pagers._x = i*35
//**setting of the numbers that are not my page
if(i!=my_pag)
{
nr_pagers.onRollOver = function()
{
this.colorTo(0xffffff,0,"linear")
}
nr_pagers.onRollOut = function()
{
this.colorTo(0x000000,0,"linear")
}
nr_pagers.onPress = Proxy.create(this,cleanScreen,nr_pagers.mynr)
}
//**setting the number of my page
else
{
nr_pagers.colorTo(0xcccccc,0,"linear")
}
}
}

Don't forget to set the variable tk_gotoPagers like MovieClip

 

Now a good news. the class Quiz_page is done. the last thing that we have to do his to set a function that will show a result and maybe to start again.