【課後延伸 - 專案】創意建築物一 | 程式專案

{"id":313014,"student_id":2589,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n    \u003clink rel=\\\"stylesheet\\\" href=\\\"https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css\\\" /\u003e\\n\\t\u003ctitle\u003e麥塊挑戰題：製作一個有旋轉樓梯的建築物 | 橘蘋學習平台\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv class=\\\"my-slider\\\"\u003e\\n      \u003cdiv\u003e\\n          \u003cdiv class=\\\"box\\\" \u003e\\n              \u003cdiv style=\\\"height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center;\\\"\u003e\\n                  \u003cdiv class=\\\"textBox\\\"\u003e\u003cb class=\\\"blue\\\"\u003e挑戰目標：\u003c/b\u003e\\n創意製作建築物，無論是大賣場或是百貨公司都可以！\\n\\n\u003cb class=\\\"blue\\\"\u003e挑戰要求：\u003c/b\u003e\\n這個建築物必須要有以下五個設施：\u003cb class=\\\"orange\\\"\u003e迴旋樓梯、天花板、外牆、台階和大門\u003c/b\u003e。此外，也建議大家製作迴旋樓梯時可以額外製作底座和中柱，讓建築物變得更真實也更完整！\\n\\n\u003cb class=\\\"blue\\\"\u003e本週挑戰進度：\u003c/b\u003e\\n完成這個建築物的底座、中柱和迴旋樓梯後，可以進行初步裝飾喔！\u003c/div\u003e\\n              \u003c/div\u003e\\n          \u003c/div\u003e\\n      \u003c/div\u003e\\n      \u003cdiv\u003e\\n          \u003cdiv class=\\\"box\\\" \u003e\\n              \u003cdiv style=\\\"height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;\\\"\u003e\\n                  \u003ch3 style=\\\"margin-bottom: 20px;\\\"\u003e建築物整體參考\u003c/h3\u003e\\n                  \u003ciframe class=\\\"video-iframe\\\" src=\\\"https://player.vimeo.com/video/644634203\\\" width=\\\"600\\\" height=\\\"400\\\" frameborder=\\\"0\\\" allow=\\\"autoplay; fullscreen\\\" allowfullscreen\u003e\u003c/iframe\u003e\\n              \u003c/div\u003e\\n          \u003c/div\u003e\\n      \u003c/div\u003e\\n      \u003cdiv\u003e\\n          \u003cdiv class=\\\"box\\\" \u003e\\n              \u003cdiv style=\\\"height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;\\\"\u003e\\n                  \u003ch3 style=\\\"margin-bottom: 20px;\\\"\u003e建築物內部參考\u003c/h3\u003e\\n                  \u003ciframe class=\\\"video-iframe\\\" src=\\\"https://player.vimeo.com/video/644633980\\\" width=\\\"600\\\" height=\\\"400\\\" frameborder=\\\"0\\\" allow=\\\"autoplay; fullscreen\\\" allowfullscreen\u003e\u003c/iframe\u003e\\n              \u003c/div\u003e\\n          \u003c/div\u003e\\n      \u003c/div\u003e\\n      \u003cdiv\u003e\\n          \u003cdiv class=\\\"box\\\" \u003e\\n              \u003cdiv style=\\\"height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;\\\"\u003e\\n                  \u003ch3 style=\\\"margin-bottom: 20px;\\\"\u003e建築物底座參考\u003c/h3\u003e\\n                  \u003ciframe class=\\\"video-iframe\\\" src=\\\"https://player.vimeo.com/video/644634287\\\" width=\\\"600\\\" height=\\\"400\\\" frameborder=\\\"0\\\" allow=\\\"autoplay; fullscreen\\\" allowfullscreen\u003e\u003c/iframe\u003e\\n              \u003c/div\u003e\\n          \u003c/div\u003e\\n      \u003c/div\u003e\\n      \u003cdiv\u003e\\n          \u003cdiv class=\\\"box\\\" \u003e\\n              \u003cdiv style=\\\"height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;\\\"\u003e\\n                  \u003ch3 style=\\\"margin-bottom: 20px;\\\"\u003e建築物中柱參考\u003c/h3\u003e\\n                  \u003ciframe class=\\\"video-iframe\\\" src=\\\"https://player.vimeo.com/video/644633901\\\" width=\\\"600\\\" height=\\\"400\\\" frameborder=\\\"0\\\" allow=\\\"autoplay; fullscreen\\\" allowfullscreen\u003e\u003c/iframe\u003e\\n              \u003c/div\u003e\\n          \u003c/div\u003e\\n      \u003c/div\u003e\\n      \u003cdiv\u003e\\n          \u003cdiv class=\\\"box\\\" \u003e\\n              \u003cdiv style=\\\"height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;\\\"\u003e\\n                  \u003ch3 style=\\\"margin-bottom: 20px;\\\"\u003e建築物迴旋樓梯參考\u003c/h3\u003e\\n                  \u003ciframe class=\\\"video-iframe\\\" src=\\\"https://player.vimeo.com/video/644634319\\\" width=\\\"600\\\" height=\\\"400\\\" frameborder=\\\"0\\\" allow=\\\"autoplay; fullscreen\\\" allowfullscreen\u003e\u003c/iframe\u003e\\n              \u003c/div\u003e\\n          \u003c/div\u003e\\n      \u003c/div\u003e\\n    \u003c/div\u003e\\n    \u003cscript src=\\\"https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js\\\"\u003e\u003c/script\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\\n\\n\\n\\n      \",\"css\":\"body {\\n    text-align: center;\\n    padding: 0px;\\n    background: #151515;\\n    background-image: url(\\\"https://cdn6.koding.school/uploads/course/header_bg/290/33706d3a9cfdddafaf34ffbb17a75280.png\\\");\\n    background-size: cover;\\n}\\n\\n/* https://cdn6.koding.school/uploads/course/header_bg/290/33706d3a9cfdddafaf34ffbb17a75280.png */\\n\\n#tns1-ow \u003e .tns-controls {\\n    position: absolute;\\n    bottom: 10px;\\n    left: 91%;\\n    transform: translate(-50%, 0);\\n    width: 100%;\\n}\\n\\n#tns1-ow \u003e .tns-controls \u003e button { \\n    margin-top: 2vh;\\n    padding: 10px 20px;\\n    width: 50px;\\n    height: 50px;\\n    border-radius: 50%;\\n    border: 0;\\n}\\n\\n#tns1-ow \u003e .tns-controls \u003e button:first-child{ \\n    margin-right: 10px;\\n}\\n\\n.my-slider h3 {\\n    color: white;    \\n    word-break: break-all;\\n    margin: 10px 0;\\n}\\n\\n.my-slider {\\n    margin-top: 5vh;\\n}\\n\\n.box {\\n    background: #151515;\\n    border: 5px white solid;\\n    width: 80vw;\\n    height: 80vh;\\n    text-align: center;\\n    padding: 20px;\\n}\\n\\n.textBox {\\n    display: inline-block;\\n    color: white; \\n    margin: 0 auto;\\n    white-space: pre-wrap;\\n    margin-top: 10px;\\n    \\n    height: 100%;\\n    border: 1px white solid;\\n    word-wrap: break-word;\\n    text-align: left;\\n    padding: 10px;\\n    border-radius: 5px;\\n    overflow-y: auto;\\n    font-size: 1.2rem;\\n}\\n\\nb.orange {\\n    color: #FFA400;\\n}\\n\\nb.green {\\n    color: #39B54A;\\n}\\n\\nb.blue {\\n    color: #7BE8F6;\\n}\\n\\nb.red {\\n    color: #FE5959;\\n}\\n\\n\\n\\n\\n\\n\",\"js\":\"let w = document.body.scrollWidth;\\nlet h = document.body.scrollHeight;\\n\\nlet textIframe = document.querySelectorAll(\\\".text-iframe\\\");\\ntextIframe.forEach((iframe) =\u003e {\\n    iframe.width = (w / 10) * 8;\\n    iframe.height = (((h / 10) * 8) / 10 ) * 4;\\n});\\n\\nlet videoIframe = document.querySelectorAll(\\\".video-iframe\\\");\\nvideoIframe.forEach((iframe) =\u003e {\\n    iframe.width = (w / 10) * 8;\\n    iframe.height = (((h / 10) * 8) / 10 ) * 5;\\n});\\n\\n\\n\\n\\n\\nvar slider = tns({\\n    container: '.my-slider',\\n    items: 3,\\n    center: true,\\n    loop: false,\\n    swipeAngle: false,\\n    speed: 400,\\n    autoWidth: true,\\n    // autoHeight: true,\\n    nav: false,\\n    controlsText: ['◀', '▶'],\\n    controlsPosition: 'bottom',\\n    gutter: 10,\\n    navPosition: 'bottom',\\n});\"}","created_at":"2021-11-11T14:25:10.524+08:00","updated_at":"2021-11-11T14:48:03.193+08:00","name":"【課後延伸 - 專案】創意建築物一","language":"web","screenshot":{"url":null},"parent_id":313010,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":74,"hashid":"36ysm2gg4","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}