GCLS_Page_Book_Component_NPC/src/components/Adult/preview/SentenceModule.vue

<!--  -->
<template>
  <div
    class="sentence-control"
    :class="[
      curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].id
        ? 'hasmp3'
        : '',
    ]"
    v-if="isShowTemp"
  >
    <div
      class="out-audioLine-box"
      v-if="
        curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].id
      "
    >
      <div class="aduioLine-box">
        <AudioLine
          audioId="fillInforAudioLine"
          :mp3="curQue.mp3_list[0].id"
          :getCurTime="getCurTime"
          :themeColor="themeColor"
          :ed="ed"
          type="audioLine"
          ref="fillInforAudioLine"
          @handleListenRead="handleListenRead"
        />
      </div>
    </div>
    <div
      :class="[
        'container-box',
        curQue.img_list &&
        curQue.img_list.length > 0 &&
        curQue.img_site == 'rightCenter'
          ? 'container-box-flex'
          : '',
      ]"
    >
      <div
        class="fill-img-box"
        v-if="
          curQue.img_list &&
          curQue.img_list.length > 0 &&
          curQue.img_site == 'top'
        "
      >
        <el-image
          :src="curQue.img_list[0].id"
          v-if="curQue.img_list[0].id"
          fit="scale-down"
          class="fill-img"
          :style="{ width: curQue.img_size + 'px' }"
        ></el-image>
      </div>
      <div
        v-if="judgeAnswer == 'standardAnswer'"
        :class="['container', curQue.sortType == 'row' ? 'ul-flex' : '']"
      >
        <div :class="['sent-option li-flex sent-option-standardAnswer']">
          <div
            :class="[
              'sent-option-items',
              itemsWidth == 780 ? 'sent-option-items-0' : 'sent-option-items-8',
            ]"
            v-for="(items, indexs) in userErrorList"
            :key="'sent-option-items' + judgeAnswer + indexs"
            :style="{
              width:
                curQue.sortType == 'col'
                  ? itemsWidth + 'px'
                  : Math.floor(780 / curQue.option.length) - 16 + 'px',
            }"
          >
            <div
              :class="[
                'horn-24',
                items.pyNumber &&
                items.pyNumber[0] > 0 &&
                curQue.pyPosition == 'top'
                  ? 'horn-hasPY'
                  : '',
              ]"
              v-if="
                curQue.mp3_list &&
                curQue.mp3_list.length > 0 &&
                curQue.mp3_list[0].id &&
                items.bg &&
                items.ed
              "
              :style="{
                height:
                  items.detail &&
                  items.detail.length > 0 &&
                  items.detail[0].maxFontsize
                    ? (items.detail[0].maxFontsize * 3) / 2 + 'px'
                    : '40px',
                marginTop:
                  items.detail &&
                  items.detail.length > 0 &&
                  items.detail[0].maxFontsize
                    ? ''
                    : '0px',
              }"
            >
              <AudioItem
                :itemBg="items.bg"
                :itemEd="items.ed"
                :curTime="curTime"
                :handleChangeTime="handleChangeTime"
                :stopAudioS="stopAudioS"
                :themeColor="themeColor"
              />
            </div>
            <div :class="['sent-stem', bgClassName]">
              <div
                v-if="curQue.isShowNumber"
                :class="[
                  'number-box number-box-hasmp3',
                  items.pyNumber &&
                  items.pyNumber[0] > 0 &&
                  curQue.pyPosition == 'top'
                    ? 'number-box-hasPY'
                    : '',
                  curQue.numberBg ? '' : 'number-box-nobg',
                ]"
                :style="{
                  height:
                    items.detail &&
                    items.detail.length > 0 &&
                    items.detail[0].maxFontsize
                      ? (items.detail[0].maxFontsize * 3) / 2 + 'px'
                      : '40px',
                  marginTop:
                    items.detail &&
                    items.detail.length > 0 &&
                    items.detail[0].maxFontsize
                      ? ''
                      : '0px',
                }"
              >
                <NumberStyle
                  :className="curQue.numberBg ? 'number01' : 'number-nobg'"
                  :numberBg="curQue.numberBg"
                  :numberStyle="curQue.numberStyle"
                  :numberIndex="items.index"
                />
              </div>
              <!-- 题干 -->
              <div class="stem-content">
                <!--  items.fn_check_list.judge_check || sdItem.fn_check_list.record_check.indexOf('normal') > -1
                  ? 'sent-main-138'
                  : '', -->
                <div
                  :class="[
                    'sent-main',
                    items.fn_check_list.judge_check.indexOf('col') > -1 ||
                    items.fn_check_list.short_check ||
                    sdItem.fn_check_list.record_check.indexOf('normal') > -1
                      ? 'sent-que-flex'
                      : '',
                    items.fn_check_list.radio_check.indexOf('row') > -1 ||
                    items.fn_check_list.checkbox_check.indexOf('row') > -1
                      ? 'sent-main-bottom'
                      : '',
                  ]"
                  v-for="(sdItem, sdIndex) in items.detail"
                  :key="'sent-option-items' + indexs + sdIndex"
                >
                  <div class="sent-que-box">
                    <div
                      class="sent-que"
                      v-for="(sddItem, sddIndex) in sdItem.detail"
                      :key="'sent-option-items' + indexs + sdIndex + sddIndex"
                      :style="{
                        paddingLeft:
                          sddItem.config.wordPadding.indexOf('left') > -1
                            ? '4px'
                            : '0px',
                        paddingRight:
                          sddItem.config.wordPadding.indexOf('right') > -1
                            ? '4px'
                            : '0px',
                      }"
                    >
                      <!-- 补全句子 -->
                      <OneSentenceTemp
                        :detail="sddItem"
                        :pyPosition="curQue.pyPosition"
                        :TaskModel="TaskModel"
                        :pyColor="curQue.pyColor"
                        :Bookanswer="userBookanswer[indexs]"
                        :judgeAnswer="judgeAnswer"
                        :correctAnswer="items.correct.complateArr"
                        :isInput="
                          items.fn_check_list.sent_check ==
                            'sentence_complete_input_chs' ||
                          items.fn_check_list.sent_check ==
                            'sentence_long_input_chs'
                        "
                        :fn_check_list="items.fn_check_list"
                        :bgColor="curQue.bgColor"
                        :pyNumber="items.pyNumber && items.pyNumber[sdIndex]"
                        :record_check="sdItem.fn_check_list.record_check"
                        :hengLeg="sdItem.hengLeg"
                        :maxFontsize="sdItem.maxFontsize"
                      />
                      <template
                        v-if="
                          sddItem.img_list &&
                          sddItem.img_list.length > 0 &&
                          sddItem.img_list[0].id
                        "
                      >
                        <img
                          :src="sddItem.img_list[0].id"
                          class="sddItem_img_list"
                          :style="[imgStyle(sddItem)]"
                        />
                      </template>
                      <!-- <div class="en" v-if="sdItem.en">{{ sdItem.en }}</div> -->
                      <!-- <div
                        class="promax-box-div"
                        v-if="
                          sdItem.fn_check_list.record_check.indexOf('promax') >
                          -1
                        "
                      >
                        <Soundrecord
                          :type="
                            sdItem.fn_check_list.record_check
                              ? typeList[sdItem.fn_check_list.record_check]
                              : 'normal'
                          "
                          class="promax-box"
                          :TaskModel="TaskModel"
                          :tmIndex="sdIndex"
                          :answerRecordList="[]"
                        />
                      </div> -->
                    </div>
                  </div>
                  <div
                    ref="answerpart"
                    v-if="
                      items.fn_check_list.judge_check ||
                      sdItem.fn_check_list.record_check ||
                      items.fn_check_list.short_check ||
                      items.fn_check_list.radio_check.indexOf('col') > -1 ||
                      items.fn_check_list.checkbox_check.indexOf('col') > -1
                    "
                    :class="[
                      'answer-part',
                      items.pyNumber && items.pyNumber[1] > 0
                        ? 'answer-part-hasPY'
                        : '',
                      items.fn_check_list.judge_check ||
                      sdItem.fn_check_list.record_check
                        ? 'answer-part-138'
                        : '',
                    ]"
                  >
                    <!-- 短输入 -->
                    <div
                      :class="[
                        'short-part',
                        items.pyNumber && items.pyNumber[0] > 0
                          ? 'short-part-hasPY'
                          : '',
                        items.fn_check_list.is_short_auto
                          ? 'short-part-flex'
                          : '',
                      ]"
                      v-if="sdIndex == 0 && items.fn_check_list.short_check"
                    >
                      <ShortInputTemp
                        :doubleInput="items.correct.doubleInput"
                        :Bookanswer="userBookanswer[indexs]"
                        :TaskModel="TaskModel"
                        :is_short_auto="items.fn_check_list.is_short_auto"
                        :judgeAnswer="judgeAnswer"
                      />
                    </div>
                    <!-- 判断 -->
                    <div
                      :class="[
                        'judge-part',
                        items.fn_check_list.judge_check.indexOf('row') > -1
                          ? 'answer-part-padding-5'
                          : '',
                      ]"
                      v-if="sdIndex == 0 && items.fn_check_list.judge_check"
                    >
                      <JudgeTemp
                        :isRecord="items.fn_check_list.record_check"
                        :Bookanswer="userBookanswer[indexs]"
                        :judge_isNo="items.judge_isNo"
                        :TaskModel="TaskModel"
                        :Isexample="items.Isexample"
                        :judgeCorrectAnswer="items.correct.judge"
                        :judgeAnswer="judgeAnswer"
                      />
                    </div>
                    <!-- 多选题 -->
                    <div
                      :class="[
                        'short-part',
                        items.pyNumber && items.pyNumber[0] > 0
                          ? 'short-part-hasPY'
                          : '',
                      ]"
                      v-if="
                        sdIndex == 0 &&
                        items.fn_check_list.checkbox_check.indexOf('col') > -1
                      "
                    >
                      <OptionTemp
                        :option="items.checkbox_option"
                        :row="
                          items.fn_check_list.checkbox_check.indexOf('row') > -1
                        "
                        :Bookanswer="userBookanswer[indexs]"
                        :TaskModel="TaskModel"
                        type="checkbox"
                        :curQue="curQue"
                        :items="items"
                        :judgeAnswer="judgeAnswer"
                        :correctAnswer="items.correct"
                      />
                    </div>
                    <!-- 单选题 -->
                    <div
                      :class="[
                        'short-part',
                        items.pyNumber && items.pyNumber[0] > 0
                          ? 'short-part-hasPY'
                          : '',
                      ]"
                      v-if="
                        sdIndex == 0 &&
                        items.fn_check_list.radio_check.indexOf('col') > -1
                      "
                    >
                      <OptionTemp
                        :option="items.radio_option"
                        :row="
                          items.fn_check_list.radio_check.indexOf('row') > -1
                        "
                        :Bookanswer="userBookanswer[indexs]"
                        :correctAnswer="items.correct"
                        :TaskModel="TaskModel"
                        type="radio"
                        :curQue="curQue"
                        :items="items"
                        :judgeAnswer="judgeAnswer"
                      />
                    </div>
                    <!-- 录音 -->
                    <div
                      class="judge-part record-part"
                      v-if="
                        sdItem.fn_check_list.record_check &&
                        items.fn_check_list.sent_check !=
                          'sentence_long_input_chs'
                      "
                    >
                      <Soundrecord
                        :type="
                          sdItem.fn_check_list.record_check
                            ? typeList[sdItem.fn_check_list.record_check]
                            : 'normal'
                        "
                        :class="[
                          'record_' +
                            typeList[sdItem.fn_check_list.record_check],
                          'record-common',
                          items.fn_check_list.short_check
                            ? 'record-common-40'
                            : '',
                        ]"
                        :TaskModel="TaskModel"
                        :tmIndex="sdIndex"
                        :answerRecordList="[]"
                      />
                    </div>
                  </div>
                </div>
                <!-- 多选题 -->
                <div
                  class="select-que"
                  v-if="items.fn_check_list.checkbox_check.indexOf('row') > -1"
                >
                  <OptionTemp
                    :option="items.checkbox_option"
                    :row="
                      items.fn_check_list.checkbox_check.indexOf('row') > -1
                    "
                    :Bookanswer="userBookanswer[indexs]"
                    :correctAnswer="items.correct"
                    :TaskModel="TaskModel"
                    type="checkbox"
                    :curQue="curQue"
                    :items="items"
                    :judgeAnswer="judgeAnswer"
                  />
                </div>
                <!-- 单选题 -->
                <div
                  class="select-que"
                  v-if="items.fn_check_list.radio_check.indexOf('row') > -1"
                >
                  <OptionTemp
                    :option="items.radio_option"
                    :row="items.fn_check_list.radio_check.indexOf('row') > -1"
                    :Bookanswer="userBookanswer[indexs]"
                    :correctAnswer="items.correct"
                    :TaskModel="TaskModel"
                    type="radio"
                    :curQue="curQue"
                    :items="items"
                    :judgeAnswer="judgeAnswer"
                  />
                </div>
              </div>
            </div>
            <!-- 题干 -->
          </div>
        </div>
      </div>
      <div
        v-else
        :class="['container', curQue.sortType == 'row' ? 'ul-flex' : '']"
      >
        <div
          :class="[
            'sent-option',
            curQue.mp3_list &&
            curQue.mp3_list.length > 0 &&
            curQue.mp3_list[0].id
              ? 'sent-option-24'
              : '',
            curQue.sortType == 'row' ? 'sent-option-row' : 'li-flex',
          ]"
          v-for="(item, index) in curQue.option"
          :key="'sent-option' + index"
        >
          <div
            :class="[
              'sent-option-items',
              itemsWidth == 780 ? 'sent-option-items-0' : 'sent-option-items-8',
            ]"
            v-for="(items, indexs) in item"
            :key="'sent-option-items' + index + indexs"
            :style="{
              width: curQue.sortType == 'col' ? itemsWidth + 'px' : '100%',

            }"
          >
            <div
              :class="[
                'horn-24',
                items.pyNumber &&
                items.pyNumber[0] > 0 &&
                curQue.pyPosition == 'top'
                  ? 'horn-hasPY'
                  : '',
              ]"
              v-if="
                curQue.mp3_list &&
                curQue.mp3_list.length > 0 &&
                curQue.mp3_list[0].id &&
                items.bg &&
                items.ed
              "
              :style="{
                height:
                  items.detail &&
                  items.detail.length > 0 &&
                  items.detail[0].maxFontsize
                    ? (items.detail[0].maxFontsize * 3) / 2 + 'px'
                    : '40px',
                marginTop:
                  items.detail &&
                  items.detail.length > 0 &&
                  items.detail[0].maxFontsize
                    ? ''
                    : '0px',
              }"
            >
              <AudioItem
                :itemBg="items.bg"
                :itemEd="items.ed"
                :curTime="curTime"
                :handleChangeTime="handleChangeTime"
                :stopAudioS="stopAudioS"
                :themeColor="themeColor"
              />
            </div>
            <div :class="['sent-stem', bgClassName]">
              <div
                v-if="curQue.isShowNumber"
                :class="[
                  'number-box number-box-hasmp3',
                  items.pyNumber &&
                  items.pyNumber[0] > 0 &&
                  curQue.pyPosition == 'top'
                    ? 'number-box-hasPY'
                    : '',
                  curQue.numberBg ? '' : 'number-box-nobg',
                ]"
                :style="{
                  height:
                    items.detail &&
                    items.detail.length > 0 &&
                    items.detail[0].maxFontsize
                      ? (items.detail[0].maxFontsize * 3) / 2 + 'px'
                      : '40px',
                  marginTop:
                    items.detail &&
                    items.detail.length > 0 &&
                    items.detail[0].maxFontsize
                      ? ''
                      : '0px',
                }"
              >
                <NumberStyle
                  :className="curQue.numberBg ? 'number01' : 'number-nobg'"
                  :numberBg="curQue.numberBg"
                  :numberStyle="curQue.numberStyle"
                  :numberIndex="items.index"
                />
              </div>
              <!-- 题干 -->
              <div class="stem-content">
                <!--  items.fn_check_list.judge_check || sdItem.fn_check_list.record_check.indexOf('normal') > -1
                      ? 'sent-main-138'
                      : '', -->
                <div
                  :class="[
                    'sent-main',
                    items.fn_check_list.judge_check.indexOf('col') > -1 ||
                    items.fn_check_list.short_check ||
                    sdItem.fn_check_list.record_check.indexOf('normal') > -1
                      ? 'sent-que-flex'
                      : '',
                    items.fn_check_list.radio_check.indexOf('row') > -1 ||
                    items.fn_check_list.checkbox_check.indexOf('row') > -1
                      ? 'sent-main-bottom'
                      : '',
                  ]"
                  v-for="(sdItem, sdIndex) in items.detail"
                  :key="'sent-option-items' + index + indexs + sdIndex"
                >
                  <div class="sent-que-box">
                    <div
                      class="sent-que"
                      v-for="(sddItem, sddIndex) in sdItem.detail"
                      :key="
                        'sent-option-items' +
                        index +
                        indexs +
                        sdIndex +
                        sddIndex
                      "
                      :style="{
                        paddingLeft:
                          sddItem.config.wordPadding.indexOf('left') > -1
                            ? '4px'
                            : '0px',
                        paddingRight:
                          sddItem.config.wordPadding.indexOf('right') > -1
                            ? '4px'
                            : '0px',
                      }"
                    >
                      <!-- 补全句子 -->
                      <OneSentenceTemp
                        :detail="sddItem"
                        :pyPosition="curQue.pyPosition"
                        :TaskModel="TaskModel"
                        :pyColor="curQue.pyColor"
                        :Bookanswer="curQue.Bookanswer[index][indexs]"
                        :judgeAnswer="judgeAnswer"
                        :correctAnswer="items.correct.complateArr"
                        :isInput="
                          items.fn_check_list.sent_check ==
                            'sentence_complete_input_chs' ||
                          items.fn_check_list.sent_check ==
                            'sentence_long_input_chs'
                        "
                        :fn_check_list="items.fn_check_list"
                        :bgColor="curQue.bgColor"
                        :pyNumber="items.pyNumber && items.pyNumber[sdIndex]"
                        :record_check="sdItem.fn_check_list.record_check"
                        :hengLeg="sdItem.hengLeg"
                        :maxFontsize="sdItem.maxFontsize"
                      />
                      <template
                        v-if="
                          sddItem.img_list &&
                          sddItem.img_list.length > 0 &&
                          sddItem.img_list[0].id
                        "
                      >
                        <img
                          :src="sddItem.img_list[0].id"
                          class="sddItem_img_list"
                          :style="[imgStyle(sddItem)]"
                        />
                      </template>
                      <!-- <div class="en" v-if="sdItem.en">{{ sdItem.en }}</div> -->
                      <!-- <div
                        class="promax-box-div"
                        v-if="
                          sdItem.fn_check_list.record_check.indexOf('promax') >
                          -1
                        "
                      >
                        <Soundrecord
                          :type="
                            sdItem.fn_check_list.record_check
                              ? typeList[sdItem.fn_check_list.record_check]
                              : 'normal'
                          "
                          class="promax-box"
                          :TaskModel="TaskModel"
                          :tmIndex="sdIndex"
                          :answerRecordList="
                            curQue.Bookanswer[index][indexs].recordList[sdIndex]
                          "
                          :index="index"
                          :indexs="indexs"
                          @handleWav="handleWav"
                        />
                      </div> -->
                    </div>
                  </div>
                  <div
                    ref="answerpart"
                    v-if="
                      items.fn_check_list.judge_check ||
                      sdItem.fn_check_list.record_check ||
                      items.fn_check_list.short_check ||
                      items.fn_check_list.radio_check.indexOf('col') > -1 ||
                      items.fn_check_list.checkbox_check.indexOf('col') > -1
                    "
                    :class="[
                      'answer-part',
                      items.pyNumber && items.pyNumber[1] > 0
                        ? 'answer-part-hasPY'
                        : '',
                      items.fn_check_list.judge_check ||
                      sdItem.fn_check_list.record_check
                        ? 'answer-part-138'
                        : '',
                    ]"
                  >
                    <!-- 短输入 -->
                    <div
                      :class="[
                        'short-part',
                        items.pyNumber && items.pyNumber[0] > 0
                          ? 'short-part-hasPY'
                          : '',
                        items.fn_check_list.is_short_auto
                          ? 'short-part-flex'
                          : '',
                      ]"
                      v-if="sdIndex == 0 && items.fn_check_list.short_check"
                    >
                      <ShortInputTemp
                        :doubleInput="items.correct.doubleInput"
                        :Bookanswer="curQue.Bookanswer[index][indexs]"
                        :TaskModel="TaskModel"
                        :is_short_auto="items.fn_check_list.is_short_auto"
                        :judgeAnswer="judgeAnswer"
                      />
                    </div>
                    <!-- 判断 -->
                    <div
                      :class="[
                        'judge-part',
                        items.fn_check_list.judge_check.indexOf('row') > -1
                          ? 'answer-part-padding-5'
                          : '',
                      ]"
                      v-if="sdIndex == 0 && items.fn_check_list.judge_check"
                    >
                      <JudgeTemp
                        :isRecord="items.fn_check_list.record_check"
                        :Bookanswer="curQue.Bookanswer[index][indexs]"
                        :judge_isNo="items.judge_isNo"
                        :TaskModel="TaskModel"
                        :Isexample="items.Isexample"
                        :judgeCorrectAnswer="items.correct.judge"
                        :judgeAnswer="judgeAnswer"
                      />
                    </div>
                    <!-- 多选题 -->
                    <div
                      :class="[
                        'short-part',
                        items.pyNumber && items.pyNumber[0] > 0
                          ? 'short-part-hasPY'
                          : '',
                      ]"
                      v-if="
                        sdIndex == 0 &&
                        items.fn_check_list.checkbox_check.indexOf('col') > -1
                      "
                    >
                      <OptionTemp
                        :option="items.checkbox_option"
                        :row="
                          items.fn_check_list.checkbox_check.indexOf('row') > -1
                        "
                        :Bookanswer="curQue.Bookanswer[index][indexs]"
                        :TaskModel="TaskModel"
                        type="checkbox"
                        :curQue="curQue"
                        :items="items"
                        :judgeAnswer="judgeAnswer"
                        :correctAnswer="items.correct"
                      />
                    </div>
                    <!-- 单选题 -->
                    <div
                      :class="[
                        'short-part',
                        items.pyNumber && items.pyNumber[0] > 0
                          ? 'short-part-hasPY'
                          : '',
                      ]"
                      v-if="
                        sdIndex == 0 &&
                        items.fn_check_list.radio_check.indexOf('col') > -1
                      "
                    >
                      <OptionTemp
                        :option="items.radio_option"
                        :row="
                          items.fn_check_list.radio_check.indexOf('row') > -1
                        "
                        :Bookanswer="curQue.Bookanswer[index][indexs]"
                        :correctAnswer="items.correct"
                        :TaskModel="TaskModel"
                        type="radio"
                        :curQue="curQue"
                        :items="items"
                        :judgeAnswer="judgeAnswer"
                      />
                    </div>
                    <!-- 录音 -->
                    <div
                      class="judge-part record-part"
                      v-if="
                        sdItem.fn_check_list.record_check &&
                        items.fn_check_list.sent_check !=
                          'sentence_long_input_chs'
                      "
                    >
                      <Soundrecord
                        :type="
                          sdItem.fn_check_list.record_check
                            ? typeList[sdItem.fn_check_list.record_check]
                            : 'normal'
                        "
                        :class="[
                          'record_' +
                            typeList[sdItem.fn_check_list.record_check],
                          'record-common',
                          items.fn_check_list.short_check
                            ? 'record-common-40'
                            : '',
                        ]"
                        :TaskModel="TaskModel"
                        :tmIndex="sdIndex"
                        :answerRecordList="
                          curQue.Bookanswer[index][indexs].recordList[sdIndex]
                        "
                        :index="index"
                        :indexs="indexs"
                        @handleWav="handleWav"
                      />
                    </div>
                  </div>
                </div>
                <!-- 多选题 -->
                <div
                  class="select-que"
                  v-if="items.fn_check_list.checkbox_check.indexOf('row') > -1"
                >
                  <OptionTemp
                    :option="items.checkbox_option"
                    :row="
                      items.fn_check_list.checkbox_check.indexOf('row') > -1
                    "
                    :Bookanswer="curQue.Bookanswer[index][indexs]"
                    :correctAnswer="items.correct"
                    :TaskModel="TaskModel"
                    type="checkbox"
                    :curQue="curQue"
                    :items="items"
                    :judgeAnswer="judgeAnswer"
                  />
                </div>
                <!-- 单选题 -->
                <div
                  class="select-que"
                  v-if="items.fn_check_list.radio_check.indexOf('row') > -1"
                >
                  <OptionTemp
                    :option="items.radio_option"
                    :row="items.fn_check_list.radio_check.indexOf('row') > -1"
                    :Bookanswer="curQue.Bookanswer[index][indexs]"
                    :correctAnswer="items.correct"
                    :TaskModel="TaskModel"
                    type="radio"
                    :curQue="curQue"
                    :items="items"
                    :judgeAnswer="judgeAnswer"
                  />
                </div>
              </div>
            </div>
            <!-- 题干 -->
          </div>
        </div>
      </div>
      <div
        class="fill-img-box"
        v-if="
          curQue.img_list &&
          curQue.img_list.length > 0 &&
          (curQue.img_site == 'rightCenter' || curQue.img_site == 'bottom')
        "
      >
        <el-image
          :src="curQue.img_list[0].id"
          v-if="curQue.img_list[0].id"
          fit="scale-down"
          class="fill-img"
          :style="{ width: curQue.img_size + 'px' }"
        ></el-image>
      </div>
    </div>
  </div>
</template>

<script>
import AudioLine from "../preview/AudioLine.vue";
import AudioItem from "./components/AudioItem.vue";
import OneSentenceTemp from "./components/OneSentenceTemp.vue";
import JudgeTemp from "./components/JudgeTemp.vue";
import ShortInputTemp from "./components/ShortInputTemp.vue";
import NumberStyle from "./components/NumberStyle.vue";
import EditDiv from "../preview/EditDiv.vue";
import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
import OptionTemp from "./components/OptionTemp.vue";
export default {
  components: {
    AudioLine,
    AudioItem,
    NumberStyle,
    EditDiv,
    Soundrecord,
    OneSentenceTemp,
    JudgeTemp,
    ShortInputTemp,
    OptionTemp,
  },
  props: ["curQue", "themeColor", "TaskModel", "judgeAnswer"],
  data() {
    return {
      curTime: 0,
      stopAudioS: false,
      ed: null,
      userAnswer: {
        Isexample: false,
        completeInput: [],
        shortInput: "",
        longInput: "",
        doubleInput: [],
        judge: {},
        checkbox: {},
        radio: {},
        recordList: {},
        completeImage: [],
      },
      chsFhList: ["，", "。", "”", "：", "》", "？", "！", "；"],
      itemsWidth: 0,
      typeList: {
        sentence_record_mini_chs: "mini",
        sentence_record_normal_chs: "normal",
        sentence_record_pro_chs: "pro",
        sentence_record_promax_chs: "promax",
      },
      answerpart: [],
      userErrorList: [],
      userBookanswer: [],
      userErrorNumberTotal: 0,
    };
  },
  computed: {
    isShowTemp() {
      let _this = this;
      let bool = false;
      if (_this.curQue && _this.curQue.Bookanswer) {
        if (_this.judgeAnswer == "standardAnswer") {
          if (_this.userErrorNumberTotal > 0) {
            bool = true;
          } else {
            bool = false;
          }
        } else {
          bool = true;
        }
      }
      return bool;
    },
    bgClassName() {
      let className = "";
      if (this.curQue.bgColor == "grey") {
        className = "sent-stem-grey";
      } else if (this.curQue.bgColor == "white") {
        className = "sent-stem-white";
      }
      return className;
    },
    imgStyle() {
      return function (config) {  
        let _this = this;
        let styleConfig = null;
        if(config.config&&config.config.fontSize){
            let sizeVal = config.config.fontSize.replace("px", "");
            styleConfig = {
                height: Number(sizeVal)*1.5 + "px",
                width: Number(sizeVal)*1.5 + "px",
            };
        }
        return styleConfig;
      }
    },
  },
  watch: {},
  //方法集合
  methods: {
    getCurTime(curTime) {
      this.curTime = curTime * 1000;
    },
    //点击播放某个句子
    handleChangeTime(time, edTime) {
      let _this = this;
      _this.curTime = time;
      _this.stopAudioS = true;
      _this.$refs.fillInforAudioLine.onTimeupdateTime(time / 1000, true);
      _this.ed = edTime;
    },
    handleListenRead(playFlag) {
      this.stopAudioS = playFlag;
    },
    handleWav(list, tmIndex, index, indexs) {
      tmIndex = tmIndex ? tmIndex : 0;
      let resList = list.filter((item, index) => index == list.length - 1);
      this.$set(
        this.curQue.Bookanswer[index][indexs].recordList,
        tmIndex,
        resList
      );
    },
    handleData() {
      let Bookanswer = [];
      let itemLeg = 0;
      this.totalHasPy = false;
      let option = JSON.parse(JSON.stringify(this.curQue.option));
      let completeImage = [];
      option.forEach((item, index) => {
        Bookanswer.push([]);
        completeImage = [];
        itemLeg = item.length > itemLeg ? item.length : itemLeg;
        item.forEach((items, indexs) => {
          let userAnswer = JSON.parse(JSON.stringify(this.userAnswer));
          let correct = JSON.parse(JSON.stringify(items.correct));
          let complateArr = correct.completeInput.split("\n");
          complateArr.forEach((itemI, indexI) => {
            if (itemI == "??" || itemI == "？？") {
              complateArr[indexI] = "";
            }
          });
          items.correct.complateArr = complateArr;
          this.curQue.option[index][indexs].correct.complateArr = complateArr;
          if (items.Isexample) {
            userAnswer.Isexample = true;
            userAnswer.recordList = {};
          }
          Bookanswer[index].push(userAnswer);
          if (this.curQue.wordTime && this.curQue.wordTime.length > 0) {
            let time = this.curQue.wordTime[items.index];
            if (time) {
              items.ed = time.ed;
              items.bg = time.bg;
            }
          }
          let hengIndex = 0;
          items.pyNumber = [];

          items.detail.forEach((sdItem, sdIndex) => {
            let isHasPY = 0;
            let maxFontsize = 0;
            sdItem.detail.forEach((sddItem) => {
              if (sddItem.wordsList.length > 0) {
                sddItem.wordsList.forEach((sItem, sIndex) => {
                  let reg = /_{2,}/g;
                  if (reg.test(sItem.chs)) {
                    sItem.index = sIndex;
                    sItem.isHeng = true;
                    sItem.hengIndex = hengIndex;
                    hengIndex++;
                  }
                  //补全句子
                  if (
                    !this.curQue.Bookanswer &&
                    (items.fn_check_list.sent_check ==
                      "sentence_complete_input_chs" ||
                      items.fn_check_list.sent_check ==
                        "sentence_long_input_chs")
                  ) {
                    let reg = /_{2,}/g;
                    if (reg.test(sItem.chs)) {
                      let bool = false;
                      if (sddItem.hasOwnProperty("input_Isexample")) {
                        bool = sddItem.input_Isexample;
                      } else {
                        bool = items.Isexample;
                      }
                      let obj = null;
                      if (!sddItem.input_tian) {
                        obj = {
                          answer:
                            bool && complateArr[sItem.hengIndex]
                              ? complateArr[sItem.hengIndex]
                              : "",
                          userAnswerJudge:
                            bool || !complateArr[sItem.hengIndex]
                              ? ""
                              : "[JUDGE##F##JUDGE]",
                          input_Isexample: bool ? true : false,
                        };
                        Bookanswer[index][indexs].completeInput.push(
                          JSON.parse(JSON.stringify(obj))
                        );
                      } else {
                        if (sddItem.hengLeg == "-1") {
                          completeImage.push(obj);
                        } else {
                          for (let i = 0; i < Number(sddItem.hengLeg); i++) {
                            completeImage.push(obj);
                          }
                        }
                        Bookanswer[index][indexs].completeInput.push(
                          JSON.parse(JSON.stringify(completeImage))
                        );
                      }
                    }
                  }

                  this.mergeWordSymbol(sItem);
                  if (sItem.pinyin) {
                    isHasPY++;
                    this.totalHasPy = true;
                  }
                  let fontSize = JSON.parse(JSON.stringify(sItem.fontSize));
                  fontSize = Number(fontSize.replace("px", ""));
                  maxFontsize = fontSize > maxFontsize ? fontSize : maxFontsize;
                });
              } else {
                if (sddItem.sentence) {
                  let fontSize = JSON.parse(
                    JSON.stringify(sddItem.config.fontSize)
                  );
                  fontSize = Number(fontSize.replace("px", ""));
                  maxFontsize = fontSize > maxFontsize ? fontSize : maxFontsize;
                }
              }
            });
            sdItem.maxFontsize = maxFontsize;
            items.pyNumber.push(isHasPY);
          });
          if (!this.curQue.Bookanswer) {
            //双输入/短输入
            if (
              items.fn_check_list.short_check == "sentence_double_input_chs"
            ) {
              items.correct.doubleInput.forEach((cItem) => {
                let obj = {
                  correct:
                    items.Isexample && cItem.correct ? cItem.correct : "",
                  userAnswerJudge:
                    !items.Isexample && (cItem.correct || cItem.correct == "0")
                      ? "[JUDGE##F##JUDGE]"
                      : "",
                };
                Bookanswer[index][indexs].doubleInput.push(
                  JSON.parse(JSON.stringify(obj))
                );
              });
            }
            //判断
            if (items.fn_check_list.judge_check) {
              let judge_obj = {
                correct:
                  items.Isexample && items.correct.judge
                    ? items.correct.judge
                    : "",
                userAnswerJudge:
                  !items.Isexample && items.correct.judge
                    ? "[JUDGE##F##JUDGE]"
                    : "",
              };
              Bookanswer[index][indexs].judge = JSON.parse(
                JSON.stringify(judge_obj)
              );
            }

            //单选
            if (items.fn_check_list.radio_check) {
              let radio_obj = {
                correct:
                  items.Isexample &&
                  (items.correct.radio || items.correct.radio === 0)
                    ? items.correct.radio
                    : "",
                userAnswerJudge:
                  !items.Isexample &&
                  (items.correct.radio || items.correct.radio === 0)
                    ? "[JUDGE##F##JUDGE]"
                    : "",
              };
              Bookanswer[index][indexs].radio = JSON.parse(
                JSON.stringify(radio_obj)
              );
            }

            //多选
            if (items.fn_check_list.checkbox_check) {
              let checkbox_obj = {
                correct:
                  items.Isexample &&
                  items.correct.checkbox &&
                  items.correct.checkbox.length > 0
                    ? items.correct.checkbox
                    : [],
                userAnswerJudge:
                  !items.Isexample &&
                  items.correct.checkbox &&
                  items.correct.checkbox.length > 0
                    ? "[JUDGE##F##JUDGE]"
                    : "",
              };
              Bookanswer[index][indexs].checkbox = JSON.parse(
                JSON.stringify(checkbox_obj)
              );
            }
          }

          items.radio_option.forEach((rItem, rIndex) => {
            rItem.detail.pyNumber = [];
            rItem.detail.wordsList.forEach((rpwItem) => {
              let isHasPY2 = 0;
              rpwItem.forEach((rpsItem) => {
                this.mergeWordSymbol(rpsItem);
                if (rpsItem.pinyin) {
                  isHasPY2++;
                }
              });
              rItem.detail.pyNumber.push(isHasPY2);
            });
          });
          items.checkbox_option.forEach((cItem, rIndex) => {
            cItem.detail.pyNumber = [];
            cItem.detail.wordsList.forEach((cpwItem) => {
              let isHasPY3 = 0;
              cpwItem.forEach((cpsItem) => {
                this.mergeWordSymbol(cpsItem);
                if (cpsItem.pinyin) {
                  isHasPY3++;
                }
              });
              cItem.detail.pyNumber.push(isHasPY3);
            });
          });
        });
      });
      // console.log(Bookanswer);
      if (!this.curQue.Bookanswer) {
        this.$set(
          this.curQue,
          "Bookanswer",
          JSON.parse(JSON.stringify(Bookanswer))
        );
      } else {
        let BookanswerStr = JSON.stringify(this.curQue.Bookanswer);
        let errReg = /\[JUDGE##F##JUDGE\]/g;
        if (errReg.test(BookanswerStr)) {
          let errorArr = BookanswerStr.match(/\[JUDGE##F##JUDGE\]/g);
          this.userErrorNumberTotal = errorArr.length;
        }
      }

      this.$set(this.curQue, "option", option);
      let contentWidth = 780;
      if (this.curQue.img_list && this.curQue.img_list.length > 0) {
        contentWidth = 780 - this.curQue.img_size;
      }
      if(itemLeg==1){
        this.itemsWidth = 780
      }else{
        this.itemsWidth = Math.floor(contentWidth / itemLeg) - 16;
      }
      

      // 把答错的挑出来
      if (this.judgeAnswer == "standardAnswer") {
        this.userErrorList = [];
        this.userBookanswer = [];
        this.curQue.option.forEach((item, index) => {
          item.forEach((items, indexs) => {
            let flag = false;
            // 多输入或者短输入
            items.correct.doubleInput.forEach((itemI, indexI) => {
              if (
                itemI.correct &&
                itemI.correct !=
                  this.curQue.Bookanswer[index][indexs].doubleInput[indexI]
                    .correct
              ) {
                flag = true;
              }
            });

            // 句子填空
            items.correct.complateArr.forEach((itemI, indexI) => {
              if (
                itemI &&
                itemI !=
                  this.curQue.Bookanswer[index][indexs].completeInput[indexI]
              ) {
                flag = true;
              }
            });

            // 句子判断
            if (
              items.correct.judge &&
              items.correct.judge !=
                this.curQue.Bookanswer[index][indexs].judge.correct
            ) {
              flag = true;
            }

            // 句子单选
            if (
              items.correct.radio !== "" &&
              items.correct.radio !==
                this.curQue.Bookanswer[index][indexs].radio.correct
            ) {
              flag = true;
            }
            // 句子多选
            if (
              items.correct &&
              items.correct.checkbox.length > 0 &&
              items.correct.checkbox.sort().toString() !=
                this.curQue.Bookanswer[index][indexs].checkbox.correct
                  .sort()
                  .toString()
            ) {
              flag = true;
            }
            if (flag) {
              this.userErrorList.push(items);
              this.userBookanswer.push(this.curQue.Bookanswer[index][indexs]);
            }
          });
        });
      }
    },
    handleData2() {
      let Bookanswer = [];
      let itemLeg = 0;
      let option = JSON.parse(JSON.stringify(this.curQue.option));

      option.forEach((item, index) => {
        Bookanswer.push([]);
        itemLeg = item.length > itemLeg ? item.length : itemLeg;
        item.forEach((items, indexs) => {
          let userAnswer = null;
          if (items.Isexample) {
            userAnswer = JSON.parse(JSON.stringify(items.correct));
            let completeInputArr = userAnswer.completeInput
              ? userAnswer.completeInput.split("\n")
              : [];
            let completeInput = [];
            for (let i = 0; i < completeInputArr.length; i++) {
              let cObj = {
                value: completeInputArr[i],
                userAnswerJudge: "",
              };
              completeInput.push(JSON.parse(JSON.stringify(cObj)));
            }
            userAnswer.completeInput = userAnswer.completeInput
              ? userAnswer.completeInput.split("\n")
              : [];
            userAnswer.Isexample = true;
          } else {
            userAnswer = JSON.parse(JSON.stringify(this.userAnswer));
          }
          Bookanswer[index].push(userAnswer);
          if (this.curQue.wordTime && this.curQue.wordTime.length > 0) {
            let time = this.curQue.wordTime[items.index];
            if (time) {
              items.ed = time.ed;
              items.bg = time.bg;
            }
          }
          let hengIndex = 0;
          items.pyNumber = [];
          console.log(items);
          items.detail.forEach((sdItem, sdIndex) => {
            let isHasPY = 0;
            let maxFontsize = 0;
            console.log(sdItem);
            sdItem.detail.forEach((sddItem) => {
              if (sddItem.wordsList.length > 0) {
                sddItem.wordsList.forEach((sItem, sIndex) => {
                  let reg = /_{2,}/g;
                  if (reg.test(sItem.chs)) {
                    sItem.index = sIndex;
                    sItem.isHeng = true;
                    sItem.hengIndex = hengIndex;
                    hengIndex++;
                  }
                  //补全句子
                  if (
                    !this.curQue.Bookanswer &&
                    items.fn_check_list.sent_check ==
                      "sentence_complete_input_chs" &&
                    !items.Isexample
                  ) {
                    let reg = /_{2,}/g;
                    if (reg.test(sItem.chs)) {
                      Bookanswer[index][indexs].completeInput.push("");
                    }
                  }

                  this.mergeWordSymbol(sItem);
                  if (sItem.pinyin) {
                    isHasPY++;
                  }
                  let fontSize = JSON.parse(JSON.stringify(sItem.fontSize));
                  fontSize = Number(fontSize.replace("px", ""));
                  maxFontsize = fontSize > maxFontsize ? fontSize : maxFontsize;
                });
              } else {
                if (sddItem.sentence) {
                  let fontSize = JSON.parse(
                    JSON.stringify(sddItem.config.fontSize)
                  );
                  fontSize = Number(fontSize.replace("px", ""));
                  maxFontsize = fontSize > maxFontsize ? fontSize : maxFontsize;
                }
              }
            });
            sdItem.maxFontsize = maxFontsize;
            items.pyNumber.push(isHasPY);
          });
          if (!this.curQue.Bookanswer && !items.Isexample) {
            //双输入
            if (
              items.fn_check_list.short_check == "sentence_double_input_chs"
            ) {
              items.correct.doubleInput.forEach((cItem) => {
                let obj = {
                  correct: "",
                };
                Bookanswer[index][indexs].doubleInput.push(obj);
              });
            }
          }
          items.radio_option.forEach((rItem, rIndex) => {
            rItem.detail.pyNumber = [];
            rItem.detail.wordsList.forEach((rpwItem) => {
              let isHasPY2 = 0;
              rpwItem.forEach((rpsItem) => {
                this.mergeWordSymbol(rpsItem);
                if (rpsItem.pinyin) {
                  isHasPY2++;
                }
              });
              rItem.detail.pyNumber.push(isHasPY2);
            });
          });
          items.checkbox_option.forEach((cItem, rIndex) => {
            cItem.detail.pyNumber = [];
            cItem.detail.wordsList.forEach((cpwItem) => {
              let isHasPY3 = 0;
              cpwItem.forEach((cpsItem) => {
                this.mergeWordSymbol(cpsItem);
                if (cpsItem.pinyin) {
                  isHasPY3++;
                }
              });
              cItem.detail.pyNumber.push(isHasPY3);
            });
          });
        });
      });
      if (!this.curQue.Bookanswer) {
        // Bookanswer.forEach((bItem)=>{
        //   bItem.forEach((bbItem)=>{
        //     if()
        //   })
        // })
        this.$set(
          this.curQue,
          "Bookanswer",
          JSON.parse(JSON.stringify(Bookanswer))
        );
      }

      this.$set(this.curQue, "option", option);
      console.log(this.curQue.option);
      let contentWidth = 732;
      if (this.curQue.img_list && this.curQue.img_list.length > 0) {
        contentWidth = 732 - this.curQue.img_size;
      }
      this.itemsWidth = Math.floor(contentWidth / itemLeg);
    },
    //词和标点合一起
    mergeWordSymbol(sItem) {
      if (this.chsFhList.indexOf(sItem.chs) > -1) {
        sItem.isShow = false;
      } else {
        sItem.isShow = true;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.handleData();
    _this.$nextTick(() => {
      if (_this.$refs.answerpart) {
        _this.$refs.answerpart.forEach((item) => {
          _this.answerpart.push(item.offsetWidth);
        });
      }
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

.sentence-control {
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
  .out-audioLine-box {
    background: #f7f7f7;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .container-box {
    width: 100%;
    &-flex {
      display: flex;
      align-items: stretch;
    }
    &-auto {
      .fill-img-box {
        width: 100%;
      }
    }
    .fill-img-box {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .container {
    flex: 1;
    padding: 0;
    box-sizing: border-box;

    &.ul-flex {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .sent-option-24 {
        padding: 0 24px;
      }
    }
    .sent-option {
      &.li-flex {
        display: flex;
        margin: 0px;
        .sent-option-items {
          &-0 {
            margin: 8px 0; // 单列左右间距去掉
          }
          &-8 {
            margin-left: 8px;
            margin-right: 8px;
          }
        }
      }
      &-row {
        flex: 1;
      }
      &-standardAnswer {
        flex-flow: wrap;
      }
    }
    .sent-option-items {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      box-sizing: border-box;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      margin: 8px 0;
      padding: 8px 12px;
      .number-box {
        width: 16px;
        height: 30px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 8px;
        margin-top: 3px;
        // &-hasmp3 {
        //   margin-top: 8px;
        // }
        &-hasPY {
          margin-top: 21px;
        }
        &-nobg {
          width: 24px;
          justify-content: flex-end;
        }
      }
      > .number-box {
        margin-right: 16px;
      }
      .horn-24 {
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 8px;
        margin-top: 3px;
        &.horn-hasPY {
          margin-top: 28px;
        }
      }
    }
    .sent-stem {
      flex: 1;
      display: flex;
      background: #fff;
      .stem-content {
        flex: 1;
      }
      .number-box {
        // &-hasPY {
        //   margin-top: 19px;
        // }
      }
      .sent-main {
        position: relative;
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        box-sizing: border-box;
        &-138 {
          padding-right: 138px;
        }
        &-bottom {
          margin-bottom: 9px;
        }
      }
      .sent-que-box {
        display: flex;
        flex-wrap: wrap;
        padding: 4px 0;
      }
      .sent-que {
        font-size: 0;
        &-flex {
          flex: 1;
          display: flex;
          justify-content: space-between;
          align-items: stretch;
        }
        .sentence-part {
          flex: 1;
        }
        .sddItem_img_list {
          height: 32px;
        }
      }
      .answer-part {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        // padding-left: 16px;
        // &-hasPY {
        //   padding-top: 9px;
        // }
        // &.answer-part-138 {
        //   position: absolute;
        //   right: 0px;
        //   top: 1px;
        // }
        > div {
          margin-left: 8px;
        }
        .judge-part {
          &-padding-5 {
            padding: 5px 0 16px;
          }
        }
        .record-part {
          padding: 0;
        }
        .short-part {
          display: flex;
          align-items: center;
          margin-left: 0;
          &-flex {
            flex: 1;
          }
          // padding-top: 16px;
          // &-hasPY {
          //   padding-top: 24px;
          // }
        }
      }
    }
  }
  .record-common {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 8px;
    padding: 0 12px;
    margin: 0 auto;
    &-40 {
      height: 40px;
    }
  }
  .record_mini {
    min-width: 68px;
  }
  .record_normal {
    min-width: 126px;
  }
  .record_pro {
    min-width: 176px;
  }
  .record_promax {
    min-width: 200px;
  }
  .promax-box-div {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 0px 0px 8px 8px;
    .promax-box {
      width: 320px;
      height: 40px;
      border-radius: 20px;
      padding: 0 16px;
    }
  }
  &.hasmp3 {
    .sent-option {
      padding: 0px 16px;
    }
    &.sentence-control {
      background: #f7f7f7;
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
}
</style>
<style lang="scss">
.sentence-control{
    .answer-part{
        .OptionComponents-npc{
            ul{
                justify-content: flex-end;
            }
        }
    }
}
</style>