Web Design - ***Enseignant Fiable***

Please refer to Assignment 7 info for all the instructions.

This is the same assignment as 6 but using AJAX. You should find this approach easier and better. Your task is to take your JavaScript version of assignment 5 and replace the array parts with AJAX code and PHP.  To show you how to do this I am providing a complete implementation of the FlashCard assignment that uses AJAX and PHP.  You just have to look at the corresponding parts and copy them in to use your flashcard answers and urls in the database, and your css and html for the page. Just adapt the AJAX and PHP bits to work in your application.

The attached ajax.pdf file explains the AJAX bits.  The application itself uses five files, FlashCardAjax.html, getQuestionCount.php, getQuestion.php, getOtherAnswers.php, and FlashCard3.css.

To make it run, set up the mysql database and table as in assignment 6.  Edit the files as needed to match your database, table, and user names. Create your project copy in the xampp\htdocs with the above 5 files like you did for assignment 6.  You should copy some of the simple test files from 6, as well, to test your database and make sure everything is working.

The line in FlashCardAjax.html that writes the url above the picture is there to show you how you can add code to help you debug your program.  (You can even comment out the img element and just look at the url.) If you are not sure that something is working correctly, you can write its values to one of the paragraph elements for debugging, to see what they get.  For example, you might write the query url, or the responseText, to one of the debug paragraph elements.

You should also try out the developer tools in Chrome and Firefox.  Both of them have a network tab that shows you what is going back and forth between the browser and the server, and a console tab to debug the page.  You can even set breakpoints in the JavaScript by double-clicking to the left of the line in question.  Firefox is slightly better at catching errors in your page.  Chrome has a sightly nicer interface