麥塊教育版帳號與密碼查詢網站 | 程式專案

{"id":372198,"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.1.1/dist/css/bootstrap.min.css\\\" rel=\\\"stylesheet\\\" integrity=\\\"sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU\\\" crossorigin=\\\"anonymous\\\"\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv id=\\\"app\\\"\u003e\\n\\n        \u003cdiv class=\\\"container\\\"\u003e\\n            \u003cdiv id=\\\"content0\\\" class=\\\"row align-items-center\\\"\u003e\\n                \\n            \u003c/div\u003e\\n            \u003cdiv id=\\\"content1\\\" class=\\\"row align-items-center d-none\\\"\u003e\\n                \u003cdiv class=\\\"col-12\\\"\u003e\\n                    \u003cdiv class=\\\"mb-3\\\"\u003e\\n                        \u003clabel for=\\\"input1\\\" class=\\\"form-label\\\"\u003e請跟老師索取梯次序號：\u003c/label\u003e\\n                        \u003c!-- \u003cinput class=\\\"form-control\\\" v-model=\\\"stageId\\\"\u003e --\u003e\\n                        \u003cselect class=\\\"form-select\\\" v-model=\\\"selectedStageId\\\"\u003e\\n                            \u003coption v-for=\\\"option in stageIdOptions\\\" v-bind:value=\\\"option.value\\\"\u003e\\n                                {{ option.text }}\\n                            \u003c/option\u003e\\n                        \u003c/select\u003e\\n                        \u003c!-- \u003cspan\u003eSelected: {{ selectedStageId }}\u003c/span\u003e --\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n                \u003cdiv class=\\\"col-12\\\"\u003e\\n                    \u003cdiv class=\\\"mb-3\\\"\u003e\\n                        \u003clabel for=\\\"input2\\\" class=\\\"form-label\\\"\u003e請輸入自己的全名：\u003c/label\u003e\\n                        \u003cinput class=\\\"form-control\\\" v-model=\\\"studentName\\\"\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n            \u003cdiv id=\\\"content2\\\" class=\\\"row align-items-center d-none\\\"\u003e\\n                \u003cdiv class=\\\"col-12\\\"\u003e\\n                    \u003cdiv v-if=\\\"filterCards.length\u003e1\\\" class=\\\"alert alert-warning\\\" role=\\\"alert\\\"\u003e\\n                        本梯次有相同姓名的學生，請老師分配麥塊教育版帳號密碼。\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n\\n\\n                \u003cdiv class=\\\"col-12 mb-3\\\" v-for=\\\"(filterCard, index) in filterCards\\\" :key=\\\"index\\\"\u003e\\n                    \u003cdiv class=\\\"card mb-3\\\" :id=\\\"'card'+index\\\"\u003e\\n                        \u003cdiv class=\\\"card-body\\\"\u003e\\n                            \u003ch5\u003e麥塊教育版帳號密碼\u003c/h5\u003e\\n                            \u003chr\u003e\\n                            \u003cp\u003e\\n                                學生姓名：\u003cf class=\\\"name\\\"\u003e{{ filterCard[\\\"學生姓名\\\"] }}\u003c/f\u003e\\n                            \u003c/p\u003e\\n                            \u003cp\u003e\\n                                授權帳號：{{ filterCard[\\\"麥塊教育版帳號\\\"] }}\\n                            \u003c/p\u003e\\n                            \u003cp\u003e\\n                                授權密碼：{{ filterCard[\\\"麥塊教育版密碼\\\"] }}\\n                            \u003c/p\u003e\\n                            \u003cp\u003e\\n                                授權期間：{{ filterCard[\\\"授權時間\\\"] }}\\n                            \u003c/p\u003e\\n                        \u003c/div\u003e\\n\\n                    \u003c/div\u003e\\n                    \u003cbutton class=\\\"btn btn-primary col-12 \\\" @click=\\\"onScreenShotClick(index)\\\"\u003e下載保存\u003c/button\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n\\n    \u003c/div\u003e\\n\\n    \u003cscript src=\\\"https://unpkg.com/vue@3\\\"\u003e\u003c/script\u003e\\n\\n    \u003cscript src='https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js'\u003e\u003c/script\u003e\\n\\n    \u003cscript src=\\\"https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.1/papaparse.min.js\\\"\u003e\u003c/script\u003e\\n    \u003cscript src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'\u003e\u003c/script\u003e\\n    \u003cscript src=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js\\\" integrity=\\\"sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ\\\" crossorigin=\\\"anonymous\\\"\u003e\u003c/script\u003e\\n\\n    \u003clink href=\\\"https://cdn.jsdelivr.net/npm/jquery-easy-loading@1.3.0/dist/jquery.loading.css\\\" rel=\\\"stylesheet\\\" /\u003e\\n    \u003cscript src=\\\"https://cdn.jsdelivr.net/npm/jquery-easy-loading@1.3.0/dist/jquery.loading.js\\\"\u003e\u003c/script\u003e\\n\\n    \u003cscript src=\\\"./script.js\\\"\u003e\u003c/script\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"/* 設定整個頁面內容水平置中、內寬為 30 像素：*/\\nbody {\\n    /* text-align: center; */\\n    padding: 30px;\\n}\\n\\n\\n#content0 {\\n    width: 100%;\\n    height: 100px;\\n}\\n\",\"js\":\"const app = Vue.createApp({\\n    data() {\\n        return {\\n            url: \\\"https://script.google.com/macros/s/AKfycbwKH4i-5JrXx3By6WlNp_WfjBslpUbbVz0Ors8bSPgI9tP7NvRUWLnvlNKiPa6B4OHbOg/exec\\\",\\n            selectedStageId: \\\"\\\",\\n            stageIdOptions: [],\\n            studentName: \\\"\\\",\\n            cards: [],\\n        }\\n    },\\n    computed: {\\n        filterCards() {\\n            return this.cards.filter(card =\u003e card[\\\"學生姓名\\\"] === this.studentName \u0026\u0026 card[\\\"梯次代碼\\\"] == this.selectedStageId);\\n        }\\n    },\\n\\n    methods: {\\n        onScreenShotClick(e) {\\n            let cardId = `#card${e}`;\\n            html2canvas(document.querySelector(cardId), {\\n                backgroundColor: \\\"#ffffff\\\"\\n            }).then((canvas) =\u003e {\\n                let a = document.createElement(\\\"a\\\");\\n                a.href = canvas.toDataURL(\\\"image/png\\\", 1.0);\\n                a.download = $(`${cardId} .name`).text().replace(\\\"學生姓名：\\\", \\\"\\\") +\\\"-麥塊教育版帳號密碼.png\\\";\\n                a.click();\\n            });\\n        },\\n    },\\n    \\n    mounted() {\\n        $(\\\"#content0\\\").loading({\\n          message: '資料載入中...'\\n        }); // 開始\\n        fetch(`${this.url}`).then(res =\u003e res.json()).then(myJson=\u003e {\\n            this.cards = [...myJson];\\n            let stageIds = []\\n            myJson.forEach(e=\u003e{\\n                if(!stageIds.includes(e[\\\"梯次代碼\\\"])){\\n                    stageIds.push(e[\\\"梯次代碼\\\"])\\n                }\\n            });\\n            stageIds = stageIds.map(stageId=\u003e{\\n                return {\\\"value\\\":String(stageId),\\\"text\\\":String(stageId)}\\n            })\\n            this.stageIdOptions = [...stageIds];\\n            $('#content1').removeClass(\\\"d-none\\\")\\n            $('#content2').removeClass(\\\"d-none\\\")\\n            $('#content0').addClass(\\\"d-none\\\")\\n            $(\\\"#content0\\\").loading(\\\"stop\\\") // 停止\\n        });\\n    }\\n})\\n\\napp.mount('#app');\"}","created_at":"2022-04-27T16:21:08.412+08:00","updated_at":"2023-04-06T12:15:47.593+08:00","name":"麥塊教育版帳號與密碼查詢網站","language":"web","screenshot":{"url":"https://cdn7.koding.school/uploads/project/screenshot/372198/71364d19c9d2515f3081b95d3d30ad3c.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":161,"hashid":"npms324m8","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}