10.ALICE 副本 | 程式專案 | 橘蘋學習平台

{"id":196861,"student_id":1940,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n    \u003ctitle\u003eDocument\u003c/title\u003e\\n    \u003clink rel=\\\"stylesheet\\\" href=\\\"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css\\\"\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv class=\\\"chatbox\\\"\u003e\\n        \u003ch5 class=\\\"text-center\\\"\u003eChatBot\u003c/h5\u003e\\n        \u003cdiv class=\\\"comments js-comment\\\"\u003e\\n        \u003c/div\u003e\\n        \u003cinput class=\\\"form-control js-input\\\" placeholder=\\\"說些什麼...\\\" value=\\\"你好\\\"\u003e\\n    \u003c/div\u003e\\n    \u003cscript src=\\\"https://unpkg.com/rivescript@latest/dist/rivescript.min.js\\\" type=\\\"application/javascript\\\" charset=\\\"utf-8\\\"\u003e\u003c/script\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body {\\n    width: 100vw;\\n    height: 100vh;\\n    padding: 10px;\\n}\\n\\nh5 {\\n    position: absolute;\\n    top: 0;\\n    width: 100%;\\n    border-bottom: 2px solid #ddd;\\n    padding-bottom: 10px;\\n    color: #666;\\n    background-color: #fff;\\n    z-index: 1;\\n}\\n\\n.chatbox {\\n    max-width: 550px;\\n    height: calc(100vh - 20px);\\n    margin: auto;\\n    position: relative;\\n    \\n}\\n\\n.chatbox input {\\n    position: absolute;\\n    bottom: 0;\\n}\\n\\n.comments {\\n    position: absolute;\\n    top: 0;\\n    left: 0;\\n    width: 100%;\\n    height: 100%;\\n    padding: 50px 10px;\\n    overflow-y: scroll;\\n}\\n\\n.comment span {\\n    display: inline-block;\\n    max-width: 75%;\\n    padding: 8px;\\n    border-radius: 20px;\\n    font-size: .9rem;\\n}\\n\\n.comment.comment-right {\\n    text-align: right;\\n}\\n\\n.comment.comment-right span {\\n    color: #fff;\\n    background-color: rgb(59, 114, 241);\\n}\\n\\n.comment.comment-left span {\\n    color: #555;\\n    background-color: rgb(210, 210, 210);\\n}\",\"js\":\"\\n// var code = \\n// `\\n// + *(牡羊|金牛|雙子|巨蟹|獅子|處女|天秤|天蠍|射手|摩羯|水平|雙魚)*\\n// * \u003cstar2\u003e == 牡羊 =\u003e 牡羊座樂觀、誠實、好動、只對自己想知道自己的 blablabla...\\n// * \u003cstar2\u003e == 金牛 =\u003e 金牛座懂得理財創造財富、誠實有耐性、幽默、慢 blablabla...\\n// * \u003cstar2\u003e == 雙子 =\u003e 雙子座博愛、擅長交際、反應靈敏、具多變的性格 blablabla...\\n// * \u003cstar2\u003e == 巨蟹 =\u003e 巨蟹座善理財、具母性、喜歡照顧別人、有責任感 blablabla...\\n// * \u003cstar2\u003e == 獅子 =\u003e 獅子座善於解決他人之事、具王者風範、幽默、心 blablabla...\\n// * \u003cstar2\u003e == 處女 =\u003e 處女座完美主義者，細心、體貼、熱心服務、任勞 blablabla...\\n// * \u003cstar2\u003e == 天秤 =\u003e 天秤座追求公正且厭惡不公平、興趣廣泛、很浪漫 blablabla...\\n// * \u003cstar2\u003e == 天蠍 =\u003e 天蠍座為人熱情、真誠忠心、冷靜、神秘、愛恨分 blablabla...\\n// * \u003cstar2\u003e == 射手 =\u003e 射手座不會記恨且熱情開朗、樂觀、誠實、具領導 blablabla...\\n// * \u003cstar2\u003e == 摩羯 =\u003e 摩羯座按步就班、誠實、忠實可靠、耐力強、善理 blablabla...\\n// * \u003cstar2\u003e == 水平 =\u003e 水平座口才好人緣佳、睿智、好奇心強、博愛、果 blablabla...\\n// * \u003cstar2\u003e == 雙魚 =\u003e 雙魚座擁有不錯的創造力，善良、柔弱惹人憐愛、 blablabla...\\n\\n// + *\\n// - 你是什麼星座呀？\\n// `\\n\\n\\n\\n// var code = \\n// `\\n// + 我的體重#公斤\\n// - \u003cset weight=\u003cstar1\u003e\u003e了解\u003cget weight\u003e是吧\\n\\n// + 我的身高#公分\\n// - \u003cset height=\u003cstar1\u003e\u003e了解\u003cget height\u003e是吧\\n\\n// + 請問我的 bmi 是多少？\\n// * \u003cget weight\u003e == undefined =\u003e 請問你的體重是？\\n// * \u003cget height\u003e == undefined =\u003e 請問你的身高是？\\n// - \u003cset bmi=\u003cget weight\u003e\u003e\u003cmult bmi=10000\u003e\u003cdiv bmi=\u003cget height\u003e\u003e\u003cdiv bmi=\u003cget height\u003e\u003e\\n// ^ 您的 bmi 是\u003cget bmi\u003e\\n\\n// + *\\n// - 聽不太懂你的意思\\n// `\\n\\n\\n var code =\\n `\\n + 我要點餐\\n - \u003cset a=0\u003e\u003cset b=0\u003e\u003cset c=0\u003e\\n ^ 好的，我們有賣可樂(10$)、薯條(20$)、漢堡(30$)，您需要點什麼？\\n\\n + 我要#個*\\n * \u003cstar2\u003e == 可樂 =\u003e 好的，還需要加點什麼？\u003cset a=\u003cstar1\u003e\u003e\\n * \u003cstar2\u003e == 薯條 =\u003e 好的，還需要加點什麼？\u003cset b=\u003cstar1\u003e\u003e\\n * \u003cstar2\u003e == 漢堡 =\u003e 好的，還需要加點什麼？\u003cset c=\u003cstar1\u003e\u003e\\n\\n + (加|再加)#(個|瓶|包|份)*\\n * \u003cstar3\u003e == 可樂 =\u003e 好的，還需要加點什麼？\u003cadd a=\u003cstar1\u003e\u003e\\n * \u003cstar3\u003e == 薯條 =\u003e 好的，還需要加點什麼？\u003cadd b=\u003cstar1\u003e\u003e\\n * \u003cstar3\u003e == 漢堡 =\u003e 好的，還需要加點什麼？\u003cadd c=\u003cstar1\u003e\u003e\\n\\n + *多少\\n - \u003cset sum=0\u003e\\n ^ \u003cset tmp=10\u003e\u003cmult tmp=\u003cget a\u003e\u003e\u003cadd sum=\u003cget tmp\u003e\u003e\\n ^ \u003cset tmp=20\u003e\u003cmult tmp=\u003cget b\u003e\u003e\u003cadd sum=\u003cget tmp\u003e\u003e\\n ^ \u003cset tmp=30\u003e\u003cmult tmp=\u003cget c\u003e\u003e\u003cadd sum=\u003cget tmp\u003e\u003e\\n ^ \u003cget a\u003e杯可樂、\u003cget b\u003e份薯條、\u003cget c\u003e個漢堡，總計 \u003cget sum\u003e 元\\n\\n + (要|不)*\\n % *還需要加點什麼？\\n * \u003cstar2\u003e == 不 =\u003e 這裡跟您確認，總計{@ 這樣多少？}元，確定送出？\\n * \u003cstar2\u003e == 要 =\u003e 好的，還需要加點什麼？\\n\\n + (確定|送餐)\\n % 這裡跟您確認*，確定送出？\\n - 好的，馬上為您出餐\\n\\n + *取消*\\n - 幫您取消訂餐 \u003cset a=0\u003e\u003cset b=0\u003e\u003cset c=0\u003e\\n\\n + *\\n - 不好意思，聽不太懂您的意思\\n `\\n\\n\\nvar rs = new RiveScript({utf8: true});\\nrs.stream(code, function(error) {\\n    alert(error);\\n});\\n\\nrs.sortReplies();\\n\\nfunction talk (text) {\\n    rs.reply(\\\"web-user\\\", text).then(function (re) {\\n        addComment(re, 'left');\\n    });\\n};\\n\\n\\n\"}","created_at":"2020-10-18T13:55:31.036+08:00","updated_at":"2021-03-14T15:23:44.026+08:00","name":"10.ALICE 副本","language":"web","screenshot":{"url":"https://cdn1.koding.school/uploads/project/screenshot/196861/4c6e2aace578262ebe43b16fb871673b.jpg"},"parent_id":128976,"plugin":"var input = document.querySelector('.js-input');\nvar comment = document.querySelector('.js-comment');\n\ninput.addEventListener('keydown', function (e) {\n    if (e.keyCode === 13) {\n        input.setAttribute('disabled', true);\n        var q = input.value;\n        addComment(q, 'right');\n        setTimeout(function () {\n            // addComment(talk(q), 'left');\n            talk(q);\n            input.removeAttribute('disabled');\n            input.focus();\n        }, 300 + Math.random()*1000);\n        input.value = '';\n    }\n});\n\nfunction addComment (text, who) {\n    var html = '\u003cp class=\"comment comment-{float}\"\u003e\u003cspan\u003e{text}\u003c/span\u003e\u003c/p\u003e';\n    comment.innerHTML += html.replace('{float}', who).replace('{text}', text);\n    comment.scrollTop = comment.scrollHeight;\n}","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":80,"hashid":"d5msvwq2g","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}