test your genius kid!
TRANSCRIPT
Test your genius kid! Lucian Eduard Barticel, group: 2B, year: 3
Introduction
1.1 Technologies used • For this project I used a pretty wide range of
technologies like HTML, CSS, JQUERY, AJAX, PHP and MySql. More details you will find in the section 3 of this presentation.
1.2 Target group• As it’s name states, the application I build
has as a target group children with ages between 8 and 14 years. When the child starts to use the application, the first thing he does is to choose his age range: 8-10, 10-12 or 12-14 years.
Introduction
1.3 Utility• Beside it’s fun part, this little game
comes to enrich your children’s general knowledge with age appropriate questions from a large diversity of areas.
Structure• With a very simple structure and a very intuitive interface, this
application fits perfectly in the hands of your children. When the user starts playing, the first thing he will have to do is to select his age range. There are three of those: 8-10, 10-12 and 12-14. After doing that the only thing left for him to do is to answer the questions for the selected age range and try to get a good score.
Structure• Beside the user interaction level, there always is the magic
that happens behind. For those pretty image to appear on your screen I have used html and css, more about that in chapter 3. For the others functionalities I have use php, jquery, ajax and mysql. More about those in the next chapters too.
What do we see• How I was saying, for those pretty images and text parts to
appear on your screens I used html and css technologies. These lines of code are saved in the index file, the file that loads when you access the website.
What do we see• What you just saw is the code used
in the index file. There’s not much to say about this code. There is the basic html structure with <html>,<head> and <body> tags, a few divs and a few img tags. For the ones who are familiar with this technology nothing from this code will amaze them.
• Here is a part of the css file too. Here the elements of the page get their style.
• Now that you know how I managed to show those elements on your screens, let’s move forward and see what happens on the client side.
What the client does• For the client side I used Jquery and ajax to communicatewith the server. The code for this part of the project is stored in the functions.js file.
What the client does• The code has basically three
functions, one for the age range selector, one for the answers and one for the email. Through this functions, the data that you select or send form the interface, are transferred to the server side of the project. Also, these functions allow animations to be performed when, for example, you select an answer that is, or is not correct.
What the server does • Now, after we seen the client side and how does the element
appear on the screen, it’s time to get to the server part of the application.
• Here, the communication with the database takes place. After receiving data from the client side, the server forms the appropriate queries which are then sent to the database. From there the servers gets back some data which it’s sends back to the client side.
What the server does• The email for the parents is send from here too.• For the server part of the project I used PHP and for the
database, Mysql.
How to use• In order for someone to use the application, after accessing it,
he must first choose his age range. After that, a series of 15 questions will appear successively on the screen, each of them with 4 possible answers. He must choose one of them. If he chooses the correct one, his score will increment, else his score remains the same.
How to use• At the end of the game, on the blackboard will appear his final
score and a field for one of his parents email address. He must then have to write the email address where the score will be sent and to click on the envelope at the right of the field. After the email has been send, he can play again by simply refreshing the page, or clicking on the header banner.
Questions?