打字練習(week_1) 副本 | Programming Project

{"id":203253,"student_id":12205,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\\t\u003ctitle\u003eDocument\u003c/title\u003e\\n\\t\u003cscript src=\\\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \\n    \u003cdiv id=\\\"container\\\"\u003e\\n        \u003cdiv v-for=\\\"d in data\\\"\u003e\\n            \u003cmy-challenge :answer=\\\"d\\\"\u003e\u003c/my-challenge\u003e    \\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body {\\n    background-color: #efefef;\\n}\\n\\n.challenge {\\n    position: relative;\\n    width: 100%;\\n    height: 200px;\\n}\\n\\ntextarea {\\n    position: absolute;\\n    width: calc(100% - 20px);\\n    box-sizing: border-box;\\n    top: 30px;\\n    left: 10px;\\n    right: 10px;\\n    bottom: 10px;\\n    padding: 15px;\\n    border: 3px solid #bbbbbb;\\n    border-radius: 5px;\\n    box-sizing: border-box;\\n    font-size: 20px;\\n    font-family: Monospace;\\n    outline: none;\\n    background-color: rgba(0,0,0,0);\\n}\\n\\n.result {\\n    text-align: center;\\n    color: #aaaaaa;\\n}\\n\\n.input {\\n    color: #333333;\\n}\\n\\n.fixed {\\n    color: #aaaaaa;\\n}\\n\\n.completed \u003e textarea {\\n    border-color: #28a745;\\n    color: #28a745 !important;\\n}\\n\\n.completed \u003e p {\\n    color: #28a745 !important;\\n}\",\"js\":\"\"}","created_at":"2020-11-13T21:02:48.593+08:00","updated_at":"2020-11-13T21:02:48.593+08:00","name":"打字練習(week_1) 副本","language":"web","screenshot":{"url":null},"parent_id":194245,"plugin":"Vue.component('my-challenge', {\n    template: `\n    \u003cdiv class=\"challenge\" :class=\"styleClass\"\u003e\n    \u003cp class=\"result\"\u003e\n    {{progess}}\n    \u003cspan v-if=\"completed\"\u003e{{timer}}\u003c/span\u003e\n    \u003c/p\u003e\n    \u003ctextarea class=\"fixed\" ref=\"fixed\" v-model=\"answer\"\u003egame.create_sprite\u003c/textarea\u003e\n    \u003ctextarea class=\"input\" @keyup=\"keyup\" v-model=\"input\"\u003e\u003c/textarea\u003e\n    \u003c/div\u003e\n    `,\n    props: ['answer'],\n    data: function () {\n        return {\n            // answer: '',\n            input: '',\n            startTime: undefined,\n            endTime: undefined,\n        }\n    },\n\n    mounted: function () {\n        this.answer = this.$refs.fixed.value || ''\n    },\n\n    methods: {\n        keyup: function () {\n            if (this.startTime == undefined) {\n                this.startTime = Date.now()\n            }\n\n            let idx = this.input.length - 1\n\n            if (this.input[idx] !== this.answer[idx]) {\n                this.input = this.input.slice(0, idx)\n            } else if (idx === this.answer.length - 1) {\n                this.endTime = Date.now()\n            }\n        }\n    },\n\n    computed: {\n        progess: function () {\n            return this.input.length + '/' + this.answer.length\n        },\n        timer: function () {\n            let time = Date.now() - this.startTime\n            return '過關！(' + time/1000 + '秒)'\n        },\n        completed: function () {\n            return !!this.endTime\n        },\n        styleClass: function () {\n            return [this.completed ? 'completed': '']\n        }\n    }\n})\n\n\nvar data = [\n    \"+-*/\u003e\u003c=():,._'\",\n    'abcdefghijklmnopqrstuvwxyz',\n    'game\\ngame\\ngame\\ngame\\ngame',\n    '(-_-)zzZZ',\n    // '(x_x;)',\n    // 'm(._.)m',\n    // '(-_-)zzZZ',\n    // '(\u003e_\u003c)',\n    // '(=_=)',\n    // 'L(-_-L)',\n    // '(o_O)',\n    // '(.w.)',\n    // 'Orz',\n    // 'm(._.)m',\n    // '(\u003e_\u003c)',\n    // '(x_x)',\n    // '(+_+)',\n    // '{{ (\u003e_\u003c) }}',\n    // '(o_O)',\n    // '(O_O;)',\n    // 'y(O_O;)y',\n    // '(= 3 =)',\n]\n\nnew Vue({\n    el: '#container',\n    data: {data: data},\n})\n","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":195,"hashid":"kdms6zqkn","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}