feat: Add note functionality for questions (#23)

Author: toddeTV

app/pages/admin.vue

@@ -10,9 +10,11 @@ const allQuestions = ref<Question[]>([])
 const newQuestion = ref<{
   question_text: string
   answer_options: AnswerOption[]
+  note?: string
 }>({
   question_text: '',
-  answer_options: [{ text: '' }, { text: '' }]
+  answer_options: [{ text: '' }, { text: '' }],
+  note: ''
 })
 
 // Load questions
@@ -63,7 +65,8 @@ async function handleCreateQuestion() {
       method: 'POST',
       body: {
         question_text: newQuestion.value.question_text,
-        answer_options: filteredOptions
+        answer_options: filteredOptions,
+        note: newQuestion.value.note
       }
     })
 
@@ -72,7 +75,8 @@ async function handleCreateQuestion() {
     // Reset form
     newQuestion.value = {
       question_text: '',
-      answer_options: [{ text: '' }, { text: '' }]
+      answer_options: [{ text: '' }, { text: '' }],
+      note: ''
     }
 
     // alert('Question created successfully')
@@ -177,6 +181,12 @@ function removeOption(index: number) {
             class="p-3 border-2 border-black text-base min-h-[100px] resize-y bg-white font-sans"
           ></textarea>
 
+          <textarea
+            v-model="newQuestion.note"
+            placeholder="Enter a note for the question (optional, only for admins)"
+            class="p-3 border-2 border-black text-base min-h-[70px] resize-y bg-white font-sans"
+          ></textarea>
+
           <div>
             <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">
@@ -221,6 +231,7 @@ function removeOption(index: number) {
             :class="{ 'opacity-50': question.alreadyPublished }"
           >
             <p class="font-bold mb-2.5">{{ question.question_text }}</p>
+            <p v-if="question.note" class="text-sm text-gray-600 mb-2.5 p-2 bg-gray-200 border border-black">{{ question.note }}</p>
             <ul class="list-disc list-inside p-0 mb-4">
               <li v-for="(option, index) in question.answer_options" :key="index">
                 {{ option.text }} <span v-if="option.emoji">{{ option.emoji }}</span>

app/pages/index.vue

@@ -103,8 +103,6 @@ async function submitAnswer() {
     }
   }
 }
-
-
 </script>
 
 <template>

app/pages/results.vue

@@ -135,6 +135,11 @@ function getPercentage(count: number) {
           </div>
         </div>
       </div>
+
+      <!-- Note Display -->
+      <div v-if="results.question.note && !hideResults" class="mt-8 p-4 bg-gray-100 border-2 border-black">
+        <p>{{ results.question.note }}</p>
+      </div>
     </UiSection>
 
     <!-- No Active Question -->

app/types.ts

@@ -10,9 +10,10 @@ export interface Question {
   is_locked: boolean
   createdAt: string
   alreadyPublished: boolean
+  note?: string
 }
 
-export type UserQuestion = Omit<Question, 'answer_options'> & {
+export type UserQuestion = Omit<Question, 'answer_options' | 'note'> & {
   answer_options: string[]
 }
 

server/api/questions/active.get.ts

@@ -4,9 +4,10 @@ export default defineEventHandler(async (): Promise<UserQuestion | { message: st
   const question = await getActiveQuestion()
 
   if (question) {
-    // Strip emojis from answer options before sending to the client
+    // Strip emojis and notes from the question before sending to the client
+    const { note, ...questionForUser } = question
     return {
-      ...question,
+      ...questionForUser,
       answer_options: question.answer_options.map(option => option.text)
     }
   }

server/api/questions/create.post.ts

@@ -4,7 +4,7 @@ export default defineEventHandler(async (event) => {
   verifyAdmin(event)
 
   const body = await readBody(event) as Omit<Question, 'id' | 'is_locked'>
-  const { question_text: raw_question_text, answer_options: raw_answer_options } = body
+  const { question_text: raw_question_text, answer_options: raw_answer_options, note: raw_note } = body
 
   // Validate and sanitize question_text
   const question_text = typeof raw_question_text === 'string' ? raw_question_text.trim() : ''
@@ -37,9 +37,12 @@ export default defineEventHandler(async (event) => {
     })
   }
 
+  const note = typeof raw_note === 'string' ? raw_note.trim() : undefined
+
   const question = await createQuestion({
     question_text,
-    answer_options
+    answer_options,
+    note
   })
 
   return question