From bb19eace15bc3edceee523555fac871002b778f4 Mon Sep 17 00:00:00 2001
From: 84702473 <84702473@qq.com>
Date: 星期三, 12 四月 2023 18:07:57 +0800
Subject: [PATCH] 增加提示页面，增加提示栏目信息
---
src/lang/zh.js | 17 +++--
src/lang/en.js | 11 ++-
src/views/exam/paper/values.vue | 121 ++++++++++++++++++++++++++++++++++------
3 files changed, 121 insertions(+), 28 deletions(-)
diff --git a/src/lang/en.js b/src/lang/en.js
index 052d137..4d5488f 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -69,9 +69,14 @@
pre:'Back',
commit:'Submit',
values_cur_step:'Current step',
- values_step_tips_for_1:'Select %N pictures in which the main character is most like you',
- values_step_tips_for_2:'Select %N pictures in which the main character is most unlike you',
- values_step_tips_for_3:'Select %N pictures',
+ values_step_0_title:'Instructions',
+ values_step_0_content:'The goal of the test is to evaluate how much the main character is or is not like you in each picture.<br/>By the end of this test, you will rank the pictures from most like you to most unlike you.<br/><br/><br/>The first task is the pre-sort, where you will decide if the character in the picture is like you, unlike you, or you are unsure.<br/><br/><br/>Next, you will place the pictures you sorted into categories.',
+ values_step_2_title:'Categorize Your Response',
+ values_step_2_content:'In the next step, you will categorize the images into nine separate categories. The number of images allowed in each category is fixed. All images must be categorized, and you will have the opportunity to go back and make changes to the categories if you feel you placed an image somewhere that you would like to change. Importantly, the order in which the chosen images in each category are arranged from left to right does not matter. Additionally, please pay attention to the prompts themselves; you will be asked about pictures that are like you and are unlike you.',
+ values_step_names:'Most like,Most unlike,Very like,Very unlike,Like,Unlike,Somewhat like,Somewhat unlike,Neutral',
+ values_step_tips_for_1:'Select %N pictures in which the main character is %C you',
+ values_step_tips_for_2:'Select %N pictures in which the main character is %C you',
+ values_step_tips_for_3:'Here are the remaining %N pictures. For now, they will be assigned to the "%C" category.',
values_step_tips:'The order of the images you place in this category from left to right does not matter.',
values_select_tips:'Select from the following pictures',
values_select:'Select',
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 74baf6a..5d4d5cc 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -59,7 +59,7 @@
values_nextStepTips_add_enough:'璇锋坊鍔犺冻澶熺殑閫夋嫨',
values_nextStepTips_choices_all:'璇峰仛鍑烘墍鏈夌殑閫夋嫨',
values_title:'棰勫厛鎺掑簭鎮ㄧ殑鍥炵瓟',
- values_title_description:'瀵逛簬姣忎釜璇彞锛屽崟鍑讳笌瑙嗗浘鏈�瀵归綈鐨勫浘鏍囥��',
+ values_title_description:'杩欐槸娴嬭瘯鐨勯鎺掑簭閮ㄥ垎<br/>鍦ㄦ閮ㄥ垎涓紝鎮ㄥ皢閫夋嫨瑙掕壊鏈�鍍忔偍鐨勫浘鐗�<br/>鎵�鏈夎繖浜涘浘鐗囧皢鍦ㄥ悗闈㈢殑閮ㄥ垎涓啀娆℃樉绀猴紝浠ヤ究杩涜鏈�缁堟帓搴忋��',
values_title_description_1:'濡傛灉浣犺涓轰富瑙掑拰浣犱竴鏍�, 鐐瑰嚮 ',
values_title_description_2:'濡傛灉浣犺涓轰富瑙掑拰浣犱笉涓�鏍�, 鐐瑰嚮 ',
values_title_description_3:'濡傛灉浣犱笉纭畾, 鐐瑰嚮 ',
@@ -69,9 +69,14 @@
pre:'涓婁竴姝�',
commit:'鎻愪氦',
values_cur_step:'褰撳墠姝ラ',
- values_step_tips_for_1:'閫夋嫨鏈�鍍忔垜鐨�%N寮犲浘鐗�',
- values_step_tips_for_2:'閫夋嫨鏈�涓嶅儚鎴戠殑%N寮犲浘鐗�',
- values_step_tips_for_3:'閫夋嫨鏈夌枒闂殑%N寮犲浘鐗�',
+ values_step_0_title:'璇存槑',
+ values_step_0_content:'娴嬭瘯鐨勭洰鐨勬槸璇勪及姣忓紶鐓х墖涓殑涓昏鍜屼綘鏈夊鍍忔垨涓嶅儚<br/>鍦ㄦ湰娴嬭瘯缁撴潫鏃讹紝鎮ㄥ皢瀵瑰浘鐗囪繘琛屼粠鏈�鍠滄鍒版渶涓嶅枩娆㈢殑鎺掑簭<br/><br/><br/>绗竴椤逛换鍔℃槸棰勬帓搴忥紝鎮ㄥ皢鍐冲畾鍥剧墖涓殑瑙掕壊鏄儚鎮紝杩樻槸涓嶅儚鎮紝鎴栬�呮偍涓嶇‘瀹�<br/><br/><br/>鎺ヤ笅鏉ワ紝鎮ㄥ皢瀵瑰凡鎺掑簭鐨勫浘鐗囪繘琛屽垎绫汇��',
+ values_step_2_title:'灏嗘偍鐨勫洖澶嶅垎绫�',
+ values_step_2_content:'鍦ㄤ笅涓�姝ヤ腑锛屾偍灏嗘妸鍥惧儚鍒嗕负涔濅釜鍗曠嫭鐨勭被鍒�傛瘡涓被鍒腑鍏佽鐨勫浘鍍忔暟閲忔槸鍥哄畾鐨勩�傛墍鏈夊浘鍍忛兘蹇呴』杩涜鍒嗙被锛屽鏋滄偍瑙夊緱灏嗗浘鍍忔斁鍦ㄤ簡鎯宠鏇存敼鐨勪綅缃紝鎮ㄥ皢鏈夋満浼氳繑鍥炲苟鏇存敼绫诲埆銆傞噸瑕佺殑鏄紝姣忎釜绫诲埆涓墍閫夊浘鍍忎粠宸﹀埌鍙虫帓鍒楃殑椤哄簭鏃犲叧绱ц銆傛澶栵紝璇锋敞鎰忔彁绀烘湰韬紱浣犱細琚棶鍙婁笌浣犵浉浼煎拰涓嶅悓鐨勭収鐗囥��',
+ values_step_names:'鏈�鍠滄锛屾渶涓嶅枩娆紝闈炲父鍠滄锛岄潪甯镐笉鍠滄锛屽枩娆紝涓嶅枩娆紝鏈夌偣鍠滄锛屾湁涓�浜涗笉鍠滄锛屼腑鎬�',
+ values_step_tips_for_1:'閫夋嫨%C鐨�%N寮犲浘鐗�',
+ values_step_tips_for_2:'閫夋嫨%C鐨�%N寮犲浘鐗�',
+ values_step_tips_for_3:'杩欐槸鍓╀笅鐨�%N寮犵収鐗囥�傜洰鍓嶏紝浠栦滑灏嗚鍒嗛厤鍒扳��%C鈥濈被鍒��',
values_step_tips:'鎮ㄦ斁缃湪璇ョ被鍒腑鐨勫浘鍍忎粠宸﹀埌鍙崇殑椤哄簭鏃犲叧绱ц銆�',
values_select_tips:'浠庝笅鍥句腑閫夋嫨',
values_select:'閫変腑',
@@ -79,8 +84,8 @@
values_mostLikeMe:'鏈�鍍忔垜',
values_mostUnLikeMe:'鏈�涓嶅儚鎴�',
values_no_select:'鏃犲浘鍙��',
- values_pic_tmpArea:'鍥剧墖鏆傚瓨鍖�',
- values_pic_tmpArea_desc:'娉ㄦ剰锛�<br> 鍚屼竴琛屼腑鐨勬墍鏈夊浘鐗囬兘灞炰簬鍚屼竴绫诲埆銆�<br> 鎮ㄤ笉闇�瑕佽繛缁璐��<br> 浣犲彧闇�瑕佹敞鎰忓瀭鐩撮『搴忋��',
+ values_pic_tmpArea:'鏆傚瓨鍖�',
+ values_pic_tmpArea_desc:'杩欐槸鎮ㄦ煡鐪嬫牴鎹浘鐗囬�夋嫨鍒涘缓鐨勭被鍒殑鏈轰細銆備綔涓烘彁閱掞紝鎮ㄥ湪姣忎釜绫诲埆涓斁缃殑鍥惧儚浠庡乏鍒板彸鐨勯『搴忔棤鍏崇揣瑕併�傚鏋滀綘瑙夊緱浣犳兂鍥涘绉诲姩鍥剧墖锛屼綘蹇呴』鍏堟妸瀹冧滑鎷栧埌鏆傚瓨鍖猴紝鐒跺悗鍐嶆妸瀹冧滑鏀捐繘涓�涓柊鐨勭被鍒�備负浜嗙敤鍙︿竴涓浘鐗囨浛鎹㈢被鍒腑鐨勪竴寮犲浘鐗囷紝蹇呴』灏嗕袱寮犲浘鐗囨嫋鍒版殏瀛樺尯銆備竴鏃︽偍瀵硅嚜宸辩殑閫夋嫨鎰熷埌婊℃剰锛屽崟鍑烩�滄彁浜も�濓紝鎮ㄧ殑閫夋嫨灏嗘渶缁堢‘瀹氥��',
values_nextStepTips_tips:'璇烽�氳繃灏嗗浘鍍忓垎涓轰節绫绘潵缁嗗寲鍥惧儚鐨勬帓搴忓拰鎺掑悕銆傝娉ㄦ剰锛屾偍鍙互鍦ㄦ瘡涓被鍒腑鏀剧疆鐨勫浘鍍忔暟閲忔槸鍥哄畾鐨勩��'
}
diff --git a/src/views/exam/paper/values.vue b/src/views/exam/paper/values.vue
index de3dfc9..59dc52e 100644
--- a/src/views/exam/paper/values.vue
+++ b/src/views/exam/paper/values.vue
@@ -1,5 +1,16 @@
<template>
<div>
+ <el-container class="app-item-contain step1" v-if="step === 'step0'">
+ <el-header class="">
+ <h1>{{$t('values_step_0_title')}}</h1>
+ </el-header>
+ <el-main class="">
+ <div v-html="$t('values_step_0_content')"></div>
+ <el-row class="do-align-center">
+ <el-button @click="step0_next" type="primary" round>{{$t('startDo')}}</el-button>
+ </el-row>
+ </el-main>
+ </el-container>
<el-container class="app-item-contain step1" v-if="step === 'step1'">
<el-header class="">
<h1>{{$t('values_title')}}</h1>
@@ -41,33 +52,53 @@
</div>
</el-main>
</el-container>
+ <el-container class="app-item-contain step1" v-if="step === 'step2-0'">
+ <el-header class="">
+ <h1>{{$t('values_step_2_title')}}</h1>
+ </el-header>
+ <el-main class="">
+ <div v-html="$t('values_step_2_content')"></div>
+ <el-row class="do-align-center">
+ <el-button @click="step2_0_next" type="primary" round>{{$t('startDo')}}</el-button>
+ </el-row>
+ </el-main>
+ </el-container>
<el-container class="app-item-contain step2" v-if="step === 'step2'">
<el-main class="">
<div>
- <div class="tag-group">
+ <div class="tag-group" style="display: flex;">
<span class="tag-group__title"
- style="padding-right: 20px;font-size: 26px;">{{$t('values_cur_step')}}锛坽{step2SubStep}} /
+ style="padding-right: 10px;font-size: 26px;margin: auto 0px;">{{$t('values_cur_step')}}锛坽{step2SubStep}} /
{{step2ScoreRanges.length}})</span>
- <el-tag v-for="item in step2ScoreRanges" :key="item.itemOrder"
- :type="getStep2StepTagType(item.step)" style="margin: 0 2px;font-size: 26px;" size="large"
- effect="light">
- {{ item.quantity }}
- </el-tag>
+ <div>
+ <div style="display: flex;padding: 5px 0;">
+ <div v-for="item in step2ScoreRanges" :key="item.itemOrder" style="margin: 0 2px;font-size: 12px;width: 100px;text-align: center;" size="large">
+ {{ item.stepName }}
+ </div>
+ </div>
+ <div>
+ <el-tag v-for="item in step2ScoreRanges" :key="item.itemOrder"
+ :type="getStep2StepTagType(item.step)" style="margin: 0 2px;font-size: 26px;width: 100px;text-align: center;" size="large"
+ effect="light">
+ {{ item.quantity }}
+ </el-tag>
+ </div>
+ </div>
</div>
<div style="display: flex;justify-content: space-between;">
<div style="line-height: 50px;text-indent: 2em;">
<div
v-if="(step2SubStep == step2ScoreRanges.length) && (step2ScoreRanges.length % 2 == 1)">
- {{$t('values_step_tips_for_3').replace('%N',getStep2StepItem(step2SubStep).quantity)}}
+ {{$t('values_step_tips_for_3').replace('%N',getStep2StepItem(step2SubStep).quantity).replace('%C',getStep2StepItem(step2SubStep).stepName)}}
</div>
<div v-else>
- {{(step2SubStep % 2 == 1)?$t('values_step_tips_for_1').replace('%N',getStep2StepItem(step2SubStep).quantity):$t('values_step_tips_for_2').replace('%N',getStep2StepItem(step2SubStep).quantity)}}
+ {{$t('values_step_tips_for_1').replace('%N',getStep2StepItem(step2SubStep).quantity).replace('%C',getStep2StepItem(step2SubStep).stepName)}}
</div>
<div style="color: red;">
{{$t('values_step_tips')}}
</div>
</div>
- <div style="">
+ <div style="margin-top: auto;">
<el-button type="primary" round @click="step2_pre" v-if="step2SubStep>1">{{$t('pre')}}
</el-button>
<el-button type="primary" round @click="step2_next">{{$t('next')}}</el-button>
@@ -121,7 +152,7 @@
<div style="position: fixed;z-index: 999; width:90%; top: 56px;">
<div style="display: flex;justify-content: flex-end;padding: 10px;background-color: #f5f7fa;">
<div style="padding-right: 20px;width:50%;" v-html="$t('values_pic_tmpArea_desc')"></div>
- <div style="padding: 0 10px;">{{$t('values_pic_tmpArea')}}</div>
+ <div style="padding: 0 10px;width:80px;">{{$t('values_pic_tmpArea')}}</div>
<draggable animation="300" class="pic-tmparea-div"
style="border: 1px solid gray;padding: 10px;width: 45%;"
:list="step3EWEIArea[0]" :options="{group:{name:'EWEIArea',pull:'clone'}}"
@@ -138,11 +169,11 @@
</el-button>
</div>
</div>
- <div style="display:flex;margin-top: 160px;">
- <div style="display: inline-block;min-width: 150px;text-align: right;">
+ <div style="display:flex;margin-top: 200px;">
+ <div style="display: inline-block;min-width: 150px;text-align: right;padding-right: 5px;">
<div class="mul-inlinediv-row mul-inlinediv-lineheight"
v-for="(item,index) in step2ScoreRanges">
- {{(index == 0)?$t('values_mostLikeMe'):' '}}{{(index == (step2ScoreRanges.length-1))?$t('values_mostUnLikeMe'):' '}}
+ {{item.stepName}}
</div>
</div>
<div style="display: inline-block;width: 20px;margin-top: 4px;">
@@ -150,12 +181,14 @@
v-for="(item,index) in step2ScoreRanges">
</div>
</div>
+ <!--
<div style="display: inline-block;min-width: 20px;text-align: right;">
<div class="mul-inlinediv-row mul-inlinediv-lineheight"
v-for="(item,index) in step2ScoreRanges">
{{item.deviate}}
</div>
</div>
+ -->
<div class="mul-inlinediv-box">
<div class="mul-inlinediv" v-for="item in step2ScoreRanges">
@@ -214,7 +247,7 @@
},
data() {
return {
- step: 'step1',
+ step: 'step0',
step1Start: false,
step1SelectedNum: 0,
step2ScoreRanges: [
@@ -233,6 +266,7 @@
"completed": false,
"questionReports": null,
"step": 0,
+ "stepName":'',
"selected": 0
}],
step2SubStep: 1,
@@ -598,6 +632,9 @@
window.clearInterval(this.timer)
},
methods: {
+ step0_next(){
+ this.step = "step1"
+ },
step1_start() {
this.step = "step1"
this.step1Start = true
@@ -609,9 +646,7 @@
//鍥炴樉锛屾病鏈夊彲閫夌殑鏃跺�欙紝杩涘叆涓嬩竴姝�
let c = this.sumStep1UnSelectedNum()
if (c <= 0 && this.itemSize > 0) {
- this.step = "step2"
- this.sortQuestions()
- this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder)
+ this.step1_next()
}
},
step1_next() {
@@ -621,6 +656,7 @@
this.$message.error(_this.$t('values_nextStepTips_choices_all'))
return
}
+ /*
this.$confirm(_this.$t('values_nextStepTips_tips'), _this.$t('prompt'), {
confirmButtonText: _this.$t('determine'),
cancelButtonText: _this.$t('cancel'),
@@ -632,7 +668,14 @@
}).catch(() => {
});
-
+ */
+ this.step = "step2-0"
+ },
+ step2_0_next(){
+ let _this = this
+ _this.step = "step2"
+ _this.sortQuestions()
+ _this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder)
},
step2_pre() {
if (this.step2SubStep > 1) {
@@ -990,6 +1033,10 @@
}
console.log('initTestData...e', this.questionItems)
},
+ /**
+ * 璁剧疆step2ScoreRanges瀛愰」鐨勬楠ら『搴忓強姝ｈ礋璺濈鍊�
+ * @param {Object} arr
+ */
initStep2ScoreRanges(arr) {
//console.log('initStep2ScoreRanges...s', arr)
let _this = this
@@ -1036,7 +1083,34 @@
_this.step2ScoreRanges[i]['selected'] = 0
}
console.log('initStep2ScoreRanges...e', this.step2ScoreRanges)
+ _this.initStep2ScoreRangesStepName()
_this.initQuestionItems()
+ },
+ initStep2ScoreRangesStepName(){
+ let _this = this
+ let max = _this.step2ScoreRanges.length
+ let splitChar = ","
+ if(_this.$t('values_step_names').indexOf("锛�")>=0){
+ splitChar = "锛�"
+ }
+ let names = _this.$t('values_step_names').split(splitChar)
+ console.log('initStep2ScoreRangesStepName',names)
+ for (let i = 0; i < _this.step2ScoreRanges.length; i++) {
+ if(_this.step2ScoreRanges[i]['step'] > names.length){
+ _this.step2ScoreRanges[i]['stepName'] = names[names.length-1]
+ } else {
+ _this.step2ScoreRanges[i]['stepName'] = names[_this.step2ScoreRanges[i]['step']-1]
+ }
+ //璁剧疆鏈�鍚庣殑Step鐨凷tepName涓哄浐瀹氬��
+ if(_this.step2ScoreRanges[i]['step'] >= max){
+ if(max % 2 == 0){//鍋舵暟
+
+ } else {//濂囨暟
+ _this.step2ScoreRanges[i]['stepName'] = names[names.length-1]
+ }
+ }
+ }
+ console.log('initStep2ScoreRangesStepName',_this.step2ScoreRanges)
},
initQuestionItems(){
let _this = this
@@ -1058,6 +1132,15 @@
return 'info'
}
},
+ getStep2StepTagTypeName(step) {
+ if (this.step2SubStep > step) {
+ return ''
+ } else if (this.step2SubStep == step) {
+ return 'success'
+ } else {
+ return 'info'
+ }
+ },
getStep2StepItem(step) {
//console.log('getStep2StepItem',step,this.step2ScoreRanges)
let _this = this
--
Gitblit v1.9.1