|
@@ -1,240 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="question-inner">
|
|
|
- <div class="type">
|
|
|
- {{ questionInfo.questionType }}
|
|
|
- </div>
|
|
|
- <p class="question">
|
|
|
- {{ questionInfo.question }}
|
|
|
- </p>
|
|
|
-
|
|
|
- <div class="wrapper-1">
|
|
|
- <div class="left">
|
|
|
- <button />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="svg-wrapper" />
|
|
|
-
|
|
|
- <div class="right">
|
|
|
- <button />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- <button
|
|
|
- v-for="(option, index) in questionInfo.answerOptions"
|
|
|
- :key="index"
|
|
|
- :disabled="isSubmitted"
|
|
|
- class="option"
|
|
|
- :class="{
|
|
|
- selected: selectedIdxList[index],
|
|
|
- rightOption: questionInfo.rightOptionIdx.includes(index),
|
|
|
- wrongOption: !questionInfo.rightOptionIdx.includes(index),
|
|
|
- submitted: isSubmitted,
|
|
|
- notSubmitted: !isSubmitted,
|
|
|
- }"
|
|
|
- @click="onClickOption(index)"
|
|
|
- >
|
|
|
- <div class="option-text">
|
|
|
- {{ option }}
|
|
|
- </div>
|
|
|
- <div
|
|
|
- v-show="isSubmitted && selectedIdxList[index] && questionInfo.rightOptionIdx.includes(index)"
|
|
|
- class="result-tip"
|
|
|
- >
|
|
|
- <img
|
|
|
- class="correct-icon"
|
|
|
- src="@/assets/images/correct.png"
|
|
|
- alt=""
|
|
|
- draggable="false"
|
|
|
- >
|
|
|
- <span class="right-tip-text">恭喜你,回答正确</span>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- v-show="isSubmitted && selectedIdxList[index] && !questionInfo.rightOptionIdx.includes(index)"
|
|
|
- class="result-tip"
|
|
|
- >
|
|
|
- <img
|
|
|
- class="wrong-icon"
|
|
|
- src="@/assets/images/wrong.png"
|
|
|
- alt=""
|
|
|
- draggable="false"
|
|
|
- >
|
|
|
- <span class="wrong-tip-text">很遗憾,回答错误</span>
|
|
|
- </div>
|
|
|
- </button> -->
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-// import browser from "@/utils/browser";
|
|
|
-
|
|
|
-export default {
|
|
|
- props: [
|
|
|
- ],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- selectedIdxList: [],
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...globalMapState([
|
|
|
- 'questionInfo',
|
|
|
- 'isSubmitted',
|
|
|
- 'answerRecord',
|
|
|
- ]),
|
|
|
- canSubmit() {
|
|
|
- if (this.selectedIdxList.length) {
|
|
|
- return true
|
|
|
- } else {
|
|
|
- return false
|
|
|
- }
|
|
|
- },
|
|
|
- isCorrect() {
|
|
|
- if (JSON.stringify(this.selectedIdxList) === JSON.stringify(this.questionInfo.answerOptions)) {
|
|
|
- return true
|
|
|
- } else {
|
|
|
- return false
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- },
|
|
|
- async mounted() {
|
|
|
- if (this.answerRecord) {
|
|
|
- // this.selectedIdxList = []
|
|
|
- this.selectedIdxList = [...JSON.parse(this.answerRecord.options)]
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
-.question-inner {
|
|
|
- flex: 1 0 1px;
|
|
|
- width: calc(100% - 150px * 2);
|
|
|
- margin-top: 10px;
|
|
|
- counter-reset: count;
|
|
|
- > .type {
|
|
|
- padding-left: 10px;
|
|
|
- padding-right: 10px;
|
|
|
- font-size: 24px;
|
|
|
- font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
|
|
- font-weight: bold;
|
|
|
- color: #693D2F;
|
|
|
- }
|
|
|
- > p.question {
|
|
|
- margin-top: 10px;
|
|
|
- padding-left: 10px;
|
|
|
- padding-right: 10px;
|
|
|
- font-size: 20px;
|
|
|
- font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
|
- font-weight: 400;
|
|
|
- color: #693D2F;
|
|
|
- }
|
|
|
-
|
|
|
- > .wrapper-1 {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 350px;
|
|
|
- background: blue;
|
|
|
- > .left {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 30%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- > .svg-wrapper {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 30%;
|
|
|
- right: 30%;
|
|
|
- height: 100%;
|
|
|
- background: red;
|
|
|
- }
|
|
|
- > .right {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- width: 30%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- > button.option {
|
|
|
- margin-top: 6px;
|
|
|
- height: 45px;
|
|
|
- padding-left: 10px;
|
|
|
- padding-right: 50px;
|
|
|
- padding-top: 5px;
|
|
|
- width: 100%;
|
|
|
- text-align: left;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- font-size: 20px;
|
|
|
- font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
|
- font-weight: 400;
|
|
|
- color: #693D2F;
|
|
|
- counter-increment: count;
|
|
|
- &.notSubmitted:hover {
|
|
|
- color: #5f9533;
|
|
|
- }
|
|
|
- &.notSubmitted.selected {
|
|
|
- background-image: url(@/assets/images/option-correct-bg.png);
|
|
|
- background-size: cover;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center center;
|
|
|
- color: #5f9533;
|
|
|
- }
|
|
|
- &.submitted {
|
|
|
- pointer-events: none;
|
|
|
- }
|
|
|
- &.submitted.selected.rightOption {
|
|
|
- background-image: url(@/assets/images/option-correct-bg.png);
|
|
|
- background-size: cover;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center center;
|
|
|
- color: #5f9533;
|
|
|
- }
|
|
|
- &.submitted.selected.wrongOption {
|
|
|
- background-image: url(@/assets/images/option-wrong-bg.png);
|
|
|
- background-size: cover;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center center;
|
|
|
- }
|
|
|
- > .option-text {
|
|
|
- &::before {
|
|
|
- content: counter(count, upper-alpha);
|
|
|
- margin-right: 0.5em;
|
|
|
- }
|
|
|
- }
|
|
|
- > .result-tip {
|
|
|
- display: inline-flex;
|
|
|
- align-items: center;
|
|
|
- > img.correct-icon {
|
|
|
- width: 16px;
|
|
|
- height: 12px;
|
|
|
- margin-right: 9px;
|
|
|
- }
|
|
|
- > img.wrong-icon {
|
|
|
- width: 13px;
|
|
|
- height: 13px;
|
|
|
- margin-right: 9px;
|
|
|
- }
|
|
|
- > .right-tip-text {
|
|
|
- font-size: 16px;
|
|
|
- font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
|
- font-weight: 400;
|
|
|
- color: #3E7016;
|
|
|
- }
|
|
|
- > .wrong-tip-text {
|
|
|
- font-size: 16px;
|
|
|
- font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
|
- font-weight: 400;
|
|
|
- color: #693D2F;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|