Geo Trivia by ADRS

File:

• 'geo-trivia'

Instructions:

• This webpage is a coding group project, which is based on concepts of HTML, CSS, Javascript, jQuery, and APIs (in this particular project there are 2 - two - APIs that will be presented later).

• The webpage consists of 4 (four) different pages ("presentation", "trivia game", "game over", and "highscore") all fully detailed reminding the user what feels like to be in an interactive class room.

• All features are dynamic and fully operational (a part from "See More News", "See More Curses" buttons, and "Newsletter" - under construction, they will be released on the next webpage upgrade).

• Once the main webpage (index.html) loads completely, the user will be presented to our very special professor "Lil Einstein" and will find the following contents:

  Header:

  1. "Test your Knowledge" Button: presents a customized button that leads the user to the next page "gamequestions.html" to start the Trivia game;

  Body:

  1. Column 1 (one) - Front End News: presents the news from our Front End team ("See More News" button is under construction, please wait for upgrade!!);
  2. Column 2 (two) - Back End News: presents the news from our Front End team ("See More News" button is under construction, please wait for upgrade!!);
  3. Column 3 (three) - Never-End Curses: presents all troubles and "curses" faced by our team while making this webpage what it is now ("See More Curses" button is under construction, please wait for upgrade!!);

  Footer:

  1. Column 1 (one) - Contact Us: presents information regarding our facilities;
  2. Column 2 (two) - Social Media: presents our GitHub page for this project;
  3. Column 3 (three) - Featured Developers: presents all developers envolved with this project; and
  4. Column 4 (four) - Newsletter: presents a text field to the user subscribe to our newsletter and receive more updates ("Newsletter" is under construction, please wait for upgrade!!).

• On the Trivia webpage (gamequestions.html), the user will be presented with 15 dynamic questions on the Geography topic and the following contents:

  Initial Page:

  1. A simple explanation of how the game works;
  2. "Highscore" Button: presents a customized button that leads the user to the Highscore page;
  3. Timer: presents a customized timer although not operational at this point;
  4. "Let's Get Started!!" Button: presents a customized button that leads the user to the Trivia game itself;

  Once Trivia Game Started (Button clicked):

  1. Timer: the timer will start at 10 (ten) seconds and will be counting backwards to zero, the player will have only "10 (ten) seconds" to answer each question. After 10 seconds the player still able to answer. We give only 10 seconds just to put the player under pressure;
  2. "Highscore" Button: presents a customized button that leads the user to the Highscore page;
  3. Questions and Answers: the user will be presented to 1 (one) question and 4 (four) possible answers (all dynamic selected by an specific API #1 - "opentdb.com/api.php"), depending on the chosen answer, a notification will appear down bellow. If the answer is correct, the user will be presented with the flag of the country and its informations (provided by "restcountries.eu/rest/v2" API #2). Also will appear a "map button" that will lead the user to another webpage showing the map of that country (google.com/maps); and
  4. "Next Button": presents a customized button that leads the user to the next question of the Trivia game (PS.: The user must click on this button to go to following question).

• Once completed the questionnaire the user will be led to the Game Over webpage (gameover.html) and will find the following contents:

  Header:

  1. presents a customized sentence to show the user's total score (indicates the number of correct answers);

  Body:

  1. "Submit" Button: presents a customized button that allows the user to save the score of the game and leads to Highscore webpage (highscore.html);

• On the Trivia webpage (gamequestions.html), the user will be presented to 15 dynamic questions and the following contents:

  1. presents all the highscores from the user;
  2. "Return" Button: presents a customized button that leads the user to main webpage (index.html).

• Hope you enjoy it!!

Basic Informations:

• This app runs in the browser and features dynamically updated HTML and CSS powered by JavaScript/jQuery code. It also features a clean and polished user interface and it is responsive, adapting to multiple screen sizes.

Author:

• This app was design by 'ADRS'