Enquête, UX Design Thinking Exam Prep 🧙‍♂️💻

enquete-ux-design-thinking-exam-prep.markdown

Enquête, UX Design Thinking Exam Prep 🧙‍♂️💻

Enquête is the first web app to guide users through the initial step of UX design thinking: Empathize. Designed as a quiz, Enquête helps you understand what users need, forming the basis for creating a comprehensive project brief (cahier des charges).

The steps of UX design thinking include:

🔍 Empathize: Understand the user through research. 📝 Define: Clearly articulate the problem you want to solve. 💡 Ideate: Brainstorm and generate creative solutions. 🔧 Prototype: Build tangible representations for a subset of ideas. 🧪 Test: Test the prototypes with users to gather feedback.

A Pen by Kevin Marville on CodePen.

License.

script.vue

<template>
  <div id="app">
    <h1>{{ gameTitle }}</h1>
    <div class="character">
      <img :src="characterImage" alt="Character Image" />
      <p>{{ characterName }}</p>
      <p>Fiabilité: {{ power }}</p>
    </div>
    <div v-if="currentQuestion < questions.length">
      <div class="question">{{ questions[currentQuestion].question }}</div>
      <ul class="options">
        <li
          v-for="(option, index) in questions[currentQuestion].options"
          :key="index"
          @click="selectOption(index)"
          :class="{
            correct: selectedOption === index && option.isCorrect,
            incorrect: selectedOption === index && !option.isCorrect
          }"
        >
          {{ option.text }}
        </li>
      </ul>
    </div>
    <div v-else>
      <div class="score">Score: {{ score }}</div>
      <button @click="resetQuiz">Recommencer le Quiz</button>
    </div>
    <div class="cloud-button">
      <a
        href="https://codepen.io/Kvnbbg-the-animator/pen/VwOypXB"
        target="_blank"
      >
        <button class="cloud-btn">Access the app now!</button>
      </a>
    </div>
    <div class="onboarding" v-if="showOnboarding">
      <h2>Bienvenue dans Enquête🇫🇷 UX Design Thinking Exam Prep 🧙‍♂️💻</h2>
      <p>
        Avant de commencer le développement de notre application, nous voulons
        mieux comprendre vos besoins et préférences. Votre participation à cette
        enquête nous aidera à concevoir une expérience utilisateur
        exceptionnelle.
      </p>
      <p>
        Répondez aux questions avec honnêteté et précision. Votre feedback est
        précieux pour nous permettre de créer un outil qui répond parfaitement à
        vos attentes et besoins en matière de Design Thinking UX.
      </p>
      <p>
        Merci de votre temps et de votre contribution! Cliquez sur le bouton
        ci-dessous pour commencer l'enquête.
      </p>
      <button @click="startGame">Commencer l'enquête</button>
    </div>

    <footer>
      <p>
        Consultez mon
        <a href="https://github.com/kvnbbg" target="_blank">GitHub</a>
        et suivez-moi sur
        <a href="https://x.com/techandstream" target="_blank">Twitter</a>
      </p>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showOnboarding: true,
      gameTitle: "Enquête, UX Design Thinking Exam Prep 🧙‍♂️💻", // New app name
      currentQuestion: 0,
      score: 0,
      selectedOption: null,
      characterName: "",
      characterImage: "",
      power: 0,
      questions: [],
      stage: -1,
      characterNames: [
        "Aurélien l'Astucieux",
        "Bastien le Vaillant",
        "Céleste la Visionnaire",
        "Dorian le Tacticien",
        "Élodie l'Innovatrice",
        "Florian le Stratège"
      ],
      characterImages: [
        "https://images.pexels.com/photos/1298684/pexels-photo-1298684.jpeg?auto=compress&cs=tinysrgb&w=1200", // New modern image
        "https://images.pexels.com/photos/2384657/pexels-photo-2384657.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", // New modern image
        "https://images.pexels.com/photos/17655211/pexels-photo-17655211/free-photo-of-mer-homme-surfeur-vagues.jpeg?auto=compress&cs=tinysrgb&w=1200&lazy=load", // New modern image
        "https://images.pexels.com/photos/14155727/pexels-photo-14155727.jpeg?auto=compress&cs=tinysrgb&w=1200&lazy=load", // New modern image
        "https://images.pexels.com/photos/6433578/pexels-photo-6433578.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", // New modern image
        "https://images.pexels.com/photos/5613958/pexels-photo-5613958.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" // New modern image
      ]
    };
  },
  methods: {
    startGame() {
      this.showOnboarding = false;
      this.resetQuiz();
    },
    getRandomItem(arr) {
      return arr[Math.floor(Math.random() * arr.length)];
    },
    getQuestionsByStage(stage) {
      const stages = {
        "-1": [
          {
            question:
              "Quels sont vos objectifs principaux pour utiliser notre application ?",
            options: [
              { text: "Apprendre de nouvelles compétences", isCorrect: true },
              { text: "Divertissement", isCorrect: true },
              { text: "Améliorer la productivité", isCorrect: true }
            ]
          },
          {
            question:
              "Quelles fonctionnalités trouvez-vous les plus utiles dans une application ?",
            options: [
              { text: "Interface intuitive", isCorrect: true },
              { text: "Personnalisation", isCorrect: true },
              { text: "Support client", isCorrect: true }
            ]
          },
          {
            question:
              "Quels problèmes rencontrez-vous souvent avec des applications similaires ?",
            options: [
              { text: "Bugs fréquents", isCorrect: true },
              { text: "Difficulté d'utilisation", isCorrect: true },
              { text: "Manque de fonctionnalités", isCorrect: true }
            ]
          },
          {
            question: "Quel est votre niveau de compétence technique ?",
            options: [
              { text: "Débutant", isCorrect: true },
              { text: "Intermédiaire", isCorrect: true },
              { text: "Avancé", isCorrect: true }
            ]
          },
          {
            question:
              "À quelle fréquence utilisez-vous des applications similaires ?",
            options: [
              { text: "Quotidiennement", isCorrect: true },
              { text: "Hebdomadairement", isCorrect: true },
              { text: "Mensuellement", isCorrect: true }
            ]
          },
          {
            question:
              "Quel type de design préférez-vous dans les applications ?",
            options: [
              { text: "Design minimaliste", isCorrect: true },
              { text: "Design coloré et vif", isCorrect: true },
              { text: "Design professionnel et formel", isCorrect: true }
            ]
          },
          {
            question:
              "Quels appareils utilisez-vous le plus souvent pour accéder aux applications ?",
            options: [
              { text: "Smartphone", isCorrect: true },
              { text: "Tablette", isCorrect: true },
              { text: "Ordinateur de bureau", isCorrect: true }
            ]
          },
          {
            question:
              "Quels sont vos principaux critères pour évaluer une application ?",
            options: [
              { text: "Facilité d'utilisation", isCorrect: true },
              { text: "Performances", isCorrect: true },
              { text: "Esthétique", isCorrect: true }
            ]
          },
          {
            question:
              "Quels types de contenus appréciez-vous le plus dans une application ?",
            options: [
              { text: "Contenu éducatif", isCorrect: true },
              { text: "Jeux et divertissements", isCorrect: true },
              { text: "Outils de productivité", isCorrect: true }
            ]
          },
          {
            question: "Quelle est votre tranche d'âge ?",
            options: [
              { text: "Moins de 18 ans", isCorrect: true },
              { text: "18-35 ans", isCorrect: true },
              { text: "Plus de 35 ans", isCorrect: true }
            ]
          }
        ]
      };
      return stages[stage] || stages[-1];
    },
    selectOption(index) {
      if (this.selectedOption === null) {
        this.selectedOption = index;
        this.score += this.questions[this.currentQuestion].options[index]
          .isCorrect
          ? 10
          : 0;
        this.power += this.questions[this.currentQuestion].options[index]
          .isCorrect
          ? Math.floor(Math.random() * 10) + 1
          : 0;
        setTimeout(() => {
          this.currentQuestion++;
          this.selectedOption = null;
          if (this.currentQuestion >= this.questions.length) {
            this.stage++;
            this.questions = this.getQuestionsByStage(this.stage);
            this.currentQuestion = 0;
          }
        }, 1000);
      }
    },
    resetQuiz() {
      this.stage = -1;
      this.currentQuestion = 0;
      this.score = 0;
      this.selectedOption = null;
      this.characterName = this.getRandomItem(this.characterNames);
      this.characterImage = this.getRandomItem(this.characterImages);
      this.power = Math.floor(Math.random() * 100) + 1;
      this.questions = this.getQuestionsByStage(this.stage);
    }
  },
  mounted() {
    this.characterName = this.getRandomItem(this.characterNames);
    this.characterImage = this.getRandomItem(this.characterImages);
    this.power = Math.floor(Math.random() * 100) + 1;
    this.questions = this.getQuestionsByStage(this.stage);
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 90%;
  max-width: 600px;
  margin: 20px auto;
  transition: all 0.3s ease;
}

h1 {
  font-size: 2em;
  margin-bottom: 20px;
}

.question {
  font-size: 1.2em;
  margin-bottom: 20px;
}

.options {
  list-style: none;
  padding: 0;
}

.options li {
  background: #ececec;
  border: 1px solid #ddd;
  margin: 10px 0;
  padding: 15px;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.3s, color 0.3s;
}

.options li.correct {
  background: #d4edda;
  color: #155724;
}

.options li.incorrect {
  background: #f8d7da;
  color: #721c24;
}

.options li:hover {
  background: #d1e0e0;
}

.score {
  font-size: 1.5em;
  margin-top: 20px;
}

.character {
  font-size: 1.2em;
  margin-top: 10px;
  margin-bottom: 20px;
}

.character img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

footer {
  margin-top: 20px;
}

footer a {
  color: #4fc08d;
  text-decoration: none;
}
.cloud-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  animation: float 5s ease-in-out infinite;
}

.cloud-btn {
  background: #e0f7fa;
  border: 1px solid #b2ebf2;
  color: #00796b;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.3s, transform 0.3s;
}

.cloud-btn:hover {
  background: #b2ebf2;
  transform: translateY(-5px);
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.onboarding {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.onboarding h2 {
  font-size: 2em;
  margin-bottom: 20px;
}

.onboarding p {
  font-size: 1.2em;
  margin-bottom: 20px;
}

.onboarding button {
  background: #4fc08d;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  transition: background 0.3s;
}

.onboarding button:hover {
  background: #3da76f;
}
</style>