User/Screen Flow e Protótipo interativo

Artefatos relacionados com a interface e a interacão do usuário na solução proposta. Info

https://www.figma.com/design/3vGfD6p9A23SUeio2GA5os/Untitled?node-id=0-1&t=9nU6sQ62B7SNBGG2-0

Wireframes

Protótipo de telas do sistema em baixa fidelidade (rascunhos). Info

https://www.figma.com/design/3vGfD6p9A23SUeio2GA5os/Untitled?node-id=0-1&t=9nU6sQ62B7SNBGG2-0.

Funcionalidades Implementadas no Projeto

1. Atualização de Perfil

   Implementamos funcionalidades de atualização de perfil utilizando códigos em JavaScript, adaptados para a estrutura de dados específica do projeto. Além disso, foram criadas operações CRUD para permitir a edição dos dados do perfil do usuário diretamente através de scripts.

2. Seleção de Tópicos de Educação Financeira

   Utilizamos um escutador de evento em JavaScript para armazenar o tópico escolhido pelo usuário no início da jornada na aplicação. Essas informações são inseridas no JSON do usuário para personalização da experiência.

3. Progresso das Missões Diárias

   Implementamos missões diárias que oferecem recompensas aos usuários que as completam dentro do prazo de um dia. Isso visa aumentar o engajamento dos usuários na plataforma.

4. Progresso dos Capítulos

   Criamos uma barra de progresso que indica o avanço do usuário dentro de cada capítulo. Essa barra é atualizada dinamicamente com base na proporção de fases concluídas em relação ao total no script correspondente.

5. Moedas (GranaCoins)

   Implementamos um sistema de moedas virtuais chamadas GranaCoins, armazenadas no JSON do usuário. Essas moedas são adquiridas através da conclusão de missões e acertos de questões, sendo essenciais para a compra de capítulos bloqueados na aplicação.

6. Compra de Capítulos

   Os capítulos são adquiridos através da compra utilizando as GranaCoins do usuário. Após a compra, as moedas são reduzidas no JSON do usuário e o capítulo subsequente é desbloqueado para jogabilidade.

7. Pop-up de Questões

   Implementamos uma estrutura de pop-up que exibe informações relevantes ao usuário ao passar o mouse sobre ela, proporcionando uma experiência interativa e informativa durante o uso da aplicação.

8. Visualização Fases

   As fases alteram o "lado" em que aparecem de acordo com que a capítulo é ímpar ou par, feito com JavaScript.

9. Mapa de Fases

   Nosso mapa de fases é totalmente iterativo com o JSON de fases, onde já tem uma estilização pré-definida e de acordo com que é adicionado capítulos, descrição e suas fases.

10. Quiz

    Já no quiz, temos uma estrutura também, onde é conectado com o JSON de questões, conta as questões em sequeência acertadas pelo usuário, adicionando também nossas moedas que são nossa forma de recompensa ao usuário.

Estrutura de Dados - Login e Cadastro

Funcionalidades do perfil

                  currentUser = {
                    id: userId,
                    username: username,
                    nome: nome,
                    email: email,
                    coins: 0,
                    selectedTopic: selectedTopic,
                    consecutive_answers: 0,
                    chapters: [
                        {
                            chapter_id: 1,
                            unlocked: true,
                            tasks: [
                                { task_id: 1, name: "Introduction to Credit", completed: false, questions: [] },
                                { task_id: 2, name: "Types of Credit", completed: false, questions: [] },
                                { task_id: 3, name: "How Credit Works", completed: false, questions: [] },
                                { task_id: 4, name: "Benefits of Credit", completed: false, questions: [] }
                            ]
                        },
                        {
                            chapter_id: 2,
                            unlocked: false,
                            tasks: [
                                { task_id: 1, name: "Understanding Credit Scores", completed: false, questions: [] },
                                { task_id: 2, name: "Improving Your Credit Score", completed: false, questions: [] },
                                { task_id: 3, name: "Credit Score Myths", completed: false, questions: [] },
                                { task_id: 4, name: "Maintaining a Good Credit Score", completed: false, questions: [] }
                            ]
                        },
                        {
                            chapter_id: 3,
                            unlocked: false,
                            tasks: [
                                { task_id: 1, name: "Applying for Credit", completed: false, questions: [] },
                                { task_id: 2, name: "Choosing the Right Credit Card", completed: false, questions: [] },
                                { task_id: 3, name: "Credit Card Benefits", completed: false, questions: [] },
                                { task_id: 4, name: "Managing Credit Card Debt", completed: false, questions: [] }
                            ]
                        },
                        {
                            chapter_id: 4,
                            unlocked: false,
                            tasks: [
                                { task_id: 1, name: "Credit Reports", completed: false, questions: [] },
                                { task_id: 2, name: "Disputing Errors on Credit Report", completed: false, questions: [] },
                                { task_id: 3, name: "Understanding Credit Report Terms", completed: false, questions: [] }
                            ]
                        },
                        {
                            chapter_id: 5,
                            unlocked: false,
                            tasks: [
                                { task_id: 1, name: "Credit Counseling", completed: false, questions: [] },
                                { task_id: 2, name: "Debt Management Plans", completed: false, questions: [] },
                                { task_id: 3, name: "Avoiding Credit Scams", completed: false, questions: [] }
                            ]
                        }
                    ]
                }
                

Estrutura de Dados - Questões

Funcionalidades de progresso das fases

                  "fases": [
              
                "titulo": "O que é Crédito",
                "texto" : "O crédito é a permissão dada por uma instituição financeira para que uma pessoa utilize temporariamente fundos que não são seus, com a promessa de devolver esse dinheiro futuramente, geralmente com o acréscimo de juros.
Existem diversos tipos de crédito, cada um com suas características específicas e finalidades. Um exemplo importante é o crédito ao consumidor, que é um tipo de financiamento oferecido a indivíduos para a compra de bens e serviços de consumo. Esse crédito permite que os consumidores adquiram produtos imediatamente e paguem o valor ao longo do tempo.",
                "questoes": [
                  {
                    "Idquest": 1,
                    "text": "O que é crédito?",
                    "respostas": [
                      {
                        "text": "Um tipo de imposto.",
                        "correta": false
                      },
                      {
                        "text": "Ato de fornecer recursos a alguém, sob a promessa de reembolso futuro.",
                        "correta": true
                      },
                      {
                        "text": "Uma conta bancária especial.",
                        "correta": false
                      },
                      {
                        "text": "Uma doação sem necessidade de reembolso.",
                        "correta": false
                      }
                    ]
                  },
                  {
                    "Idquest": 2,
                    "text": "Qual é um exemplo de crédito ao consumidor?",
                    "respostas": [
                      {
                        "text": "Uma doação caritativa.",
                        "correta": false
                      },
                      {
                        "text": "Um investimento em ações.",
                        "correta": false
                      },
                      {
                        "text": "A abertura de uma conta poupança.",
                        "correta": false
                      },
                      {
                        "text": "Um empréstimo para compra de um carro.",
                        "correta": true
                      }
                    ]
                  },
                  {
                    "Idquest": 3,
                    "text": "Qual a principal vantagem do crédito?",
                    "respostas": [
                      {
                        "text": "Aumentar automaticamente sua renda.",
                        "correta": false
                      },
                      {
                        "text": "Permitir que você compre algo agora e pague depois.",
                        "correta": true
                      },
                      {
                        "text": "Garantir que você não pague juros.",
                        "correta": false
                      },
                      {
                        "text": "Impedir o endividamento.",
                        "correta": false
                      }
                    ]
                  }
                ]