線上問卷 - 完整版 | 程式專案

{"id":119301,"student_id":2589,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\\t\u003ctitle\u003eDocument\u003c/title\u003e\\n\\t\u003cscript src=\\\"https://code.jquery.com/jquery-3.4.1.min.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003c!-- 切換前台/後台的按鈕 --\u003e\\n    \u003cbutton id=\\\"toggleButton\\\"\u003e後台/前台\u003c/button\u003e\\n    \\n    \u003c!--==================== 前台頁面 ====================--\u003e\\n    \u003cdiv id=\\\"frontend\\\"\u003e\\n        \u003c!-- 圖片 --\u003e\\n        \u003cimg id=\\\"banner\\\" src=\\\"banner.jpg\\\"/\u003e\\n        \\n        \u003c!-- 問卷表單 --\u003e\\n        \u003cdiv id=\\\"form\\\"\u003e\\n            \u003ch1 id=\\\"\\\"\u003e用餐滿意度調查\u003c/h1\u003e\\n            \u003cp\u003e填寫本問卷即可以獲得抽獎機會，頭獎為頂級豪華郵輪雙人行！\u003c/p\u003e\\n            \\n            \u003ch3\u003e用餐服務*\u003c/h3\u003e\\n            \u003cselect id=\\\"service\\\"\u003e\\n                \u003coption value=\\\"5\\\"\u003e非常滿意 (5分)\u003c/option\u003e\\n                \u003coption value=\\\"4\\\"\u003e滿意 (4分)\u003c/option\u003e\\n                \u003coption value=\\\"3\\\"\u003e普通 (3分)\u003c/option\u003e\\n                \u003coption value=\\\"2\\\"\u003e不滿意 (2分)\u003c/option\u003e\\n                \u003coption value=\\\"1\\\"\u003e非常不滿意 (1分)\u003c/option\u003e\\n            \u003c/select\u003e\\n            \\n            \u003ch3\u003e食物美味*\u003c/h3\u003e\\n            \u003cselect id=\\\"meal\\\"\u003e\\n                \u003coption value=\\\"5\\\"\u003e非常滿意 (5分)\u003c/option\u003e\\n                \u003coption value=\\\"4\\\"\u003e滿意 (4分)\u003c/option\u003e\\n                \u003coption value=\\\"3\\\"\u003e普通 (3分)\u003c/option\u003e\\n                \u003coption value=\\\"2\\\"\u003e不滿意 (2分)\u003c/option\u003e\\n                \u003coption value=\\\"1\\\"\u003e非常不滿意 (1分)\u003c/option\u003e\\n            \u003c/select\u003e\\n            \\n            \u003ch3\u003e餐點價格*\u003c/h3\u003e\\n            \u003cselect id=\\\"value\\\"\u003e\\n                \u003coption value=\\\"5\\\"\u003e非常滿意 (5分)\u003c/option\u003e\\n                \u003coption value=\\\"4\\\"\u003e滿意 (4分)\u003c/option\u003e\\n                \u003coption value=\\\"3\\\"\u003e普通 (3分)\u003c/option\u003e\\n                \u003coption value=\\\"2\\\"\u003e不滿意 (2分)\u003c/option\u003e\\n                \u003coption value=\\\"1\\\"\u003e非常不滿意 (1分)\u003c/option\u003e\\n            \u003c/select\u003e\\n            \\n            \u003ch3\u003e您是如何得知本店*\u003c/h3\u003e\\n            \u003cselect id=\\\"source\\\"\u003e\\n                \u003coption value=\\\"親友介紹\\\"\u003e親友介紹\u003c/option\u003e\\n                \u003coption value=\\\"網路資訊\\\"\u003e網路資訊\u003c/option\u003e\\n                \u003coption value=\\\"廣告傳單\\\"\u003e廣告傳單\u003c/option\u003e\\n                \u003coption value=\\\"其他\\\"\u003e其他\u003c/option\u003e\\n            \u003c/select\u003e\\n            \\n            \u003ch3\u003e建議\u003c/h3\u003e\\n            \u003ctextarea id=\\\"suggestion\\\" rows=\\\"8\\\" cols=\\\"40\\\"\u003e\u003c/textarea\u003e\\n            \\n            \u003ch3\u003e信箱*\u003c/h3\u003e\\n            \u003cinput id=\\\"email\\\"/\u003e\\n            \\n            \u003ch3\u003e是否願意收到最新活動與優惠資訊*\u003c/h3\u003e\\n            \u003cinput id=\\\"subscribe\\\" type=\\\"checkbox\\\"/\u003e願意\\n            \\n            \u003cbutton id=\\\"submit\\\"\u003e送出表單\u003c/button\u003e\\n        \u003c/div\u003e\\n        \\n        \u003c!-- 成功訊息 --\u003e\\n        \u003cdiv id=\\\"success\\\"\u003e\\n            \u003ch3\u003e送出成功\u003c/h3\u003e\\n            \u003cp\u003e敢寫您的填寫，期待您再次光臨！\u003c/p\u003e\\n            \u003cp\u003e系統將會自動抽出獎品並寄出中獎通知信\u003c/p\u003e\\n            \u003cbutton id=\\\"backToForm\\\"\u003e再次填寫\u003c/button\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n    \\n    \u003c!--==================== 後台頁面 ====================--\u003e\\n    \u003cdiv id=\\\"backend\\\"\u003e\\n        \\n        \u003cdiv id=\\\"info\\\"\u003e\\n            填寫人數：\u003cspan id=\\\"total\\\"\u003e?\u003c/span\u003e 人\\n            \u003cbr/\u003e\\n            平均服務評價：\u003cspan id=\\\"serviceAvg\\\"\u003e?\u003c/span\u003e分\\n            \u003cbr/\u003e\\n            平均食物評價：\u003cspan id=\\\"mealAvg\\\"\u003e?\u003c/span\u003e分\\n            \u003cbr/\u003e\\n            平均價格評價：\u003cspan id=\\\"valueAvg\\\"\u003e?\u003c/span\u003e分\\n        \u003c/div\u003e\\n        \\n        \u003ctable\u003e\\n            \u003cthead\u003e\\n                \u003ctr\u003e\\n                   \u003cth\u003e服務\u003c/th\u003e\\n                   \u003cth\u003e食物\u003c/th\u003e\\n                   \u003cth\u003e價格\u003c/th\u003e\\n                   \u003cth\u003e來源\u003c/th\u003e\\n                   \u003cth\u003e建議\u003c/th\u003e\\n                   \u003cth\u003e信箱\u003c/th\u003e \\n                   \u003cth\u003e訂閱\u003c/th\u003e \\n                \u003c/tr\u003e\\n            \u003c/thead\u003e\\n            \u003ctbody\u003e\\n                \u003ctr\u003e\\n                    \u003ctd\u003e5\u003c/td\u003e\\n                    \u003ctd\u003e5\u003c/td\u003e\\n                    \u003ctd\u003e5\u003c/td\u003e\\n                    \u003ctd\u003e網路資訊\u003c/td\u003e\\n                    \u003ctd\u003eGreat！\u003c/td\u003e\\n                    \u003ctd\u003ehi@gmail.com\u003c/td\u003e\\n                    \u003ctd\u003etrue\u003c/td\u003e\\n                \u003c/tr\u003e\\n            \u003c/tbody\u003e\\n        \u003c/table\u003e\\n    \u003c/div\u003e\\n    \\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"/**\\n * CSS 並非本章教學重點\\n * 減少 HTML 閱讀壓力，不使用 class 來設計樣式\\n * 直接對元素標籤或 id 來撰寫樣式\\n */\\nbody {\\n    padding: 40px;\\n    color: #333;\\n    background-color: #eee;\\n}\\n\\nh1 {\\n    margin-top: 0;\\n}\\n\\nh3 {\\n    margin-top: 25px;\\n    margin-bottom: 5px;\\n}\\n\\ntable, #info, #frontend {\\n    width: 100%;\\n    box-sizing: border-box;\\n    background-color: #fff;\\n    box-shadow: #ccc 0px 2px 2px 0px;\\n}\\n\\n#info, #form, #success {\\n    padding: 20px;\\n    margin-bottom: 20px;\\n}\\n\\n#backend, #success {\\n    display: none;\\n}\\n\\n#banner {\\n    width: 100%;\\n    max-height: 330px;\\n    object-fit: cover;\\n}\\n\\nselect, textarea, #email {\\n    width: 100%;\\n    padding: 5px 0px;\\n    border: 1px solid #dddddd;\\n    border-radius: 5px;\\n    background-color: #f5f5f5;\\n}\\n\\nselect {\\n    height: 40px;\\n}\\n\\n#submit, #backToForm {\\n    display: block;\\n    width: 100px;\\n    padding: 10px;\\n    border: 0;\\n    margin-top: 30px;\\n    color: #fff;\\n    background-color: #ff4545;\\n}\\n\\n#submit {\\n    margin: auto;\\n}\\n\\n/* 前後台切換按鈕 */\\n#toggleButton {\\n    position: fixed;\\n    top: 0px;\\n    right: 0px;\\n}\\n\\n/* 表格樣式 */\\ntable {\\n  border-collapse: collapse;\\n}\\nth, td {\\n  padding: 10px 20px;\\n  border-bottom: 1px solid #ddd;\\n}\\ntr:nth-child(even) {\\n    background-color: #f5f5f5;\\n}\",\"js\":\"\"}","created_at":"2020-01-09T18:25:41.210+08:00","updated_at":"2020-01-09T18:26:23.238+08:00","name":"線上問卷 - 完整版","language":"web","screenshot":{"url":null},"parent_id":3,"plugin":"var feedback = DB.table('feedback');\n$('#submit').click(submit);\n$('#backToForm').click(backToForm);\n\n// 前後台切換\n$('#toggleButton').click(function () {\n    $('#frontend').toggle();\n    $('#backend').toggle();\n    feedback.read({}, updateTable);\n});\n\n// 送出表單\nfunction submit () {\n    \n    $('#form').hide();\n    $('#success').show();\n    \n    var serviceVal = $('#service').val();\n    var mealVal = $('#meal').val();\n    var valueVal = $('#value').val();\n    var sourceVal = $('#source').val();\n    var suggestionVal = $('#suggestion').val();\n    var emailVal = $('#email').val();\n    var subscribeVal = $('#subscribe').prop('checked');\n\n    feedback.create({\n        service: serviceVal,\n        meal: mealVal,\n        value: valueVal,\n        source: sourceVal,\n        suggestion: suggestionVal,\n        email: emailVal,\n        subscribe: subscribeVal,\n    });\n    \n    feedback.read({}, console.log);\n}\n\n// 更新後台面\nfunction updateTable (data) {\n    \n    var serviceAvg = 0;\n    var mealAvg = 0;\n    var valueAvg = 0;\n    var fromFriend = 0;\n    var fromInternet = 0;\n    var fromFlyer = 0;\n    \n    $('tbody').empty();\n    \n    data.forEach(function (d) {\n        var row = `\n            \u003ctr\u003e\n                \u003ctd\u003e${d.service}\u003c/td\u003e\n                \u003ctd\u003e${d.meal}\u003c/td\u003e\n                \u003ctd\u003e${d.value}\u003c/td\u003e\n                \u003ctd\u003e${d.source}\u003c/td\u003e\n                \u003ctd\u003e${d.suggestion}\u003c/td\u003e\n                \u003ctd\u003e${d.email}\u003c/td\u003e\n                \u003ctd\u003e${d.subscribe}\u003c/td\u003e\n            \u003c/tr\u003e\n        `;\n        $('tbody').append(row);\n        \n        serviceAvg += Number(d.service);\n        mealAvg += Number(d.meal);\n        valueAvg += Number(d.value);\n    });\n    \n    $('#total').text(data.length);\n    $('#serviceAvg').text((serviceAvg / data.length).toFixed(2));\n    $('#mealAvg').text((mealAvg / data.length).toFixed(2));\n    $('#valueAvg').text((valueAvg / data.length).toFixed(2));\n}\n\n// 重新填寫表單\nfunction backToForm () {\n    \n    $('#form').show();\n    $('#success').hide();\n    \n    $('#service').val(5);\n    $('#meal').val(5);\n    $('#value').val(5);\n    $('#source').val('');\n    $('#suggestion').val('');\n    $('#email').val('');\n    $('#subscribe').prop('checked', false);\n}\n\nvar now = 'start';\n$('#toggleButton').click(function () {\n   if (now == 'start') {\n       $('#form').hide();\n       $('#success').show();\n   }else {\n       $('#form').show();\n       $('#success').hide();\n   }\n});\n\n\n\n\n\n\n","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":80,"hashid":"kdmsmk4z","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}