App Estudos

Uma aplicação web simples voltada para organização de estudos e prática de quizzes. Permite ao usuário criar matérias, cadastrar perguntas de diferentes tipos (múltipla escolha, verdadeiro/falso, preencher lacunas), realizar quizzes com base nas perguntas cadastradas, acompanhar o histórico de resultados e exportar/importar dados. Todo o armazenamento é feito no localStorage do navegador, sem necessidade de servidor ou banco de dados externo.

---

Índice

• App Estudos
  • Índice
  • Funcionalidades
  • Tecnologias Utilizadas
  • Estrutura de Pastas
  • Como Executar Localmente

---

Funcionalidades

1. Cadastro de Matérias

   • Criar, editar e remover matérias (por exemplo: Matemática, História, Biologia).
   • Cada matéria recebe um identificador único (id) e um nome.

2. Cadastro de Perguntas

   • Para cada matéria, é possível adicionar perguntas de 3 tipos:
     • Múltipla escolha (4 opções e única resposta correta).
     • Verdadeiro ou falso.
     • Preencher lacunas (o usuário deve digitar a palavra ou frase correta).
   • Editar e remover perguntas existentes.

3. Realização de Quiz

   • Selecionar uma matéria e iniciar um quiz que embaralha as perguntas cadastradas.
   • Ao finalizar, exibe número de acertos, número total de perguntas e porcentagem de acerto.

4. Histórico e Estatísticas

   • Cada vez que um quiz é concluído, o resultado (data, matéria, acertos/total) é registrado.
   • Na seção “Meu Progresso”, exibe:
     • Estatísticas por matéria (número total de quizzes realizados, acertos totais, porcentagem média).
     • Lista cronológica de todos os quizzes feitos, mostrando data, matéria e pontuação.

5. Exportar/Importar Dados

   • Exportar dados completos em JSON (inclui todas as matérias, perguntas e histórico).
   • Exportar matéria específica selecionada em JSON (apenas a matéria e suas perguntas).
   • Importar dados completos a partir de um arquivo JSON válido, substituindo o estado atual.
   • Importar matéria específica a partir de JSON, adicionando ou sobrescrevendo a matéria por id.
   • Limpar todos os dados do localStorage, resetando o app ao estado inicial.

6. Armazenamento Local

   • Toda a base de dados fica salva no localStorage do navegador, sem backend.
   • Ao abrir a página, o app carrega automaticamente os dados salvos e popula a interface.

7. Deploy Estático

   • Pode ser hospedado em GitHub Pages (ou outro serviço de arquivos estáticos).
   • Basta apontar para index.html na raiz do repositório.

---

Tecnologias Utilizadas

• HTML5
• CSS3 (com style.css na pasta /css)
• JavaScript (ES6+) (com script.js na pasta /js)
• Git & GitHub (controle de versão e deploy via GitHub Pages)

Observação: não há uso de frameworks ou bibliotecas externas — tudo foi implementado em JavaScript “puro” (vanilla JS).

---

Estrutura de Pastas

app-estudos/ ├── index.html ├── css/ │ └── style.css └── js/ └── script.js

1. index.html

   • Documento principal que carrega a interface (formularios, seções de “Gerenciar Matérias”, “Gerenciar Perguntas”, “Quiz”, “Meu Progresso” e “Configurações”).

2. css/style.css

   • Arquivo de estilos: layout responsivo, cores, espaçamentos, posicionamento de botões e formulários.

3. js/script.js

   • Lógica completa da aplicação:
     • Funções de inicialização (carregarBD() e salvarBD()).
     • Manipulação de DOM para renderizar listas de matérias, perguntas, formulário de quiz, histórico.
     • Listeners de eventos (submit de formulários, cliques, arquivos de importação).
     • Exportação/importação de JSON.
     • Controle de visibilidade das diferentes seções da UI.

---

Como Executar Localmente

1. Clone este repositório (ou baixe o ZIP e extraia):

   git clone https://github.com/louiseluli/app-estudos.git
   Entre na pasta do projeto:
   cd app-estudos
   Abra o arquivo index.html em um navegador
   No macOS ou Linux, você pode dar um duplo clique no index.html ou executar:
   open index.html
   No Windows, basta clicar em “Abrir com” → “Google Chrome” (ou outro navegador).
   O aplicativo carregará e já mostrará os dados salvos no seu navegador, se houver. Caso seja a primeira vez, estará tudo vazio.
   Importante: por usar localStorage, não é necessário servidor HTTP. Mas, se você quiser simular um servidor local, pode usar extensões como “Live Server” no VSCode ou rodar:
   npx http-server .
   e acessar http://localhost:8080.
   Uso da Aplicação
   

2. Gerenciar Matérias Na seção “Gerenciar Matérias”, digite o nome da nova matéria e clique em Adicionar. A matéria aparece na lista abaixo, com botões para editar (✏️) e remover (🗑️). Editar: altera apenas o nome da matéria. Remover: apaga a matéria e todas as perguntas associadas. Clique no nome da matéria (texto clicável) para acessar o gerenciador de perguntas dessa matéria.

3. Gerenciar Perguntas Após selecionar uma matéria, a seção “Gerenciar Perguntas” se torna visível. No formulário, escolha o tipo de pergunta: Múltipla Escolha: aparecerão 4 campos de opção (A, B, C, D) e radio buttons para marcar a opção correta. Verdadeiro/Falso: dois radio buttons (Verdadeiro ou Falso). Preencher Lacunas: um campo para inserir a resposta correta. Digite o enunciado da pergunta e todas as informações específicas (opções ou lacuna). Clique em Adicionar Pergunta. A lista de perguntas da matéria é atualizada logo abaixo. Para remover uma pergunta, clique no ícone de lixeira ao lado dela (se implementado). Para voltar à lista de matérias, clique em um botão “Voltar” ou semelhante (caso exista).

4. Realizar Quiz Na seção principal, clique no botão Iniciar Quiz (ou equivalente). Selecione a matéria desejada a partir de um dropdown ou lista. O quiz exibirá cada pergunta em sequência: Múltipla Escolha: radio buttons com 4 alternativas. Verdadeiro/Falso: botões ou radio. Preencher Lacunas: campo de texto para digitar a resposta. Ao final, clique em Concluir Quiz. A aplicação calcula: Número de acertos. Número total de perguntas. Porcentagem de acerto. Os resultados são exibidos na tela e salvos no histórico.

5. Acompanhar Histórico e Estatísticas Na seção “Meu Progresso” (ou similar), você verá duas áreas principais: Estatísticas por Matéria Exibe, para cada matéria que já teve quizzes: Quantidade de quizzes realizados. Total de acertos vs. total de perguntas. Porcentagem média de acerto. Histórico de Quizzes Lista cronológica (mais recentes no topo) de todos os quizzes feitos, com data e pontuação. A cada novo quiz concluído, o histórico é atualizado automaticamente.

6. Exportar/Importar Dados Exportar Dados Completos Clique em “Exportar Dados”. Será baixado um arquivo app-estudos-dados.json contendo todo o estado atual (matérias, perguntas e histórico). Exportar Matéria Específica Selecione primeiro uma matéria (clicando em seu nome). Clique em “Exportar Matérias Específicas”. Será baixado um JSON com apenas a matéria selecionada e suas perguntas. Importar Dados Completos Clique em “Importar Dados” e selecione um arquivo .json válido (gerado previamente por “Exportar Dados”). Ao confirmar, o estado atual do app será substituído pelos dados do arquivo. A página recarrega ou atualiza automaticamente as listas de matérias e histórico. Importar Matéria Específica Clique em “Importar Matérias” (label que abre um diálogo de ). Selecione um JSON que contenha apenas uma matéria (formato compatível). Essa matéria será adicionada (ou sobrescrita, se já existir id igual) ao localStorage. A lista de matérias é atualizada para mostrar a nova matéria. Limpar Todos os Dados Clique em “Limpar Todos os Dados”. O localStorage é completamente apagado e o app volta ao estado inicial (sem matérias, sem histórico). Confirmação é solicitada antes de apagar. Deploy no GitHub Pages

Se você desejar que o app fique disponível na web (online), basta usar o GitHub Pages:

Verifique que seu repositório contenha, na branch main, os seguintes arquivos na raiz: index.html Pasta css/ (com style.css) Pasta js/ (com script.js) No GitHub, acesse: https://github.com/louiseluli/app-estudos Clique em Settings (ícone de engrenagem no topo). No menu da esquerda, selecione Pages. Em “Build and deployment”, em Source, escolha: Branch: main Folder: / (root) Clique em Save. Aguarde alguns segundos. Aparecerá uma mensagem “Your site is published at https://louiseluli.github.io/app-estudos/”. Acesse o link e você verá o app funcionando online, com o mesmo comportamento que localmente. Como Contribuir

Faça um fork deste repositório. Crie uma branch para sua feature ou correção: git checkout -b minha-feature Faça commits incrementais e descritivos: git add . git commit -m "Descrição breve da mudança" Envie (push) sua branch ao seu fork no GitHub: git push origin minha-feature Abra um Pull Request neste repositório principal (louiseluli/app-estudos) descrevendo as alterações propostas. Aguarde revisão e feedback. Após aprovação, sua contribuição será incorporada! Licença

Este projeto está licenciado sob a MIT License. Sinta-se à vontade para copiar, modificar e distribuir este código, desde que mantenha o aviso de licença original. Consulte o arquivo LICENSE para detalhes completos.