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

{"id":65412,"student_id":283,"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\\n+ (你好|嗨)\\n- 嗨!\\n \\n+ 我是*\\n- 你好\u003cstar1\u003e,  很高興認識你\\n\\n+ *(喜歡|討厭)*\\n- 原來\u003cstar1\u003e\u003cstar2\u003e\u003cstar3\u003e啊?!\\n\\n+ 你是*\\n- 我是誰關你屁事,管好你自己就好!\\n\\n+ 你的興趣是什麼\\n- 寫程式, 那你咧?\\n\\n+*\\n% 寫程式, 那你咧?\\n- 原來你喜歡\u003cstar1\u003e啊!\\n\\n+ 我的名字叫*\\n- \u003cset name=\u003cstar1\u003e\u003e\u003cstar1\u003e你好\\n\\n+ 你知道我是誰嗎\\n* \u003cget name\u003e == undefined=\u003e我不知道耶\\n* \u003cget name\u003e != undefined=\u003e我記得啊你叫\u003cget name\u003e\\n\\n+ 我的bmi是#喔\\n* \u003cstar1\u003e \u003c 18.5=\u003e皮包骨\\n* \u003cstar1\u003e \u003e 24=\u003e死胖子\\n- 很健康\\n\\n+ 我的生日是#月#號\\n- 原來你生日是\u003cset m=\u003cstar1\u003e\u003e\u003cstar1\u003e月\u003cset d=\u003cstar2\u003e\u003e\u003cstar2\u003e號\\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// 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":"2019-05-04T10:27:27.822+08:00","updated_at":"2019-10-27T15:04:26.896+08:00","name":"A.L.I.C.E 副本","language":"web","screenshot":{"url":"https://cdn8.koding.school/uploads/project/screenshot/65412/bd81cd07aa49392c2b65c025683172fb.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":124,"hashid":"wdks943y","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}