增加提示页面，增加提示栏目信息

84702473

2023-04-12 bb19eace15bc3edceee523555fac871002b778f4

增加提示页面，增加提示栏目信息

 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',

 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>&nbsp;&nbsp;同一行中的所有图片都属于同一类别。<br>&nbsp;&nbsp;您不需要连续订购。<br>&nbsp;&nbsp;你只需要注意垂直顺序。',
    values_pic_tmpArea:'暂存区',
    values_pic_tmpArea_desc:'这是您查看根据图片选择创建的类别的机会。作为提醒，您在每个类别中放置的图像从左到右的顺序无关紧要。如果你觉得你想四处移动图片，你必须先把它们拖到暂存区，然后再把它们放进一个新的类别。为了用另一个图片替换类别中的一张图片，必须将两张图片拖到暂存区。一旦您对自己的选择感到满意，单击“提交”，您的选择将最终确定。',
    values_nextStepTips_tips:'请通过将图像分为九类来细化图像的排序和排名。请注意，您可以在每个类别中放置的图像数量是固定的。'
    
}

 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'):' '}}&nbsp;&nbsp;
                            {{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的StepName为固定值
                    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