【練習】基礎語法：迴圈與陣列 4 | 程式專案

{"id":541208,"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 fruits = [\\\"apple\\\", \\\"banana\\\", \\\"orange\\\", \\\"kiwi\\\"];\\nlet count = 0;\\nfor (let i = 0; i \u003c fruits.length; i++) {\\n  count++;\\n}\\nconsole.log(count);`\\n    },\\n\\\"options\\\": [\\n    \\\"4\\\",\\n    \\\"1\\\",\\n    \\\"2\\\",\\n    \\\"0\\\",\\n],\\n    \\\"answer\\\": \\\"4\\\",\\n    \\\"answerDescription\\\": '這段程式碼是一個 for 迴圈，用來計算陣列 fruits 中元素的個數。變數 count 的初始值為 0，每次迴圈執行時，會將 count 的值加 1。當迴圈執行完畢後，會輸出 count 的值，即為 fruits 中元素的個數。因為 fruits 陣列中有 4 個元素，所以最終的輸出結果是 4。',\\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-27T13:44:54.802+08:00","updated_at":"2023-05-28T00:58:24.230+08:00","name":"【練習】基礎語法：迴圈與陣列 4","language":"web","screenshot":{"url":null},"parent_id":540973,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":37,"hashid":"yeysqwm49","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}

[{"id":12351622,"file_name":"C1.png","project_id":541208,"asset_id":633362,"created_at":"2023-05-27T13:44:54.811+08:00","updated_at":"2023-05-27T13:44:54.811+08:00"},{"id":12351623,"file_name":"C2.png","project_id":541208,"asset_id":633363,"created_at":"2023-05-27T13:44:54.812+08:00","updated_at":"2023-05-27T13:44:54.812+08:00"},{"id":12351624,"file_name":"B1.png","project_id":541208,"asset_id":633364,"created_at":"2023-05-27T13:44:54.816+08:00","updated_at":"2023-05-27T13:44:54.816+08:00"},{"id":12351625,"file_name":"B2.png","project_id":541208,"asset_id":633365,"created_at":"2023-05-27T13:44:54.817+08:00","updated_at":"2023-05-27T13:44:54.817+08:00"},{"id":12351626,"file_name":"D1.png","project_id":541208,"asset_id":633366,"created_at":"2023-05-27T13:44:54.819+08:00","updated_at":"2023-05-27T13:44:54.819+08:00"},{"id":12351627,"file_name":"D2.png","project_id":541208,"asset_id":633367,"created_at":"2023-05-27T13:44:54.820+08:00","updated_at":"2023-05-27T13:44:54.820+08:00"},{"id":12351628,"file_name":"A1.png","project_id":541208,"asset_id":633368,"created_at":"2023-05-27T13:44:54.826+08:00","updated_at":"2023-05-27T13:44:54.826+08:00"},{"id":12351629,"file_name":"A2.png","project_id":541208,"asset_id":633369,"created_at":"2023-05-27T13:44:54.829+08:00","updated_at":"2023-05-27T13:44:54.829+08:00"}]