fix
This commit is contained in:
X1627315083
@@ -3,7 +3,7 @@
|
||||
<main id="main">
|
||||
<h1 id="title">AiDA 3.0 Feedback Survey</h1>
|
||||
<p id="description">Please take the survey</p>
|
||||
<form id="survey-form">
|
||||
<div id="survey-form">
|
||||
<h2 class="section-title">Personal Information</h2>
|
||||
<div class="section w40">
|
||||
<label for="name"
|
||||
@@ -19,17 +19,22 @@
|
||||
<label for="gender"
|
||||
>Gender:<span class="fontColor">*</span></label
|
||||
>
|
||||
<input
|
||||
<select name="dropdown" id="dropdown" v-model="gender">
|
||||
<option selected value='Female'>Female</option>
|
||||
<option value='Male'>Male</option>
|
||||
</select>
|
||||
<!-- <input
|
||||
type="text"
|
||||
v-model="gender"
|
||||
placeholder="Enter your gender"
|
||||
required
|
||||
/>
|
||||
/> -->
|
||||
</div>
|
||||
<div class="section w40">
|
||||
<label for="occupation"
|
||||
>Occupation:<span class="fontColor">*</span></label
|
||||
>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
v-model="occupation"
|
||||
@@ -76,12 +81,12 @@
|
||||
value="below20"
|
||||
name="age"
|
||||
v-model="age"
|
||||
checked
|
||||
|
||||
/>
|
||||
Below 20
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" value="20-30" v-model="age" name="age" />
|
||||
<input checked type="radio" value="20-30" v-model="age" name="age" />
|
||||
20-30
|
||||
</label>
|
||||
<label>
|
||||
@@ -128,7 +133,7 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="red"
|
||||
value="1"
|
||||
v-model="helpful"
|
||||
/>
|
||||
Easy to learn and use
|
||||
@@ -137,7 +142,7 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="green"
|
||||
value="2"
|
||||
v-model="helpful"
|
||||
/>
|
||||
Easy to get trend information
|
||||
@@ -146,7 +151,7 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
value="3"
|
||||
v-model="helpful"
|
||||
/>
|
||||
Lots of creative design proposals
|
||||
@@ -155,7 +160,7 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
value="4"
|
||||
v-model="helpful"
|
||||
/>
|
||||
The AIGC functions for moodboard is helpful
|
||||
@@ -164,7 +169,7 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
value="5"
|
||||
v-model="helpful"
|
||||
/>
|
||||
The AIGC functions for design sketches is helpful
|
||||
@@ -173,7 +178,7 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
value="6"
|
||||
v-model="helpful"
|
||||
/>
|
||||
Easy to select the right color
|
||||
@@ -182,7 +187,7 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
value="7"
|
||||
v-model="helpful"
|
||||
/>
|
||||
The Chatbot function is helpful
|
||||
@@ -191,7 +196,7 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
value="8"
|
||||
v-model="helpful"
|
||||
/>
|
||||
The print position function is helpful
|
||||
@@ -200,7 +205,7 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
value="9"
|
||||
v-model="helpful"
|
||||
/>
|
||||
The drawing function is helpful
|
||||
@@ -209,7 +214,7 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
value="10"
|
||||
v-model="helpful"
|
||||
/>
|
||||
The export function is useful
|
||||
@@ -218,7 +223,7 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
value="11"
|
||||
v-model="helpful"
|
||||
/>
|
||||
Easy to edit the design
|
||||
@@ -227,8 +232,8 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
class="marTop1"
|
||||
:value="othersHelpful"
|
||||
v-model="helpful"
|
||||
/>
|
||||
<span> Others:</span>
|
||||
@@ -236,20 +241,21 @@
|
||||
name="comments"
|
||||
id="text-area"
|
||||
placeholder="Please enter..."
|
||||
v-model="helpful"
|
||||
v-model="othersHelpful"
|
||||
></textarea>
|
||||
</label>
|
||||
</div>
|
||||
<div class="section">
|
||||
<p>
|
||||
What do you think AiDA should improve? (you could choose
|
||||
2. What do you think AiDA should improve? (you could choose
|
||||
more than one answer):<span class="fontColor">*</span>
|
||||
</p>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
value="1"
|
||||
v-model="improve"
|
||||
/>
|
||||
Proposed designs are boring, need more interesting
|
||||
designs
|
||||
@@ -258,7 +264,8 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
value="2"
|
||||
v-model="improve"
|
||||
/>
|
||||
Difficult to make changes on design
|
||||
</label>
|
||||
@@ -266,7 +273,8 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
value="3"
|
||||
v-model="improve"
|
||||
/>
|
||||
Only 2D output, no 3D results
|
||||
</label>
|
||||
@@ -274,7 +282,8 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
value="4"
|
||||
v-model="improve"
|
||||
/>
|
||||
Difficult to apply keywords for AIGC generation
|
||||
</label>
|
||||
@@ -282,7 +291,8 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
value="5"
|
||||
v-model="improve"
|
||||
/>
|
||||
Clothing is not in the right proportion
|
||||
</label>
|
||||
@@ -290,7 +300,8 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
value="6"
|
||||
v-model="improve"
|
||||
/>
|
||||
Not compatible with pattern making solutions
|
||||
</label>
|
||||
@@ -298,7 +309,8 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
value="7"
|
||||
v-model="improve"
|
||||
/>
|
||||
Improved user interface for better navigation
|
||||
</label>
|
||||
@@ -306,7 +318,8 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
value="8"
|
||||
v-model="improve"
|
||||
/>
|
||||
Lack of responsive customer support
|
||||
</label>
|
||||
@@ -314,7 +327,8 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
value="9"
|
||||
v-model="improve"
|
||||
/>
|
||||
Insufficient tutorial or guidance for new users
|
||||
</label>
|
||||
@@ -322,7 +336,8 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
value="10"
|
||||
v-model="improve"
|
||||
/>
|
||||
Limited personalization options for designs
|
||||
</label>
|
||||
@@ -330,8 +345,9 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
:value="othersImprovel"
|
||||
class="marTop1"
|
||||
v-model="improve"
|
||||
/>
|
||||
<span> Others:</span>
|
||||
<!-- <input
|
||||
@@ -341,6 +357,7 @@
|
||||
<textarea
|
||||
name="comments"
|
||||
id="text-area"
|
||||
:value="othersImprovel"
|
||||
placeholder="Please enter..."
|
||||
></textarea>
|
||||
</label>
|
||||
@@ -351,81 +368,91 @@
|
||||
<input
|
||||
type="radio"
|
||||
value="yes"
|
||||
v-model="isSubscribe"
|
||||
name="radio-question"
|
||||
checked
|
||||
/>
|
||||
Yes
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" value="no" name="radio-question" />
|
||||
<input v-model="isSubscribe" type="radio" value="no" name="radio-question" />
|
||||
No
|
||||
</label>
|
||||
</div>
|
||||
<div class="section">
|
||||
<p>If NO, please share why:</p>
|
||||
<div class="section" v-show="isSubscribe == 'no'">
|
||||
<p>If NO, please share why:<span class="fontColor">*</span></p>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
value="yes"
|
||||
name="radio-question"
|
||||
checked
|
||||
type="checkbox"
|
||||
value="Not useful"
|
||||
name="reasonForNotSubscribe"
|
||||
v-model="reasonForNotSubscribe"
|
||||
/>
|
||||
Not useful
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" value="no" name="radio-question" />
|
||||
<input type="checkbox" value="Too expensive" v-model="reasonForNotSubscribe" name="reasonForNotSubscribe" />
|
||||
Too expensive
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox-question"
|
||||
value="blue"
|
||||
name="reasonForNotSubscribe"
|
||||
:value="othersIsSubscribeCause"
|
||||
v-model="reasonForNotSubscribe"
|
||||
class="marTop1"
|
||||
/>
|
||||
<span> Others:</span>
|
||||
<textarea
|
||||
name="comments"
|
||||
id="text-area"
|
||||
v-model="othersIsSubscribeCause"
|
||||
placeholder="Please enter..."
|
||||
></textarea>
|
||||
</label>
|
||||
</div>
|
||||
<div class="section">
|
||||
<p>
|
||||
3. Are you currently using any design tools? Please
|
||||
Are you currently using any design tools? Please
|
||||
list:
|
||||
</p>
|
||||
<textarea
|
||||
name="comments"
|
||||
id="text-area"
|
||||
v-model="designTools"
|
||||
placeholder="Please enter..."
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="section">
|
||||
<button id="submit" @click="setSubmit">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, toRefs, reactive } from "vue";
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { defineComponent, toRefs,ref, reactive, createVNode } from "vue";
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const feedbackData = reactive({
|
||||
const feedbackData:any = reactive({
|
||||
userName:'',
|
||||
gender:'',
|
||||
gender:'Female',
|
||||
occupation:'',
|
||||
country:'',
|
||||
email:'',
|
||||
age:'',
|
||||
helpful:'',
|
||||
improve:'',
|
||||
age:'20-30',
|
||||
helpful:[],
|
||||
improve:[],
|
||||
isSubscribe:'',
|
||||
reasonForNotSubscribe:[],
|
||||
designTools:'',
|
||||
});
|
||||
let othersHelpful = ref('')
|
||||
let othersImprovel = ref('')
|
||||
let othersIsSubscribeCause = ref()
|
||||
let CountryList = [
|
||||
"Albania",
|
||||
"Algeria",
|
||||
@@ -594,10 +621,63 @@ export default defineComponent({
|
||||
"Zambia"
|
||||
]
|
||||
let setSubmit = () => {
|
||||
console.log(feedbackData);
|
||||
let state = false
|
||||
let skipList = ['designTools','reasonForNotSubscribe']
|
||||
for (const key in feedbackData) {
|
||||
|
||||
if(skipList.indexOf(key) > -1){
|
||||
continue
|
||||
}
|
||||
let keyList = ['helpful','improve']
|
||||
if(keyList.indexOf(key) > -1){
|
||||
if(feedbackData[key].length == 0){
|
||||
state = true
|
||||
break
|
||||
}
|
||||
}else if(feedbackData.isSubscribe == 'no' && feedbackData.reasonForNotSubscribe.length){
|
||||
state = true
|
||||
break
|
||||
}else{
|
||||
if(feedbackData[key] == ''){
|
||||
state = true
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if(state){
|
||||
message.info('Please check that all the * numbers have been filled in')
|
||||
return
|
||||
}
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: `Please confirm your email address to ensure it is correct. ${feedbackData.email}`,
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
feedbackData.language = 'EN'
|
||||
submit(JSON.stringify(feedbackData))
|
||||
}
|
||||
});
|
||||
};
|
||||
let submit = (value:any)=>{
|
||||
Https.axiosPost(Https.httpUrls.questionnaire, value).then(
|
||||
(rv) => {
|
||||
console.log(rv);
|
||||
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
}
|
||||
return {
|
||||
...toRefs(feedbackData),
|
||||
othersHelpful,
|
||||
othersImprovel,
|
||||
othersIsSubscribeCause,
|
||||
CountryList,
|
||||
setSubmit,
|
||||
};
|
||||
@@ -638,7 +718,7 @@ export default defineComponent({
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
form {
|
||||
#survey-form {
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
width: 60%;
|
||||
@@ -698,7 +778,9 @@ export default defineComponent({
|
||||
#dropdown:focus {
|
||||
border: 2px solid rgb(173, 173, 173);
|
||||
}
|
||||
|
||||
input,select{
|
||||
height: 40px;
|
||||
}
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
|
||||
Reference in New Issue
Block a user