Listar as perguntas e validar. Aula 4 na imersão React da Alura

db.json

@@ -5,25 +5,95 @@
  "description": "Teste os seus conhecimentos sobre inclusão e acessibilidade na tecnologia. Pronto para jogar?",
  "questions": [
  {
- "image": "https://media.giphy.com/media/xUOxf3yDKCuwpOlT3i/giphy.gif",
- "title": "Como fazer um seletor por id via CSS?",
- "description": "Essa é pra aquecer",
+ "image": "/question1.gif",
+ "title": "O que são os conceitos de acessibilidade e inclusão social?",
+ "description": "Essa é pra aquecer, vamos lá!",
+ "answer": 0,
+ "alternatives": [
+ "Participação de todas as pessoas nos vários âmbitos da vida social",
+ "Maneira tradicional de tratar isoladamente o trânsito",
+ "Usar a hashtag #PraCegoVer",
+ "Usar pronome neutro"
+ ]
+ },
+ {
+ "image": "/question2.gif",
+ "title": "Devemos pensar em acessibilidade somente quando falamos sobre o acesso das pessoas cadeirantes e cegas?",
+ "description": "Tenho certeza que já sabe a resposta!",
+ "answer": 1,
+ "alternatives": [
+ "Sim",
+ "Não"
+ ]
+ },
+ {
+ "image": "/question3.gif",
+ "title": "Qual a porcentagem (%) da população brasileira que tem algum tipo de deficiência física ou cognitiva?",
+ "description": "Vamos começar a dificultar um pouco as perguntas, está pronto?!",
  "answer": 2,
  "alternatives": [
- ".elemento",
- "*elemento",
- "#elemento",
- "%elemento"
+ "7%",
+ "18%",
+ "25%",
+ "42%"
+ ]
+ },
+ {
+ "image": "/question4.gif",
+ "title": "Devemos pensar em acessibilidade no mundo técnológico? Como no desenvolvimento de novos aplicativos, soluções corporativas, dispositivos físicos e outros?",
+ "description": "Pergunta para abrir a mente",
+ "answer": 0,
+ "alternatives": [
+ "Sim",
+ "Não"
+ ]
+ },
+ {
+ "image": "/question5.gif",
+ "title": "Qual o termo correto para referir a uma pessoa com algum tipo de deficiência física ou cognitiva?",
+ "description": "É o mais aceito, no entanto talvez no futuro possa não ser mais.",
+ "answer": 3,
+ "alternatives": [
+ "pessoas com necessidades especiais (PNE)",
+ "Pessoa com problema (PCP)",
+ "Portador (PP)",
+ "Pessoa com deficiência (PCD)"
+ ]
+ },
+ {
+ "image": "/question6.gif",
+ "title": "Qual item abaixo NÃO é uma deficiência, transtorno, síndrome ou particularidade:",
+ "description": "O ponto desta questão está de graça!",
+ "answer": 5,
+ "alternatives": [
+ "Autismo",
+ "Surdez",
+ "Dislexia",
+ "Baixa visão",
+ "Deficiência física",
+ "Preguiça"
+ ]
+ },
+ {
+ "image": "/question7.gif",
+ "title": "Em qual documentação encontraremos as orientações sobre como deixar nossas páginas web mais acessíveis?",
+ "description": "Vamos lá, caso não conhecer está tudo bem, mas como desenvolvedor Front-end você deve começar a utilizar.",
+ "answer": 1,
+ "alternatives": [
+ "Bootstrap Documentation",
+ "Web Content Accessibility Guidelines (WCAG)",
+ "Next Documentation",
+ "ECMA-262"
  ]
  },
  {
- "image": "https://media.giphy.com/media/13FrpeVH09Zrb2/giphy.gif",
- "title": "Como fazer um background gradiente com css?",
- "description": "Faz tempo em haha",
+ "image": "/question-final.gif",
+ "title": "Você vai começar a pensar, estudar e implementar a acessibilidade nos seus projetos futuros e ir alem?",
+ "description": "Essa é para encerrarmos, temos certeza que você foi bem!",
  "answer": 0,
  "alternatives": [
- "background: linear-gradient(#e66465, #9198e5);",
- "background: gradient(#e66465, #9198e5);"
+ "Sim, vou fazer isso!",
+ "Não, :("
  ]
  }
  ],

pages/_app.js

@@ -40,6 +40,7 @@ export default function App({ Component, pageProps }) {
  <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet" />
  <meta property="og:title" content="Imersão React2 - Alura Quiz - Ewerton Augusto" key="title" />
  <meta property="og:description" content="Imersão React2 da Alura, utlizando Next.JS com Styled Components para criação de um Quiz sobre inclusão na tecnologia e deploy na Vercel." />
+ <link rel="shortcut icon" href="/favicon.ico" />
  <meta property="og:image" content={db.bg} />
  </Head>
  <ThemeProvider theme={theme}>

pages/api/db.js

@@ -0,0 +1,13 @@
+import db from '../../db.json';
+
+export default function dbHandler(request, response) {
+ if (request.method === 'OPTIONS') {
+ response.status(200).end();
+ return;
+ }
+ response.setHeader('Access-Control-Allow-Credentials', true);
+ response.setHeader('Access-Control-Allow-Origin', '*');
+ response.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT');
+
+ response.json(db);
+}

pages/quiz.js

@@ -5,6 +5,7 @@ import QuizBackground from '../src/components/QuizBackground';
 import QuizContainer from '../src/components/QuizContainer';
 import Widget from '../src/components/Widget';
 import QuizImage from '../src/components/QuizImage';
+import AlternativesForm from '../src/components/AlternativesForm';
 import Button from '../src/components/Button';
 import Footer from '../src/components/Footer';
 import GitHubCorner from '../src/components/GitHubCorner';
@@ -14,56 +15,90 @@ function LoadingWidget() {
  return (
  <Widget>
  <Widget.Header>
- Carregando...
+ Carregando dados - {db.title}
  </Widget.Header>
+ <QuizImage src={'/loading.gif'} />
  <Widget.Content>
- [Desafio do loading...]
+ <p>Aguarde enquanto processamos as perguntas.</p>
  </Widget.Content>
  </Widget>
  );
 }
 
-function ResultWidget() {
+function ResultWidget({ results, nome }) {
  return (
  <Widget>
  <Widget.Header>
- Final de jogo!
+ <h1>{nome}</h1>
+ <p>Final de jogo. Parabéns pela participação!</p>
  </Widget.Header>
+ <QuizImage src={'/results.gif'} />
  <Widget.Content>
- Parabéns, você acertou X perguntas!!!
+ <p>
+ {`Parabéns, você acertou ${results.filter(currentResultTrue => currentResultTrue).length} perguntas!!!`}
+ </p>
+ <ul>
+ {results.map((result, i) => <li key={`result__${result}`}> {`#Pergunta ${i + 1}: ${result === true ? 'Acertou' : 'Errou'}`} </li>)}
+ </ul>
  </Widget.Content>
  </Widget>
  );
 }
 
-function QuestionWidget({ question, questionIndex, totalQuestions, name, onSubmit }) {
+function QuestionWidget({ question, questionIndex, totalQuestions, name, onSubmit, addResult }) {
  const questionId = `question_${questionIndex}`;
+ const [selectedAlternative, setSelectedAlternative] = React.useState(undefined);
+ const [isQuestionSubmited, setIsQuestionSubmited] = React.useState(false);
+ const hasAlternativeSelected = selectedAlternative !== undefined;
+ const isCorrect = selectedAlternative === question.answer;
+
  return (
  <Widget>
  <Widget.Header>
  <h1>{`Pergunta ${questionIndex + 1} de ${totalQuestions}`}</h1>
  </Widget.Header>
  <QuizImage src={question.image} />
  <Widget.Content>
- <form onSubmit={(e) => {
+ <AlternativesForm onSubmit={(e) => {
  e.preventDefault();
- onSubmit();
+ setIsQuestionSubmited(true);
+ setTimeout(() => {
+ addResult(isCorrect);
+ onSubmit();
+ setIsQuestionSubmited(false);
+ setSelectedAlternative(undefined);
+ }, 3 * 1000)
  }
  }>
  <h1>[Jogador: {name}]</h1>
  <h2>{question.title}</h2>
  <p>{question.description}</p>
  {question.alternatives.map((alternative, alternativeIndex) => {
  const alternativeId = `alternative_${alternativeIndex}`;
+ const alternativeStatus = isCorrect ? 'SUCCESS' : 'ERROR';
+ const isSelected = selectedAlternative === alternativeIndex;
+
  return (
- <Widget.Topic as="label" htmlFor={alternativeId}>
- <input id={alternativeId} type="radio" name={questionId} />
+ <Widget.Topic
+ as="label"
+ htmlFor={alternativeId}
+ key={alternativeId}
+ data-selected={isSelected}
+ data-status={alternativeStatus && isQuestionSubmited}
+ >
+ <input
+ style={{ display: 'none' }}
+ id={alternativeId}
+ type="radio"
+ name={questionId}
+ onChange={() => setSelectedAlternative(alternativeIndex)}
+ />
  {alternative}
  </Widget.Topic>
  );
  })}
- <Button type="submit"> Confirmar </Button>
- </form>
+ <Button type="submit" disabled={!hasAlternativeSelected}> Confirmar </Button>
+ </AlternativesForm>
  </Widget.Content>
  </Widget>
  );
@@ -79,18 +114,23 @@ export default function QuizPage() {
  const router = useRouter();
  const { name } = router.query;
 
+ const [results, setresults] = React.useState([]);
  const [screenState, setScreenState] = React.useState(screenStates.LOADING);
  const totalQuestions = db.questions.length;
  const [questionIndex, setQuestionIndex] = React.useState(0);
  const question = db.questions[questionIndex];
 
+ const addResult = (result) => {
+ setresults([...results, result]);
+ }
+
  React.useEffect(() => {
  setTimeout(() => setScreenState(screenStates.QUIZ), 1 * 1000);
  }, []);
 
  function handleSubmitQuiz() {
  const nextQuestion = questionIndex + 1;
- nextQuestion < totalQuestions?setQuestionIndex(nextQuestion):setScreenState(screenStates.RESULT);
+ nextQuestion < totalQuestions ? setQuestionIndex(nextQuestion) : setScreenState(screenStates.RESULT);
  }
 
  return (
@@ -104,11 +144,11 @@ export default function QuizPage() {
  questionIndex={questionIndex}
  totalQuestions={totalQuestions}
  onSubmit={handleSubmitQuiz}
+ addResult={addResult}
  />
  )}
  {screenState === screenStates.LOADING && <LoadingWidget />}
-
- {screenState === screenStates.RESULT && <ResultWidget />}
+ {screenState === screenStates.RESULT && <ResultWidget results={results} name={name} />}
  <Footer />
  </QuizContainer>
  <GitHubCorner projectUrl="https://github.com/ewerton-augusto" />

pages/quiz/[id].js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function QuizDaGalera(){
+ return(
+ <div>
+ Desafio da próxima aula com animações!
+ </div>
+ );
+}

src/components/AlternativesForm/index.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+const AlternativesForm = styled.form`
+ label {
+ &[data-selected="true"] {
+ background-color: ${({ theme }) => theme.colors.primary};
+
+ &[data-status="SUCCESS"] {
+ background-color: ${({ theme }) => theme.colors.success};
+ }
+ &[data-status="ERROR"] {
+ background-color: ${({ theme }) => theme.colors.wrong};
+ }
+ }
+ &:focus {
+ opacity: 1;
+ } 
+ }
+ button {
+ margin-top: 24px;
+ }
+`;
+
+export default AlternativesForm;