testbookLayout.git

<template>
    <div class="chapter" num="5">
        <!-- 第四单元 -->
        <!-- 58 -->
        <div class="page-box" page="64">
            <div class="bodystyle" v-if="showPageList.indexOf(64) > -1">
                <h1 id="a005">
                    <img class="img-0" alt="" src="../../assets/images/dy4.jpg" />
                </h1>
                <p class="img"></p>
                <p><b>This unit will help you to:</b></p>
                <p>➢ Learn words and expressions to describe hi-tech products</p>
                <p>➢ Review the rules for the comparative and superlative degree of adjectives and adverbs</p>
                <p>➢ Get knowledge of the impact of science and technology on the way of life</p>
                <p>➢ Be able to write a sales letter to introduce a new product</p>
                <p>➢ Get inspired by the spirit of scientists</p>
                <p class="center">
                    <img class="img-0" alt="" src="../../assets/images/0068-1.jpg" />
                </p>
                <p class="img"></p>
            </div>
        </div>
        <!-- 59 -->
        <!-- <div class="page-box" page="65">
            <div v-if="showPageList.indexOf(65) > -1">
 
                <ul class="preface-odd-header w100 fl ju-bt">
                    <li class=""></li>
                    <li class="fz-18">
                        <span class="chapter-left-bc-unit3">MODULE 4</span>
                        <span class="chapter-right-bc-unit3 fw-bl chapter-right-cl-unit3">A BETTER WORLD WITH
                            VOLUNTEERS</span>
                    </li>
                </ul>
            
                <div class="padding-93">
                    <div class="bodystyle"></div>
                </div>
                <div class="preface-bottom">
                    <span class="contet-num-box">39</span>
                </div>
            </div>
        </div> -->
        <!-- 60 -->
        <!-- <div class="page-box" page="66">
            <div v-if="showPageList.indexOf(66) > -1">
        
                <div class="w100 mb-20" style="padding-right: 20px">
                    <div class="event-header-bc-unit3 fl al-end" style="height: 100px; padding-left: 40px">
                        <div class="preface-header-box event-header-text-bc-unit3">
                            <span class="l-text">新标准通用职场英语</span>
                            <span class="g-text event-text-color-unit3">基础模块一</span>
                        </div>
                    </div>
                </div>
 
                <div class="padding-93">
                    <div class="bodystyle"></div>
                </div>
                <div class="preface-bottom">
                    <span class="contet-num-box">12</span>
                </div>
            </div>
        </div> -->
    </div>
</template>
<script>
import matching from "@/components/matching/matching.vue";
import { getResourcePath } from "@/assets/methods/resources";
export default {
    name: "chapter-Four",
    components: { matching },
    props: {
        showPageList: {
            type: Array,
        },
    },
    data() {
        return {
            imgThirteen: require("../../assets/images/grammar.jpg"),
            showAnswerOne: false,
            showAnswerTwo: false,
            showAnswerThree: false,
            showAnswerFour: false,
            showAnswerFive: false,
            showImg: false,
            showQuestionAnswer: false,
            rawData: {
                left: [
                    {
                        oldId: "FB34",
                        txt: "Martin　　　　Silk",
                    },
                    {
                        oldId: "64D6",
                        txt: "Jessica　　The Great Wall",
                    },
                    {
                        oldId: "2ED4",
                        txt: "Soren　　Chinese Food",
                    },
                    {
                        oldId: "44DE",
                        txt: "Chinese　　　　Tea",
                    },
                ],
                right: [
                    {
                        oldId: "64D6",
                        txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
                    },
                    {
                        oldId: "FB34",
                        txt: "It was first discovered and drank in China and my favorileLongjing tca is praduced near the West Lake in Hangzhou.",
                    },
                    {
                        oldId: "2ED4",
                        txt: "The clothing material is quite popular among Roman women inancient times.",
                    },
                    {
                        oldId: "44DE",
                        txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
                    },
                ],
            },
            value: [],
            question: {
                KnowledgePoint: "123",
                analysis: "123",
                answer: [
                    {
                        id: "FB34",
                        linkValue:
                            "The clothing material is quite popular among Roman women inancient times.",
                        value: "Silk",
                    },
                    {
                        id: "64D6",
                        linkValue:
                            "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
                        value: "The Great Wall",
                    },
                    {
                        id: "2ED4",
                        linkValue:
                            "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
                        value: "Chinese Food",
                    },
                    {
                        id: "44DE",
                        linkValue:
                            "It was first discovered and drank in China and my favorileLongjing tca is praduced near the West Lake in Hangzhou.",
                        value: "Chinese Tea",
                    },
                ],
                optionStyle: undefined,
                id: 489306,
                options: {
                    linkValues: [
                        {
                            oldId: "64D6",
                            txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
                        },
                        {
                            oldId: "44DE",
                            txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.",
                        },
                        {
                            oldId: "FB34",
                            txt: "The clothing material is quite popular among Roman women inancient times.",
                        },
                        {
                            oldId: "2ED4",
                            txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
                        },
                    ],
                    values: [
                        {
                            oldId: "FB34",
                            txt: "Martin  Silk",
                        },
                        {
                            oldId: "64D6",
                            txt: "The Great Wall",
                        },
                        {
                            oldId: "2ED4",
                            txt: "Chinese Food",
                        },
                        {
                            oldId: "44DE",
                            txt: "Chinese Tea",
                        },
                    ],
                },
                questionType: "matching",
                stem: {
                    stemTxt: "按顺序连线",
                },
                stemStyle: undefined,
                titleDescription: "1",
                userChoise: [],
                value: [],
                answerImg: require("../../assets/images/matching-one.png"),
            },
            questionData: {
                warnUp: {
                    one: {
                        value: "",
                        isRight: null,
                        answer: "Chinese knot",
                    },
                    two: {
                        value: "",
                        isRight: null,
                        answer: "Chinese medicine",
                    },
                    three: {
                        value: "",
                        isRight: null,
                        answer: "Chinese calligraphy",
                    },
                    four: {
                        value: "",
                        isRight: null,
                        answer: "Taichi",
                    },
                    five: {
                        value: "",
                        isRight: null,
                        answer: "sweet dumpling",
                    },
                    six: {
                        value: "",
                        isRight: null,
                        answer: "Chinese chess",
                    },
                    seven: "",
                },
                reading: {
                    one: "",
                    two: "",
                },
                table: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                    seven: "",
                    enight: "",
                    nine: "",
                },
            },
            testData: {
                check: [],
                tx: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                },
                in: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                },
                line: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                },
                ts: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                },
                gr: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                },
                cm: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                },
            },
            resource: {
                listenOne: "",
                readingOne: "",
                readingTwo: "",
            },
            dropDownList: [
                "animal rescue and care",
                "blood donation",
                "community clean-ups",
                "language service",
            ],
            dropdownData: {
                one: {
                    value: "",
                    isRight: null,
                    answer: "blood donation",
                },
                two: {
                    value: "",
                    isRight: null,
                    answer: "language service",
                },
                three: {
                    value: "",
                    isRight: null,
                    answer: "community clean-ups",
                },
                four: {
                    value: "",
                    isRight: null,
                    answer: "animal rescue and care",
                },
            },
        };
    },
    mounted() {
        const testData = localStorage.getItem("english-testOne");
        if (testData) {
            this.testData = JSON.parse(testData);
        }
        const bookQuestion = localStorage.getItem("english-book-question-one");
        if (bookQuestion) {
            this.questionData = JSON.parse(bookQuestion);
        }
        const dropdownData = localStorage.getItem("english-dropdown-one");
        if (dropdownData) {
            this.dropdownData = JSON.parse(dropdownData);
        }
        this.getPath();
    },
    methods: {
        saveWord(event, word) {
            this.$emit("saveCharacters", event, word);
        },
        setTestData() {
            localStorage.setItem("english-testOne", JSON.stringify(this.testData));
        },
        changeTestData() {
            localStorage.removeItem("english-testOne");
            this.testData = {
                check: [],
                tx: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                },
                in: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                },
                line: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                },
                ts: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                },
                gr: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                },
                cm: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                },
            };
        },
        setBookQuestion() {
            console.log("保存");
            localStorage.setItem(
                "english-book-question-one",
                JSON.stringify(this.questionData)
            );
        },
        async getPath() {
            this.resource.listenOne = await getResourcePath(
                "422139A2EF66EA888C5ED1D550AE23E0"
            );
            this.resource.readingOne = await getResourcePath(
                "3F442B682D84C8AB06C800B29D734920"
            );
            this.resource.readingTwo = await getResourcePath(
                "E8719EC88026BCFB11D292AA999F6D3D"
            );
        },
        showAnswer(type) {
            if (type == "showImg") {
                this.showImg = !this.showImg;
            }
        },
        handleQuestion(type) {
            if (type == "one") {
                this.questionData.warnUp.one.value
                    ? (this.questionData.warnUp.one.isRight =
                        this.questionData.warnUp.one.value == "Chinese knot")
                    : (this.questionData.warnUp.one.isRight = null);
            } else if (type == "two") {
                this.questionData.warnUp.two.value
                    ? (this.questionData.warnUp.two.isRight =
                        this.questionData.warnUp.two.value == "Chinese medicine")
                    : (this.questionData.warnUp.two.isRight = null);
            } else if (type == "three") {
                this.questionData.warnUp.three.value
                    ? (this.questionData.warnUp.three.isRight =
                        this.questionData.warnUp.three.value == "Chinese calligraphy")
                    : (this.questionData.warnUp.three.isRight = null);
            } else if (type == "four") {
                this.questionData.warnUp.four.value
                    ? (this.questionData.warnUp.four.isRight =
                        this.questionData.warnUp.four.value == "Taichi")
                    : (this.questionData.warnUp.four.isRight = null);
            } else if (type == "five") {
                this.questionData.warnUp.five.value
                    ? (this.questionData.warnUp.five.isRight =
                        this.questionData.warnUp.five.value == "sweet dumpling")
                    : (this.questionData.warnUp.five.isRight = null);
            } else if (type == "six") {
                this.questionData.warnUp.six.value
                    ? (this.questionData.warnUp.six.isRight =
                        this.questionData.warnUp.six.value == "Chinese chess")
                    : (this.questionData.warnUp.six.isRight = null);
            }
        },
        handleDropdown(type) {
            const dropdownDatas = this.dropdownData;
            for (let key in dropdownDatas) {
                const item = dropdownDatas[key];
                if (type == "judge") {
                    item.value == item.answer
                        ? (item.isRight = true)
                        : (item.isRight = false);
                    console.log(item.value, item.answer);
                }
            }
            this.dropdownData = dropdownDatas;
        },
        changeDropdown() {
            localStorage.removeItem("english-dropdown-one");
            for (let key in this.dropdownData) {
                const item = this.dropdownData[key];
                item.value = "";
                item.isRight = null;
            }
        },
        setDropdownData() {
            localStorage.setItem(
                "english-dropdown-one",
                JSON.stringify(this.dropdownData)
            );
        },
        saveData() {
            console.log(this.testData);
        },
        audioPlay() {
            this.$emit("closeMiniAudio");
        },
    },
};
</script>
 
<style lang="less" scoped></style>