Globalquiz

Web development Project

---

A trivia quiz web-app inspired on a well-known quiz website.

Made with HTML, CSS and Vanilla JS, it uses a mock API for making HTTP requests and control data.

     

---

Features

• Users can create their own quizzes
• Each quiz can have a least 3 questions (with as least 1 correct and 1 wrong answer) and 2 levels of success rate
• User own quizzes ID are stored in the localStorage
• Random answer options placement
• Visual feedback whether the user answered correctly or wrongly
• Quizzes stored on the server and loaded by API requests

Requirements

• General
  • Use Vanilla JavaScript only
  • The project must be stored in a public repository on GitHub
  • All pages/screens must be applied in the same HTML file, hiding the ones that are not supposed to appear
• Layout
  • Apply the mobile and desktop layout as provided on Figma
  • The laytouts should change from mobile to desktop when hiting the breakpoint of 1100px
• Screen 1: Quizzes list
  • On this screen, all quizzes received from the server must be listed
  • The user quizzes list must show only the user own quizzes. The "all quizzes list" must show all quizzes but the user's
  • The quizzes must appear in a rectangular format (as on the layout), with the image and title. The image must be under a black to transparent gradient. On clicking the quiz, this screen must be changed to the quiz screen
  • After clicking on "create quiz" or on the "+" button, this screen must be changed to the quiz creation screen
• Screen 2: Quiz page (questions)
  • On the top of the quiz, there must be a banner with the image and title of the quiz. The image must be overlapped by a black layer with 60% of opacity
  • The answers of each question must be placed randomly
  • After clicking on a answer option, the other options must receive a milky effect
  • The user can't change the answer by clicking again on other option
  • After answering, the options text must receive a color indicating whether is the correct of the wrong answer
  • 1.5 seconds after answering, the page must scroll automatically to the next question
• Screen 2: Quiz page (quiz end)
  • After answering all the questions, there must show the result of the quiz. Just like the behavior when answering a question, the page must scroll automatically to the result box after 1.5 seconds
  • The quiz score (percentage of right answer over the total number of questions) must be calculated on the front-end, and so the level of the user.
  • It must show the title, image and description of what level the user got by answering the questions
  • The score must be rounded to a integer number
  • If the user clicks on "restart quiz", the screen must be scroll to the top and all the answers should reset to the initial state. The result box should be hidden as well
  • If the user clicks on "go to the homepage", this screen must be hidden and changed to the home screen
• Screen 3: Quiz creation
  • The quiz creation process must pass through 4 screens, as on the provided layout on Figma:
    • Screen 3.1: Quiz basic info
    • Screen 3.2: Quiz questions
    • Screen 3.3: Quiz levels
    • Screen 3.4: Quiz results
  • On each step, all inputs must be validated, as the following rules:
    • Quiz basic info
      • Title: must have from 20 to 65 characters
      • Image: must be an URL format
      • Number of questions: at least 3 questions
      • Number of levels: at least 2 levels
    • Quiz questions
      • Question text: at least 20 characters
      • Background color: must be an hexadecimal color (starting with "#", followed by 6 hex characters)Cor de fundo: deve ser uma cor em hexadecimal symbols (from 0 to F)
      • Answer text: must not be empty
      • Image: must be an URL format
      • At least 1 correct answer and 1 wrong answer must be filled in. Is allowed to have questions with just 2 answer options.
    • Quiz levels
      • Title: at least 10 characters
      • Minimum right answer %: a number between 0 and 100
      • Image: must be an URL format
      • Level description: at least 30 characters
      • there must be at least one level where the minimum % is 0%
  • If any validation fails, an alert must be shown asking to the user fill the inputs correctly
  • After finishing the quiz creation and saving it in the server, the user must see the quizz creation success screen. In the screen, the user can click on the quiz to visualize it or go back to the home screen
  • When the user returns to the home screen, it must load all new quizzes, including the newly created one
• User quizzes
  • When creating a quiz, the server will respond the request with the created object, including the ID of the quiz
  • The ID must be stored on the localStorage to differentiate which quizzes belong to that user
• Deploy
  • Deploy the project on GitHub Pages

Built with

Contact