瀏覽代碼

:construction: Reworded survey questions and added Thank you message

tabs-content
tomit4 3 年之前
父節點
當前提交
69376f4618
共有 2 個文件被更改,包括 42 次插入17 次删除
  1. 15
    9
      frontend/src/components/onboarding/FormInput.vue
  2. 27
    8
      frontend/src/views/OnboardingView.vue

+ 15
- 9
frontend/src/components/onboarding/FormInput.vue 查看文件

1
 <template lang="pug">
1
 <template lang="pug">
2
 .form-input
2
 .form-input
3
     h3(v-if='question.response_key_prompt == "name"') Welcome to Siimee Onboarding! Let's get started!
3
     h3(v-if='question.response_key_prompt == "name"') Welcome to Siimee Onboarding! Let's get started!
4
-    span(v-if='question.response_key_prompt == "name"') Hi there, my {{ question.response_key_prompt }} is: 
4
+    span(v-if='question.response_key_prompt == "name"') What's your name?: 
5
     input(v-if='question.response_key_prompt == "name"' placeholder='Jon Doe' type='text' v-model='input')
5
     input(v-if='question.response_key_prompt == "name"' placeholder='Jon Doe' type='text' v-model='input')
6
-    span(v-if='question.response_key_prompt == "email"') My {{ question.response_key_prompt }} is: 
7
-    input(v-if='question.response_key_prompt == "email"' placeholder='jon_doe@generic_email.com' type='text' v-model='input')
8
-    span(v-if='question.response_key_prompt == "password"') Please input a {{ question.response_key_prompt }}: 
9
-    input(v-if='question.response_key_prompt == "password"' placeholder='mysupersecretpassword' type='text' v-model='input')
10
-    span(v-if='question.response_key_prompt == "zipcode"') What zipcode would you like to see results from?{{ question.response_key_prompt }}: 
6
+    span(v-if='question.response_key_prompt == "email"') In order for you to reach out to others on siimee, we'll need an email address. Where can we best reach you?: 
7
+    input(v-if='question.response_key_prompt == "email"' placeholder='                @     .   ' type='text' v-model='input')
8
+    span(v-if='question.response_key_prompt == "password"') Next we'll need you to establish a super secret password. 
9
+        div Your password should be at least 10 characters long and have at
10
+        least 2 special characters. 
11
+        div Please enter your:
12
+    input(v-if='question.response_key_prompt == "password"' placeholder='supersEcre+passw0rd' type='text' v-model='input')
13
+    span(v-if='question.response_key_prompt == "zipcode"') Password looks good! You're doing great. 
14
+        div 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. 
15
+        div What's your zip code?: 
11
     input(v-if='question.response_key_prompt == "zipcode"' placeholder='99999' type='text' v-model='input')
16
     input(v-if='question.response_key_prompt == "zipcode"' placeholder='99999' type='text' v-model='input')
12
-    span(v-if='question.response_key_prompt == "blurb"') Please provide us with a short {{ question.response_key_prompt }} about yourself: 
17
+    span(v-if='question.response_key_prompt == "blurb"')
18
+        div Please provide us with a short blurb about yourself. What's your backstory?:
13
     textarea(v-if='question.response_key_prompt == "blurb"' placeholder='My Origin Story starts off like this...' type='text' v-model='input' rows='4' cols='50')
19
     textarea(v-if='question.response_key_prompt == "blurb"' placeholder='My Origin Story starts off like this...' type='text' v-model='input' rows='4' cols='50')
14
-    p(v-if='question.response_key_prompt == "image"')
15
-        p Please Upload a Profile Image:
20
+    p(v-if='question.response_key_prompt == "image"') Hey, you're almost done!
21
+        p Please provide an image of yourself so others can recognize you if you ever meet up IRL:
16
         button(@click='submitImage') Upload Image
22
         button(@click='submitImage') Upload Image
17
     w-button.ma1.grow(@click='handleSubmit') NEXT
23
     w-button.ma1.grow(@click='handleSubmit') NEXT
18
 </template>
24
 </template>

+ 27
- 8
frontend/src/views/OnboardingView.vue 查看文件

4
         style='display: flex; flex-direction: column; align-items: center'
4
         style='display: flex; flex-direction: column; align-items: center'
5
         v-if='survey'
5
         v-if='survey'
6
     )
6
     )
7
+        p {{ currentStep }}
7
         p(v-if='currentStep != 0') You have completed: {{ currentStep - 1 }} / 7 survey steps
8
         p(v-if='currentStep != 0') You have completed: {{ currentStep - 1 }} / 7 survey steps
8
         .answers(v-for='(value, key) in answered')
9
         .answers(v-for='(value, key) in answered')
9
-            span(v-if='key == "name" && value') Welcome {{ value }}!
10
-            span(v-if='key == "email" && value') All messages we will send to: {{ value }}
11
-            span(v-if='key == "zipcode" && value') Your zipcode is: {{ value }}
12
-            span(v-if='key == "blurb" && value') This is your Origin Story:
13
-                p {{ value }}
14
-            p(v-if='key == "image" && value') You've uploaded the following image:
15
-                p {{ value }}
10
+            span(v-if='key == "name" && value && currentStep == 2') Hi {{ value }}!
11
+            span(v-if='key == "email" && value && currentStep == 3') Thanks for the contact info, {{ answered.name }}!
12
+            span(v-if='key == "zipcode" && value && currentStep == 5') Very cool, {{ answered.name }}, we'll be sure only to show you results in your area. Now let's get to know more about you!
13
+
16
         .step(v-for='(step, i) in survey.steps')
14
         .step(v-for='(step, i) in survey.steps')
17
             component(
15
             component(
18
                 :aspect-questions='step.component == "Aspects" ? survey.aspectQuestions : null'
16
                 :aspect-questions='step.component == "Aspects" ? survey.aspectQuestions : null'
22
                 @update-answers='updateAnswers'
20
                 @update-answers='updateAnswers'
23
                 v-if='step && currentStep == i'
21
                 v-if='step && currentStep == i'
24
             )
22
             )
23
+    // TODO: change to different vue component
24
+    article(
25
+        style='display: flex; flex-direction: column; align-items: center; text-align: center;'
26
+        v-if='currentStep == 8'
27
+    )
28
+        h1 Thanks for Completing Our Survey!!
29
+        h2 Please review your answers and let us know if you need to change anything.
30
+        span Your name: {{ answered.name }}
31
+        span Your email: {{ answered.email }}
32
+        span Your zipcode: {{ answered.zipcode }}
33
+        span Your blurb: {{ answered.blurb }}
34
+        span Your image: {{ answered.image }}
35
+        br
36
+        button(@click="changeAnswers") Change Answers
37
+        br
38
+        button(@click="finalSubmit") Submit Answers
39
+
25
 </template>
40
 </template>
26
 
41
 
27
 <script>
42
 <script>
48
     methods: {
63
     methods: {
49
         onSubmit() {
64
         onSubmit() {
50
             console.log(JSON.stringify(this.answered))
65
             console.log(JSON.stringify(this.answered))
51
-            this.$router.push({ name: 'SurveyView' })
66
+            // TODO: Change to different vue component
67
+            this.goToStep(this.currentStep + 1)
52
         },
68
         },
53
         goToStep(num) {
69
         goToStep(num) {
54
             this.currentStep = num
70
             this.currentStep = num
80
     article
96
     article
81
         height: 100vh
97
         height: 100vh
82
 
98
 
99
+    .answers
100
+        text-align: center
101
+
83
     .w-button
102
     .w-button
84
             display: flex
103
             display: flex
85
             width: 315px
104
             width: 315px

Loading…
取消
儲存