信件產生器 | Programming Project | OrangeApple Learning Platform

{"id":448390,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\\n\u003chead\u003e\\n    \u003cmeta http-equiv=\\\"content-type\\\" content=\\\"text/html; charset=utf-8\\\" /\u003e\\n    \u003clink href=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css\\\" rel=\\\"stylesheet\\\"\\n    integrity=\\\"sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi\\\" crossorigin=\\\"anonymous\\\"\u003e\\n\u003c/head\u003e\\n\\n\u003cbody\u003e\\n\\n    \u003c!-- 這裡是預設信件模板 --\u003e\\n    \u003cdiv id=\\\"templates\\\" style=\\\"display: none;\\\"\u003e\\n\\n        \u003c!-- 信件模板A --\u003e\\n        \u003cdiv data-group=\\\"分類1\\\" data-name=\\\"面試邀請（一種主題）\\\"\u003e\\n            \u003ch1\u003e{{name}}\u003c/h1\u003e\\n        \u003c/div\u003e\\n        \u003c!-- 信件模板B --\u003e\\n        \u003cdiv data-group=\\\"分類1\\\" data-name=\\\"面試邀請（兩種主題）\\\"\u003e\\n            \u003ch1\u003e{{name}}\u003c/h1\u003e\\n        \u003c/div\u003e\\n        \u003c!-- 信件模板C --\u003e\\n        \u003cdiv data-group=\\\"分類2\\\" data-name=\\\"面試邀請（三種主題）\\\"\u003e\\n            \u003ch1\u003e{{name}}\u003c/h1\u003e\\n        \u003c/div\u003e\\n        \u003c!-- 信件模板D --\u003e\\n        \u003cdiv data-group=\\\"分類2\\\" data-name=\\\"面試邀請（四種主題）\\\"\u003e\\n            \u003cdiv style=\\\"padding: 32px 32px 10px 32px; background-color:#f59e17;font-family: monospace;\\\"\u003e\\n                \u003cdiv style=\\\"text-align:center;padding-bottom: 0px;\\\"\u003e\\n                    \u003cimg src=\\\"https://orangeapple.co/brand_folded_white.png\\\"\\n                    width=\\\"160px\\\"\u003e\\n                \u003c/div\u003e\\n                \u003cp style=\\\"color:#fff;text-align: right;padding-bottom: 5px;\\\"\u003e\\n                    ＊切換至淺色模式，獲得最好的閱讀體驗\\n                \u003c/p\u003e\\n                \u003cdiv style=\\\"padding: 15px; background-color:white; border-radius:8px;\\\"\u003e\\n                    \u003ch1 style=\\\"font-size:2.8em; text-align:center; color:#ff5859;border-bottom: 1px solid #777;margin-top: 0;\\\"\u003e\\n                        {{區域}}兒童程式助教面試邀請\u003cbr\u003e\\n                        \u003cspan\u003e{{教室}}\u003c/span\u003e\u003c/h1\u003e\\n                    \u003cp\u003e\\n                        哈囉，你好： \u003cbr\u003e\\n                        \u003cblockquote\u003e\\n                            我是橘子蘋果的教學組長{{教學組長}}，很高興收到你的履歷，\u003cbr\u003e\\n                            {{原因 | 因疫情緣故，故本公司將採取線上視訊面試。| 現場面試進行前， }}\u003cbr\u003e請先閱讀以下的資訊後回覆：\u003cbr\u003e\\n                        \u003c/blockquote\u003e\\n                        \u003cspan\\n                            style=\\\"font-weight:bold;color:red\\\"\u003e一、線上面試時間如下：\u003c/span\u003e\\n                    \u003c/p\u003e\\n                    \u003cul\u003e\\n                        \u003cli style=\\\"padding:0.2rem 0px;\\\"\u003e{{面試時段一}}\u003c/li\u003e\\n                        \u003cli style=\\\"padding:0.2rem 0px;\\\"\u003e{{面試時段二}}\u003c/li\u003e\\n                        \u003cli style=\\\"padding:0.2rem 0px;\\\"\u003e{{面試時段三}}\u003c/li\u003e\\n                    \u003c/ul\u003e\\n                    \u003cp\u003e\\n                        \u003cblockquote\u003e\\n                            請擇一日期時段回覆，若以上時段不行，再請您來信告知。\\n                        \u003c/blockquote\u003e\\n                    \u003c/p\u003e\\n                    \u003cp\u003e\\n                        \u003cspan style=\\\"font-weight:bold;color:red\\\"\u003e二、線上面試進行方式：\u003c/span\u003e\u003cbr\u003e\\n                        \u003cblockquote\u003e\\n                            採用\u003cspan style=\\\"font-weight:bold;color:orangered\\\"\u003eGoogle Meet\u003c/span\u003e線上會議方式進行，回覆可配合時間後，會給您會議連結。\\n                        \u003c/blockquote\u003e\\n                    \u003c/p\u003e\\n                    \u003cp\u003e\\n                        \u003cspan style=\\\"font-weight:bold;color:red\\\"\u003e三、試教準備事項：\u003c/span\u003e\u003cbr\u003e\\n                        \u003cblockquote\u003e\\n                            試教主題二擇一，面試時會請你針對所選的主題內容試教，課程長度\u003cspan style=\\\"font-weight:bold;color:orangered\\\"\u003e約15分鐘\u003c/span\u003e。 \u003cbr\u003e\\n                            試教設計請留意下列情形：\u003cul\u003e\\n                                \u003cli\u003e學生背景：年紀為 小一 至 小六，一班約有 12\\n                                    位學生。（學生的程度可自行訂定）\u003c/li\u003e\u003cbr\u003e\\n                                \u003cli\u003e試教時你會詢問學生的問題，至少準備3個問題。（問答內容不要偏離教學主題即可）\u003c/li\u003e\\n                            \u003c/ul\u003e\\n                        \u003c/blockquote\u003e\\n                    \u003c/p\u003e\\n                    \u003cp\u003e\\n                        \u003cblockquote\u003e\\n                            \u003cspan style=\\\"font-weight:bold;color:blue\\\"\u003e主題一：\u003c/span\u003e\u003cbr\u003e\\n                            \u003cblockquote\u003e\\n                                請用 Scratch\\n                                實作出一個想要教的專案（可以是個小遊戲或是動畫等）\u003cbr\u003e\\n                                教學概念可包含下列重點(至少一項，不用全教)：\u003cul style=\\\"margin: 0.2rem;\\\"\u003e\\n                                    \u003cli\u003e\u003cspan style=\\\"font-weight:bold;color:orangered\\\"\u003eSequence（序列）\u003c/span\u003e\u003c/li\u003e\\n                                    \u003cli\u003e\u003cspan style=\\\"font-weight:bold;color:orangered\\\"\u003eConditions（條件）\u003c/span\u003e\u003c/li\u003e\\n                                    \u003cli\u003e\u003cspan style=\\\"font-weight:bold;color:orangered\\\"\u003eLoop（迴圈）\u003c/span\u003e\u003c/li\u003e\\n                                    \u003cli\u003e\u003cspan style=\\\"font-weight:bold;color:orangered\\\"\u003eVariable（變數）\u003c/span\u003e\u003c/li\u003e\\n                                \u003c/ul\u003e\\n                                建議在試教中加入互動問答或複習的問答。\u003cbr\u003e\\n                                請注意試教時避免單純展示專案，以程式概念的教學為目標，透過依序製作、講解專案，帶領學生製作也能練習程式概念。\\n                            \u003c/blockquote\u003e\\n                        \u003c/blockquote\u003e\\n                    \u003c/p\u003e\\n                    \u003cp\u003e\\n                        \u003cblockquote\u003e\\n                            \u003cspan style=\\\"font-weight:bold;color:blue\\\"\u003e主題二：\u003c/span\u003e\u003cbr\u003e\\n                            \u003cblockquote\u003e\\n                                主題內容教學主題可參考以下項目：\u003cul style=\\\"margin: 0.2rem;\\\"\u003e\\n                                    \u003cli\u003e\u003cspan style=\\\"font-weight:bold;color:orangered\\\"\u003e電腦資訊科學\u003c/span\u003e\u003cbr\u003e（如：人工智慧、密碼學、誰是圖靈？）\u003c/li\u003e\\n                                    \u003cli\u003e\u003cspan style=\\\"font-weight:bold;color:orangered\\\"\u003e數理邏輯\u003c/span\u003e\u003cbr\u003e（如：何為四捨五入？、什麼是圓周率？）\u003c/li\u003e\\n                                    \u003cli\u003e\u003cspan style=\\\"font-weight:bold;color:orangered\\\"\u003e時事議題\u003c/span\u003e\u003cbr\u003e（如：如何判斷假新聞？）\u003c/li\u003e\\n                                    \u003cli\u003e\u003cspan style=\\\"font-weight:bold;color:orangered\\\"\u003e其他\u003c/span\u003e\u003cbr\u003e（不限主題，有知識點的主題皆可）\u003c/li\u003e\\n                                \u003c/ul\u003e\\n                                \u003cp style=\\\"font-weight:bold;color:orangered\\\"\u003e\\n                                    請注意是教學，而非Demo專案或導讀主題喔。\\n                                \u003c/p\u003e\\n                            \u003c/blockquote\u003e\\n                        \u003c/blockquote\u003e\\n                    \u003c/p\u003e\\n                    \u003cp\u003e\\n                        Thanks,\u003cbr\u003e{{教學組長}}\\n                    \u003c/p\u003e\\n                \u003c/div\u003e\\n                \u003cp style=\\\"color:#fff;text-align: center;\\\"\u003e\\n                    \u003cspan style=\\\"font-size:2rem;\\\"\u003e橘子蘋果兒童程式學苑\u003c/span\u003e\u003cbr\u003e\\n                    \u003cspan\u003e聯絡電話\u003c/span\u003e\u003ca href=\\\"tel:0277098027\\\" style=\\\"color:#fff;\\\"\u003e\u003cu\u003e(02)7709-8027\u003c/u\u003e\u003c/a\u003e\\n                    \u003cspan\u003e \u003c/span\u003e\u003ca style=\\\"color:#fff;\\\" href=\\\"https://www.facebook.com/OrangeApplePad/\\\"\u003e\u003cu\u003eFacebook 粉絲團\u003c/u\u003e\u003c/a\u003e\\n                    \u003cspan\u003e \u003c/span\u003e\u003ca style=\\\"color:#fff;\\\" href=\\\"https://orangeapple.co\\\"\u003e\u003cu\u003e官方網站\u003c/u\u003e\u003c/a\u003e\\n                \u003c/p\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n\\n\\n\\n    \u003c!-- 這裡是產生器主程式 --\u003e\\n    \u003cdiv id=\\\"app\\\" class=\\\"p-3\\\"\u003e\\n        \u003cul class=\\\"nav nav-tabs mb-3\\\"\u003e\\n            \u003cli v-for=\\\"tab in groupTabs\\\" class=\\\"nav-item\\\" @click=\\\"groupFilter = tab\\\"\u003e\\n                \u003ca class=\\\"nav-link\\\" :class=\\\"{ active: groupFilter === tab }\\\" href=\\\"#\\\"\u003e{{ tab }}\u003c/a\u003e\\n            \u003c/li\u003e\\n        \u003c/ul\u003e\\n        \u003cul class=\\\"nav nav-tabs mb-3\\\"\u003e\\n            \u003cli v-for=\\\"tab in nameTabs\\\" class=\\\"nav-item\\\" @click=\\\"nameFilter = tab\\\"\u003e\\n                \u003ca class=\\\"nav-link\\\" :class=\\\"{ active: nameFilter === tab }\\\" href=\\\"#\\\"\u003e{{ tab }}\u003c/a\u003e\\n            \u003c/li\u003e\\n        \u003c/ul\u003e\\n        \u003cdiv class=\\\"row g-3 mb-3\\\"\u003e\\n            \u003cdiv class=\\\"col-4\\\"\u003e\\n                \u003cdiv class=\\\"border p-2 rounded\\\"\u003e\\n                    \u003cdiv class=\\\"input-group mb-2\\\" v-for=\\\"field in fields\\\"\u003e\\n                        \u003cspan class=\\\"input-group-text\\\" style=\\\"width: 130px;\\\"\u003e{{ field.label }}\u003c/span\u003e\\n                        \u003cinput class=\\\"form-control\\\" v-if=\\\"field.type === 'text'\\\" v-model=\\\"data[field.key]\\\" /\u003e\\n                        \u003cselect class=\\\"form-control\\\" v-if=\\\"field.type === 'select'\\\" v-model=\\\"data[field.key]\\\"\u003e\\n                            \u003coption v-for=\\\"opt in field.options\\\"\u003e{{ opt }}\u003c/option\u003e\\n                        \u003c/select\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"col-8\\\"\u003e\\n                \u003cdiv class=\\\"border p-2 rounded\\\"\u003e\\n                    \u003ciframe :srcdoc=\\\"review\\\" width=\\\"100%\\\" style=\\\"height: 65vh;\\\"\u003e\u003c/iframe\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"border p-2 rounded mb-3 d-flex justify-content-end\\\"\u003e\\n            \u003cbutton class=\\\"ms-2 btn btn-warning\\\" @click=\\\"copy\\\"\u003e複製 HTML\u003c/button\u003e\\n            \u003cbutton class=\\\"ms-2 btn btn-secondary\\\" @click=\\\"showTool = !showTool\\\"\u003e{{showTool ? '關閉模板編輯' : '編輯模板'}}\u003c/button\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"mb-3\\\"\u003e\\n            \u003ctextarea class=\\\"form-control\\\" rows=\\\"20\\\" v-if=\\\"showTool\\\" v-model=\\\"templates[index]\\\"\\n                style=\\\"font-family: monospace;\\\"\u003e\u003c/textarea\u003e\\n        \u003c/div\u003e\\n        \u003cdiv\u003e\\n            \u003cpre class=\\\"alert alert-warning\\\" style=\\\"text-align: left;\\\"\u003e{{ review }}\u003c/pre\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n\\n    \u003cscript src=\\\"https://unpkg.com/vue@3/dist/vue.global.js\\\"\u003e\u003c/script\u003e\\n\u003c/body\u003e\\n\\n\u003c/html\u003e\",\"css\":\"\",\"js\":\"Vue.createApp({\\n    data() {\\n        const templates = [...document.querySelectorAll('#templates \u003e div')].map(el =\u003e {\\n            return {\\n                innerHTML: el.innerHTML, name: el.dataset.name, group: el.dataset.group\\n            }\\n        })\\n        return {\\n            templates,\\n            groupFilter: templates[0]?.group,\\n            nameFilter: templates[0]?.name,\\n            data: {},\\n            showTool: false,\\n        }\\n    },\\n    methods: {\\n        copy() {\\n            navigator.clipboard.writeText(this.review).then(() =\u003e alert('複製成功！'), () =\u003e alert('複製失敗'))\\n        },\\n    },\\n    computed: {\\n        groupTabs() {\\n            return new Set(this.templates.map(item =\u003e item.group))\\n        },\\n        nameTabs() {\\n            return this.templates.filter(item =\u003e item.group === this.groupFilter).map(item =\u003e item.name)\\n        },\\n        template() {\\n            return this.templates.find(t =\u003e t.group === this.groupFilter \u0026\u0026 t.name === this.nameFilter)?.innerHTML || ''\\n\\n        },\\n        fields() {\\n            const regexp = /\\\\{\\\\{.*\\\\}\\\\}/g\\n            const fields = [...this.template.matchAll(regexp)].map(item =\u003e item[0].slice(2, -2))\\n            return fields.map(key =\u003e {\\n                const options = key.split('|').map(opt =\u003e opt.trim())\\n                const isSelect = options.length \u003e 1\\n                return {\\n                    label: isSelect ? options[0]: key, type: isSelect ? 'select': 'text', options, key\\n                }\\n            })\\n        },\\n        review() {\\n            let htmlString = this.template\\n            this.fields.forEach(field =\u003e {\\n                htmlString = htmlString.replaceAll(`{{${field.key}}}`, this.data[field.key] || `{{${field.key}}}`)\\n            })\\n            return htmlString\\n        },\\n    },\\n\\n}).mount('#app')\"}","created_at":"2022-10-15T15:38:14.967+08:00","updated_at":"2022-10-15T21:54:16.795+08:00","name":"信件產生器","language":"web","screenshot":{"url":null},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":304,"hashid":"zpesrqkv9","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}