vaq增加根据token生成随机数排列图片、修改界面、修改文字

阳洁

2024-01-05 ee0ac46d265f20c3b2c10385c5afa2efb0512a5a

vaq增加根据token生成随机数排列图片、修改界面、修改文字

 package-lock.json

@@ -3568,8 +3568,7 @@
      "version": "4.6.0",
      "resolved": "http://registry.npm.taobao.org/co/download/co-4.6.0.tgz",
      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
      "dev": true,
      "optional": true
      "dev": true
    },
    "coa": {
      "version": "2.0.2",
@@ -6131,8 +6130,7 @@
        "ansi-regex": {
          "version": "2.1.1",
          "bundled": true,
          "dev": true,
          "optional": true
          "dev": true
        },
        "aproba": {
          "version": "1.2.0",
@@ -6153,14 +6151,12 @@
        "balanced-match": {
          "version": "1.0.0",
          "bundled": true,
          "dev": true,
          "optional": true
          "dev": true
        },
        "brace-expansion": {
          "version": "1.1.11",
          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
            "balanced-match": "^1.0.0",
            "concat-map": "0.0.1"
@@ -6175,20 +6171,17 @@
        "code-point-at": {
          "version": "1.1.0",
          "bundled": true,
          "dev": true,
          "optional": true
          "dev": true
        },
        "concat-map": {
          "version": "0.0.1",
          "bundled": true,
          "dev": true,
          "optional": true
          "dev": true
        },
        "console-control-strings": {
          "version": "1.1.0",
          "bundled": true,
          "dev": true,
          "optional": true
          "dev": true
        },
        "core-util-is": {
          "version": "1.0.2",
@@ -6305,8 +6298,7 @@
        "inherits": {
          "version": "2.0.3",
          "bundled": true,
          "dev": true,
          "optional": true
          "dev": true
        },
        "ini": {
          "version": "1.3.5",
@@ -6318,7 +6310,6 @@
          "version": "1.0.0",
          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
            "number-is-nan": "^1.0.0"
          }
@@ -6333,7 +6324,6 @@
          "version": "3.0.4",
          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
            "brace-expansion": "^1.1.7"
          }
@@ -6341,14 +6331,12 @@
        "minimist": {
          "version": "0.0.8",
          "bundled": true,
          "dev": true,
          "optional": true
          "dev": true
        },
        "minipass": {
          "version": "2.3.5",
          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
            "safe-buffer": "^5.1.2",
            "yallist": "^3.0.0"
@@ -6367,7 +6355,6 @@
          "version": "0.5.1",
          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
            "minimist": "0.0.8"
          }
@@ -6448,8 +6435,7 @@
        "number-is-nan": {
          "version": "1.0.1",
          "bundled": true,
          "dev": true,
          "optional": true
          "dev": true
        },
        "object-assign": {
          "version": "4.1.1",
@@ -6461,7 +6447,6 @@
          "version": "1.4.0",
          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
            "wrappy": "1"
          }
@@ -6547,8 +6532,7 @@
        "safe-buffer": {
          "version": "5.1.2",
          "bundled": true,
          "dev": true,
          "optional": true
          "dev": true
        },
        "safer-buffer": {
          "version": "2.1.2",
@@ -6584,7 +6568,6 @@
          "version": "1.0.2",
          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
            "code-point-at": "^1.0.0",
            "is-fullwidth-code-point": "^1.0.0",
@@ -6604,7 +6587,6 @@
          "version": "3.0.1",
          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-regex": "^2.0.0"
          }
@@ -6648,14 +6630,12 @@
        "wrappy": {
          "version": "1.0.2",
          "bundled": true,
          "dev": true,
          "optional": true
          "dev": true
        },
        "yallist": {
          "version": "3.0.3",
          "bundled": true,
          "dev": true,
          "optional": true
          "dev": true
        }
      }
    },
@@ -11028,8 +11008,7 @@
      "version": "4.0.8",
      "resolved": "http://registry.npm.taobao.org/rx-lite/download/rx-lite-4.0.8.tgz",
      "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
      "dev": true,
      "optional": true
      "dev": true
    },
    "rx-lite-aggregates": {
      "version": "4.0.8",
@@ -11350,6 +11329,11 @@
        }
      }
    },
    "seedrandom": {
      "version": "3.0.5",
      "resolved": "https://registry.npmmirror.com/seedrandom/-/seedrandom-3.0.5.tgz",
      "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
    },
    "select-hose": {
      "version": "2.0.0",
      "resolved": "http://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz",

 package.json

@@ -24,6 +24,7 @@
    "normalize.css": "8.0.1",
    "nprogress": "0.2.0",
    "pdfh5": "^1.4.2",
    "seedrandom": "^3.0.5",
    "vue": "2.6.10",
    "vue-i18n": "^8.15.3",
    "vue-router": "^3.0.3",

 src/lang/en.js

@@ -59,11 +59,11 @@
  langWelcomeThai: 'ยินดีตอนรับสู่เว็บไซย์สำหรับทำแบบทดสอบของ',
  langOptionThai: 'กรุณาเลือกภาษา และคลิก “ดำเนินการต่อ.',
    values_finishValuesInfo:'Thank you! Your responses have been submitted. You can close this page now.',
    values_nextStepTips_del_unnecessary:'Please delete redundant selections',
    values_nextStepTips_del_unnecessary:'The number of pictures you selected reached the limit. If you want to make changes, please remove a selected picture before selecting a new picture.',
    values_nextStepTips_add_enough:'Please add enough choices',
    values_nextStepTips_choices_all:'Please make all choices',
    values_title:'Pre-Sort Your Response',
    values_title_description:'This is the pre-sorting section of the test. <br/>During this section, you will choose the pictures in which the character is most like you. <br/>All of these pictures will be shown again in later sections for the final sorting process.',
    values_title:'Part 1: Pre-selected images',
    values_title_description:'This is the pre-sorting section of the test. <br/>During this section, you will evaluate if each picture is like you or not like you. <br/>All of these pictures will be shown again in later sections for the final sorting process.',
    values_title_description_1:'If you think the main character is like you, click ',
    values_title_description_1_2:' .',
    values_title_description_2:'If you think the main character is not like you, click ',
@@ -72,28 +72,38 @@
    values_title_description_3_2:' .',
    values_title_description_4:'Click ',
    values_title_description_4_2:' to zoom in the picture.',
  values_title_description_5:'Note: In this section, you only need to conduct a preliminary assessment of the images. You do not have to be entirely precise, and there is always the option to make adjustments at a later time.',
    values_title_description_6: ' pictures left',
    next:'Next',
    pre:'Back',
    commit:'Submit',
    values_cur_step:'Current step',
    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_0_content:'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;In this assessment, you need to assess to what extent the main character in each picture is like you. When evaluating how the main character is like you, consider both the image and the caption together. The picture illustrates/visualizes a concept, while the caption summarizes a concept in a general way. Your task is to assess the extent to which the combination of the picture and caption accurately reflects how the main character is like you.<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Also, there is no right or wrong or good or bad choice, so please make your choice based on your own situation.<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;In the first step of the quiz, you need to pre-select the images and categorize them into "like me", "not like me" and "not sure".<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;In the second step of the quiz, you need to make further selections of images.<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;At the end of the quiz, you will see all the choices you have made and will be able to organize and modify them.',
    values_step_2_title:'Part 2: Detailed Sorting',
    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_names_unit_pre:'',
    values_step_names_unit:'you',
    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',
  values_step_tips_for_0:'Here are the remaining 11 pictures. For now, they will be assigned to the "NEUTRAL" category. ',
    values_step_tips_for_1:'In this section, you need to carefully examine all the pictures you have previously selected. 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. ',
    values_step_tips_for_2:'Select %N pictures in which the main character is %C you。',
    values_step_tips_for_3:'Please click the ',
    values_step_tips_for_3_1:' to select.',
    values_step_tips_for_4:'Click on the',
    values_step_tips_for_4_1:'to cancel the selected image.',
    values_step_tips_for_5:'To enlarge the image, please click the',
    values_step_tips_for_5_1:'.',
    values_step_tips:'The order of the images you place in this category from left to right does not matter. ',
    values_select_tips_like:'Like me',
    values_select_tips_neutral:'Neutral',
    values_select_tips_unlike:'Not like me',
  values_select:'Select',
    values_select_exchange:'exchange',
    values_mostLikeMe:'Most like me ',
    values_mostUnLikeMe:'Most unlike me',
    values_no_select:'No picture left',
    values_pic_tmpArea:'Picture Staging Area',
    values_pic_tmpArea_desc:'This is your opportunity to review the categories in which you have created based on your picture selections. As a reminder, the order of the images you place in each category from left to right does not matter. If you feel that you would like to move pictures around, you must drag them to the staging area before placing them into a new category. In order to replace one picture in a category with another, both pictures must be dragged into the staging area. Once you are satisfied with your choices, click "Submit," and your choices will be finalized.',
    values_pic_tmpArea_desc:'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is your opportunity to review the categories in which you have created based on your picture selections.<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;As a reminder, the order of the images you place in each category from left to right does not matter.<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;If you feel that you would like to move pictures around, you must drag them to the staging area before placing them into a new category. In order to replace one picture in a category with another, both pictures must be dragged into the staging area.<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Once you are satisfied with your choices, click "Submit," and your choices will be finalized.',
    values_nextStepTips_tips:'Please refine the sort and rank the images by selecting them into the nine categories. Please note that the number of images you can put in each of the categories is fixed.'
}

 src/lang/zh.js

@@ -59,7 +59,7 @@
  langWelcomeThai: 'ยินดีตอนรับสู่เว็บไซย์สำหรับทำแบบทดสอบของ',
  langOptionThai: 'กรุณาเลือกภาษา และคลิก “ดำเนินการต่อ.',
    values_finishValuesInfo: '测试结束！您的所有选项数据已经上传至服务器，并已保存好。您可以关闭浏览器，退出答题界面。',
    values_nextStepTips_del_unnecessary:'请删除多余的选择',
    values_nextStepTips_del_unnecessary:'请不要多选图片。如果需要更换图片，请先移除一张已选图片，再重新进行选择。',
    values_nextStepTips_add_enough:'请选够图片',
    values_nextStepTips_choices_all:'请对所有图片做出选择',
    values_title:'第一步：预选图片',
@@ -72,22 +72,33 @@
    values_title_description_3_2:' 。',
    values_title_description_4:'若需放大图片，请点击 ',
    values_title_description_4_2:' 。',
    next:'下一步',
  values_title_description_5:' 注意：这一步中只是对图片进行粗略的筛选。你不需要做到完全准确，后面可以随时修改。',
    values_title_description_6: ' 张图片待选',
  next:'下一步',
    pre:'返回',
    commit:'提交',
    values_cur_step:'当前步骤',
    values_step_0_title:'说明',
    values_step_0_content:'指导语：在本测验中，你需要评估每张图片中的主角在多大程度上与你相似。在测验的最后，你需要对这些图片按照与你最相似到与你最不相似的顺序进行排序。<br/>在测验的第一步，你需要对这些图片进行预选，把所有图片归类为“与你相似”，“与你不相似”，“不确定”这三类。<br/>在测验的第二步，你需要把图片放到更加细致的9个类别中。',
    values_step_0_content:'在本测验中，你需要评估每张图片中的主角在多大程度上与你相似。每张图片中主角都在做一种活动，你可能实际上并没有做过图中的活动。但在进行评估的时候，请注意，图中的活动代表了与之相似的一类活动。即使你没有做过图中的活动，只要你在某种程度上感到主角与你相似，就可以选择那张图片。<br/>另外，选择没有对错和好坏之分，请根据自己的实际情况做出选择。<br/>在测验的第一步，你需要对这些图片进行预选，把所有图片归类为“与你相似”，“与你不相似”，“不确定”这三类。<br/>在测验的第二步，你需要对图片进行更细致的选择。<br/>在测验的最后，你将会看到自己进行的所有选择，并且能够进行整理和修改。',
    values_step_2_title:'第二步：对你选的图片进行更细致的分类',
    values_step_2_content:'在这一步，你需要把这些图片分为9个类别，最终每个类别中的图片数量是事先就固定的。每张图片都必须被归在某个类别中。但是，如果你想修改之前已经放到某一类别的图片，你可以点击“返回”进行修改。请注意，每个类别内部图片从左到右的顺序是无关紧要的，所以你不需要对每个类别内的图片进行排序。另外，请注意，这个环节是让你根据图片中的主角是否与你相似而做出选择。',
    values_step_names:'最相似，最不相似，很相似，很不相似，相似，不相似，有点相似，有点不相似，不确定是否相似',
    values_step_names_unit_pre:'与你',
    values_step_names_unit:'',
    values_step_tips_for_1:'请选出%N张主角与你%C的图片',
    values_step_tips_for_2:'请选出%N张主角与你%C的图片',
    values_step_tips_for_3:'这是剩下的%N张图片。它们现在暂时被自动选入了“不确定是否与你相似”这一类别',
    values_step_tips:'每个类别内部图片从左到右的顺序是无关紧要的。',
    values_step_tips_for_0:'这是剩下的11张图片。它们现在暂时被自动选入了“不确定是否与你相似”这一类别',
    values_step_tips_for_1:'在这个部分，你需要对刚才的所有图片进行筛选。',
    values_step_tips_for_2:'请在下面的图片中选出%N张与你%C的图片。',
    values_step_tips_for_3:'请点击',
    values_step_tips_for_3_1:'进行选择。',
    values_step_tips_for_4:'点击',
    values_step_tips_for_4_1:'可取消选择的图片。',
    values_step_tips_for_5:'若需放大图片，请点击',
    values_step_tips_for_5_1:'。',
    values_step_tips:'注意：这%N图片不需要分先后顺序。 ',
    values_select_tips:'从以下图片中做出选择',
    values_select_tips_like:'与我相似',
    values_select_tips_neutral:'不确定',
    values_select_tips_unlike:'与我不相似',
    values_select:'选中',
    values_select_exchange:'对调',
    values_mostLikeMe:'最像我',

 src/views/exam/paper/guide.vue

@@ -27,7 +27,6 @@
  created () {
  },
  mounted () {

  },
  beforeDestroy () {
    window.clearInterval(this.timer)

 src/views/exam/paper/values.vue

@@ -5,7 +5,7 @@
                <h1>{{$t('values_step_0_title')}}</h1>
            </el-header>
            <el-main class="">
                <div v-html="$t('values_step_0_content')"></div>
                <div class="text-line" 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>
@@ -17,11 +17,12 @@
            </el-header>
            <el-main class="">
                <div>
                    <div v-html="$t('values_title_description')"></div>
                    <div>{{$t('values_title_description_1')}}<img class="tools-button" src="@/assets/exam-paper/good.png" style="width: 15px;position: absolute;margin-top: 2px"/><span style="margin-left: 20px;">{{$t('values_title_description_1_2')}}</span></div>
                    <div>{{$t('values_title_description_2')}}<img class="tools-button" src="@/assets/exam-paper/nogood.png" style="width: 15px;position: absolute;margin-top: 2px"/><span style="margin-left: 20px;">{{$t('values_title_description_2_2')}}</span></div>
                    <div>{{$t('values_title_description_3')}}<img class="tools-button" src="@/assets/exam-paper/question.png" style="width: 15px;position: absolute;margin-top: 2px"/><span style="margin-left: 20px;">{{$t('values_title_description_3_2')}}</span></div>
                    <div>{{$t('values_title_description_4')}}<img class="tools-button" src="@/assets/exam-paper/scale.png" style="width: 15px;height: 15px;position: absolute;margin-top: 2px"/><span style="margin-left: 20px;">{{$t('values_title_description_4_2')}}</span></div>
                    <div class="text-line" v-html="$t('values_title_description')"></div>
                    <div class="text-line">{{$t('values_title_description_1')}}<img class="tools-button" src="@/assets/exam-paper/good.png" style="width: 15px;position: absolute;margin-top: 6px"/><span style="margin-left: 20px;">{{$t('values_title_description_1_2')}}</span></div>
                    <div class="text-line">{{$t('values_title_description_2')}}<img class="tools-button" src="@/assets/exam-paper/nogood.png" style="width: 15px;position: absolute;margin-top: 6px"/><span style="margin-left: 20px;">{{$t('values_title_description_2_2')}}</span></div>
                    <div class="text-line">{{$t('values_title_description_3')}}<img class="tools-button" src="@/assets/exam-paper/question.png" style="width: 15px;position: absolute;margin-top: 6px"/><span style="margin-left: 20px;">{{$t('values_title_description_3_2')}}</span></div>
                    <div class="text-line">{{$t('values_title_description_4')}}<img class="tools-button" src="@/assets/exam-paper/scale.png" style="width: 15px;height: 15px;position: absolute;margin-top: 6px"/><span style="margin-left: 20px;">{{$t('values_title_description_4_2')}}</span></div>
                    <div class="text-line">{{$t('values_title_description_5')}}</div>
                </div>

                <div style="display: flex;justify-content: flex-start;padding: 10px 0;">
@@ -30,6 +31,9 @@
                        v-if="(step1Start && itemSize>0)">
                        {{$t('next')}}
                    </el-button>
                </div>
                <div class="selectCount">
                    {{ questionItems.filter(obj=>obj.content===null).length + $t('values_title_description_6') }}
                </div>
                <div class="mullinediv" v-if="step1Start">
                    <div v-for="(question,index1) in questionItems" class="mullinediv-item"
@@ -64,9 +68,12 @@
            </el-main>
        </el-container>
        <el-container class="app-item-contain step2" v-if="step === 'step2'">
            <el-header class="">
                <h1>{{$t('values_step_2_title')}}</h1>
            </el-header>
            <el-main class="">
                <div>
                    <div class="tag-group" style="display: flex;">
                    <!-- <div class="tag-group" style="display: flex;">
                        <span class="tag-group__title"
                            style="padding-right: 10px;font-size: 26px;margin: auto 0px;">{{$t('values_cur_step')}}（{{step2SubStep}} /
                            {{step2ScoreRanges.length}})</span>
@@ -84,18 +91,24 @@
                                </el-tag>
                                </div>
                            </div>
                    </div>
                    </div> -->
                    <div style="display: flex;justify-content: space-between;">
                        <div style="line-height: 50px;text-indent: 2em;">
                        <div class="text-line" style="text-indent: 2em;">
                            <div v-if="step2SubStep == 1">
                                {{ $t('values_step_tips_for_1') }}
                            </div>
                            <div
                                v-if="(step2SubStep == step2ScoreRanges.length) && (step2ScoreRanges.length % 2 == 1)">
                                {{$t('values_step_tips_for_3').replace('%N',getStep2StepItem(step2SubStep).quantity).replace('%C',getStep2StepItem(step2SubStep).stepName.toUpperCase())}}
                                {{$t('values_step_tips_for_0').replace('%N',getStep2StepItem(step2SubStep).quantity).replace('%C',getStep2StepItem(step2SubStep).stepName.toUpperCase())}}
                            </div>
                            <div v-else>
                                {{$t('values_step_tips_for_1').replace('%N',getStep2StepItem(step2SubStep).quantity).replace('%C',getStep2StepItem(step2SubStep).stepName.toUpperCase())}}
                                {{$t('values_step_tips_for_2').replace('%N',getStep2StepItem(step2SubStep).quantity).replace('%C',getStep2StepItem(step2SubStep).stepName.toLowerCase())}}
                            </div>
                            <div class="text-line">{{$t('values_step_tips_for_3')}}<img class="tools-button" src="@/assets/exam-paper/yes.png" style="width: 15px;position: absolute;margin-top: 6px;margin-left: 5px;"/><span style="margin-left: 22px;">{{$t('values_step_tips_for_3_1')}}</span></div>
                            <div class="text-line">{{$t('values_step_tips_for_4')}}<img class="tools-button" src="@/assets/exam-paper/no.png" style="width: 15px;position: absolute;margin-top: 6px;margin-left: 5px;"/><span style="margin-left: 22px;">{{$t('values_step_tips_for_4_1')}}</span></div>
                            <div class="text-line">{{$t('values_step_tips_for_5')}}<img class="tools-button" src="@/assets/exam-paper/scale.png" style="width: 15px;position: absolute;margin-top: 6px;margin-left: 5px;"/><span style="margin-left: 22px;">{{$t('values_step_tips_for_5_1')}}</span></div>
                            <div style="color: red;">
                                {{$t('values_step_tips')}}
                                {{$t('values_step_tips').replace('%N',getStep2StepItem(step2SubStep).quantity)}}
                            </div>
                        </div>
                        <div style="margin-top: auto;">
@@ -124,7 +137,151 @@
                            </div>
                        </div>
                    </div>
                    <el-divider content-position="left">{{$t('values_select_tips')}}</el-divider>


					

                    <!-- 选择相似的图片 -->
                    <div v-if="step2SubStep % 2 >= 1">
                        <!-- 与我相似 -->
                        <el-divider content-position="left">{{$t('values_select_tips_like')}}</el-divider>
                        <div style="height: auto;overflow: auto;">
                            <div class="mullinediv" style="" v-if="questionItems && questionItems.filter(obj=>Number(obj.content)===0).length>0">
                                <div v-for="(question,index3) in questionItems.filter(obj=>Number(obj.content)===0)" class="mullinediv-item"
                                    v-if="isNull(question.subjectId)">
                                    <el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy
                                        :preview-src-list="[question.imgUrl]"></el-image>
                                    <div style="display: flex; justify-content: space-between;">
                                        <el-image class="tools-button" :src="require('@/assets/exam-paper/yes.png')"
                                            @click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)">
                                        </el-image>
                                        <el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
                                            @click="previewImg('q2Img'+question.id)"></el-image>
                                    </div>
                                </div>
                            </div>
                            <div class="noSelect" style="" v-if="questionItems.filter(obj=>Number(obj.content)===0 && obj.subjectId===null).length==0">
                                {{$t('values_no_select')}}
                            </div>
                        </div>

                        <!-- 不确定 -->
                        <el-divider content-position="left">{{$t('values_select_tips_neutral')}}</el-divider>
                        <div style="height: auto;overflow: auto;">
                            <div class="mullinediv" style="" v-if="questionItems && questionItems.filter(obj=>Number(obj.content)===1).length>0">
                                <div v-for="(question,index3) in questionItems.filter(obj=>Number(obj.content)===1)" class="mullinediv-item"
                                    v-if="isNull(question.subjectId)">
                                    <el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy
                                        :preview-src-list="[question.imgUrl]"></el-image>
                                    <div style="display: flex; justify-content: space-between;">
                                        <el-image class="tools-button" :src="require('@/assets/exam-paper/yes.png')"
                                            @click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)">
                                        </el-image>
                                        <el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
                                            @click="previewImg('q2Img'+question.id)"></el-image>
                                    </div>
                                </div>
                            </div>
                            <div class="noSelect" style="" v-if="questionItems.filter(obj=>Number(obj.content)===1 && obj.subjectId===null).length==0">
                                {{$t('values_no_select')}}
                            </div>
                        </div>

                        <!-- 与我不相似 -->
                        <el-divider content-position="left">{{$t('values_select_tips_unlike')}}</el-divider>
                        <div style="height: auto;overflow: auto;">
                            <div class="mullinediv" style="" v-if="questionItems && questionItems.filter(obj=>obj.content===2).length>0">
                                <div v-for="(question,index3) in questionItems.filter(obj=>obj.content===2)" class="mullinediv-item"
                                    v-if="isNull(question.subjectId)">
                                    <el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy
                                        :preview-src-list="[question.imgUrl]"></el-image>
                                    <div style="display: flex; justify-content: space-between;">
                                        <el-image class="tools-button" :src="require('@/assets/exam-paper/yes.png')"
                                            @click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)">
                                        </el-image>
                                        <el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
                                            @click="previewImg('q2Img'+question.id)"></el-image>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="mullinediv" style="" v-if="sumStep2UnSelectedNum()<=0">
                                {{$t('values_no_select')}}
                            </div> -->
                            <div class="noSelect" style="" v-if="questionItems.filter(obj=>Number(obj.content)===2 && obj.subjectId===null).length==0">
                                {{$t('values_no_select')}}
                            </div>
                        </div>
                    </div>

                    <!-- 选择不相似的图片 -->
                    <div v-if="step2SubStep % 2 == 0">
                        <!-- 与我不相似 -->
                        <el-divider content-position="left">{{$t('values_select_tips_unlike')}}</el-divider>
                        <div style="height: auto;overflow: auto;">
                            <div class="mullinediv" style="" v-if="questionItems && questionItems.filter(obj=>Number(obj.content)===2).length>0">
                                <div v-for="(question,index3) in questionItems.filter(obj=>Number(obj.content)===2)" class="mullinediv-item"
                                    v-if="isNull(question.subjectId)">
                                    <el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy
                                        :preview-src-list="[question.imgUrl]"></el-image>
                                    <div style="display: flex; justify-content: space-between;">
                                        <el-image class="tools-button" :src="require('@/assets/exam-paper/yes.png')"
                                            @click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)">
                                        </el-image>
                                        <el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
                                            @click="previewImg('q2Img'+question.id)"></el-image>
                                    </div>
                                </div>
                            </div>
                            <div class="noSelect" style="" v-if="questionItems.filter(obj=>Number(obj.content)===2 && obj.subjectId===null).length==0">
                                {{$t('values_no_select')}}
                            </div>
                        </div>

                        <!-- 不确定 -->
                        <el-divider content-position="left">{{$t('values_select_tips_neutral')}}</el-divider>
                        <div style="height: auto;overflow: auto;">
                            <div class="mullinediv" style="" v-if="questionItems && questionItems.filter(obj=>Number(obj.content)===1).length>0">
                                <div v-for="(question,index3) in questionItems.filter(obj=>Number(obj.content)===1)" class="mullinediv-item"
                                    v-if="isNull(question.subjectId)">
                                    <el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy
                                        :preview-src-list="[question.imgUrl]"></el-image>
                                    <div style="display: flex; justify-content: space-between;">
                                        <el-image class="tools-button" :src="require('@/assets/exam-paper/yes.png')"
                                            @click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)">
                                        </el-image>
                                        <el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
                                            @click="previewImg('q2Img'+question.id)"></el-image>
                                    </div>
                                </div>
                            </div>
                            <div class="noSelect" style="" v-if="questionItems.filter(obj=>Number(obj.content)===1 && obj.subjectId===null).length==0">
                                {{$t('values_no_select')}}
                            </div>
                        </div>

                        <!-- 与我相似 -->
                        <el-divider content-position="left">{{$t('values_select_tips_like')}}</el-divider>
                        <div style="height: auto;overflow: auto;">
                            <div class="mullinediv" style="" v-if="questionItems && questionItems.filter(obj=>Number(obj.content)===0).length>0">
                                <div v-for="(question,index3) in questionItems.filter(obj=>Number(obj.content)===0)" class="mullinediv-item"
                                    v-if="isNull(question.subjectId)">
                                    <el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy
                                        :preview-src-list="[question.imgUrl]"></el-image>
                                    <div style="display: flex; justify-content: space-between;">
                                        <el-image class="tools-button" :src="require('@/assets/exam-paper/yes.png')"
                                            @click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)">
                                        </el-image>
                                        <el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
                                            @click="previewImg('q2Img'+question.id)"></el-image>
                                    </div>
                                </div>
                            </div>
                            <div class="noSelect" style="" v-if="questionItems.filter(obj=>Number(obj.content)===0 && obj.subjectId===null).length==0">
                                {{$t('values_no_select')}}
                            </div>
                        </div>
                    </div>
                    <!-- <el-divider content-position="left">{{$t('values_select_tips')}}</el-divider>
                    <div style="height: auto;overflow: auto;">
                        <div class="mullinediv" style="" v-if="questionItems && questionItems.length>0">
                            <div v-for="(question,index3) in questionItems" class="mullinediv-item"
@@ -143,16 +300,26 @@
                        <div class="mullinediv" style="" v-if="sumStep2UnSelectedNum()<=0">
                            {{$t('values_no_select')}}
                        </div>
                    </div>
                    </div> -->
                </div>
            </el-main>
        </el-container>
        <el-container class="app-item-contain step3" v-if="step === 'step3'">
            <el-main class="">
                <div style="position: fixed;z-index: 999; width:90%; top: 56px;">
                <div style="position: fixed;z-index: 999; width:90%; top: 50px;">
                    <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;width:80px;">{{$t('values_pic_tmpArea')}}</div>
                        <div class="text-line" style="padding-right: 20px;width:50%;">
                            <div v-html="$t('values_pic_tmpArea_desc')">

                            </div>
                            <el-button type="primary" round style="height: fit-content;margin: 0 10px;"
                                @click="step3_commit" :disabled="submitDisable">
                                {{$t('commit')}}
                            </el-button>
                        </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'}}"
@@ -163,10 +330,10 @@
                                <el-image :src="q.imgUrl" :preview-src-list="[q.imgUrl]" fit="fill"></el-image>
                            </div>
                        </draggable>
                        <el-button type="primary" round style="height: fit-content;margin: 0 10px;"
                        <!-- <el-button type="primary" round style="height: fit-content;margin: 0 10px;"
                            @click="step3_commit" :disabled="submitDisable">
                            {{$t('commit')}}
                        </el-button>
                        </el-button> -->
                    </div>
                </div>
                <div style="display:flex;margin-top: 200px;">
@@ -244,6 +411,7 @@
    import examPaperAnswerApi from '@/api/examPaperAnswer'
    import demographyApi from '@/api/demography'
    import draggable from 'vuedraggable'
    import seedrandom from 'seedrandom'

    export default {
        name: 'values',
@@ -334,6 +502,10 @@
                _this.titleItems.push(_this.form.titleItems[0])
                _this.questionItem = _this.form.titleItems[0].questionItems[0]
                _this.questionItems = _this.form.titleItems[0].questionItems

                // 使用token生成随机数排序数组
                _this.tokenSort(_this.questionItems)

                _this.partOrder = _this.questionItem.partOrder
                _this.itemOrder = _this.form.titleItems[0].questionItems[0].itemOrder
                _this.itemSize = _this.form.titleItems[0].questionItems.length
@@ -364,6 +536,10 @@
                            _this.itemSize = _this.form.titleItems[0].questionItems.length
                            _this.questionItem = _this.form.titleItems[0].questionItems[_this.order]
                            _this.questionItems = _this.form.titleItems[0].questionItems

                            // 使用token生成随机数排序数组
                            _this.tokenSort(_this.questionItems)

                            _this.partOrder = _this.questionItem.partOrder
                            _this.initAnswer()
                            _this.formLoading = false
@@ -443,15 +619,26 @@
            window.clearInterval(this.timer)
        },
        methods: {
            // 根据token生成随机数并根据随机数排序questionItems
            tokenSort(array) {
                // 使用token创建随机数生成器
                let rng = seedrandom(this.memberToken)
                if (array) {
                    array.sort((a,b)=>{
                        return rng() - 0.5
                    })
                }
                console.log("list:", this.questionItems)
            },
            step0_next(){
                this.step = "step1"
            },
            step1_start() {
                this.step = "step1"
                this.step1Start = true
                this.questionItems.sort(function(i2, i1) {
                    return (i2.id - i1.id)
                })
                // this.questionItems.sort(function(i2, i1) {
                //     return (i2.id - i1.id)
                // })
                //test
                //this.initTestData()
                //回显，没有可选的时候，进入下一步
@@ -480,7 +667,7 @@

        });
                */
                this.step = "step2-0"
                this.step2_0_next()
            },
            step2_0_next(){
                let _this = this
@@ -496,6 +683,7 @@
            step2_next() {
                let _this = this
                let stepItem = this.getStep2StepItem(this.step2SubStep)
                console.log("questionItems.filter(obj=>Number(obj.content)===0)", this.questionItems.filter(obj=>Number(obj.content)===0))
                if (stepItem.selected == stepItem.quantity || this.sumStep2UnSelectedNum() == 0) {
                    _this.answer.verifyStatus = 2
                    _this.submitSubAnswer()
@@ -526,6 +714,11 @@
                this.caculateScoreRangeSelectedById(sid, -1)
            },
            step2Add(qid, sid) {
                let stepItem = this.getStep2StepItem(this.step2SubStep)
                if (stepItem.selected == stepItem.quantity || this.sumStep2UnSelectedNum() == 0) {
                    this.$message.error(this.$t('values_nextStepTips_del_unnecessary'))
                    return;
                }
                //console.log("step2Add....",value,qid,sid)
                this.resetQuestionItemsSubjectIdById(qid, sid) //借用subjectId，存储
                this.caculateScoreRangeSelectedById(sid, 1)
@@ -1289,6 +1482,10 @@
        margin-top: 45px;
    }

    .text-line {
        line-height: 1.5em;
    }

    .footer {
        position: absolute;
        position: fixed;
@@ -1375,6 +1572,13 @@

    .mullinediv {
        display: contents;
        width:100%;
    }
    .noSelect {
        width: 100%;
        text-align: center;
        color: #9f9f9f;
        font-size: 14px;
    }

    .mullinediv-item {
@@ -1447,4 +1651,17 @@
            background-repeat: no-repeat;
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAA4CAYAAAAM7IPNAAAACXBIWXMAABnWAAAZ1gEY0crtAAAGrWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIzLTAzLTIxVDIxOjQxOjE3KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMy0wMy0yMVQyMzowMzoyNyswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMy0wMy0yMVQyMzowMzoyNyswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxMzgzOTg1Zi03OGUwLTU2NGQtYmVlZi1mNmI5YjNkMDRmOWMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ZTY2NWMzZTQtYjM4Yi05MjQ0LThiNTUtYTczMTQ4NGQzN2UwIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZTY2NWMzZTQtYjM4Yi05MjQ0LThiNTUtYTczMTQ4NGQzN2UwIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplNjY1YzNlNC1iMzhiLTkyNDQtOGI1NS1hNzMxNDg0ZDM3ZTAiIHN0RXZ0OndoZW49IjIwMjMtMDMtMjFUMjE6NDE6MTcrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChXaW5kb3dzKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MDQyZDFjNWEtOTZmZS1lMzQ1LTlkN2EtM2NhY2I4YjAyODA3IiBzdEV2dDp3aGVuPSIyMDIzLTAzLTIxVDIyOjQyKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjEzODM5ODVmLTc4ZTAtNTY0ZC1iZWVmLWY2YjliM2QwNGY5YyIgc3RFdnQ6d2hlbj0iMjAyMy0wMy0yMVQyMzowMzoyNyswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pn/gmj0AAAR7SURBVFiF7ZffSyNXFMfPmNikE7OpP5BUEidmmMmMEyc6Mkj8kUSxIT745ItPBQsFoQ99Kbj9A4pKn31SVrq4rKAvSgpFqBCMoaQ0mmgslm7UWA3+qCVZTVC33j64W3RN4kSnUpb9wn2Ye+bezz33Hu49BxBCcFsbHx//3OPxIAC40ViWRQMDAxNS5imCB5QkGEJIgRB6GFg+YRgGGIY9DKwQSd3Gh4PJBZQcILlsr8/sb9lgckmWbXw3o1GqV5JhEoCvZIXJIVlCX1bYa2BOm6zRKNt1FY1GyycnJ3uj0Wj5XSe57Qbxer2fLC8vf6xMJpOV0Wj0eSQSearX638jSTJoMplCHMf9KRGUtX9hYcG2sbHRuLm5KaTT6Y9cLteosri4+Oz09HRyYmLiU4VCAXV1deByuYaOjo4m29rawgAAp6en2ouLi6yTIoTg/Pwcf/O9tLRkWFtb6/D5fJ8Fg0Hn1tYWuN1uaGtr+04piuKLg4ODUa/X2xuLxSAQCMDq6urj6enpxxaLJWS325+vr6+3ptPprLCzszPY2dlhx8bGvohEIp6VlRX39vb2B6lUCk5OTkCr1YLD4fiapmm/EgCAJMmfWZZ9cXR0RO7t7UEymYT9/X1IJBJCPB4XUqkU7O/vZ4UdHh5CKBQSdnd3hXg8DolEAo6PjwEAQKPRgMlkAqvVOkdRVObfzGd4eHiwqakpawZ110YQBOrv7/8xFosprmVXDodjnKbpUNbl31FGoxE6OztHampqLqP1al43ODj4rcFgQEql8t5e6XQ61NfXF8iZN9I07ed5HlQq1b29MplMwLKs72rfNZjFYvE7nc4hHMfhvhJF0V9fX//9tc63U+S5ublWq9WKVCrVnbZPoVAgHMfRyMjIV7em3wRB/GKz2cJlZWV38kir1QLHcUBR1E9v227AaJrOtLe3jxoMhjvBKisrwe12PzEYDKs3jNmqjfX19Q97enp+LzQqMQxDTqfzVSAQYCVXMTRNZxiG8VVXVxfklV6vB4vF4rfb7b9ms+d8z3ie/4Hn+YJgNE2DzWbz5rLnhDU2Ns7Y7fahQmCiKE61tLQ8KxhGkuQZTdOLDMNASUlJXoharQaCIIBl2XmbzZYoGAYAQBDEcmtrq7+8PP8jrtVqQRAEIEkymO+/vLCGhoY/uru7v9Hr9XlhFRUV0NXV9aXRaAzn/VFK4d3b27ui0+myhrtGo0Fut/uvcDhcKUsBX1tb6yMIIqutqqoKOI6b53k+++t6RZJgoihO1dfXZz0PjuOgubk5ZwQWDPN4PD6r1TqP4zgUFV0OwTAM1Go11NbWPhUEYUY2GAAARVGLLMuCRqMBAIDi4mKgKAosFovPbDbLW3mazeZgV1fXk4qKCgAAwHEcOjo6Zmia9kudQ1I0vmk+n88miiIqKipCVVVVaHZ21lPIeKXkVQGAw+EIMwwTymQygl6vf0lR1GIh4wuCAVzemY8ePRJKS0unGIZ5+Z/CmpubnzEM41Or1QWBAAAwucohKfr/lbnvYe9h7x7sHwGftes0162GAAAAAElFTkSuQmCC);
        }

    .selectCount {
        width: 100%;
        height: 40px;
        line-height: 40px;
        background: #3c8dbc;
        border-radius: 5px;
        text-align: center;
        font-size: 18px;
        color: #fff;
        font-weight: bold;
        margin-bottom: 20px;
    }
</style>