Quiz Com Svelte

VILHALVA

👨‍🏫APP DE ENQUETES QUIZ COM SVELTE E JSON.

#database #framework #json #projeto #site #svelte #css #javascript #nodejs #html

QUIZ COM SVELTE

👨‍🏫APP DE ENQUETES QUIZ COM SVELTE E JSON.

DESCRIÇÃO:

Este aplicativo é um quiz interativo desenvolvido com o framework Svelte. Ele permite aos usuários responderem uma série de perguntas e receberem uma pontuação com base em suas respostas. O grande diferencial é a flexibilidade oferecida pela integração com o arquivo QUESTOES.json, que permite personalizar facilmente as perguntas e respostas de acordo com as necessidades do usuário.

FUNCIONALIDADES:

Personalização das Perguntas e Respostas:
- O aplicativo lê as perguntas e opções de resposta de um arquivo JSON chamado QUESTOES.json.
- Este arquivo JSON pode ser facilmente modificado para incluir novas perguntas, alterar as opções de resposta e ajustar o índice da resposta correta para cada pergunta.
Interface de Usuário Intuitiva:
- A interface do usuário é limpa e fácil de usar.
- Os usuários podem iniciar o quiz clicando em um botão "Iniciar" e navegar pelas perguntas usando botões de navegação.
Feedback:
- A pontuação é calculada automaticamente com base nas respostas corretas e incorretas.
Capacidade de Reiniciar o Quiz:
- Após concluir o quiz, os usuários têm a opção de reiniciá-lo clicando em um botão "Reiniciar".

EXECUTANDO O PROJETO:

Instalar as dependências do projeto:
- Execute o comando no diretório CODIGO/:
```
npm install
```
  Este comando instala todas as dependências listadas no arquivo package.json do seu projeto.
Executando o Aplicativo:
- Ainda no diretório CODIGO/, abra o terminal ou prompt de comando e digite o seguinte comando:
```
npm run dev
```
- Acesse o aplicativo no navegador visitando http://localhost:8080/.
Usando o APP:
1. Iniciar o Quiz: Ao carregar a página, você verá um botão "INICIAR". Clique neste botão para começar o quiz.
2. Responder às perguntas: Após clicar em "INICIAR", você será apresentado com uma série de perguntas. Leia cada pergunta cuidadosamente e escolha a resposta que você acredita ser correta. Clique no botão correspondente à sua escolha.
3. Navegar pelas perguntas: Você pode navegar entre as perguntas clicando nos botões "<" e ">" na parte inferior da tela. Isso permite que você revise suas respostas ou pule para a próxima pergunta.
4. Finalizar o Quiz: Depois de responder a todas as perguntas, você verá sua pontuação total exibida na tela. Você também terá a opção de reiniciar o quiz clicando no botão "REINICIAR".
Gerenciando o QUESTOES.json: Para gerenciar o QUESTOES.json em ./CODIGO/public, é essencial entender o papel do campo "correctIndex" em cada pergunta. Este campo indica o índice da opção correta dentro da lista de opções fornecida para cada pergunta. Aqui está um exemplo prático de como entender e usar o "correctIndex": 2:

Suponha que tenhamos a seguinte pergunta no arquivo QUESTOES.json:
```
{
   "question": "Qual é a capital do Brasil?",
   "options": ["Rio de Janeiro", "Brasília", "São Paulo", "Belo Horizonte"],
   "correctIndex": 1
}
```
Nesta pergunta, as opções fornecidas são "Rio de Janeiro", "Brasília", "São Paulo" e "Belo Horizonte". O campo "correctIndex": 1 indica que a opção correta é "Brasília", que está no índice 1 da lista de opções.
- question: Esta chave contém a pergunta do quiz.
- options: Aqui são listadas as opções de resposta para a pergunta.
- correctIndex: Indica o índice da opção correta dentro do array de opções. Lembre-se de que os índices em JavaScript começam com 0.
- {...}: Cada questão no arquivo QUESTOES.json é representada por um objeto JSON, delimitado por chaves. Cada objeto contém os campos question, options e correctIndex.

NÃO SABE?

Entendemos que para manipular arquivos em HTML, CSS e outras linguagens relacionadas, é necessário possuir conhecimento nessas áreas. Para auxiliar nesse aprendizado, oferecemos cursos gratuitos disponíveis:

CREDITOS:

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing