A.L.I.C.E 副本 | 程式專案 | 橘蘋學習平台

{"id":123339,"student_id":37,"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    \u003cscript src=\\\"https://code.jquery.com/jquery-3.4.0.min.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv class=\\\"chatbox\\\"\u003e\\n        \u003ch5 class=\\\"text-center\\\"\u003e艾莉斯\u003c/h5\u003e\\n        \u003cdiv class=\\\"comments js-comment\\\"\u003e\\n        \u003c/div\u003e\\n        \u003cinput class=\\\"form-control js-input\\\" placeholder=\\\"說些什麼...\\\"\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\":\"var code = `\\n+你長得好\\n-美?\\n-醜?\\n\\n+hi\\n-hi\\n\\n+我是*\\n-\u003cset name=\u003cstar1\u003e\u003e \u003cstar1\u003ehi\\n+我誰\\n-你\u003cget name\u003e\\n\\n+*(喜歡|討厭|暗戀)*\\n-喔~原來\u003cstar1\u003e\u003cstar2\u003e\u003cstar3\u003e喔~\\n\\n+你喜歡幹嘛\\n-耍廢，你呢\\n+*\\n%耍廢，你呢\\n-喔~你喜歡\u003cstar1\u003e\\n\\n+我誰\\n*\u003cget name\u003e == undefined =\u003e 挖阿災\\n*\u003cget name\u003e != undefined =\u003e 你是\u003cget name\u003e\\n\\n+我考#\\n*\u003cstar1\u003e \u003e 80 =\u003e 很高耶\\n*\u003cstar1\u003e \u003c 60 =\u003e 優質\\n-可以啊\\n\\n+ *(牡羊|金牛|雙子|巨蟹|獅子|處女|天秤|天蠍|射手|摩羯|水平|雙魚)*\\n* \u003cstar2\u003e == 牡羊 =\u003e 有高度容忍性的牡羊座\\n* \u003cstar2\u003e == 金牛 =\u003e 個性溫和又堅實的金牛座\\n* \u003cstar2\u003e == 雙子 =\u003e 個性敏銳又快捷的雙子座\\n* \u003cstar2\u003e == 巨蟹 =\u003e 感情豐富，對事物的感受性強的巨蟹座\\n* \u003cstar2\u003e == 獅子 =\u003e 為人正直，頗具威嚴的獅子座\\n* \u003cstar2\u003e == 處女 =\u003e 為人勤勉，一絲不苟的處女座\\n* \u003cstar2\u003e == 天秤 =\u003e 個性穩健而理智的天秤座\\n* \u003cstar2\u003e == 天蠍 =\u003e 個性強烈衝動的天蠍座\\n* \u003cstar2\u003e == 射手 =\u003e 個性率直而開朗的射手座\\n* \u003cstar2\u003e == 摩羯 =\u003e 充滿智慧，思緒周密的魔羯座\\n* \u003cstar2\u003e == 水平 =\u003e 個性獨立而執著的水瓶座\\n* \u003cstar2\u003e == 雙魚 =\u003e 才華洋溢，喜歡幻想的雙魚座\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n`;\\n\\n// https://github.com/aichaos/rivescript-js\\nvar rs = new RiveScript({utf8: true});\\nrs.stream(code, console.log);\\nrs.sortReplies();\\nfunction talk (text) {\\n    rs.reply('web-user', text).then(function (re) {\\n        addComment(re, 'left');\\n    });\\n};\"}","created_at":"2020-02-02T10:03:43.063+08:00","updated_at":"2020-02-02T11:49:15.682+08:00","name":"A.L.I.C.E 副本","language":"web","screenshot":{"url":"https://cdn8.koding.school/uploads/project/screenshot/123339/542b7ee5bb7dc187351182b762cfa032.jpg"},"parent_id":63808,"plugin":"$('body').append('\u003cimg src=\"spin.svg\" style=\"display: none;\"/\u003e'); // cache\nvar input = $('.js-input');\nvar comment = $('.js-comment');\n\n$(input).on('keydown', function (e) {\n    if (e.keyCode === 13) {\n        input.attr('disabled', true);\n        var q = input.val();\n        addComment(q, 'right');\n        var el = addComment('\u003cimg src=\"spin.svg\"/\u003e', 'left');\n        setTimeout(function () {\n            el.remove();\n            //addComment(talk(q), 'left');\n            talk(q)\n            \n        }, 500 + Math.random()*1000);\n        input.value = '';\n        input.val('');\n    }\n});\n\nfunction addComment (text, who) {\n    var html = `\u003cp class=\"comment comment-${who}\"\u003e\u003cspan\u003e${text}\u003c/span\u003e\u003c/p\u003e`;\n    var el = $(html);\n    comment.append(el);\n    comment[0].scrollTop = comment[0].scrollHeight;\n    input.attr('disabled', false);\n    input[0].focus();\n    return el;\n}","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":46,"hashid":"vngsd9q9","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}