艺术戏剧（选择题完成）

user1

2024-06-24 8ce5acd0a7a61de43cbd2d3d1ece2c6c9287779a

 src/books/artAndDrama/view/components/chapter001.vue

@@ -59,43 +59,26 @@
    </div>
    <div class="page-box" page="6">
      <div v-if="showPageList.indexOf(6) > -1">
        <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />     
        <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
        <div class="bodystyle">
          <h3 class="lefth3" id="c001"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
          <p class="text"><span class="hs1">◇</span>请选出你认为正确的答案。</p>
          <p class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/1-2蚂蚁举大树.gif" />
          </p>
          <p class="text">蚂蚁是典型的（　　）昆虫。（多选）</p>
          <p class="text">A.群居</p>
          <p class="text">B.社会性</p>
          <p class="text">C.独居</p>
          <p class="text">蚂蚁内部有（　　）分工。（多选）</p>
          <p class="text">A.明确的</p>
          <p class="text">B.奇怪的</p>
          <p class="text">C.有序的</p>
          <p class="text">一个（　　）群体少不了默契的配合。（多选）</p>
          <p class="text">A.团结的</p>
          <p class="text">B.优秀的</p>
          <p class="text">C.松散的</p>
          <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
            x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
            controlslist="nodownload" class="w100 video"  @play="videoPlay"
            style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
            <p class="center videoname">
          <choice class="text" :questions="questions" :primaryColor="accentColor"  hoverBackgroundColor="#F58200" hoverColor="white"></choice>
          <p class="center text">
            <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
              x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
              controlslist="nodownload" class="w100 video " @play="videoPlay"
              style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
          </p>
          <p class="center videoname">
            <span>视频：我们是一家人 </span>
            <el-tooltip
              class="item"
              effect="dark"
              :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
              placement="top-start"
            >
              <img
                :src="chapterData.isCollectVideo ? collectCheck : collectImg"
                alt=""
                class="collect-btn"
                @click="handleCollect('video')"
              />
            <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
              placement="top-start">
              <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt="" class="collect-btn"
                @click="handleCollect('video')" />
            </el-tooltip>
          </p>
        </div>
@@ -191,12 +174,12 @@
            七年级上册》，2页，北京，人民教育出版社，2016。
          </p>
        </div>
         <!-- 此次为页脚部分（需要设置页码） -->
      <div class="page-footer">
        <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
        <div class="page-footer-number-right">5</div>
      </div> 
    </div>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-right">5</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="9">
      <div v-if="showPageList.indexOf(9) > -1">
@@ -212,20 +195,23 @@
            <img class="img-e" alt="" src="../../assets/images/1-4.gif" style="height: auto; width: 50%" />
          </h1>
          <p class="text">
            <span class="hs1">◇</span>生活中，我们总会遇到各种各样的诱惑。面对诱惑时，我们的内心常常会有两个不同的声音出现：一个声音要求我们严于律己，另一个声音要求我们随心所欲。请你分析一下，当蚂蚁队长面对掉落的奶酪渣的诱惑时，他内心的两个声音会说些什么呢？
            <span
              class="hs1">◇</span>生活中，我们总会遇到各种各样的诱惑。面对诱惑时，我们的内心常常会有两个不同的声音出现：一个声音要求我们严于律己，另一个声音要求我们随心所欲。请你分析一下，当蚂蚁队长面对掉落的奶酪渣的诱惑时，他内心的两个声音会说些什么呢？
          </p>
          <p class="text">正义队长：“
            <input v-model="questionData.warnUp.one" class="input-bottom-border input-w-60"  @change="setBookQuestion" />。”
            <input v-model="questionData.warnUp.one" class="input-bottom-border input-w-60"
              @change="setBookQuestion" />。”
          </p>
          <p class="text">黑暗队长：“ <input v-model="questionData.warnUp.two" class="input-bottom-border input-w-60" @change="setBookQuestion" />。”
          <p class="text">黑暗队长：“ <input v-model="questionData.warnUp.two" class="input-bottom-border input-w-60"
              @change="setBookQuestion" />。”
          </p>
        </div>
        <!-- 此次为页脚部分（需要设置页码） -->
      <div class="page-footer">
        <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
        <div class="page-footer-number-left">6</div>
      </div> 
    </div>
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-left">6</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="10">
      <div v-if="showPageList.indexOf(10) > -1">
@@ -277,12 +263,12 @@
            七年级上册》，2页，北京，人民教育出版社，2016。
          </p>
        </div>
      <!-- 此次为页脚部分（需要设置页码） -->
      <div class="page-footer">
        <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
        <div class="page-footer-number-right">7</div>
      </div> 
    </div>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-right">7</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="11">
      <div v-if="showPageList.indexOf(11) > -1">
@@ -299,12 +285,12 @@
            <span class="hs1">◇</span>蚂蚁队长把奶酪渣留给了年龄最小的蚂蚁，赢得了大家的认可。在生活中，你曾经像“蚂蚁队长”一样爱护弱小吗？或者像“小蚂蚁”一样得到过哥哥姐姐们的关爱吗？
          </p>
        </div>
      <!-- 此次为页脚部分（需要设置页码） -->
      <div class="page-footer">
        <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
        <div class="page-footer-number-left">8</div>
      </div> 
    </div>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-left">8</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="12">
      <div v-if="showPageList.indexOf(12) > -1">
@@ -333,12 +319,12 @@
            想象自己站在一座高山上，好朋友“阿毛”站在对面的高山上，你要如何喊他呢？
          </p>
        </div>
       <!-- 此次为页脚部分（需要设置页码） -->
      <div class="page-footer">
        <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
        <div class="page-footer-number-right">9</div>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-right">9</div>
        </div>
      </div>
    </div>
    </div>
    <div class="page-box" page="13">
      <div v-if="showPageList.indexOf(13) > -1">
@@ -354,53 +340,45 @@
          <p class="text">
            孔融四岁就懂礼貌、知谦让，是我们学习的好榜样，让我们运用本单元的戏剧知识，把他的故事表演出来吧！
          </p>
          <p class="center">
          <p class="center text">
            <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
              x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
              controlslist="nodownload" class="w100 video"  @play="videoPlay"
              controlslist="nodownload" class="w100 video" @play="videoPlay"
              style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
          </p>
          <p class="center videoname">
            <span>视频：我们是一家人 </span>
            <el-tooltip
              class="item"
              effect="dark"
              :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
              placement="top-start"
            >
              <img
                :src="chapterData.isCollectVideo ? collectCheck : collectImg"
                alt=""
                class="collect-btn"
                @click="handleCollect('video')"
              />
            <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
              placement="top-start">
              <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt="" class="collect-btn"
                @click="handleCollect('video')" />
            </el-tooltip>
          </p>
        </div>
            <!-- 此次为页脚部分（需要设置页码） -->
      <div class="page-footer">
        <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
        <div class="page-footer-number-left">10</div>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-left">10</div>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import matching from "@/components/matching/matching.vue";
import choice from "@/components/choice/choice.vue"
import { getResourcePath } from "@/assets/methods/resources";
export default {
  name: "chapterOne",
  components: { matching },
  components: {
    matching,
    choice,
  },
  props: {
    showPageList: {
      type: Array,
    },
    primaryColor: {
      type: String,
      default: "red",
    }
  },
  //在这里对调用的方法进行挂载
  mounted() {
@@ -470,30 +448,46 @@
        answer: [
          {
            id: "FB34",
            linkValue: "<span class='un1'>我</span>请你吃苹果吧！",
            value: "强调请客的人是“我”",
            linkValue: "强调请客的人是“我”",
            value: "<span class='un1'>我</span>请你吃苹果吧！",
          },
          {
            id: "64D6",
            linkValue: "我<span class='un1'>请</span>你吃苹果吧！",
            value: "强调是请客",
          },  
            linkValue: "强调是请客",
            value: "我<span class='un1'>请</span>你吃苹果吧！",
          },
          {
            id: "2ED4",
            linkValue: "我请<span class='un1'>你</span>吃苹果吧！",
            value: "强调请的是“你”",
            linkValue: "强调请的是“你”",
            value: "我请<span class='un1'>你</span>吃苹果吧！",
          },
          {
            id: "44DE",
            linkValue: "我请你吃<span class='un1'>苹果</span>吧！",
            value: "强调吃的东西是“苹果”",
            linkValue: "强调吃的东西是“苹果”",
            value: "我请你吃<span class='un1'>苹果</span>吧！",
          },
        ],
        optionStyle: undefined,
        id: 489306,
        options: {
          linkValues: [
          linkValues: [{
            oldId: "64D6",
            txt: "强调是请客",
          },
          {
            oldId: "2ED4",
            txt: "强调请的是“你”",
          },
          {
            oldId: "44DE",
            txt: "强调吃的东西是“苹果”",
          },
          {
            oldId: "FB34",
            txt: "强调请客的人是“我”",
          },
          ],
          values: [{
            oldId: "FB34",
            txt: "<span class='un1'>我</span>请你吃苹果吧！",

@@ -511,24 +505,6 @@
            txt: "我请你吃<span class='un1'>苹果</span>吧！",
          },
          ],
          values: [
          {
            oldId: "64D6",
            txt: "强调是请客",
          },
          {
            oldId: "2ED4",
            txt: "强调请的是“你”",
          },
          {
            oldId: "44DE",
            txt: "强调吃的东西是“苹果”",
          },
          {
            oldId: "FB34",
            txt: "强调请客的人是“我”",
          },
          ],
        },
        questionType: "matching",
        stem: {
@@ -540,6 +516,134 @@
        value: [],
        answerImg: require("../../assets/images/matching-one.png"),
      },
      questions: [
        {
          analysisCon: "undefined",
          answer: ['A', 'B'],
          difficulty: 0,
          id: 47772,
          isCollect: false,
          isComplete: false,
          isRight: null,
          isUnfold: "",
          isUserAnswer: false,
          number: 1,
          options: [
            {
              "img": "",
              "index": "3CA6",
              "txt": "群居",
              "value": "A"
            },
            {
              "img": "",
              "index": "73EE",
              "txt": "社会性",
              "value": "B"
            },
            {
              "img": "",
              "index": "6AEF",
              "txt": "独居",
              "value": "C"
            },
          ],
          optionStyle: "Image",
          questionType: "singleChoice",
          score: 2,
          stem: {
            "stemTxt": "1、蚂蚁是典型的(  )昆虫。(多选)"
          },
          stemStyle: "Txt",
          userAnswer: "",
          // 单选题这里的字段内容就是"单选题"
          type: 'multi'
        },
        {
          analysisCon: "undefined",
          answer: ['A', 'C'],
          difficulty: 0,
          id: 47773,
          isCollect: false,
          isComplete: false,
          isRight: null,
          isUnfold: "",
          isUserAnswer: false,
          number: 1,
          options: [
            {
              "img": "",
              "index": "3CA6",
              "txt": "明确的",
              "value": "A"
            },
            {
              "img": "",
              "index": "73EE",
              "txt": "奇怪的",
              "value": "B"
            },
            {
              "img": "",
              "index": "6AEF",
              "txt": "有序的",
              "value": "C"
            },
          ],
          optionStyle: "Image",
          questionType: "singleChoice",
          score: 2,
          stem: {
            "stemTxt": "2、蚂蚁内部又(  )分工。(多选)"
          },
          stemStyle: "Txt",
          userAnswer: "",
          // 单选题这里的字段内容就是"单选题"
          type: 'multi'
        },
        {
          analysisCon: "undefined",
          answer: ['A', 'B'],
          difficulty: 0,
          id: 47774,
          isCollect: false,
          isComplete: false,
          isRight: null,
          isUnfold: "",
          isUserAnswer: false,
          number: 1,
          options: [
            {
              "img": "",
              "index": "3CA6",
              "txt": "团结的",
              "value": "A"
            },
            {
              "img": "",
              "index": "73EE",
              "txt": "优秀的",
              "value": "B"
            },
            {
              "img": "",
              "index": "6AEF",
              "txt": "松散的",
              "value": "C"
            },
          ],
          optionStyle: "Image",
          questionType: "singleChoice",
          score: 2,
          stem: {
            "stemTxt": "3、一个(  )群体少不了默契的配合。(多选)"
          },
          stemStyle: "Txt",
          userAnswer: "",
          // 单选题这里的字段内容就是"单选题"
          type: 'multi'
        },
      ],
      questionData: {
        warnUp: {
          one: "",
@@ -596,7 +700,7 @@
      this.$emit('closeAudio', e.srcElement.currentSrc)
    },
    videoPlay(e) {
      this.$emit('closeVideo',e.srcElement.currentSrc)
      this.$emit('closeVideo', e.srcElement.currentSrc)
    },
    handleChapterData() {
      localStorage.setItem(