【練習】基礎語法：賦值簡寫 3 | 程式專案

{"id":542411,"student_id":2589,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"zh-Hant\\\"\u003e\\n\u003chead\u003e\\n  \u003cmeta charset=\\\"UTF-8\\\" /\u003e\\n  \u003ctitle\u003e程式測驗\u003c/title\u003e\\n  \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\" /\u003e\\n  \u003clink href=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css\\\" rel=\\\"stylesheet\\\" /\u003e\\n  \u003cstyle\u003e\\n    *, code {\\n      font-family: \\\"Noto Sans Mono\\\", monospace;\\n    }\\n    body {\\n      background-color: #fff;\\n      color: #212529;\\n      margin: 0;\\n      padding-bottom: 100px;\\n    }\\n    #main {\\n      width: 100vw;\\n      margin: 0 auto;\\n      padding: 2rem 1rem 5rem;\\n    }\\n    #loadingTool {\\n      position: absolute;\\n      top: 50%;\\n      left: 50%;\\n      transform: translate(-50%, -50%);\\n    }\\n    .code-display-wrapper {\\n      background-color: #1e1e1e;\\n      color: #fff;\\n      padding: 1rem;\\n      position: relative;\\n      min-height: 150px;\\n      overflow: auto;\\n    }\\n    .code-display-wrapper::after {\\n      content: attr(data-label);\\n      position: absolute;\\n      bottom: 8px;\\n      right: 12px;\\n      font-size: 0.75rem;\\n      color: rgba(255, 255, 255, 0.6);\\n    }\\n    .code-display-wrapper pre {\\n      margin: 0;\\n      white-space: pre-wrap;\\n      word-wrap: break-word;\\n      font-size: 0.9rem;\\n      line-height: 1.4;\\n    }\\n    .option-label {\\n      display: block;\\n      cursor: pointer;\\n      padding: 0;\\n      background-color: transparent;\\n      border: none;\\n      transition: background-color 0.2s ease-in-out;\\n    }\\n    .option-label:hover {\\n      background-color: #f1f1f1;\\n    }\\n    .option-label.selected {\\n      background-color: #e7f1ff;\\n    }\\n    .form-check-input {\\n      display: none;\\n    }\\n    #answerBox {\\n      margin-top: 2rem;\\n      padding-top: 1rem;\\n      border-top: 1px solid #dee2e6;\\n    }\\n    .btn-primary {\\n      padding: 0.5rem 2rem;\\n      font-size: 1rem;\\n    }\\n  \u003c/style\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n  \u003cdiv class=\\\"position-absolute top-50 start-50 translate-middle\\\" 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  \u003cdiv class=\\\"container visually-hidden\\\" id=\\\"main\\\"\u003e\\n    \u003cdiv id=\\\"question\\\" class=\\\"mb-4\\\"\u003e\\n      \u003cp class=\\\"fs-5\\\" id=\\\"questionDescription\\\"\u003e\u003c/p\u003e\\n      \u003cdiv class=\\\"code-display-wrapper\\\" id=\\\"questionCodeWrapper\\\" data-label=\\\"程式碼\\\"\u003e\\n        \u003cpre\u003e\u003ccode id=\\\"questionCodeContent\\\"\u003e\u003c/code\u003e\u003c/pre\u003e\\n      \u003c/div\u003e\\n    \u003c/div\u003e\\n\\n    \u003cdiv class=\\\"row\\\" id=\\\"optionsRow\\\"\u003e\\n      \u003c!-- 選項會由 JS 動態產生 --\u003e\\n    \u003c/div\u003e\\n\\n    \u003cdiv id=\\\"answerBox\\\" class=\\\"visually-hidden\\\"\u003e\\n      \u003cdiv class=\\\"fs-6 mt-3 mb-2\\\"\u003e\\n        答案：\u003cspan class=\\\"fw-bold text-danger\\\" id=\\\"answerText\\\"\u003e\u003c/span\u003e\\n      \u003c/div\u003e\\n      \u003cdiv class=\\\"fs-6\\\" id=\\\"answerDescription\\\"\u003e說明：\u003c/div\u003e\\n    \u003c/div\u003e\\n  \u003c/div\u003e\\n\\n  \u003cnav class=\\\"navbar fixed-bottom navbar-light bg-light\\\"\u003e\\n    \u003cdiv class=\\\"container-fluid justify-content-end\\\"\u003e\\n      \u003cbutton id=\\\"sendBtn\\\" class=\\\"btn btn-primary disabled\\\" data-bs-toggle=\\\"modal\\\" data-bs-target=\\\"#resultModal\\\"\u003e送出\u003c/button\u003e\\n    \u003c/div\u003e\\n  \u003c/nav\u003e\\n\\n  \u003cdiv class=\\\"modal fade\\\" id=\\\"resultModal\\\" tabindex=\\\"-1\\\" aria-labelledby=\\\"resultModalLabel\\\" aria-hidden=\\\"true\\\"\u003e\\n    \u003cdiv class=\\\"modal-dialog\\\"\u003e\\n      \u003cdiv class=\\\"modal-content\\\"\u003e\\n        \u003cdiv class=\\\"modal-header\\\"\u003e\\n          \u003ch5 class=\\\"modal-title\\\" id=\\\"resultModalLabel\\\"\u003e送出結果\u003c/h5\u003e\\n          \u003cbutton type=\\\"button\\\" class=\\\"btn-close\\\" data-bs-dismiss=\\\"modal\\\" aria-label=\\\"關閉\\\"\u003e\u003c/button\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"modal-body\\\" id=\\\"modalBodyContent\\\"\u003e\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://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js\\\"\u003e\u003c/script\u003e\\n  \u003cscript\u003e\\n    let data = {\\n      \\\"question\\\": {\\n        \\\"description\\\": \\\"請問執行下列程式後顯示的結果為何？\\\",\\n        \\\"code\\\": \\n`let num1 = 5;\\nlet num2 = 10;\\nnum1 += num1 + num2;\\nnum2 += num1 + num2;\\nconsole.log(num2);`\\n      },\\n      \\\"options\\\": [\\n        \\\"10\\\",\\n        \\\"20\\\",\\n        \\\"30\\\",\\n        \\\"40\\\"\\n      ],\\n      \\\"answer\\\": \\\"40\\\",\\n      \\\"answerDescription\\\": \\\"這段程式一開始用 \u003ccode\u003elet\u003c/code\u003e 建立了兩個變數：\u003ccode\u003enum1\u003c/code\u003e 是 \u003ccode\u003e5\u003c/code\u003e，\u003ccode\u003enum2\u003c/code\u003e 是 \u003ccode\u003e10\u003c/code\u003e。接下來的 \u003ccode\u003enum1 += num1 + num2\u003c/code\u003e 會先算 \u003ccode\u003enum1 + num2\u003c/code\u003e，也就是 \u003ccode\u003e5 + 10 = 15\u003c/code\u003e，然後再加上原本的 \u003ccode\u003enum1\u003c/code\u003e，所以 \u003ccode\u003enum1\u003c/code\u003e 變成 \u003ccode\u003e5 + 15 = 20\u003c/code\u003e。接著是 \u003ccode\u003enum2 += num1 + num2\u003c/code\u003e，這時 \u003ccode\u003enum1\u003c/code\u003e 是 \u003ccode\u003e20\u003c/code\u003e，\u003ccode\u003enum2\u003c/code\u003e 還是 \u003ccode\u003e10\u003c/code\u003e，所以 \u003ccode\u003enum1 + num2 = 20 + 10 = 30\u003c/code\u003e，再加上原本的 \u003ccode\u003enum2\u003c/code\u003e，變成 \u003ccode\u003e10 + 30 = 40\u003c/code\u003e。最後用 \u003ccode\u003econsole.log(num2)\u003c/code\u003e 把 \u003ccode\u003e40\u003c/code\u003e 印出來。\\\"\\n    };\\n\\n    const loadingTool = document.getElementById('loadingTool');\\n    const mainContent = document.getElementById('main');\\n    const questionDescription = document.getElementById('questionDescription');\\n    const questionCodeContent = document.getElementById('questionCodeContent');\\n    const questionCodeWrapper = document.getElementById('questionCodeWrapper');\\n    const optionsRow = document.getElementById('optionsRow');\\n    const sendBtn = document.getElementById('sendBtn');\\n    const answerBox = document.getElementById('answerBox');\\n    const answerText = document.getElementById('answerText');\\n    const answerDescription = document.getElementById('answerDescription');\\n    const modalBodyContent = document.getElementById('modalBodyContent');\\n    const resultModal = new bootstrap.Modal(document.getElementById('resultModal'));\\n\\n    let shuffledOptions = [];\\n    let correctAnswerKey = '';\\n    let selectedKey = null;\\n    let answered = false;\\n    let attempts = 0;\\n    const maxAttempts = 3;\\n\\n    function shuffle(arr) {\\n      const copy = [...arr];\\n      for (let i = copy.length - 1; i \u003e 0; i--) {\\n        const j = Math.floor(Math.random() * (i + 1));\\n        [copy[i], copy[j]] = [copy[j], copy[i]];\\n      }\\n      return copy;\\n    }\\n\\n    function initializeQuiz() {\\n      shuffledOptions = shuffle(data.options);\\n      questionDescription.textContent = data.question.description;\\n      questionCodeContent.textContent = data.question.code;\\n\\n      const optionKeys = ['A', 'B', 'C', 'D'];\\n      optionsRow.innerHTML = '';\\n\\n      optionKeys.forEach((key, index) =\u003e {\\n        const value = shuffledOptions[index];\\n        const col = document.createElement('div');\\n        col.className = 'col-md-6';\\n        col.innerHTML = `\\n          \u003clabel for=\\\"option${key}\\\" class=\\\"option-label p-3 border rounded\\\" id=\\\"label${key}\\\"\u003e\\n            \u003cspan class=\\\"option-radio-letter\\\"\u003e${key}\u003c/span\u003e\\n            \u003cinput type=\\\"radio\\\" name=\\\"option\\\" id=\\\"option${key}\\\" class=\\\"form-check-input\\\" /\u003e\\n            \u003cdiv class=\\\"code-display-wrapper\\\" data-label=\\\"主控台\\\"\u003e\\n              \u003cpre\u003e\u003ccode\u003e${value}\u003c/code\u003e\u003c/pre\u003e\\n            \u003c/div\u003e\\n          \u003c/label\u003e\\n        `;\\n        optionsRow.appendChild(col);\\n\\n        const input = col.querySelector('input');\\n        const label = col.querySelector('label');\\n\\n        input.addEventListener('change', () =\u003e {\\n          if (answered) return;\\n          selectedKey = key;\\n          document.querySelectorAll('.option-label').forEach(l =\u003e l.classList.remove('selected'));\\n          label.classList.add('selected');\\n          sendBtn.classList.remove('disabled');\\n        });\\n\\n        if (value === data.answer) {\\n          correctAnswerKey = key;\\n        }\\n      });\\n\\n      loadingTool.remove();\\n      mainContent.classList.remove('visually-hidden');\\n    }\\n\\n    sendBtn.addEventListener('click', () =\u003e {\\n      if (answered || !selectedKey) return;\\n\\n      const selectedValue = shuffledOptions[['A','B','C','D'].indexOf(selectedKey)];\\n      const isCorrect = selectedValue === data.answer;\\n      attempts++;\\n\\n      if (isCorrect || attempts \u003e= maxAttempts) {\\n        answered = true;\\n        sendBtn.classList.add('disabled');\\n        answerText.textContent = correctAnswerKey;\\n        answerDescription.innerHTML = \\\"說明：\\\" + data.answerDescription;\\n        answerBox.classList.remove('visually-hidden');\\n        modalBodyContent.textContent = isCorrect\\n          ? '恭喜你答對囉！可以比對一下答案的說明跟你想的是否相同唷！'\\n          : `可惜還是答錯！正確答案是 ${correctAnswerKey}。請查看下方的答案和說明，重新思考看看吧！`;\\n        resultModal.show();\\n        setTimeout(() =\u003e {\\n          answerBox.scrollIntoView({ behavior: 'smooth' });\\n        }, 300);\\n      } else {\\n        modalBodyContent.textContent = '答錯囉！回到題目中再想想看吧！';\\n        resultModal.show();\\n        document.getElementById(`label${selectedKey}`).classList.remove('selected');\\n        document.getElementById(`option${selectedKey}`).checked = false;\\n        selectedKey = null;\\n        sendBtn.classList.add('disabled');\\n      }\\n    });\\n\\n    setTimeout(initializeQuiz, 100);\\n  \u003c/script\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\\n\",\"css\":\"\",\"js\":\"\"}","created_at":"2023-05-28T10:52:36.190+08:00","updated_at":"2025-03-29T14:44:51.454+08:00","name":"【練習】基礎語法：賦值簡寫 3","language":"web","screenshot":{"url":"https://cdn6.koding.school/uploads/project/screenshot/542411/18b190d48581169d78091652dcbe9f0e.jpg"},"parent_id":542401,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":255,"hashid":"kdmsj24rj","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}

[{"id":12381635,"file_name":"C1.png","project_id":542411,"asset_id":633370,"created_at":"2023-05-28T10:52:36.201+08:00","updated_at":"2023-05-28T10:52:36.201+08:00"},{"id":12381636,"file_name":"C2.png","project_id":542411,"asset_id":633371,"created_at":"2023-05-28T10:52:36.203+08:00","updated_at":"2023-05-28T10:52:36.203+08:00"},{"id":12381637,"file_name":"B1.png","project_id":542411,"asset_id":633372,"created_at":"2023-05-28T10:52:36.204+08:00","updated_at":"2023-05-28T10:52:36.204+08:00"},{"id":12381638,"file_name":"B2.png","project_id":542411,"asset_id":633373,"created_at":"2023-05-28T10:52:36.206+08:00","updated_at":"2023-05-28T10:52:36.206+08:00"},{"id":12381639,"file_name":"D1.png","project_id":542411,"asset_id":633374,"created_at":"2023-05-28T10:52:36.207+08:00","updated_at":"2023-05-28T10:52:36.207+08:00"},{"id":12381640,"file_name":"D2.png","project_id":542411,"asset_id":633375,"created_at":"2023-05-28T10:52:36.209+08:00","updated_at":"2023-05-28T10:52:36.209+08:00"},{"id":12381641,"file_name":"A1.png","project_id":542411,"asset_id":633376,"created_at":"2023-05-28T10:52:36.210+08:00","updated_at":"2023-05-28T10:52:36.210+08:00"},{"id":12381642,"file_name":"A2.png","project_id":542411,"asset_id":633377,"created_at":"2023-05-28T10:52:36.212+08:00","updated_at":"2023-05-28T10:52:36.212+08:00"}]