Incrível Quiz 🚀

---

Próximo Passo

• personalizar layout para determinado tema
• tornar um quiz multiplayer
• pesquisar sobre socket.io
• pesquisar sobre incorporar em uma spa estilizada

Identidade Visual

• IV DGC (Desafio Global do Conhecimento)
• III DGC (Desafio Global do Conhecimento)
• logo e banner
  

Inspiração

• Inspiração - Introducing a Multiplayer Quiz App Built on Salesforce Technology
• Inspiração - Introducing a Multiplayer Quiz App Built on Salesforce Technology
• Inspiração - Introducing a Multiplayer Quiz App Built on Salesforce Technology
• Inspiração - Introducing a Multiplayer Quiz App Built on Salesforce Technology
• Inspiração - Introducing a Multiplayer Quiz App Built on Salesforce Technology
• Inspiração - Tutorial: how to build a multi-player quiz app with Sails.js
• Inspiração - Tutorial: how to build a multi-player quiz app with Sails.js
• Inspiração - multiplayer quiz app architecture - Ably
• Inspiração - multiplayer quiz app architecture - Ably
• Inspiração - multiplayer quiz app architecture - Ably

---

versão 2.0 - Sobre projeto

• Utilizar esse quiz em um evento escolar entre escolas.
• Serão três equipes que responderão cada uma equipe com o seu tablet/smartphone.
• Ser possível visualizar a pontuação de cada equipe.
• Montar um ambiente semelhante ao programa passa ou repassa.

Inspiração

• Inspiração - Create a Quiz App with Timer using HTML CSS & JavaScript | Quiz Web App using JavaScript
• Inspiração - Create a Quiz App with Timer using HTML CSS & JavaScript | Quiz Web App using JavaScript
• Inspiração - Create a Quiz App with Timer using HTML CSS & JavaScript | Quiz Web App using JavaScript

Tarefas

• Página Home: botão jogar o quiz e o maiores pontuações
• Estilização da página maiores pontuações
• Componente Loader para as transições de páginas com requisição e com timer
• Página Quiz - Adicionar a pontuação em tempo real
• Página Quiz - Adicionar letras para identificar opção de respostas
• Página Quiz - Adicionar barra de progresso de questões a responder: desisit de inserir uma segunda barra de progresso na tela.
• Página End - Salvar Pontuação
• Estilização da página Salvar Pontuação
• Ajustar requisição das questões com um file js: usar as questões no arquivo json como fonte e passar para o padrão.
• Ajustar requisição das questões com json: usar como fonte de questões

Telas

Correções

• exibir questão certa quando o tempo termina quando não respondido
• corrigir o link de ir para home na página maiores pontuações

---

versão 1.0 - Sobre projeto

• Um quiz que consome as questões da api Open Trivia DB API.
• Salva os ponto no Local Storage.
• Utiliza uma progress bar para as perguntas, uma spinning loader icon construída manualmente, os elementos do HTML gerados dinamicamente com JS.

Tecnologias / Detalhes

• JS
• HTML/CSS
• Git e GitHub
• VSCode
• Fonte do projeto: James Quick - Build a Quiz App with HTML CSS Javascript - Udemy

Passo a passo do projeto

• 1. Introduction and Resources.
• 2. Create and Style the home page .
• 3. Extensions: Live Server 5.6.1 : in index.html, click in the Open with Live Server, então http://127.0.0.1:5500/index.html
• 3.b. CSS-tricks: rem for global sizing and rem for local sizing.
• 4. Create and style the game page.
• 5.1. Display hard coded questions and answers.
• 5.2. Display feedback for Correct / Incorrect Answers.
• 6. Create Head's up display (HUD).
• 7. Create a progress bar.
• 8. Create and style The End page.
• 9. Save High Scores in Local Storage.
• 10. Load and Display High Scores from Local Storage.
• 11. Fetch API to Load Questions from Local Json file.
• 12.1. Fetch API to Load Questions from Open Trivia DB API
• 12.2. fetch: 50, history, easy, multiple choice, default encoding: https://opentdb.com/api.php?amount=50&category=23&difficulty=easy&type=multiple
• 12.3. json: 50, general knowledge, easy, multiple choice, default encoding: https://opentdb.com/api.php?amount=50&category=9&difficulty=easy&type=multiple
• 12.4. json: 50, animals, easy, multiple choice, default encoding: https://opentdb.com/api.php?amount=50&category=27&difficulty=easy&type=multiple
• 12.5. json: 50, science computers, easy, multiple choice, default encoding: https://opentdb.com/api.php?amount=50&category=18&difficulty=easy&type=multiple
• 12.6. https://opentdb.com/
• 13. Create a Spinning Loader.
• 14. Closing

Telas

• Hospedado

Melhorias na nova versão atual

• Número de questões de três para 30
• Número de questões do banco de questões de 10 para 50
• Usando Url Api, o máximo do banco de questões é 50
• Usando Local File, não há máximo do banco de questões. Basta configurar o arquivo json
• Usando Local File, há 100 questões no banco de questões

Melhorias cumpridas

• Responsividade
• Incorporar questões via json
• Exibir a categoria da questão
• Corrigir caracteres no json

Manipular dados com Json

• Requisição de dados da url api

/* Local TRIVIA : url > category: history*/
fetch("https://opentdb.com/api.php?amount=50&category=23&difficulty=easy&type=multiple")
  .then((response) => {
    return response.json();
  })
  .then((loadedQuestionsUrlApi) => console.log("url api", loadedQuestionsUrlApi.results));

• Carregar dados do local file

/*Local JSON file : questions.json > category: General Knowledge*/
fetch("./../json/questions.json")
  .then((response) => {
    return response.json();
  })
  .then((loadedQuestionsFile) => console.log("local file", loadedQuestionsFile.results));

---

.: Por Douglas A B Novato