Criar um aplicativo de quiz pode ser uma maneira divertida e educativa de envolver os usuários com sua marca, produto ou tópico de interesse.

E com a popularidade do Vue.js, um framework de JavaScript progressivo, pode ser uma escolha inteligente para desenvolver seu aplicativo.

Neste artigo, vamos explorar como criar um aplicativo de quiz com Vue.js.

1. Configuração do projeto

Antes de começar a codificar, você precisará configurar um ambiente de desenvolvimento Vue.js.

Certifique-se de ter o Node.js e o Vue CLI instalados em sua máquina. Em seguida, abra seu terminal e digite o seguinte comando:

vue create meu-quiz

Isso criará um novo projeto Vue.js chamado "meu-quiz". Em seguida, navegue até o diretório do projeto usando o comando:

cd meu-quiz

Criação do componente do quiz

O próximo passo é criar um componente para o quiz. No diretório "src/components", crie um novo arquivo chamado "Quiz.vue" e adicione o seguinte código:

<template>
  <div>
    <h1>{{ quiz.title }}</h1>
    <ul>
      <li v-for="question in quiz.questions" :key="question.id">
        {{ question.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Quiz',
  props: {
    quiz: {
      type: Object,
      required: true
    }
  }
}
</script>

Este componente do quiz renderiza o título do quiz e a lista de perguntas.

Observe que o componente espera receber um objeto quiz como uma propriedade.

3. Criação de um objeto quiz

Agora, precisamos criar um objeto quiz que possa ser passado para o componente do quiz.

No diretório "src", crie um novo arquivo chamado "quiz.js" e adicione o seguinte código:

export default {
  title: 'Meu Quiz',
  questions: [
    {
      id: 1,
      text: 'Qual é a capital do Brasil?',
      options: [
        { text: 'São Paulo', correct: false },
        { text: 'Rio de Janeiro', correct: false },
        { text: 'Brasília', correct: true },
        { text: 'Belo Horizonte', correct: false }
      ]
    },
    {
      id: 2,
      text: 'Quem pintou a Mona Lisa?',
      options: [
        { text: 'Pablo Picasso', correct: false },
        { text: 'Leonardo da Vinci', correct: true },
        { text: 'Vincent van Gogh', correct: false },
        { text: 'Salvador Dali', correct: false }
      ]
    },
    {
      id: 3,
      text: 'Qual é o maior país do mundo em área territorial?',
      options: [
        { text: 'Rússia', correct: true },
        { text: 'Canadá', correct: false },
        { text: 'China', correct: false },
        { text: 'Estados Unidos', correct: false }
      ]
    }
  ]
}

Este arquivo exporta um objeto quiz com um título e uma matriz de perguntas.

Cada pergunta tem um ID, um texto e uma matriz de opções, onde uma opção é a resposta correta.

4. Renderização do quiz

Agora, podemos usar o componente do quiz e o objeto quiz para renderizar o aplicativo.

No arquivo "App.vue" no diretório "src", adicione o seguinte código:

<template>
  <div id="app">
    <Quiz :quiz="quiz" />
  </div>
</template>

<script>
import Quiz from '@/components/Quiz.vue'
import quiz from '@/quiz.js'

export default {
  name: 'App',
  components: {
    Quiz
  },
  data() {
    return {
      quiz
    }
  }
}
</script>

Este arquivo importa o componente do quiz e o objeto quiz, em seguida, renderiza o componente do quiz e passa o objeto quiz como uma propriedade.

5. Adição de lógica de resposta

Por fim, podemos adicionar alguma lógica de resposta às perguntas do quiz.

No componente do quiz, adicione o seguinte código:

<template>
  <div>
    <h1>{{ quiz.title }}</h1>
    <ul>
      <li v-for="question in quiz.questions" :key="question.id">
        {{ question.text }}
        <ul>
          <li v-for="option in question.options" :key="option.text">
            <label>
              <input type="radio" :name="'question-' + question.id" :value="option.text" v-model="question.selectedOption">
              {{ option.text }}
            </label>
          </li>
        </ul>
      </li>
    </ul>
    <button @click="checkAnswers">Verificar Respostas</button>
    <div v-if="showResults">
      <h2>Resultados</h2>
      <ul>
        <li v-for="result in results" :key="result.question">
          {{ result.question }} - {{ result.correct ? 'Correta' : 'Incorreta' }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Quiz',
  props: {
    quiz: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      showResults: false,
      results: []
    }
  },
  methods: {
    checkAnswers() {
      this.showResults = true
      this.results = this.quiz.questions.map(question => {
        return {
          question: question.text,
          correct: question.selectedOption && question.selectedOption.correct
        }
      })
    }
  }
}
</script>

Este código adiciona inputs de radio para cada opção de resposta em cada pergunta, juntamente com um botão "Verificar Respostas".

Quando o botão é clicado, a função "checkAnswers" é chamada, que verifica cada pergunta para ver se a opção selecionada é correta e exibe os resultados em uma lista.

Conclusão

Com esses passos, você pode criar um aplicativo de quiz simples usando Vue.js.

Claro, há muitas outras funcionalidades que você pode adicionar, como um temporizador de perguntas, diferentes tipos de perguntas e mais.

Mas este artigo deve dar-lhe uma base sólida para começar.

Boa sorte no desenvolvimento de seu próprio aplicativo de quiz com Vue.js!