TASK #1
TASK:
Add a load_state
function to the JS file and execute it in function start
.
HINT:
You will need to define a function in the JS file called load_state. You can put an alert
the function to test that it is being run. Then you must call the function in the beginning of the start function.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #2
TASK:
Create an xmlHTTP object and specify the PHP file that will run when the connection is open.
HINT:
You will need to create an xmlHTTP object and run the open method, specifying the
PHP file that will be run when the connection is open. Following this, you must run the send method to send the database request.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #3
TASK:
Create the file 'cookie_load_state.php' and create an object using stdClass().
HINT:
You must run a function that will check the onreadyState
and status
of the xmlHTTP
object. When both are showing a clean connection, run an alert
that outputs the value of both of these attributes.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #4
TASK:
Connect to the DB and run a SELECT query to retrieve the state of the user's game.
HINT:
You must run a function that will check the onreadyState
and status
of the xmlHTTP
object. When both are showing a clean connection, run an alert
that outputs the value of both of these attributes.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #5
TASK:
Store the data received from the query as instance variables of the object.
HINT:
You must run a function that will check the onreadyState
and status
of the xmlHTTP
object. When both are showing a clean connection, run an alert
that outputs the value of both of these attributes.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #6
TASK:
Encode the object using JSON and return it to the JS file.
HINT:
You must run a function that will check the onreadyState
and status
of the xmlHTTP
object. When both are showing a clean connection, run an alert
that outputs the value of both of these attributes.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #7
TASK:
Define the onreadystatechange function that will check the state of the connection to the server.
HINT:
You must run a function that will check the onreadyState
and status
of the xmlHTTP
object. When both are showing a clean connection, run an alert
that outputs the value of both of these attributes.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #8
TASK:
Assuming the PHP file works properly, receive and unpack the JSON data.
HINT:
You will need to use the parse
method to unpack the JSON data into a JS variable
called myObj. Once the data is received, you will be able to save the number of cookies into another variable. We will test
the results by output the number of cookies in an alert
.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #9
TASK:
Test the Cookie Clicker web application and see that it does load the data from the DB.
HINT:
You will need to use the parse
method to unpack the JSON data into a JS variable
called myObj. Once the data is received, you will be able to save the number of cookies into another variable. We will test
the results by output the number of cookies in an alert
.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #10
TASK:
Create a JS function called print_state
that will reflect the updated number of buildings to the web page.
HINT:
You will need to use getElementById
to set the textContent
attribute of each div containing
the number of buildings to the appropriate variables. This function should be run after
the JSON data has been parsed and stored.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #11
TASK:
Create a JS function called cal_cost
that will calculate the cost of the buildings.
HINT:
You will need to create a function that will use a loop
and the number
of each building
that was retrieved from the AJAX request to calculate the cost of each building. Then you will need to store
that value into the correct
JS variable.
CHECK UP:
Watch the video below to check that you completed the task.