邏輯挑戰解題用線上白版 | 程式專案

{"id":411547,"student_id":2589,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n    \u003ctitle\u003e邏輯挑戰解題用線上白版｜橘蘋學習平台\u003c/title\u003e\\n    \u003clink href=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css\\\" rel=\\\"stylesheet\\\" integrity=\\\"sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0\\\" crossorigin=\\\"anonymous\\\"\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv id=\\\"app\\\"\u003e\\n        \u003cdiv class=\\\"box\\\"\u003e\\n            \u003ch2 class=\\\"m-0 mb-1\\\"\u003e邏輯挑戰解題用線上白版\u003c/h2\u003e\\n            \u003cdiv id=\\\"sketchpad\\\" class=\\\"my-1 mb-2\\\"\u003e\u003c/div\u003e\\n            \u003cdiv id=\\\"btns\\\" class=\\\"row mt-1\\\"\u003e\\n                \u003cdiv class=\\\"d-flex justify-content-center p-0\\\"\u003e\\n                    \u003cdiv class=\\\"btn-group me-2\\\"\u003e\\n                        \u003cbutton type=\\\"button\\\" class=\\\"btn btn-danger\\\" @click=\\\"redPen()\\\"\u003e紅筆\u003c/button\u003e\\n                        \u003cbutton type=\\\"button\\\" class=\\\"btn btn-dark\\\" @click=\\\"blackPen()\\\"\u003e黑筆\u003c/button\u003e\\n                        \u003cbutton type=\\\"button\\\" class=\\\"btn btn-light border\\\" @click=\\\"whitePen()\\\"\u003e擦去\u003c/button\u003e\\n                    \u003c/div\u003e\\n                    \u003cdiv class=\\\"btn-group\\\"\u003e\\n                        \u003cbutton type=\\\"button\\\" class=\\\"btn btn-primary\\\" @click=\\\"undoPad()\\\"\u003e返回\u003c/button\u003e\\n                        \u003cbutton type=\\\"button\\\" class=\\\"btn btn-primary\\\" @click=\\\"redoPad()\\\"\u003e重做\u003c/button\u003e\\n                        \u003cbutton type=\\\"button\\\" class=\\\"btn btn-primary\\\" @click=\\\"clearPad()\\\"\u003e清除\u003c/button\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n\\n    \u003cscript src=\\\"https://unpkg.com/vue@3\\\"\u003e\u003c/script\u003e\\n\\n    \u003cscript src=\\\"https://cdn.jsdelivr.net/npm/responsive-sketchpad@1.2.4/dist/sketchpad.min.js\\\"\u003e\u003c/script\u003e\\n    \u003cscript src=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js\\\" integrity=\\\"sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8\\\" crossorigin=\\\"anonymous\\\"\u003e\u003c/script\u003e\\n\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"html, body {\\n    margin: 0;\\n    box-sizing: border-box;\\n}\\n\\n#sketchpad {\\n    width: 75vh;\\n    height: 75vh;\\n    border: 1px solid black;\\n    display: inline-block;\\n    overflow: hidden;\\n}\\n\\n#btns {\\n    width: 75vh;\\n    margin: 0;\\n    padding: 0;\\n}\\n\\n.box {\\n    width: 100vw;\\n    height: 100vh;\\n    display: flex;\\n    justify-content: center;\\n    align-items: center;\\n    flex-direction: column;\\n}\\n\\n\\n#pen {\\n    display: inline-block;\\n    position: absolute;\\n    width: 7.5px;\\n    height: 7.5px;\\n    background: #dc3545;\\n    border-radius: 50%;\\n}\",\"js\":\"\\n\\nwindow.onresize = function (e) {\\n    pad.resize(el.offsetWidth);\\n}\\n\\nconst { onMounted } = Vue;\\n\\nconst app = Vue.createApp({\\n    setup(){\\n        onMounted(() =\u003e {\\n            console.log(\\\"-------------\\\");\\n            let el = document.getElementById('sketchpad');\\n            pad = new Sketchpad(el,{\\n                line: {\\n                    color: '#fff',\\n                    size: 5\\n                }\\n            });\\n            \\n        })\\n    },\\n    data() {\\n        return {\\n            pad: \\\"\\\"\\n        }\\n    },\\n    methods: {\\n        penMove: function(){\\n            console.log(x, y)\\n        },\\n        redPen: function(){\\n            pad.setLineColor('#dc3545');\\n            pad.setLineSize(5);\\n        },\\n        blackPen: function(){\\n            pad.setLineColor('#000');\\n            pad.setLineSize(5);\\n        },\\n        whitePen: function(){\\n            pad.setLineColor('#fff');\\n            pad.setLineSize(10);\\n        },\\n        clearPad: function(){\\n            pad.clear();\\n        },\\n        undoPad: function(){\\n            pad.undo();\\n        },\\n        redoPad: function(){\\n            pad.redo();\\n        },\\n    }\\n})\\n\\napp.mount('#app');\"}","created_at":"2022-07-25T14:39:37.906+08:00","updated_at":"2022-07-25T14:46:41.435+08:00","name":"邏輯挑戰解題用線上白版","language":"web","screenshot":{"url":"https://cdn9.koding.school/uploads/project/screenshot/411547/c10d764ff2fc5a729be333e7e51477f8.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":92,"hashid":"9ygsnn9r3","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}