我是知識王 - 完整版 | 程式專案

{"id":31701,"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    \u003cdiv class=\\\"card\\\"\u003e\\n        \u003cp id=\\\"question\\\"\u003e準備好挑戰了嗎！？\u003c/p\u003e\\n        \u003cbutton id=\\\"a\\\" class=\\\"option\\\"\u003eA\u003c/button\u003e\\n        \u003cbutton id=\\\"b\\\" class=\\\"option\\\"\u003eB\u003c/button\u003e\\n        \u003cbutton id=\\\"c\\\" class=\\\"option\\\"\u003eC\u003c/button\u003e\\n        \u003cbutton id=\\\"d\\\" class=\\\"option\\\"\u003eD\u003c/button\u003e\\n    \u003c/div\u003e\\n    \\n    \u003cdiv\u003e\\n        \u003cbutton id=\\\"start\\\"\u003e開始\u003c/button\u003e\\n        \u003cbutton id=\\\"next\\\"\u003e下一題\u003c/button\u003e\\n    \u003c/div\u003e\\n    \\n    \u003cdiv id=\\\"rank\\\" class=\\\"card\\\"\u003e\\n        \u003cp id=\\\"result\\\"\u003e排行榜\u003c/p\u003e\\n        \u003col id=\\\"list\\\"\u003e\u003c/ol\u003e\\n    \u003c/div\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body {\\n    background-color: #FC3;\\n    background-color: #f39c12;\\n    padding: 50px;\\n    text-align: center;\\n}\\n\\nbutton {\\n    font-size: 1rem;\\n}\\n\\n.card {\\n    max-width: 300px;\\n    padding: 30px;\\n    border-radius: 10px;\\n    margin: auto;\\n    margin-bottom: 15px;\\n    background-color: #fff;\\n    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5);\\n}\\n\\n.option {\\n    padding: 10px;\\n    display: block;\\n    width: 100%;\\n    margin: 10px 0px;\\n    border: 1px solid #ccc;\\n    border-radius: 10px;\\n}\\n\\n#start, #next {\\n    background: none;\\n    border: none;\\n    color: #fff;\\n    text-decoration: underline;\\n}\\n\\n.red {\\n    color: #fff;\\n    background-color: #F60F4C;\\n}\\n\\n.green {\\n    color: #fff;\\n    background-color: #00C46D;\\n}\\n\\n#rank, #next {\\n    display: none;\\n}\",\"js\":\"var record = DB.table('record');\\nvar answer;\\nvar score = 0;\\n\\n$('#start').click(start);\\n$('.option').click(makeAnswer);\\n$('#next').click(showQuestion);\\n\\n\\nfunction start () {\\n    $('#start').hide();\\n    for (var i=0; i\u003c10; i++) {\\n        var rand = Math.floor(Math.random()*data.length);\\n        var tmp = data[i];\\n        data[i] = data[rand];\\n        data[rand] = tmp;\\n    }\\n    data = data.slice(0, 5);\\n    showQuestion();\\n}\\n\\nfunction showQuestion () {\\n    var q = data.pop();\\n    answer = q.answer;\\n    $('#question').text(q.question);\\n    $('#a').text(q.a);\\n    $('#b').text(q.b);\\n    $('#c').text(q.c);\\n    $('#d').text(q.d);\\n    $('#next').hide();\\n    $('.option').removeClass('green red');\\n}\\n\\nfunction makeAnswer () {\\n    var option = $(this).attr('id');\\n    $(this).addClass('red');\\n    $(`#${answer}`).addClass('green');\\n    \\n    if (data.length \u003c= 0) {\\n        gameover();\\n    } else {\\n        $('#next').show();\\n    }\\n    if (option == answer) {\\n        score++;\\n    }\\n}\\n\\nfunction gameover () {\\n    record.create({name: USER_NAME, score: score});\\n    record.find({}, {\\n        $orderBy: {score: -1}\\n    }, showRank);\\n}\\n\\nfunction showRank (data) {\\n    $('#rank').show();\\n    $('#result').text('你的分數:' + score);\\n    data.forEach(function (d) {\\n        $('#list').append(`\u003cli\u003e${d.name} - ${d.score}\u003c/li\u003e`);     \\n    });\\n}\\n\"}","created_at":"2018-06-17T20:45:02.734+08:00","updated_at":"2019-11-11T21:31:22.758+08:00","name":"我是知識王 - 完整版","language":"web","screenshot":{"url":"https://cdn8.koding.school/uploads/project/screenshot/31701/fd0aaaf85759e6ffce18d2c27c26e4b4.jpg"},"parent_id":null,"plugin":"var data = [\n    {\n        question: '以下何者不是三原色？',\n        a: '紅',\n        b: '綠',\n        c: '藍',\n        d: '黃',\n        answer: 'd'\n    },\n    {\n        question: '5 + 4 = ？',\n        a: '9',\n        b: '10',\n        c: '11',\n        d: '12',\n        answer: 'a'\n    },\n    {\n        question: '9 + 9？',\n        a: '10',\n        b: '14',\n        c: '18',\n        d: '22',\n        answer: 'c'\n    },\n    {\n        question: '以下何者不是三原色？',\n        a: '紅',\n        b: '綠',\n        c: '藍',\n        d: '黃',\n        answer: 'd'\n    },\n    {\n        question: '5 + 4 = ？',\n        a: '9',\n        b: '10',\n        c: '11',\n        d: '12',\n        answer: 'a'\n    },\n    {\n        question: '9 + 9？',\n        a: '10',\n        b: '14',\n        c: '18',\n        d: '22',\n        answer: 'c'\n    },\n    {\n        question: '以下何者不是三原色？',\n        a: '紅',\n        b: '綠',\n        c: '藍',\n        d: '黃',\n        answer: 'd'\n    },\n    {\n        question: '5 + 4 = ？',\n        a: '9',\n        b: '10',\n        c: '11',\n        d: '12',\n        answer: 'a'\n    },\n    {\n        question: '9 + 9？',\n        a: '10',\n        b: '14',\n        c: '18',\n        d: '22',\n        answer: 'c'\n    },{\n        question: '以下何者不是三原色？',\n        a: '紅',\n        b: '綠',\n        c: '藍',\n        d: '黃',\n        answer: 'd'\n    },\n    {\n        question: '5 + 4 = ？',\n        a: '9',\n        b: '10',\n        c: '11',\n        d: '12',\n        answer: 'a'\n    },\n    {\n        question: '9 + 9？',\n        a: '10',\n        b: '14',\n        c: '18',\n        d: '22',\n        answer: 'c'\n    },\n]","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":389,"hashid":"gk4snwer","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}