:construction: Finished up custom invalid input messages to user on survey

frontend/src/components/onboarding/QuestionResponse.vue

@@ -1,12 +1,13 @@
 <template lang="pug">
 w-card.question
+    p {{ question }}
     p {{question.question}} 
     section.radio-buttons.w-flex.row.justify-space-between
         p(v-for="label in question.labels") {{label}}
     w-radios.w-flex.row.justify-space-between(@update:model-value="onUpdate" :items="radioItems" color="red")
     w-button.ma1.grow(v-if='question.id !== 6' @click="updateAnswers") NEXT
     w-button.ma1.grow(v-else @click="updateAll") SUBMIT ANSWERS
-
+    p(v-if='noChoiceMade') Tough choices, we know! Just answer to the best of your ability. The team over at Siimee values the answers you provide us so that we can show you results catered to your specific needs.
 </template>
 
 <script>
@@ -26,23 +27,24 @@ export default {
             { answer: 4 },
             { answer: 5 },
         ],
-        isAnswered: false
+        isAnswered: false,
+        noChoiceMade: null,
     }),
     methods: {
         onUpdate(e) {
             this.isAnswered = true
+            this.noChoiceMade = false
             this.$emit('updated', { ...this.question, answer: e + 1 })
         },
-        // TODO: render message to user on why they cannot proceed
         updateAnswers() {
             this.isAnswered ?
             this.$emit('update-is-answered', this.question.id) :
-            console.error('no selection made')
+            this.noChoiceMade = true
         },
         updateAll() {
-            this.isAnswered ? 
-            this.$emit('update-all') : 
-            console.error('no selection made')
+            this.isAnswered ?
+            this.$emit('update-all') :
+            this.noChoiceMade = true
         }
     },
 }