【練習】基礎語法：邏輯運算 4 | 程式專案

{"id":540613,"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 hour = 20;\\nif (hour \u003c 11) {\\n  console.log(\\\"早餐\\\");\\n} else if (time \u003e= 11 \u0026\u0026 time \u003c 14) {\\n  console.log(\\\"午餐\\\");\\n} else if (time \u003e= 14 \u0026\u0026 time \u003c 18) {\\n  console.log(\\\"下午茶\\\");\\n} else {\\n  console.log(\\\"晚餐\\\");\\n}`\\n    },\\n\\\"options\\\": [\\n    \\\"早餐\\\",\\n    \\\"午餐\\\",\\n    \\\"下午茶\\\",\\n    \\\"晚餐\\\"\\n],\\n    \\\"answer\\\": \\\"晚餐\\\",\\n    \\\"answerDescription\\\":`這段程式碼是一個條件判斷式，根據變數 hour 的值輸出不同的結果。當 hour 小於 11 時，會執行第一個 if 區塊，輸出 \\\"早餐\\\"。當 hour 大於等於 11 且小於 14 時，會執行第二個 else if 區塊，輸出 \\\"午餐\\\"。當 hour 大於等於 14 且小於 18 時，會執行第三個 else if 區塊，輸出 \\\"下午茶\\\"。當 hour 不符合以上任何一個條件時，會執行最後一個 else 區塊，輸出 \\\"晚餐\\\"。因為 hour 的值為 20，大於等於 18，所以會執行最後一個 else 區塊，輸出 \\\"晚餐\\\"。`\\n};\\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-27T10:52:33.216+08:00","updated_at":"2023-05-28T01:02:27.041+08:00","name":"【練習】基礎語法：邏輯運算 4","language":"web","screenshot":{"url":null},"parent_id":540600,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":34,"hashid":"meys6m5dk","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}

[{"id":12337073,"file_name":"C1.png","project_id":540613,"asset_id":633370,"created_at":"2023-05-27T10:52:33.225+08:00","updated_at":"2023-05-27T10:52:33.225+08:00"},{"id":12337074,"file_name":"C2.png","project_id":540613,"asset_id":633371,"created_at":"2023-05-27T10:52:33.227+08:00","updated_at":"2023-05-27T10:52:33.227+08:00"},{"id":12337075,"file_name":"B1.png","project_id":540613,"asset_id":633372,"created_at":"2023-05-27T10:52:33.228+08:00","updated_at":"2023-05-27T10:52:33.228+08:00"},{"id":12337076,"file_name":"B2.png","project_id":540613,"asset_id":633373,"created_at":"2023-05-27T10:52:33.229+08:00","updated_at":"2023-05-27T10:52:33.229+08:00"},{"id":12337077,"file_name":"D1.png","project_id":540613,"asset_id":633374,"created_at":"2023-05-27T10:52:33.231+08:00","updated_at":"2023-05-27T10:52:33.231+08:00"},{"id":12337078,"file_name":"D2.png","project_id":540613,"asset_id":633375,"created_at":"2023-05-27T10:52:33.236+08:00","updated_at":"2023-05-27T10:52:33.236+08:00"},{"id":12337079,"file_name":"A1.png","project_id":540613,"asset_id":633376,"created_at":"2023-05-27T10:52:33.239+08:00","updated_at":"2023-05-27T10:52:33.239+08:00"},{"id":12337080,"file_name":"A2.png","project_id":540613,"asset_id":633377,"created_at":"2023-05-27T10:52:33.241+08:00","updated_at":"2023-05-27T10:52:33.241+08:00"}]