麥塊綜合練習：程式題 6 | 程式專案

{"id":554303,"student_id":2589,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n    \u003ctitle\u003eDocument\u003c/title\u003e\\n    \u003cstyle\u003e\\n        body::-webkit-scrollbar {\\n            display: none;\\n        }\\n        body {\\n            -ms-overflow-style: none;\\n            scrollbar-width: none;\\n        }\\n        body {\\n            -webkit-user-select: none;\\n            -moz-user-select: none;\\n            -o-user-select: none;\\n            user-select: none;\\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    \u003c/style\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\\n\\n    \u003cdiv class=\\\"col-8 mx-auto p-3 py-5\\\"\u003e\\n        \u003cmain class=\\\"pb-5 visually-hidden\\\"\u003e\\n            \u003cdiv class=\\\"row col-12\\\"\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 justify-content-between\\\"\u003e\\n                        \u003cdiv class=\\\"d-flex w-50 pe-1\\\"\u003e\\n                            \u003cdiv class=\\\"col-12 p-0 w-100 h-100\\\"\u003e\\n                                \u003cdiv class=\\\"w-100 h-100 position-relative\\\"\u003e\\n                                    \u003ciframe id=\\\"questionCode\\\" style=\\\"position:absolute;top:0;left:0;width:100%;height:100%;\\\" frameborder=\\\"0\\\" sandbox=\\\"allow-popups allow-forms allow-scripts allow-same-origin\\\"\u003e\u003c/iframe\u003e\\n                                \u003c/div\u003e\\n                            \u003c/div\u003e\\n                        \u003c/div\u003e\\n                        \u003cdiv class=\\\"d-flex w-50 ps-1\\\"\u003e\\n                            \u003cdiv class=\\\"col-12 p-0 w-100 h-100\\\"\u003e\\n                                \u003cdiv class=\\\"w-100 h-100 d-flex flex-column\\\"\u003e\\n                                    \u003cdiv class=\\\"col-12 basis-50 mb-2 d-flex\\\"\u003e\\n                                        \u003cdiv class=\\\"col-6 pe-1\\\"\u003e\\n                                            \u003clabel for=\\\"flexRadioA\\\" class=\\\"w-100\\\"\u003e\\n                                                \u003cdiv id=\\\"flexRadioBoxA\\\" class=\\\"textContainer flexRadioBoxHover border rounded p-2 border-secondary border-3\\\"\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 checked value=\\\"A\\\" class=\\\"form-check-input d-none\\\" type=\\\"radio\\\" name=\\\"flexRadioDefault\\\" id=\\\"flexRadioA\\\"\u003e\\n                                                \u003c/div\u003e\\n                                            \u003c/label\u003e\\n                                        \u003c/div\u003e\\n                                        \u003cdiv class=\\\"col-6 ps-1\\\"\u003e\\n                                            \u003clabel for=\\\"flexRadioB\\\" class=\\\"w-100\\\"\u003e\\n                                                \u003cdiv id=\\\"flexRadioBoxB\\\" class=\\\"textContainer flexRadioBoxHover border rounded p-2\\\"\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                                            \u003c/label\u003e\\n                                        \u003c/div\u003e\\n                                    \u003c/div\u003e\\n                                    \u003cdiv class=\\\"col-12 basis-50 mb-2 d-flex\\\"\u003e\\n                                        \u003cdiv class=\\\"col-6 pe-1\\\"\u003e\\n                                            \u003clabel for=\\\"flexRadioC\\\" class=\\\"w-100\\\"\u003e\\n                                                \u003cdiv id=\\\"flexRadioBoxC\\\" class=\\\"textContainer flexRadioBoxHover border rounded p-2\\\"\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                                            \u003c/label\u003e\\n                                        \u003c/div\u003e\\n                                        \u003cdiv class=\\\"col-6 ps-1\\\"\u003e\\n                                            \u003clabel for=\\\"flexRadioD\\\" class=\\\"w-100\\\"\u003e\\n                                                \u003cdiv id=\\\"flexRadioBoxD\\\" class=\\\"textContainer flexRadioBoxHover border rounded p-2\\\"\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                                            \u003c/label\u003e\\n                                        \u003c/div\u003e\\n                                    \u003c/div\u003e\\n                                    \u003cdiv class=\\\"col-12 grow-1\\\"\u003e\\n                                        \u003cdiv id=\\\"imgContainerA\\\" class=\\\"d-flex h-100 border rounded p-2 visually-hidden\\\"\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=\\\"w-100 h-100 position-relative\\\" style=\\\"overflow:hidden;background-color: #1e1e1e;\\\"\u003e\\n                                                        \u003cmodel-viewer\\n                                                            class=\\\"outputBox\\\"\\n                                                            ar=\\\"\\\"\\n                                                            environment-image=\\\"\\\"\\n                                                            poster=\\\"\\\"\\n                                                            shadow-intensity=\\\"1\\\"\\n                                                            camera-controls=\\\"\\\"\\n                                                            touch-action=\\\"pan-y\\\"\\n                                                            generate-schema=\\\"\\\"\\n                                                            ar-status=\\\"not-presenting\\\"\u003e\\n                                                        \u003c/model-viewer\u003e\\n                                                    \u003c/div\u003e\\n                                                \u003c/div\u003e\\n                                            \u003c/div\u003e\\n                                        \u003c/div\u003e\\n                                        \u003cdiv id=\\\"imgContainerB\\\" class=\\\"d-flex border rounded p-2 visually-hidden\\\"\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=\\\"w-100 h-100 position-relative\\\" style=\\\"overflow:hidden;background-color: #1e1e1e;\\\"\u003e\\n                                                        \u003cmodel-viewer\\n                                                            class=\\\"outputBox\\\"\\n                                                            ar=\\\"\\\"\\n                                                            environment-image=\\\"\\\"\\n                                                            poster=\\\"\\\"\\n                                                            shadow-intensity=\\\"1\\\"\\n                                                            camera-controls=\\\"\\\"\\n                                                            touch-action=\\\"pan-y\\\"\\n                                                            generate-schema=\\\"\\\"\\n                                                            ar-status=\\\"not-presenting\\\"\u003e\\n                                                        \u003c/model-viewer\u003e\\n                                                    \u003c/div\u003e\\n                                                \u003c/div\u003e\\n                                            \u003c/div\u003e\\n                                        \u003c/div\u003e\\n                                        \u003cdiv id=\\\"imgContainerC\\\" class=\\\"d-flex border rounded p-2 visually-hidden\\\"\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=\\\"w-100 h-100 position-relative\\\" style=\\\"overflow:hidden;background-color: #1e1e1e;\\\"\u003e\\n                                                        \u003cmodel-viewer\\n                                                            class=\\\"outputBox\\\"\\n                                                            ar=\\\"\\\"\\n                                                            environment-image=\\\"\\\"\\n                                                            poster=\\\"\\\"\\n                                                            shadow-intensity=\\\"1\\\"\\n                                                            camera-controls=\\\"\\\"\\n                                                            touch-action=\\\"pan-y\\\"\\n                                                            generate-schema=\\\"\\\"\\n                                                            ar-status=\\\"not-presenting\\\"\u003e\\n                                                        \u003c/model-viewer\u003e\\n                                                    \u003c/div\u003e\\n                                                \u003c/div\u003e\\n                                            \u003c/div\u003e\\n                                        \u003c/div\u003e\\n                                        \u003cdiv id=\\\"imgContainerD\\\" class=\\\"d-flex border rounded p-2 visually-hidden\\\"\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=\\\"w-100 h-100 position-relative\\\" style=\\\"overflow:hidden;background-color: #1e1e1e;\\\"\u003e\\n                                                        \u003cmodel-viewer\\n                                                            class=\\\"outputBox\\\"\\n                                                            ar=\\\"\\\"\\n                                                            environment-image=\\\"\\\"\\n                                                            poster=\\\"\\\"\\n                                                            shadow-intensity=\\\"1\\\"\\n                                                            camera-controls=\\\"\\\"\\n                                                            touch-action=\\\"pan-y\\\"\\n                                                            generate-schema=\\\"\\\"\\n                                                            ar-status=\\\"not-presenting\\\"\u003e\\n                                                        \u003c/model-viewer\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                            \u003c/div\u003e\\n                        \u003c/div\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n\\n\\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\\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/main\u003e\\n    \u003c/div\u003e\\n\\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\\n    \u003c!-- Modal --\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\\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\":\".basis-50 {\\n  flex: 0 0;\\n  flex-basis: 50px;\\n}\\n\\n.grow-1 {\\n  flex-grow: 1;\\n}\\n\\n\\n.textContainer {\\n    height: 50px;\\n}\\n\\n.imgContainer {\\n    height: 600px;\\n}\\n\\n.flexRadioBoxHover {\\n    transition: box-shadow .3s;\\n}\\n.flexRadioBoxHover:hover {\\n    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;\\n    cursor: pointer;\\n}\\n\\n.disabled-block {\\n    z-index: 999;\\n    top: 0;\\n}\\n\\n#questionGlb::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.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}\\n\\n\\nmodel-viewer {\\n    height: 100%;\\n    width: 100%;\\n    background-color: #191919;\\n    z-index: 1;\\n}\",\"js\":\"let data = {\\n    \\\"question\\\": {\\n        \\\"description\\\": \\\"假設我們在麥塊教育版中有一個只用藍色、紅色、黃色和白色方塊組成地面的麥塊世界，並將 Agent 放在紅色方塊、面向藍色方塊的位置，請問使用 run 執行底下程式後會蓋成選項中的哪一個樣子？\\\",\\n        \\\"code\\\": \\\"https://makecode.com/_eqJhLvLfThMV\\\",\\n    },\\n    \\\"options\\\": [\\n        \\\"https://cdn2.koding.school/uploads/section_file/image/1991/answer.glb\\\",\\n        \\\"https://cdn8.koding.school/uploads/section_file/image/1992/option1.glb\\\",\\n        \\\"https://cdn5.koding.school/uploads/section_file/image/1993/option2.glb\\\",\\n        \\\"https://cdn8.koding.school/uploads/section_file/image/1994/option3.glb\\\",\\n    ],\\n    \\\"answer\\\": \\\"https://cdn2.koding.school/uploads/section_file/image/1991/answer.glb\\\",\\n    \\\"answerDescription\\\": \\n        \\\"首先我們看到藍色「玩家在聊天指令為 Run」的程式積木，裡面的第 1 行到第 2 行是啟用石磚，接著宣告變數dir為0，當dir= 0時，Agent 便會往左邊移動且朝前方放置石磚，一共重複五次，當dir≠ 0時，Agent 則會往右邊移動以及朝前方放置石磚，同樣重複五次。\\\",\\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)]\\noptionIndexs = [\\\"A\\\", \\\"B\\\", \\\"C\\\", \\\"D\\\"]\\nanswerOptionIndex = optionIndexs[data.options.indexOf(data.answer)]\\n\\ndocument.querySelectorAll(\\\"input\\\").forEach((node, idx)=\u003e {\\n    node.value = data.options[idx]\\n})\\n\\nconst answer = data.answer;\\n\\nlet main = document.getElementsByTagName('main')[0];\\nlet loadingTool = document.getElementById('loadingTool');\\n\\nlet modalContent1 = document.getElementById('modal-content-1');\\nlet modalContent2 = document.getElementById('modal-content-2');\\nlet modalContent3 = document.getElementById('modal-content-3');\\n\\nlet ele = document.getElementsByTagName('input');\\nlet sendBtn = document.getElementById('sendBtn');\\nlet answerBox = document.getElementById('answerBox');\\nlet answerText = document.getElementById('answerText');\\n\\nlet nav = document.getElementsByTagName('nav')[0];\\n\\nlet questionDescription = document.getElementById('questionDescription');\\nquestionDescription.innerHTML = data.question.description;\\n\\nlet answerDescription = document.getElementById('answerDescription');\\nanswerDescription.innerHTML = \\\"說明：\\\" + data.answerDescription;\\n\\n\\n\\nlet questionCode = document.getElementById('questionCode');\\nquestionCode.src = data.question.code.replace(\\\"https://makecode.com/\\\", \\\"https://minecraft.makecode.com/#pub:\\\");\\n\\ndocument.querySelectorAll(\\\".outputBox\\\").forEach((outputBoxElement, idx)=\u003e {\\n    outputBoxElement.src = data.options[idx];\\n})\\n\\nsetTimeout(() =\u003e {\\n    loadingTool.remove();\\n    main.classList.remove(\\\"visually-hidden\\\");\\n    document.getElementById('imgContainerA').classList.remove(\\\"visually-hidden\\\");\\n    sendBtn.classList.remove(\\\"disabled\\\");\\n}, 500);\\n\\nlet chosen = \\\"A\\\";\\nlet chosenList = [];\\n\\noptionIndexs.forEach(optionIndex =\u003e {\\n    let flexRadioBox = document.getElementById('flexRadioBox' + optionIndex);\\n    let imgContainer = document.getElementById('imgContainer' + optionIndex);\\n    flexRadioBox.addEventListener(\\\"click\\\", ()=\u003e {\\n        optionIndexs.forEach(optionIndex=\u003e {\\n            document.getElementById('flexRadioBox' + optionIndex).classList.remove(\\\"border-secondary\\\", \\\"border-3\\\");\\n            document.getElementById('imgContainer' + optionIndex).classList.add(\\\"visually-hidden\\\");\\n            document.getElementById('imgContainer' + optionIndex).classList.remove(\\\"h-100\\\");\\n        });\\n        flexRadioBox.classList.add(\\\"border-secondary\\\", \\\"border-3\\\");\\n        imgContainer.classList.remove(\\\"visually-hidden\\\");\\n        imgContainer.classList.add(\\\"h-100\\\");\\n    });\\n})\\n\\nsendBtn.addEventListener(\\\"click\\\", ()=\u003e {\\n    for (i = 0; i \u003c ele.length; i++) {\\n        if (ele[i].type = \\\"radio\\\") {\\n            if (ele[i].checked) {\\n                chosen = ele[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\\n                    if (chosen === answer) {\\n                        modalContent3.classList.remove(\\\"visually-hidden\\\");\\n                    } else {\\n                        modalContent2.classList.remove(\\\"visually-hidden\\\");\\n                    }\\n\\n                    answerBox.classList.remove(\\\"visually-hidden\\\");\\n                    answerText.innerHTML = answerOptionIndex;\\n                    nav.remove();\\n                    window.scrollTo({\\n                        top: answerText.offsetTop - 100, behavior: 'smooth'\\n                    });\\n                } else {\\n                    modalContent1.classList.remove(\\\"visually-hidden\\\");\\n                }\\n            }\\n        };\\n    };\\n});\"}","created_at":"2023-06-28T15:14:05.107+08:00","updated_at":"2023-06-28T15:21:51.554+08:00","name":"麥塊綜合練習：程式題 6","language":"web","screenshot":{"url":null},"parent_id":554302,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":55,"hashid":"36ysd88vz","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}