:construction: Finished first pass on dividing word structure of survey

frontend/src/components/onboarding/FormDropdown.vue

@@ -1,7 +1,10 @@
 <template lang="pug">
 .role
-    span {{ question.response_key_prompt }}
+    span(style='text-align:center;') {{ parsedPrompt.start }}
+    span(style='text-align:center;') {{ parsedPrompt.mid }}
     w-select.mt4(:items='items' placeholder='i am' v-model='selection')
+    br
+    p(style='text-align:center;') {{ parsedPrompt.end }}
     w-button.ma1.grow(@click='handleSubmit') NEXT
 </template>
 
@@ -17,12 +20,19 @@ export default {
     emits: ['update-answers'],
     data: () => ({
         selection: null,
+        parsedPrompt: {},
     }),
     computed: {
         items() {
             return this.question.responses.map(res => ({ label: res }))
         },
     },
+    created() {
+        const parsedPromptArr = this.question.response_key_prompt.split('[break]')
+        this.parsedPrompt.start = parsedPromptArr[0]
+        this.parsedPrompt.mid = parsedPromptArr[1]
+        this.parsedPrompt.end = parsedPromptArr[2]
+    },
     methods: {
         handleSubmit() {
             let payload = {

frontend/src/components/onboarding/FormInput.vue

@@ -1,10 +1,14 @@
 <template lang="pug">
 .form-input
-    span {{ question.response_key_prompt }}
+    span(style='text-align:center;') {{ parsedPrompt.start }}
+    br
+    br
+    span(style='text-align:center;') {{ parsedPrompt.mid }}
     input(v-if="question.survey_stage !== 'image' && question.survey_stage !== 'blurb' && question.survey_stage !== 'password'" :placeholder='question.placeholder' type='text' v-model='input')
     input.pass(v-else-if="question.survey_stage === 'password'" :placeholder='question.placeholder' type='password' v-model='input' style="-webkit-text-security: circle")
     w-button.ma1.grow(v-else-if="question.survey_stage === 'image'" @click="submitImage") UPLOAD IMAGE
     textarea(v-else-if="question.survey_stage === 'blurb'" rows="4" cols="50" v-model='input' :placeholder="`${question.placeholder}`")
+    span(style='text-align:center;') {{ parsedPrompt.end }}
     w-button.ma1.grow(@click="handleSubmit({ question, input })") NEXT
     
 </template>
@@ -20,7 +24,14 @@ export default {
     emits: ['update-answers'],
     data: () => ({
         input: null,
+        parsedPrompt: {},
     }),
+    created() {
+        const parsedPromptArr = this.question.response_key_prompt.split('[break]')
+        this.parsedPrompt.start = parsedPromptArr[0]
+        this.parsedPrompt.mid = parsedPromptArr[1]
+        this.parsedPrompt.end = parsedPromptArr[2]
+    },
     methods: {
         handleSubmit(answerInfo) {
             this.$emit('update-answers', answerInfo)

frontend/src/components/onboarding/QuestionResponse.vue

@@ -1,6 +1,5 @@
 <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}}

frontend/src/utils/lang.js

@@ -84,25 +84,20 @@ possible.usa = {
 // TODO: set up a separate object of similar prompts based off of
 // employer/employee, right now is generic
 const promptOverrides = {
-    name: "What's your name?:",
-    email: "In order for you to reach out to others on siimee, we'll need an email address. Where can we best reach you?:",
+    name: "First things first, could you provide us with your name? [break] I am called [break] when others address me.",
+    email: "In order for others to reach out to you on Siimee, you'll need to provide your email address.[break]When reaching out to me, [break] is my preferred email.",
     password:
-        "Next we'll need you to establish a super secret password. Your password should be at least 10 characters long and have at least 2 special characters. Please enter your:",
-    zipcode:
-        "Looking good so far! You're doing great. The next piece of info we'll need is your zip code. That way we can be sure to only show you other people in your area. What's your zip code?:",
-    blurb: "Please provide us with a short blurb about yourself. What's your backstory?:",
+        "So far so good! Next we'll need you to establish a super secret password. Your password should be at least 10 characters long and have at least 2 special characters.[break]My [break] is a very secure passcode that only I will have access to!",
+    zipcode: "Looking good! You're doing great. The next piece of info we'll need is your zip code. That way we can be sure to only show you other people in your area.[break]My zip code, [break] is the general area where I wish to see results in.",
+    seeking: "Alright, let's continue! What are you seeking? Are you looking to find a position to be employed in, or are you looking to employ a candidate?[break] I am a [break] seeking an employer/employee.",
+    blurb: "Please provide us with a short blurb about yourself. What's your backstory?[break] My origin story starts like this:[break]",
     image: "Hey, you're almost done! Please provide an image of yourself so others can recognize you if you ever meet up IRL:",
-    seeking:
-        "Alright, let's continue! What are you seeking? Are you looking to find a position to be employed in, or are you looking to employ a candidate?",
-    pronouns:
-        'When others refer to you, what pronouns do you prefer they use?:',
-    urgency:
-        'How soon do you need the position filled or you need to be employed?',
-    presence: 'Would you prefer remote, hybrid, in-person work?',
-    duration:
-        'What kind of duration would you prefer? Are you looking for part-time, full-time, other?',
-    language: 'Your native language is?...',
-    distance: 'What distance from your home are you looking to work in?',
+    pronouns: 'When others refer to you, what pronouns do you prefer they use?[break]I prefer to be called [break] when others refer to me.',
+    urgency: "How soon do you need the position filled or you need to be employed? [break]I am currently [break] when it comes to employment opportunities right now.",
+    presence: "Would you prefer remote, hybrid, in-person work?[break] Personally I'd prefer a [break] job right now. It's just what works best for me.",
+    duration: "What kind of duration would you prefer? Are you looking for part-time, full-time, other?[break] Currently, I'm looking for a [break] job at this time.",
+    language: "What language is your native language?[break] I consider [break] language as my native language.",
+    distance: "What distance from your home are you looking to work in?[break] Preferably, I'd like to work [break] from my place of residence.",
 }
 
 const inputPlaceholders = {