【練習】基礎語法：比較運算 5 | 程式專案

{"id":540746,"student_id":2589,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n    \u003ctitle\u003eDocument\u003c/title\u003e\\n    \u003clink href=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css\\\" rel=\\\"stylesheet\\\" integrity=\\\"sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU\\\" crossorigin=\\\"anonymous\\\"\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv class=\\\"position-absolute\\\" id=\\\"loadingTool\\\"\u003e\\n        \u003cdiv class=\\\"spinner-border text-secondary\\\" role=\\\"status\\\"\u003e\\n            \u003cspan class=\\\"visually-hidden\\\"\u003eLoading...\u003c/span\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n    \u003cdiv class=\\\"col-8 mx-auto p-3 py-5\\\"\u003e\\n        \u003cdiv id=\\\"main\\\" class=\\\"pb-5 visually-hidden\\\"\u003e\\n            \u003cdiv class=\\\"row col-12\\\" id=\\\"question\\\"\u003e\\n                \u003cdiv class=\\\"col-12\\\"\u003e\\n                    \u003cp class=\\\"fs-5 p-0 mb-2\\\" id=\\\"questionDescription\\\"\u003e\u003c/p\u003e\\n                    \u003cdiv class=\\\"d-flex imgContainer border rounded p-2 mb-2\\\"\u003e\\n                        \u003cdiv class=\\\"d-flex row w-100\\\" style=\\\"flex-grow: 1;\\\"\u003e\\n                            \u003cdiv class=\\\"col-12 w-100 h-100\\\"\u003e\\n                                \u003cdiv class=\\\"py-3 w-100 h-100 position-relative\\\" style=\\\"overflow:hidden;background-color: #1e1e1e;\\\"\u003e\\n                                    \u003cdiv class=\\\"monaco-editor-container codeBox\\\"\u003e\u003c/div\u003e\\n                                \u003c/div\u003e\\n                            \u003c/div\u003e\\n                        \u003c/div\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"row col-12\\\"\u003e\\n                \u003cdiv class=\\\"col-6 pb-2 pe-1\\\"\u003e\\n                    \u003clabel for=\\\"flexRadioA\\\" id=\\\"flexRadioBoxA\\\" class=\\\"w-100 border rounded p-2 pt-0\\\"\u003e\\n                        \u003cdiv class=\\\"textContainer\\\"\u003e\\n                            \u003cdiv class=\\\"form-check text-center p-0 h-100 d-flex align-items-center justify-content-center\\\"\u003e\\n                                A\\n                            \u003c/div\u003e\\n                            \u003cinput value=\\\"A\\\" class=\\\"form-check-input d-none\\\" type=\\\"radio\\\" name=\\\"flexRadioDefault\\\" id=\\\"flexRadioA\\\"\u003e\\n                        \u003c/div\u003e\\n                        \u003cdiv id=\\\"imgContainerA\\\" class=\\\"d-flex imgContainer\\\"\u003e\\n                            \u003cdiv class=\\\"d-flex row w-100\\\" style=\\\"flex-grow: 1;\\\"\u003e\\n                                \u003cdiv class=\\\"col-12 w-100 h-100\\\"\u003e\\n                                    \u003cdiv class=\\\"py-3 w-100 h-100 position-relative\\\" style=\\\"overflow:hidden;background-color: #1e1e1e;\\\"\u003e\\n                                        \u003cdiv class=\\\"monaco-editor-container outputBox\\\"\u003e\u003c/div\u003e\\n                                    \u003c/div\u003e\\n                                \u003c/div\u003e\\n                            \u003c/div\u003e\\n                        \u003c/div\u003e\\n                    \u003c/label\u003e\\n                \u003c/div\u003e\\n                \u003cdiv class=\\\"col-6 pb-2 ps-1\\\"\u003e\\n                    \u003clabel for=\\\"flexRadioB\\\" id=\\\"flexRadioBoxB\\\" class=\\\"w-100 border rounded p-2 pt-0\\\"\u003e\\n                        \u003cdiv class=\\\"textContainer\\\"\u003e\\n                            \u003cdiv class=\\\"form-check text-center p-0 h-100 d-flex align-items-center justify-content-center\\\"\u003e\\n                                B\\n                            \u003c/div\u003e\\n                            \u003cinput value=\\\"B\\\" class=\\\"form-check-input d-none\\\" type=\\\"radio\\\" name=\\\"flexRadioDefault\\\" id=\\\"flexRadioB\\\"\u003e\\n                        \u003c/div\u003e\\n                        \u003cdiv id=\\\"imgContainerB\\\" class=\\\"d-flex imgContainer\\\"\u003e\\n                            \u003cdiv class=\\\"d-flex row w-100\\\" style=\\\"flex-grow: 1;\\\"\u003e\\n                                \u003cdiv class=\\\"col-12 w-100 h-100\\\"\u003e\\n                                    \u003cdiv class=\\\"py-3 w-100 h-100 position-relative\\\" style=\\\"overflow:hidden;background-color: #1e1e1e;\\\"\u003e\\n                                        \u003cdiv class=\\\"monaco-editor-container outputBox\\\"\u003e\u003c/div\u003e\\n                                    \u003c/div\u003e\\n                                \u003c/div\u003e\\n                            \u003c/div\u003e\\n                        \u003c/div\u003e\\n                    \u003c/label\u003e\\n                \u003c/div\u003e\\n                \u003cdiv class=\\\"col-6 pb-2 pe-1\\\"\u003e\\n                    \u003clabel for=\\\"flexRadioC\\\" id=\\\"flexRadioBoxC\\\" class=\\\"w-100 border rounded p-2 pt-0\\\"\u003e\\n                        \u003cdiv class=\\\"textContainer\\\"\u003e\\n                            \u003cdiv class=\\\"form-check text-center p-0 h-100 d-flex align-items-center justify-content-center\\\"\u003e\\n                                C\\n                            \u003c/div\u003e\\n                            \u003cinput value=\\\"C\\\" class=\\\"form-check-input d-none\\\" type=\\\"radio\\\" name=\\\"flexRadioDefault\\\" id=\\\"flexRadioC\\\"\u003e\\n                        \u003c/div\u003e\\n                        \u003cdiv id=\\\"imgContainerC\\\" class=\\\"d-flex imgContainer\\\"\u003e\\n                            \u003cdiv class=\\\"d-flex row w-100\\\" style=\\\"flex-grow: 1;\\\"\u003e\\n                                \u003cdiv class=\\\"col-12 w-100 h-100\\\"\u003e\\n                                    \u003cdiv class=\\\"py-3 w-100 h-100 position-relative\\\" style=\\\"overflow:hidden;background-color: #1e1e1e;\\\"\u003e\\n                                        \u003cdiv class=\\\"monaco-editor-container outputBox\\\"\u003e\u003c/div\u003e\\n                                    \u003c/div\u003e\\n                                \u003c/div\u003e\\n                            \u003c/div\u003e\\n                        \u003c/div\u003e\\n                    \u003c/label\u003e\\n                \u003c/div\u003e\\n                \u003cdiv class=\\\"col-6 pb-2 ps-1\\\"\u003e\\n                    \u003clabel for=\\\"flexRadioD\\\" id=\\\"flexRadioBoxD\\\" class=\\\"w-100 border rounded p-2 pt-0\\\"\u003e\\n                        \u003cdiv class=\\\"textContainer\\\"\u003e\\n                            \u003cdiv class=\\\"form-check text-center p-0 h-100 d-flex align-items-center justify-content-center\\\"\u003e\\n                                D\\n                            \u003c/div\u003e\\n                            \u003cinput value=\\\"D\\\" class=\\\"form-check-input d-none\\\" type=\\\"radio\\\" name=\\\"flexRadioDefault\\\" id=\\\"flexRadioD\\\"\u003e\\n                        \u003c/div\u003e\\n                        \u003cdiv id=\\\"imgContainerD\\\" class=\\\"d-flex imgContainer\\\"\u003e\\n                            \u003cdiv class=\\\"d-flex row w-100\\\" style=\\\"flex-grow: 1;\\\"\u003e\\n                                \u003cdiv class=\\\"col-12 w-100 h-100\\\"\u003e\\n                                    \u003cdiv class=\\\"py-3 w-100 h-100 position-relative\\\" style=\\\"overflow:hidden;background-color: #1e1e1e;\\\"\u003e\\n                                        \u003cdiv class=\\\"monaco-editor-container outputBox\\\"\u003e\u003c/div\u003e\\n                                    \u003c/div\u003e\\n                                \u003c/div\u003e\\n                            \u003c/div\u003e\\n                        \u003c/div\u003e\\n                    \u003c/label\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"row col-12\\\"\u003e\\n                \u003cdiv id=\\\"answerBox\\\" class=\\\"visually-hidden\\\"\u003e\\n                    \u003cdiv class=\\\"row col-12 m-0\\\"\u003e\\n                        \u003cdiv class=\\\"col-12 mt-4 p-0\\\"\u003e\\n                            \u003chr class=\\\"border m-0 mb-1 p-0\\\"\u003e\\n                        \u003c/div\u003e\\n                    \u003c/div\u003e\\n                    \u003cdiv class=\\\"row col-12\\\"\u003e\\n                        \u003cdiv class=\\\"col-12\\\"\u003e\\n                            \u003cdiv class=\\\"fs-5 p-0 mt-3 mb-2\\\"\u003e\\n                                答案：\u003cspan class=\\\"fs-5 p-0\\\" id=\\\"answerText\\\"\u003e\u003c/span\u003e\\n                            \u003c/div\u003e\\n                            \u003cdiv class=\\\"fs-5 p-0 mb-3\\\" id=\\\"answerDescription\\\"\u003e\\n                                說明：以下是各個選項內程式執行前後的對應結果，可以複製起來到練習的頁面中試試看唷！\\n                            \u003c/div\u003e\\n                        \u003c/div\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n        \u003cnav id=\\\"navbar\\\" class=\\\"navbar fixed-bottom navbar-expand-sm navbar-light\\\"\u003e\\n            \u003cdiv class=\\\"container-fluid flex-row-reverse\\\"\u003e\\n                \u003cbutton id=\\\"sendBtn\\\" class=\\\"disabled btn btn-primary px-5 my-2 mx-1\\\" data-bs-toggle=\\\"modal\\\" data-bs-target=\\\"#exampleModal\\\"\u003e送出\u003c/button\u003e\\n            \u003c/div\u003e\\n        \u003c/nav\u003e\\n        \u003cdiv class=\\\"modal fade\\\" id=\\\"exampleModal\\\" tabindex=\\\"-1\\\" aria-labelledby=\\\"exampleModalLabel\\\" aria-hidden=\\\"true\\\"\u003e\\n            \u003cdiv class=\\\"modal-dialog\\\"\u003e\\n                \u003cdiv id=\\\"modal-content-1\\\" class=\\\"modal-content visually-hidden\\\"\u003e\\n                    \u003cdiv class=\\\"modal-header\\\"\u003e\\n                        \u003ch5 class=\\\"modal-title\\\" id=\\\"exampleModalLabel\\\"\u003e送出成功\u003c/h5\u003e\\n                    \u003c/div\u003e\\n                    \u003cdiv class=\\\"modal-body\\\"\u003e\\n                        \u003cp\u003e\\n                            答錯囉！回到題目中再想想看吧！\\n                        \u003c/p\u003e\\n                    \u003c/div\u003e\\n                    \u003cdiv class=\\\"modal-footer\\\"\u003e\\n                        \u003cbutton type=\\\"button\\\" class=\\\"btn btn-secondary\\\" data-bs-dismiss=\\\"modal\\\"\u003e返回\u003c/button\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n                \u003cdiv id=\\\"modal-content-2\\\" class=\\\"modal-content visually-hidden\\\"\u003e\\n                    \u003cdiv class=\\\"modal-header\\\"\u003e\\n                        \u003ch5 class=\\\"modal-title\\\" id=\\\"exampleModalLabel\\\"\u003e送出成功\u003c/h5\u003e\\n                    \u003c/div\u003e\\n                    \u003cdiv class=\\\"modal-body\\\"\u003e\\n                        \u003cp\u003e\\n                            可惜還是答錯！請查看下方的答案和說明，重新思考看看吧！\\n                        \u003c/p\u003e\\n                    \u003c/div\u003e\\n                    \u003cdiv class=\\\"modal-footer\\\"\u003e\\n                        \u003cbutton type=\\\"button\\\" class=\\\"btn btn-secondary\\\" data-bs-dismiss=\\\"modal\\\"\u003e返回\u003c/button\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n                \u003cdiv id=\\\"modal-content-3\\\" class=\\\"modal-content visually-hidden\\\"\u003e\\n                    \u003cdiv class=\\\"modal-header\\\"\u003e\\n                        \u003ch5 class=\\\"modal-title\\\" id=\\\"exampleModalLabel\\\"\u003e送出成功\u003c/h5\u003e\\n                    \u003c/div\u003e\\n                    \u003cdiv class=\\\"modal-body\\\"\u003e\\n                        \u003cp\u003e\\n                            恭喜你答對囉！可以比對一下答案的說明跟你想的是否相同唷！\\n                        \u003c/p\u003e\\n                    \u003c/div\u003e\\n                    \u003cdiv class=\\\"modal-footer\\\"\u003e\\n                        \u003cbutton type=\\\"button\\\" class=\\\"btn btn-secondary\\\" data-bs-dismiss=\\\"modal\\\"\u003e返回\u003c/button\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n    \u003cscript src=\\\"https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js\\\" type=\\\"module\\\"\u003e\u003c/script\u003e\\n    \u003cscript src=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js\\\" integrity=\\\"sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ\\\" crossorigin=\\\"anonymous\\\"\u003e\u003c/script\u003e\\n    \u003cscript src=\\\"https://unpkg.com/monaco-editor@0.37.1/min/vs/loader.js\\\" type=\\\"text/javascript\\\"\u003e\u003c/script\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body::-webkit-scrollbar {\\n    display: none;\\n}\\nbody {\\n    -ms-overflow-style: none;\\n    scrollbar-width: none;\\n}\\nbody {\\n    -webkit-user-select: none;\\n    -moz-user-select: none;\\n    -o-user-select: none;\\n    user-select: none;\\n}\\n\\n.textContainer {\\n    height: 50px;\\n}\\n\\n#flexRadioBoxA, #flexRadioBoxB, #flexRadioBoxC, #flexRadioBoxD {\\n    cursor: pointer;\\n}\\n\\n.imgContainer {\\n    height: 100px;\\n    transition: box-shadow .3s;\\n}\\n\\n.imgContainer:before {\\n    content: \\\"\\\";\\n    width: 100%;\\n    height: var(--boxBeforeHeight1, 100px);\\n    position: absolute;\\n    z-index: 999;\\n}\\n\\n#question .imgContainer {\\n    height: 100px;\\n}\\n\\n#question .imgContainer:before {\\n    content: \\\"\\\";\\n    width: 100%;\\n    height: var(--boxBeforeHeight2, 100px);\\n    position: absolute;\\n    z-index: 999;\\n}\\n\\n.flexRadioBoxHover {\\n    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;\\n}\\n\\n#loadingTool {\\n    top: 50%;\\n    left: 50%;\\n    transform: translate(-50%, -50%);\\n}\\n#navbar {\\n    background: rgba(255,255,255,0.9)\\n}\\n\\n.monaco-editor-container {\\n    width: 100vw;\\n    height: 100vh;\\n    cursor: pointer;\\n}\\n\\n.monaco-editor .cursors-layer \u003e .cursor {\\n    display: none !important;\\n}\\n.monaco-editor .editor-widget {\\n    display: none !important;\\n    visibility: hidden !important;\\n}\\n.monaco-editor-overlaymessage {\\n    display: none !important;\\n}\\n\\n.disabled-block {\\n    z-index: 999;\\n    top: 0;\\n}\\n\\n.codeBox::after {\\n    content: \\\"程式碼\\\";\\n    color: white;\\n    position: absolute;\\n    bottom: 10px;\\n    right: 10px;\\n    font-size: 16px;\\n    z-index: 999;\\n}\\n\\n.outputBox::after {\\n    content: \\\"主控台\\\";\\n    color: white;\\n    position: absolute;\\n    bottom: 10px;\\n    right: 10px;\\n    font-size: 16px;\\n    z-index: 999;\\n}\",\"js\":\"let data = {\\n    \\\"question\\\": {\\n        \\\"description\\\": \\\"請問執行下列程式後顯示的結果為何？\\\",\\n        \\\"code\\\": \\n`let sport = \\\"basketball\\\";\\nif (sport === \\\"basketball\\\") {\\n  console.log(\\\"我喜歡打籃球\\\");\\n} else if (sport === \\\"soccer\\\") {\\n  console.log(\\\"我喜歡踢足球\\\");\\n} else if (sport === \\\"tennis\\\") {\\n  console.log(\\\"我喜歡打網球\\\");\\n} else {\\n  console.log(\\\"我不喜歡這些運動\\\");\\n}\\n\\nif (sport != \\\"basketball\\\") {\\n  console.log(\\\"我不喜歡打籃球\\\");\\n} else {\\n  console.log(\\\"我喜歡打籃球\\\");\\n}`\\n    },\\n\\\"options\\\": [\\n    \\\"我喜歡打籃球\\\\n我喜歡打籃球\\\",\\n    \\\"我喜歡打網球球\\\\n我喜歡打籃球\\\",\\n    \\\"我喜歡打籃球\\\\n我不喜歡打籃球\\\",\\n    \\\"我不喜歡這些運動\\\\n我喜歡打籃球\\\"\\n],\\n    \\\"answer\\\": \\\"我喜歡打籃球\\\\n我喜歡打籃球\\\",\\n    \\\"answerDescription\\\":`這段程式碼包含兩個條件判斷式。第一個條件判斷式根據變數 sport 的值輸出不同的結果。當 sport 的值為 \\\"basketball\\\" 時，會執行第一個 if 區塊，輸出 \\\"我喜歡打籃球\\\"。當 sport 的值為 \\\"soccer\\\" 時，會執行第二個 else if 區塊，輸出 \\\"我喜歡踢足球\\\"。當 sport 的值為 \\\"tennis\\\" 時，會執行第三個 else if 區塊，輸出 \\\"我喜歡打網球\\\"。當 sport 的值不是 \\\"basketball\\\"、\\\"soccer\\\"、\\\"tennis\\\" 這三種情況時，會執行最後一個 else 區塊，輸出 \\\"我不喜歡這些運動\\\"。第二個條件判斷式是另一個 if-else 結構，根據變數 sport 的值輸出不同的結果。當 sport 的值不等於 \\\"basketball\\\" 時，會執行第一個 if 區塊，輸出 \\\"我不喜歡打籃球\\\"。當 sport 的值等於 \\\"basketball\\\" 時，會執行第二個 else 區塊，輸出 \\\"我喜歡打籃球\\\"。因為 sport 的值為 \\\"basketball\\\"，所以會執行第二個 else 區塊，輸出 \\\"我喜歡打籃球\\\"。`\\n};\\n\\nfunction lineNum(str){\\n    let matchVal = str.match(/\\\\r?\\\\n|\\\\r/g)\\n    if(matchVal === null) return 1;\\n    return matchVal.length + 1;\\n}\\n\\nlet tmp = 0;\\ndata[\\\"options\\\"].forEach(option=\u003e{\\n    if(lineNum(option) \u003e tmp){\\n        tmp = lineNum(option)\\n    }\\n})\\n\\nlet imgContainerNodes;\\n\\nimgContainerNodes = document.querySelectorAll(\\\".imgContainer\\\");\\n[...imgContainerNodes].forEach(imgContainer =\u003e {\\n    if(tmp * 40 \u003c 100){\\n        imgContainer.style.height = \\\"100px\\\";\\n        imgContainer.style.setProperty('--boxBeforeHeight1','100px');\\n    }else{\\n        imgContainer.style.height = tmp * 40 + \\\"px\\\";\\n        imgContainer.style.setProperty('--boxBeforeHeight1', tmp * 40 + \\\"px\\\");\\n    }\\n})\\n\\nimgContainerNodes = document.querySelectorAll(\\\"#question .imgContainer\\\");\\n[...document.querySelectorAll(\\\"#question .imgContainer\\\")].forEach(imgContainer =\u003e {\\n    if(lineNum(data[\\\"question\\\"][\\\"code\\\"]) * 40 \u003c 100){\\n        imgContainer.style.height = \\\"100px\\\";\\n        imgContainer.style.setProperty('--boxBeforeHeight2','100px');\\n    }else{\\n        imgContainer.style.height = lineNum(data[\\\"question\\\"][\\\"code\\\"]) * 40 + \\\"px\\\";\\n        imgContainer.style.setProperty('--boxBeforeHeight2', lineNum(data[\\\"question\\\"][\\\"code\\\"]) * 40 + \\\"px\\\");\\n    }\\n})\\n\\nfunction shuffle(arr) {\\n    const n = arr.length;\\n    for (let i = n - 1; i \u003e 0; i -= 1) {\\n        const rand = Math.floor(Math.random() * (i + 1));\\n        [arr[i], arr[rand]] = [arr[rand], arr[i]];\\n    }\\n    return arr\\n}\\n\\ndata.options = [...shuffle(data.options)]\\n\\nlet inputs = document.getElementsByTagName('input');\\n[...inputs].forEach((node, idx)=\u003e {\\n    node.value = data.options[idx]\\n})\\n\\nconst optionIndexs = [\\\"A\\\", \\\"B\\\", \\\"C\\\", \\\"D\\\"]\\n\\nrequire.config({\\n    paths: {\\n        'vs': 'https://unpkg.com/monaco-editor@0.37.1/min/vs'\\n    }\\n});\\n\\nwindow.MonacoEnvironment = {\\n    getWorkerUrl: () =\u003e proxy\\n};\\n\\nlet proxy = URL.createObjectURL(new Blob([`\\n    self.MonacoEnvironment = {\\n    baseUrl: 'https://unpkg.com/monaco-editor@0.37.1/min/'\\n    };\\n    importScripts('https://unpkg.com/monaco-editor@0.37.1/min/vs/base/worker/workerMain.js');\\n    `], {\\n    type: 'text/javascript'\\n}));\\n\\nrequire([\\\"vs/editor/editor.main\\\"], function () {\\n    let editor = monaco.languages.registerCompletionItemProvider('yaml', {\\n        provideCompletionItems: (model, position) =\u003e {\\n            return [{\\n                label: 'apiVersion',\\n                kind: monaco.languages.CompletionItemKind.Function,\\n                documentation: 'Defines the version of Api to create the object',\\n                detail: 'Required Field'\\n            }]\\n        }\\n    })\\n    monaco.languages.registerSignatureHelpProvider('yaml', {\\n        signatureHelpTriggerCharacters: ['(', ','],\\n        provideSignatureHelp: (model, position, token) =\u003e {\\n            console.log('Signature Help')\\n            return {\\n                activeParameter: 0,\\n                activeSignature: 0,\\n                signatures: [{\\n                    label:\\n                    'string substr(string $string, int $start [, int $length])',\\n                    parameters: [{\\n                        label: 'string $string',\\n                        documentation:\\n                        'The input string. Must be one character or longer.'\\n                    },\\n                        {\\n                            label: 'int $start',\\n                            documentation:\\n                            \\\"If $start is non-negative, the returned string will start at the $start'th position in string, counting from zero. For instance, in the string 'abcdef', the character at position 0 is 'a', the character at position 2 is 'c', and so forth.\\\\r\\\\nIf $start is negative, the returned string will start at the $start'th character from the end of string. If $string is less than $start characters long, FALSE will be returned.\\\"\\n                        },\\n                        {\\n                            label: 'int $length',\\n                            documentation:\\n                            'If $length is given and is positive, the string returned will contain at most $length characters beginning from $start (depending on the length of $string) If $length is given and is negative, then that many characters will be omitted from the end of $string (after the start position has been calculated when a start is negative). If $start denotes the position of this truncation or beyond, FALSE will be returned. If $length is given and is 0, FALSE or NULL, an empty string will be returned. If $length is omitted, the substring starting from $start until the end of the string will be returned.'\\n                        }]\\n                }]\\n            }\\n        }\\n    })\\n    monaco.editor.create(\\n        document.querySelector(\\\".codeBox\\\"),\\n        {\\n            value: data.question.code,\\n            language: \\\"javascript\\\",\\n            fontSize: '20px',\\n            theme: 'vs-dark',\\n            readOnly: true,\\n            quickSuggestions: false,\\n            suggest: {\\n                showFields: false,\\n                showFunctions: false\\n            },\\n            renderLineHighlight: \\\"none\\\",\\n        }\\n    )\\n    document.querySelectorAll(\\\".outputBox\\\").forEach((outputBoxElement, idx)=\u003e {\\n        monaco.editor.create(\\n            outputBoxElement,\\n            {\\n                value: data.options[idx],\\n                language: 'bash',\\n                fontSize: '20px',\\n                theme: 'vs-dark',\\n                lineNumbers: \\\"off\\\",\\n                readOnly: true,\\n                quickSuggestions: false,\\n                suggest: {\\n                    showFields: false,\\n                    showFunctions: false\\n                },\\n                renderLineHighlight: \\\"none\\\",\\n            }\\n        )\\n    })\\n});\\n\\nsetTimeout(() =\u003e {\\n    document.getElementById('questionDescription').innerHTML = data.question.description\\n    document.getElementById('loadingTool').remove();\\n    document.getElementById('main').classList.remove(\\\"visually-hidden\\\");\\n}, 100);\\n\\nlet flexRadioBoxA = document.getElementById('flexRadioBoxA');\\nlet flexRadioBoxB = document.getElementById('flexRadioBoxB');\\nlet flexRadioBoxC = document.getElementById('flexRadioBoxC');\\nlet flexRadioBoxD = document.getElementById('flexRadioBoxD');\\n\\n[flexRadioBoxA, flexRadioBoxB, flexRadioBoxC, flexRadioBoxD].forEach(flexRadioBox =\u003e {\\n    flexRadioBox.addEventListener(\\\"mouseover\\\", ()=\u003e {\\n        if (answered) return false\\n        flexRadioBox.classList.add(\\\"flexRadioBoxHover\\\");\\n    });\\n    flexRadioBox.addEventListener(\\\"mouseout\\\", ()=\u003e {\\n        if (answered) return false\\n        flexRadioBox.classList.remove(\\\"flexRadioBoxHover\\\");\\n    });\\n    flexRadioBox.addEventListener(\\\"click\\\", ()=\u003e {\\n        if (answered) return false\\n        document.getElementById('sendBtn').classList.remove(\\\"disabled\\\");\\n        flexRadioBoxA.classList.remove(\\\"border-primary\\\", \\\"text-primary\\\");\\n        flexRadioBoxB.classList.remove(\\\"border-primary\\\", \\\"text-primary\\\");\\n        flexRadioBoxC.classList.remove(\\\"border-primary\\\", \\\"text-primary\\\");\\n        flexRadioBoxD.classList.remove(\\\"border-primary\\\", \\\"text-primary\\\");\\n        flexRadioBox.classList.add(\\\"border-primary\\\", \\\"text-primary\\\");\\n    });\\n})\\n\\nconst answerOptionIndex = optionIndexs[data.options.indexOf(data.answer)]\\nconst answer = data.answer;\\nlet answered = false\\nlet chosen = \\\"\\\";\\nlet chosenList = [];\\n\\ndocument.getElementById('sendBtn').addEventListener(\\\"click\\\", ()=\u003e {\\n    let modalContent1 = document.getElementById('modal-content-1');\\n    let modalContent2 = document.getElementById('modal-content-2');\\n    let modalContent3 = document.getElementById('modal-content-3');\\n    for (i = 0; i \u003c inputs.length; i++) {\\n        if (inputs[i].type = \\\"radio\\\") {\\n            if (inputs[i].checked) {\\n                chosen = inputs[i].value\\n                if (!chosenList.includes(chosen) \u0026\u0026 chosen !== \\\"\\\") chosenList.push(chosen);\\n\\n                modalContent1.classList.add(\\\"visually-hidden\\\");\\n                modalContent2.classList.add(\\\"visually-hidden\\\");\\n                modalContent3.classList.add(\\\"visually-hidden\\\");\\n\\n                if (chosen === answer || chosenList.length === 3) {\\n                    if (chosen === answer) {\\n                        modalContent3.classList.remove(\\\"visually-hidden\\\");\\n                    } else {\\n                        modalContent2.classList.remove(\\\"visually-hidden\\\");\\n                    }\\n                    \\n                    document.getElementById('answerDescription').innerHTML = \\\"說明：\\\" + data.answerDescription;\\n                    document.getElementById('answerBox').classList.remove(\\\"visually-hidden\\\");\\n                    document.getElementById('answerText').innerHTML = answerOptionIndex;\\n                    document.getElementsByTagName('nav')[0].remove();\\n                    \\n                    window.scrollTo({\\n                        top: answerText.offsetTop - 100, behavior: 'smooth'\\n                    });\\n                    answered = !answered\\n                } else {\\n                    modalContent1.classList.remove(\\\"visually-hidden\\\");\\n                }\\n            }\\n        };\\n    };\\n});\"}","created_at":"2023-05-27T11:24:50.002+08:00","updated_at":"2023-05-28T00:59:52.647+08:00","name":"【練習】基礎語法：比較運算 5","language":"web","screenshot":{"url":null},"parent_id":540725,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":43,"hashid":"zpesrykzn","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}

[{"id":12340685,"file_name":"C1.png","project_id":540746,"asset_id":633362,"created_at":"2023-05-27T11:24:50.011+08:00","updated_at":"2023-05-27T11:24:50.011+08:00"},{"id":12340686,"file_name":"C2.png","project_id":540746,"asset_id":633363,"created_at":"2023-05-27T11:24:50.013+08:00","updated_at":"2023-05-27T11:24:50.013+08:00"},{"id":12340687,"file_name":"B1.png","project_id":540746,"asset_id":633364,"created_at":"2023-05-27T11:24:50.014+08:00","updated_at":"2023-05-27T11:24:50.014+08:00"},{"id":12340688,"file_name":"B2.png","project_id":540746,"asset_id":633365,"created_at":"2023-05-27T11:24:50.015+08:00","updated_at":"2023-05-27T11:24:50.015+08:00"},{"id":12340689,"file_name":"D1.png","project_id":540746,"asset_id":633366,"created_at":"2023-05-27T11:24:50.017+08:00","updated_at":"2023-05-27T11:24:50.017+08:00"},{"id":12340690,"file_name":"D2.png","project_id":540746,"asset_id":633367,"created_at":"2023-05-27T11:24:50.018+08:00","updated_at":"2023-05-27T11:24:50.018+08:00"},{"id":12340691,"file_name":"A1.png","project_id":540746,"asset_id":633368,"created_at":"2023-05-27T11:24:50.019+08:00","updated_at":"2023-05-27T11:24:50.019+08:00"},{"id":12340692,"file_name":"A2.png","project_id":540746,"asset_id":633369,"created_at":"2023-05-27T11:24:50.021+08:00","updated_at":"2023-05-27T11:24:50.021+08:00"}]