Havaianas Quiz – Totem Touch

Projeto interativo desenvolvido para um evento de apresentação da marca Havaianas. Trata-se de um aplicativo em HTML/CSS/JS otimizado para execução em totem touch vertical (1080x1920), rodando localmente via Apache (XAMPP). O app oferece uma experiência divertida e responsiva de quiz interativo, com animações suaves e interface amigável.

📋 Funcionalidades

• Interface inicial com menu de início
• Quiz com múltiplas questões interativas
• Tela final de brinde para premiar os participantes
• Suporte total ao toque (touchscreen)
• Animações dinâmicas com anime.js

🛠 Tecnologias Utilizadas

• HTML5 + CSS3
• JavaScript (puro)
• Anime.js para animações
• XAMPP / Apache para ambiente local

📱 Layout

• Resolução: 1080x1920 pixels
• Orientação: vertical (portrait)
• Design adaptado para totens interativos touchscreen

🚀 Como Rodar o Projeto

1. Instale o XAMPP
2. Copie os arquivos do projeto para a pasta htdocs (ex: C:\xampp\htdocs\havaianas-quiz)
3. Inicie o Apache pelo painel do XAMPP
4. Acesse no navegador:
   http://localhost/havaianas-quiz/index.html
5. O app será executado em tela cheia no formato vertical

📊 Estrutura do Quiz via JSON

As questões do quiz são carregadas dinamicamente a partir do arquivo data.json, localizado na pasta /json.

📂 Caminho do arquivo

🧾 Estrutura do JSON

O JSON é organizado por etapas numeradas ("1", "2", etc.), cada uma contendo:

• question: Texto da pergunta
• alternatives: Lista de alternativas, cada uma com:
  • text: Texto da opção
  • image: Caminho da imagem da opção
• correctAnswerIndex: Array com os índices das alternativas corretas (permite múltiplas respostas)

📌 Exemplo:

{
  "1": [
    {
      "question": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies neque dolor?",
      "alternatives": [
        { "text": "Lorem ipsum 1", "image": "./assets/quiz/1/alternative-1.png" },
        { "text": "Lorem ipsum 2", "image": "./assets/quiz/1/alternative-2.png" },
        { "text": "Lorem ipsum 3", "image": "./assets/quiz/1/alternative-3.png" },
        { "text": "Lorem ipsum 4", "image": "./assets/quiz/1/alternative-4.png" },
        { "text": "Lorem ipsum 5", "image": "./assets/quiz/1/alternative-5.png" },
        { "text": "Lorem ipsum 6", "image": "./assets/quiz/1/alternative-6.png" },
        { "text": "Lorem ipsum 7", "image": "./assets/quiz/1/alternative-7.png" },
        { "text": "Lorem ipsum 8", "image": "./assets/quiz/1/alternative-8.png" }
      ],
      "correctAnswerIndex": [1, 2, 3, 4]
    }
  ],

  "2": [
    {
      "question": "Integer feugiat massa non ante lobortis, ut viverra tellus vestibulum. Suspendisse?",
      "alternatives": [
        { "text": "Lorem ipsum 1", "image": "./assets/quiz/1/alternative-3.png" },
        { "text": "Lorem ipsum 2", "image": "./assets/quiz/1/alternative-1.png" },
        { "text": "Lorem ipsum 3", "image": "./assets/quiz/1/alternative-2.png" },
        { "text": "Lorem ipsum 4", "image": "./assets/quiz/1/alternative-4.png" },
        { "text": "Lorem ipsum 5", "image": "./assets/quiz/1/alternative-5.png" },
        { "text": "Lorem ipsum 6", "image": "./assets/quiz/1/alternative-6.png" },
        { "text": "Lorem ipsum 7", "image": "./assets/quiz/1/alternative-7.png" },
        { "text": "Lorem ipsum 8", "image": "./assets/quiz/1/alternative-10.png" }
      ],
      "correctAnswerIndex": [1, 2, 3, 4]
    }
  ]
}

✅ Para adicionar novas perguntas ou alterar o conteúdo, basta editar o arquivo data.json mantendo a mesma estrutura.

📸 Capturas de Tela

Tela Inicial

Quiz

Tela de Brinde

🙋‍♂️ Autor

Feito por Henrique Rodrigues