眼睛敏銳大考驗 | Programming Project | OrangeApple Learning Platform

{"id":90384,"student_id":10,"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    \u003cp\u003e找出顏色不一樣的方塊！\u003c/p\u003e\\n    \u003cdiv class=\\\"grid\\\"\u003e\\n        \u003cdiv id=\\\"c0\\\"  class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c1\\\"  class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c2\\\"  class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c3\\\"  class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c4\\\"  class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c5\\\"  class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c6\\\"  class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c7\\\"  class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c8\\\"  class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c9\\\"  class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c10\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c11\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c12\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c13\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c14\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c15\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c16\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c17\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c18\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c19\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c20\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c21\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c22\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c23\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c24\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c25\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c26\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c27\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c28\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c29\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c30\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c31\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c32\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c33\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c34\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c35\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c36\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c37\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c38\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c39\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c40\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c41\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c42\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c43\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c44\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c45\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c46\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c47\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n        \u003cdiv id=\\\"c48\\\" class=\\\"cell\\\"\u003e\u003c/div\u003e\\n    \u003c/div\u003e\\n    \u003cbutton\u003e開始\u003c/button\u003e\\n    \u003col class=\\\"list\\\"\u003e\u003c/ol\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body {\\n    text-align: center;\\n}\\n\\n.list {\\n    width: 300px;\\n    margin: auto;\\n}\\n\\n.grid {\\n    margin: auto;\\n    width: 350px;\\n    height: 350px;\\n    overflow: hidden;\\n    display: flex;\\n    flex-wrap: wrap;\\n}\\n\\n.cell {\\n    width: 50px;\\n    height: 50px;\\n    border: 1px solid #fff;\\n    box-sizing: border-box;\\n    transition: all .5s;\\n    background-color: gray;\\n}\\n\\n.cell:hover {\\n    cursor: pointer;\\n    transform: scale(.9);\\n    \\n}\",\"js\":\"// 為何採用很蠢的 id 來對應元素？因為這樣比較好教\\n// 使用 data 屬性或是 query 後再取元素都不是很直觀\\n// status 不使用字串而用數字是怕打錯字\\n\\nvar record = DB.table('record');\\nvar randEl;\\nvar status = 0;\\nvar level = 0;\\nvar answerId;\\n\\n$('button').click(start);\\n$('.cell').click(onclick);\\n\\nfunction start () {\\n    $('button').hide();\\n    next();\\n    status = 1;\\n    setTimeout(gameover, 10000);\\n}\\n\\nfunction next () {\\n    var r = Math.floor(Math.random()*256);\\n    var g = Math.floor(Math.random()*256);\\n    var b = Math.floor(Math.random()*256);\\n    \\n    $('.cell').css('backgroundColor', `rgb(${r}, ${g}, ${b})`);\\n    \\n    answerId = 'c' + Math.floor(Math.random()*49);\\n    $('#' + answerId).css('backgroundColor', `rgb(${r+15}, ${g+15}, ${b+15})`);\\n}\\n\\nfunction onclick () {\\n    var id = $(this).attr('id');\\n    if (status == 1 \u0026\u0026 id == answerId) {\\n        level++;\\n        $('p').text('目前 Level: ' + level);\\n        next();\\n    }\\n}\\n\\nfunction gameover () {\\n    status = 2;\\n    $('.cell').css('backgroundColor', '#444');\\n    record.create({ level: level, name: USER_NAME });\\n    showResult();\\n}\\n\\nfunction showResult () {\\n    record.find({}, {\\n        $orderBy: { level: -1 },\\n        $limit: 5,\\n    }, function (data) {\\n        for (var i=0; i\u003cdata.length; i++) {\\n            $('ol').append(`\u003cli\u003e${data[i].name} - level ${data[i].level}\u003c/li\u003e`);\\n        }\\n    });\\n}\\n\"}","created_at":"2019-08-23T17:47:27.877+08:00","updated_at":"2019-10-23T12:45:35.206+08:00","name":"眼睛敏銳大考驗","language":"web","screenshot":{"url":"/uploads/project/screenshot/90384/43c09f196ec0148283c09972e46d23c3.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":446,"hashid":"p93sq8jd","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}