feat: Add emoji support for quiz answers with visibility control (#20)

Author: toddeTV

app/composables/useQuizSocket.ts

@@ -1,11 +1,11 @@
 import { useWebSocket, useLocalStorage } from '@vueuse/core'
 import { createId } from '@paralleldrive/cuid2'
-import type { Question, Results } from '~/types'
+import type { Question, Results, UserQuestion } from '~/types'
 
 export const useQuizSocket = () => {
   const config = useRuntimeConfig()
 
-  const activeQuestion = ref<Question | null>(null)
+  const activeQuestion = ref<UserQuestion | Question | null>(null)
   const selectedAnswer = ref('')
   const results = ref<Results | null>(null)
   const totalConnections = ref(0)

app/pages/admin.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
-import type { Question } from '~/types'
+import type { Question, AnswerOption } from '~/types'
 
 definePageMeta({
   middleware: 'auth'
 })
 
 const activeQuestion = ref<Question | null>(null)
 const allQuestions = ref<Question[]>([])
-const newQuestion = ref({
+const newQuestion = ref<{
+  question_text: string
+  answer_options: AnswerOption[]
+}>({
   question_text: '',
-  answer_options: ['', '']
+  answer_options: [{ text: '' }, { text: '' }]
 })
 
 // Load questions
@@ -44,7 +47,12 @@ async function handleLogout() {
 async function handleCreateQuestion() {
   try {
     // Filter out empty options
-    const filteredOptions = newQuestion.value.answer_options.filter((opt: string) => opt.trim())
+    const filteredOptions = newQuestion.value.answer_options
+      .map(opt => ({
+        text: opt.text.trim(),
+        emoji: opt.emoji?.trim() || undefined
+      }))
+      .filter(opt => opt.text)
 
     if (filteredOptions.length < 2) {
       alert('At least 2 answer options required')
@@ -64,7 +72,7 @@ async function handleCreateQuestion() {
     // Reset form
     newQuestion.value = {
       question_text: '',
-      answer_options: ['', '']
+      answer_options: [{ text: '' }, { text: '' }]
     }
 
     // alert('Question created successfully')
@@ -111,7 +119,7 @@ async function toggleLock() {
 
 // Add option
 function addOption() {
-  newQuestion.value.answer_options.push('')
+  newQuestion.value.answer_options.push({ text: '' })
 }
 
 // Remove option
@@ -136,7 +144,7 @@ function removeOption(index: number) {
           <p class="text-lg mb-4 font-bold">{{ activeQuestion.question_text }}</p>
           <ul class="list-none p-0 mb-5">
             <li v-for="(option, index) in activeQuestion.answer_options" :key="index" class="p-2.5 bg-white border border-black mb-1.5">
-              {{ option }}
+              {{ option.text }} <span v-if="option.emoji">{{ option.emoji }}</span>
             </li>
           </ul>
           <div class="flex justify-between items-center">
@@ -173,11 +181,18 @@ function removeOption(index: number) {
             <h3 class="mb-2.5 text-lg">Answer Options</h3>
             <div v-for="(option, index) in newQuestion.answer_options" :key="index" class="flex gap-2.5 mb-2.5">
               <UiInput
-                v-model="newQuestion.answer_options[index]!"
+                v-model="option.text"
                 :placeholder="`Option ${index + 1}`"
                 required
                 class="flex-1"
               />
+              <UiInput
+                :model-value="option.emoji || ''"
+                placeholder="Emoji"
+                class="w-24"
+                maxlength="10"
+                @update:model-value="option.emoji = String($event || '').trim() || undefined"
+              />
               <UiButton
                 v-if="newQuestion.answer_options.length > 2"
                 variant="danger"
@@ -208,7 +223,7 @@ function removeOption(index: number) {
             <p class="font-bold mb-2.5">{{ question.question_text }}</p>
             <ul class="list-disc list-inside p-0 mb-4">
               <li v-for="(option, index) in question.answer_options" :key="index">
-                {{ option }}
+                {{ option.text }} <span v-if="option.emoji">{{ option.emoji }}</span>
               </li>
             </ul>
             <UiButton @click="publishQuestion(question.id)">

app/pages/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Question } from '~/types'
+import type { Question, UserQuestion } from '~/types'
 
 const userNickname = ref('')
 const nicknameInput = ref('')
@@ -47,7 +47,7 @@ async function changeNickname() {
 }
 
 // Fetch active question
-const { data: question, refresh: refreshQuestion } = await useFetch<Question>('/api/questions/active', {
+const { data: question, refresh: refreshQuestion } = await useFetch<UserQuestion>('/api/questions/active', {
   onResponse({ response }) {
     const questionData = response._data
     if (questionData && !(questionData as any).message) {
@@ -104,6 +104,7 @@ async function submitAnswer() {
   }
 }
 
+
 </script>
 
 <template>
@@ -152,21 +153,21 @@ async function submitAnswer() {
             :key="index"
             class="flex items-center p-5 border-[3px] border-black cursor-pointer transition-all duration-200 relative"
             :class="{
-              'bg-black text-white': selectedAnswer === option,
+              'bg-black text-white': selectedAnswer === (typeof option === 'string' ? option : option.text),
               'opacity-60 cursor-not-allowed': activeQuestion.is_locked,
               'hover:translate-x-1 hover:shadow-[-5px_5px_0_#000]': !activeQuestion.is_locked
             }"
           >
             <input
               type="radio"
-              :value="option"
+              :value="typeof option === 'string' ? option : option.text"
               v-model="selectedAnswer"
               :disabled="activeQuestion.is_locked"
               @change="submitAnswer"
               class="w-5 h-5 mr-4"
-              :class="selectedAnswer === option ? 'accent-white' : 'accent-black'"
+              :class="selectedAnswer === (typeof option === 'string' ? option : option.text) ? 'accent-white' : 'accent-black'"
             />
-            <span class="text-lg">{{ option }}</span>
+            <span class="text-lg">{{ typeof option === 'string' ? option : option.text }}</span>
           </label>
         </div>
 

app/pages/results.vue

@@ -62,7 +62,7 @@ function getBarWidth(count: number) {
     return 0
   }
 
-  const maxVotes = Math.max(...Object.values(results.value.results))
+  const maxVotes = Math.max(...Object.values(results.value.results).map(r => r.count))
   if (maxVotes === 0) {
     return 0
   }
@@ -109,15 +109,15 @@ function getPercentage(count: number) {
       <!-- Results Chart -->
       <div class="flex flex-col gap-6">
         <div
-          v-for="(count, option) in results.results"
+          v-for="(result, option) in results.results"
           :key="option"
           class="flex flex-col gap-2.5"
         >
           <div class="flex justify-between items-center text-lg">
-            <span class="font-bold">{{ option }}</span>
+            <span class="font-bold">{{ option }} <span v-if="result.emoji && !hideResults" class="ml-2">{{ result.emoji }}</span></span>
             <span class="py-1 px-2.5 bg-gray-100 border-2 border-black text-sm">
               <template v-if="hideResults">?</template>
-              <template v-else>{{ count }}</template>
+              <template v-else>{{ result.count }}</template>
               votes
             </span>
           </div>
@@ -128,9 +128,9 @@ function getPercentage(count: number) {
             <div
               v-else
               class="h-full bg-black transition-width duration-500 ease-out flex items-center justify-end pr-2.5 min-w-[50px] relative result-bar"
-              :style="{ width: getBarWidth(count) + '%' }"
+              :style="{ width: getBarWidth(result.count) + '%' }"
             >
-              <span class="text-white font-bold text-xl text-shadow-lg relative z-10">{{ getPercentage(count) }}%</span>
+              <span class="text-white font-bold text-xl text-shadow-lg relative z-10">{{ getPercentage(result.count) }}%</span>
             </div>
           </div>
         </div>

app/types.ts

@@ -1,12 +1,21 @@
+export interface AnswerOption {
+  text: string
+  emoji?: string
+}
+
 export interface Question {
   id: string
   question_text: string
-  answer_options: string[]
+  answer_options: AnswerOption[]
   is_locked: boolean
   createdAt: string
   alreadyPublished: boolean
 }
 
+export type UserQuestion = Omit<Question, 'answer_options'> & {
+  answer_options: string[]
+}
+
 export type InputQuestion = Omit<Question, 'id' | 'is_locked' | 'createdAt' | 'alreadyPublished'>
 
 export interface Answer {
@@ -20,7 +29,7 @@ export interface Answer {
 
 export interface Results {
   question: Question
-  results: Record<string, number>
+  results: Record<string, { count: number, emoji?: string }>
   totalVotes: number
   totalConnections: number
 }

server/api/answers/submit.post.ts

@@ -32,7 +32,8 @@ export default defineEventHandler(async (event) => {
   }
 
   // Normalize and validate answer
-  const answerOptions = activeQuestion.answer_options.map(opt => opt.toLowerCase())
+  // Normalize and validate answer
+  const answerOptions = activeQuestion.answer_options.map(opt => opt.text.toLowerCase())
   const selectedAnswerNormalized = selected_answer.toLowerCase()
 
   if (!answerOptions.includes(selectedAnswerNormalized)) {
@@ -43,14 +44,14 @@ export default defineEventHandler(async (event) => {
   }
 
   // Find the original-cased answer option
-  const originalAnswer = activeQuestion.answer_options.find(opt => opt.toLowerCase() === selectedAnswerNormalized)
+  const originalAnswer = activeQuestion.answer_options.find(opt => opt.text.toLowerCase() === selectedAnswerNormalized)
 
   // Submit answer
   await submitAnswer({
     question_id: activeQuestion.id,
     user_id,
     user_nickname,
-    selected_answer: originalAnswer || selected_answer
+    selected_answer: originalAnswer ? originalAnswer.text : selected_answer
   })
 
   // Schedule bundled results update

server/api/questions/active.get.ts

@@ -1,6 +1,15 @@
-import type { Question } from '~/types'
+import type { UserQuestion } from '~/types'
 
-export default defineEventHandler(async (): Promise<Question | { message: string }> => {
+export default defineEventHandler(async (): Promise<UserQuestion | { message: string }> => {
   const question = await getActiveQuestion()
-  return question || { message: 'No active question' }
+
+  if (question) {
+    // Strip emojis from answer options before sending to the client
+    return {
+      ...question,
+      answer_options: question.answer_options.map(option => option.text)
+    }
+  }
+
+  return { message: 'No active question' }
 })

server/api/questions/create.post.ts

@@ -1,4 +1,4 @@
-import type { Question } from '~/types'
+import type { Question, AnswerOption } from '~/types'
 
 export default defineEventHandler(async (event) => {
   verifyAdmin(event)
@@ -24,8 +24,11 @@ export default defineEventHandler(async (event) => {
   }
 
   const answer_options = raw_answer_options
-    .map(option => typeof option === 'string' ? option.trim() : '')
-    .filter(option => option)
+    .map((option: AnswerOption) => ({
+      text: typeof option.text === 'string' ? option.text.trim() : '',
+      emoji: typeof option.emoji === 'string' ? option.emoji.trim() : undefined
+    }))
+    .filter(option => option.text)
 
   if (answer_options.length < 2) {
     throw createError({

server/utils/storage.ts

@@ -219,7 +219,7 @@ export async function publishQuestion(questionId: string): Promise<Question | un
       await fs.writeFile(ANSWERS_FILE, JSON.stringify([]))
 
       // Broadcast the new question as a results update
-      const results = await getResultsForQuestion(question.id)
+      const results = await getResultsForQuestion(question.id, questions)
       broadcast('results-update', results)
     }
     return question
@@ -285,7 +285,7 @@ export async function submitAnswer(answerData: Omit<Answer, 'id' | 'timestamp'>)
       throw new Error('Question not found')
     }
 
-    if (!question.answer_options.includes(answerData.selected_answer)) {
+    if (!question.answer_options.some(option => option.text === answerData.selected_answer)) {
       throw new Error('Invalid answer option')
     }
 
@@ -361,34 +361,34 @@ export async function validateAdmin(username: string, password: string, event?:
 }
 
 // Get results for current question
-export async function getResultsForQuestion(questionId: string): Promise<Results | null> {
-  const questions = await getQuestions()
+export async function getResultsForQuestion(questionId: string, allQuestions?: Question[]): Promise<Results | null> {
+  const questions = allQuestions || await getQuestions()
   const question = questions.find(q => q.id === questionId)
   if (!question) return null
 
   const answers = await getAnswersForQuestion(question.id)
 
   // Count votes for each option
-  const results: Record<string, number> = {}
+  const results: Record<string, { count: number, emoji?: string }> = {}
   question.answer_options.forEach((option) => {
-    results[option] = 0
+    results[option.text] = { count: 0, emoji: option.emoji }
   })
 
   answers.forEach((answer) => {
     if (Object.prototype.hasOwnProperty.call(results, answer.selected_answer)) {
-      const currentCount = results[answer.selected_answer]
-      if (typeof currentCount === 'number') {
-        results[answer.selected_answer] = currentCount + 1
+      const result = results[answer.selected_answer]
+      if (result) {
+        result.count++
       }
     }
   })
 
-  return {
+  return JSON.parse(JSON.stringify({
     question,
     results,
     totalVotes: answers.length,
     totalConnections: (await getPeers()).length
-  }
+  }))
 }
 
 export async function getCurrentResults(): Promise<Results | null> {