打字練習 | 程式專案 | 橘蘋學習平台

{"id":194242,"student_id":10,"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\":\"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    '(-_-)zzZZ',\\n    'set_backdrop\\\\ngame\\\\ngame\\\\ngame\\\\ngame'\\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\"}","created_at":"2020-09-28T11:03:36.434+08:00","updated_at":"2020-09-28T15:55:22.573+08:00","name":"打字練習","language":"web","screenshot":{"url":"https://cdn7.koding.school/uploads/project/screenshot/194242/b5ad1dc7fe6d1c5c1cc249b1c9b9d5d5.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":266,"hashid":"meysrry2","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}