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

{"id":540559,"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  \u003clink rel=\\\"preconnect\\\" href=\\\"https://fonts.googleapis.com\\\" /\u003e\\n  \u003clink rel=\\\"preconnect\\\" href=\\\"https://fonts.gstatic.com\\\" crossorigin /\u003e\\n  \u003clink href=\\\"https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900\u0026family=Noto+Sans+TC:wght@800;900\u0026family=Open+Sans:wght@300\u0026display=swap\\\" rel=\\\"stylesheet\\\" /\u003e\\n  \u003cstyle\u003e\\n    *, code {\\n      font-family: \\\"Noto Sans Mono\\\";\\n    }\\n    body {\\n      font-family: \\\"Noto Sans Mono\\\";\\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    .question-container {\\n      margin-bottom: 2rem;\\n    }\\n    .code-display-wrapper {\\n      background-color: #1e1e1e;\\n      color: #fff;\\n      padding: 1rem;\\n      border-radius: 0;\\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-family: SFMono-Regular, Menlo, Monaco, Consolas, \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n      font-size: 0.9rem;\\n      line-height: 1.4;\\n    }\\n    .row {\\n      display: flex;\\n      flex-wrap: wrap;\\n      gap: 1rem;\\n    }\\n    .col-md-6 {\\n      flex: 1 1 calc(50% - 0.5rem);\\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    .option-radio-letter {\\n      font-weight: bold;\\n      margin-bottom: 0.5rem;\\n      display: block;\\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    #navbar {\\n      background: transparent;\\n      border: none;\\n      box-shadow: none;\\n    }\\n    .navbar {\\n      padding-bottom: 1rem;\\n    }\\n    .btn-primary {\\n      padding: 0.5rem 2rem;\\n      font-size: 1rem;\\n    }\\n    ::-webkit-scrollbar {\\n      width: 5px;\\n      height: 5px;\\n    }\\n    ::-webkit-scrollbar-track {\\n      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);\\n      -webkit-border-radius: 10px;\\n      border-radius: 10px;\\n    }\\n    ::-webkit-scrollbar-thumb {\\n      -webkit-border-radius: 10px;\\n      border-radius: 10px;\\n      background: rgba(255, 255, 255, 0.3);\\n      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);\\n    }\\n    ::-webkit-scrollbar-thumb:window-inactive {\\n      background: rgba(255, 255, 255, 0.3);\\n    }\\n    @media (max-width: 576px) {\\n      .col-md-6 {\\n        flex: 1 1 100%;\\n      }\\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=\\\"question-container\\\"\u003e\\n      \u003cp class=\\\"fs-5 p-0 mb-2\\\" 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\\\"\u003e\\n      \u003cdiv class=\\\"col-md-6\\\"\u003e\\n        \u003clabel for=\\\"flexRadioA\\\" id=\\\"flexRadioBoxA\\\" class=\\\"option-label p-3 border rounded\\\"\u003e\\n          \u003cspan class=\\\"option-radio-letter\\\"\u003eA\u003c/span\u003e\\n          \u003cinput value=\\\"A\\\" class=\\\"form-check-input\\\" type=\\\"radio\\\" name=\\\"flexRadioDefault\\\" id=\\\"flexRadioA\\\" /\u003e\\n          \u003cdiv class=\\\"code-display-wrapper\\\" id=\\\"outputWrapperA\\\" data-label=\\\"主控台\\\"\u003e\\n            \u003cpre\u003e\u003ccode class=\\\"outputBox-content\\\"\u003e\u003c/code\u003e\u003c/pre\u003e\\n          \u003c/div\u003e\\n        \u003c/label\u003e\\n      \u003c/div\u003e\\n      \u003cdiv class=\\\"col-md-6\\\"\u003e\\n        \u003clabel for=\\\"flexRadioB\\\" id=\\\"flexRadioBoxB\\\" class=\\\"option-label p-3 border rounded\\\"\u003e\\n          \u003cspan class=\\\"option-radio-letter\\\"\u003eB\u003c/span\u003e\\n          \u003cinput value=\\\"B\\\" class=\\\"form-check-input\\\" type=\\\"radio\\\" name=\\\"flexRadioDefault\\\" id=\\\"flexRadioB\\\" /\u003e\\n          \u003cdiv class=\\\"code-display-wrapper\\\" id=\\\"outputWrapperB\\\" data-label=\\\"主控台\\\"\u003e\\n            \u003cpre\u003e\u003ccode class=\\\"outputBox-content\\\"\u003e\u003c/code\u003e\u003c/pre\u003e\\n          \u003c/div\u003e\\n        \u003c/label\u003e\\n      \u003c/div\u003e\\n      \u003cdiv class=\\\"col-md-6\\\"\u003e\\n        \u003clabel for=\\\"flexRadioC\\\" id=\\\"flexRadioBoxC\\\" class=\\\"option-label p-3 border rounded\\\"\u003e\\n          \u003cspan class=\\\"option-radio-letter\\\"\u003eC\u003c/span\u003e\\n          \u003cinput value=\\\"C\\\" class=\\\"form-check-input\\\" type=\\\"radio\\\" name=\\\"flexRadioDefault\\\" id=\\\"flexRadioC\\\" /\u003e\\n          \u003cdiv class=\\\"code-display-wrapper\\\" id=\\\"outputWrapperC\\\" data-label=\\\"主控台\\\"\u003e\\n            \u003cpre\u003e\u003ccode class=\\\"outputBox-content\\\"\u003e\u003c/code\u003e\u003c/pre\u003e\\n          \u003c/div\u003e\\n        \u003c/label\u003e\\n      \u003c/div\u003e\\n      \u003cdiv class=\\\"col-md-6\\\"\u003e\\n        \u003clabel for=\\\"flexRadioD\\\" id=\\\"flexRadioBoxD\\\" class=\\\"option-label p-3 border rounded\\\"\u003e\\n          \u003cspan class=\\\"option-radio-letter\\\"\u003eD\u003c/span\u003e\\n          \u003cinput value=\\\"D\\\" class=\\\"form-check-input\\\" type=\\\"radio\\\" name=\\\"flexRadioDefault\\\" id=\\\"flexRadioD\\\" /\u003e\\n          \u003cdiv class=\\\"code-display-wrapper\\\" id=\\\"outputWrapperD\\\" data-label=\\\"主控台\\\"\u003e\\n            \u003cpre\u003e\u003ccode class=\\\"outputBox-content\\\"\u003e\u003c/code\u003e\u003c/pre\u003e\\n          \u003c/div\u003e\\n        \u003c/label\u003e\\n      \u003c/div\u003e\\n    \u003c/div\u003e\\n\\n    \u003cdiv id=\\\"answerBox\\\" class=\\\"visually-hidden\\\"\u003e\\n      \u003cdiv class=\\\"row\\\"\u003e\\n        \u003cdiv class=\\\"col-12\\\"\u003e\\n          \u003cdiv class=\\\"fs-6 p-0 mt-3 mb-2\\\"\u003e\\n            答案：\u003cspan class=\\\"fs-6 p-0 fw-bold text-danger\\\" id=\\\"answerText\\\"\u003e\u003c/span\u003e\\n          \u003c/div\u003e\\n          \u003cdiv class=\\\"fs-6 p-0 mb-3\\\" id=\\\"answerDescription\\\"\u003e說明：\u003c/div\u003e\\n        \u003c/div\u003e\\n      \u003c/div\u003e\\n    \u003c/div\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=\\\"btn btn-primary px-5 my-2 mx-1 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=\\\"Close\\\"\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 price = 500;\\nif (price \u003e 1000) {\\n    console.log(\\\"昂貴\\\");\\n} else if (price \u003e 500) {\\n    console.log(\\\"中等價格\\\");\\n} else if (price \u003e 100) {\\n    console.log(\\\"便宜\\\");\\n} else {\\n    console.log(\\\"非常便宜\\\");\\n}`\\n      },\\n      \\\"options\\\": [\\n        \\\"昂貴\\\",\\n        \\\"中等價格\\\",\\n        \\\"便宜\\\",\\n        \\\"非常便宜\\\"\\n      ],\\n      \\\"answer\\\": \\\"便宜\\\",\\n      \\\"answerDescription\\\": \\\"這段程式一開始用 \u003ccode\u003elet\u003c/code\u003e 設定了一個變數 \u003ccode\u003eprice\u003c/code\u003e，它的值是 \u003ccode\u003e500\u003c/code\u003e。接下來用 \u003ccode\u003eif\u003c/code\u003e 判斷來看看 \u003ccode\u003eprice\u003c/code\u003e 是不是很高。第一個條件是 \u003ccode\u003eprice \u003e 1000\u003c/code\u003e，但 \u003ccode\u003e500\u003c/code\u003e 沒有大於 \u003ccode\u003e1000\u003c/code\u003e，所以不會印出「昂貴」。第二個條件是 \u003ccode\u003eprice \u003e 500\u003c/code\u003e，但 \u003ccode\u003e500\u003c/code\u003e 也沒有大於 \u003ccode\u003e500\u003c/code\u003e，所以也不會印出「中等價格」。第三個條件是 \u003ccode\u003eprice \u003e 100\u003c/code\u003e，這次成立了，因為 \u003ccode\u003e500\u003c/code\u003e 大於 \u003ccode\u003e100\u003c/code\u003e，所以會印出「便宜」。因為已經找到符合的條件，後面的 \u003ccode\u003eelse\u003c/code\u003e 就不會執行了。所以最後畫面上會出現「便宜」。\\\"\\n    };\\n\\n    function countLines(str) {\\n      if (!str) return 1;\\n      return (str.match(/\\\\n/g) || []).length + 1;\\n    }\\n\\n    function shuffle(arr) {\\n      const n = arr.length;\\n      let shuffledArr = [...arr];\\n      for (let i = n - 1; i \u003e 0; i--) {\\n        const rand = Math.floor(Math.random() * (i + 1));\\n        [shuffledArr[i], shuffledArr[rand]] = [shuffledArr[rand], shuffledArr[i]];\\n      }\\n      return shuffledArr;\\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 optionLabels = {\\n      A: document.getElementById('flexRadioBoxA'),\\n      B: document.getElementById('flexRadioBoxB'),\\n      C: document.getElementById('flexRadioBoxC'),\\n      D: document.getElementById('flexRadioBoxD')\\n    };\\n    const optionInputs = {\\n      A: document.getElementById('flexRadioA'),\\n      B: document.getElementById('flexRadioB'),\\n      C: document.getElementById('flexRadioC'),\\n      D: document.getElementById('flexRadioD')\\n    };\\n    const outputWrappers = {\\n      A: document.getElementById('outputWrapperA'),\\n      B: document.getElementById('outputWrapperB'),\\n      C: document.getElementById('outputWrapperC'),\\n      D: document.getElementById('outputWrapperD')\\n    };\\n    const outputContents = {\\n      A: outputWrappers.A.querySelector('.outputBox-content'),\\n      B: outputWrappers.B.querySelector('.outputBox-content'),\\n      C: outputWrappers.C.querySelector('.outputBox-content'),\\n      D: outputWrappers.D.querySelector('.outputBox-content')\\n    };\\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 navbar = document.getElementById('navbar');\\n    const modalBodyContent = document.getElementById('modalBodyContent');\\n    const resultModal = new bootstrap.Modal(document.getElementById('resultModal'));\\n\\n    let shuffledOptions = [];\\n    let correctAnswerOptionKey = '';\\n    let answered = false;\\n    let attempts = 0;\\n    const maxAttempts = 3;\\n\\n    function initializeQuiz() {\\n      shuffledOptions = shuffle(data.options);\\n\\n      questionDescription.textContent = data.question.description;\\n      questionCodeContent.textContent = data.question.code;\\n      adjustHeight(questionCodeWrapper, data.question.code);\\n\\n      const optionKeys = ['A', 'B', 'C', 'D'];\\n      optionKeys.forEach((key, index) =\u003e {\\n        const optionText = shuffledOptions[index];\\n        optionInputs[key].setAttribute('data-option-index', index);\\n        outputContents[key].textContent = optionText;\\n        adjustHeight(outputWrappers[key], optionText);\\n        if (optionText === data.answer) {\\n          correctAnswerOptionKey = key;\\n        }\\n      });\\n\\n      if (loadingTool) loadingTool.remove();\\n      mainContent.classList.remove('visually-hidden');\\n    }\\n\\n    function adjustHeight(wrapperElement, textContent) {\\n      const lines = countLines(textContent);\\n      const lineHeight = 20;\\n      const padding = 20;\\n      const minHeight = 100;\\n      let calculatedHeight = lines * lineHeight + padding;\\n      wrapperElement.style.height = Math.max(minHeight, calculatedHeight) + 'px';\\n    }\\n\\n    Object.keys(optionLabels).forEach(key =\u003e {\\n      optionLabels[key].addEventListener('click', () =\u003e {\\n        if (answered) return;\\n        Object.values(optionLabels).forEach(label =\u003e label.classList.remove('selected'));\\n        optionLabels[key].classList.add('selected');\\n        sendBtn.classList.remove('disabled');\\n      });\\n    });\\n\\n    sendBtn.addEventListener('click', () =\u003e {\\n      if (answered || sendBtn.classList.contains('disabled')) return;\\n\\n      let selectedOptionKey = null;\\n      Object.keys(optionInputs).forEach(key =\u003e {\\n        if (optionInputs[key].checked) {\\n          selectedOptionKey = key;\\n        }\\n      });\\n\\n      if (!selectedOptionKey) return;\\n\\n      const selectedIndex = parseInt(optionInputs[selectedOptionKey].getAttribute('data-option-index'));\\n      const selectedOptionValue = shuffledOptions[selectedIndex];\\n      const isCorrect = (selectedOptionValue === data.answer);\\n\\n      attempts++;\\n\\n      if (isCorrect || attempts \u003e= maxAttempts) {\\n        answered = true;\\n        sendBtn.classList.add('disabled');\\n        if (navbar) navbar.remove();\\n\\n        answerText.textContent = correctAnswerOptionKey;\\n        answerDescription.innerHTML = \\\"說明：\\\" + data.answerDescription;\\n        answerBox.classList.remove('visually-hidden');\\n\\n        modalBodyContent.textContent = isCorrect\\n          ? '恭喜你答對囉！可以比對一下答案的說明跟你想的是否相同唷！'\\n          : `可惜還是答錯！正確答案是 ${correctAnswerOptionKey}。請查看下方的答案和說明，重新思考看看吧！`;\\n        resultModal.show();\\n\\n        setTimeout(() =\u003e {\\n          answerBox.scrollIntoView({ behavior: 'smooth', block: 'start' });\\n        }, 300);\\n      } else {\\n        modalBodyContent.textContent = '答錯囉！回到題目中再想想看吧！';\\n        resultModal.show();\\n        optionLabels[selectedOptionKey].classList.remove('selected');\\n        optionInputs[selectedOptionKey].checked = false;\\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-27T10:39:04.789+08:00","updated_at":"2025-03-29T14:28:01.546+08:00","name":"【練習】基礎語法：比較運算 1","language":"web","screenshot":{"url":"https://cdn6.koding.school/uploads/project/screenshot/540559/270c940c4ef294086d7ae8afa3bfdcb4.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":136,"hashid":"4y3szmw84","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}

[{"id":12335816,"file_name":"C1.png","project_id":540559,"asset_id":633362,"created_at":"2023-05-27T10:39:15.779+08:00","updated_at":"2023-05-27T10:39:15.779+08:00"},{"id":12335817,"file_name":"C2.png","project_id":540559,"asset_id":633363,"created_at":"2023-05-27T10:39:15.784+08:00","updated_at":"2023-05-27T10:39:15.784+08:00"},{"id":12335818,"file_name":"B1.png","project_id":540559,"asset_id":633364,"created_at":"2023-05-27T10:39:15.789+08:00","updated_at":"2023-05-27T10:39:15.789+08:00"},{"id":12335819,"file_name":"B2.png","project_id":540559,"asset_id":633365,"created_at":"2023-05-27T10:39:15.796+08:00","updated_at":"2023-05-27T10:39:15.796+08:00"},{"id":12335820,"file_name":"D1.png","project_id":540559,"asset_id":633366,"created_at":"2023-05-27T10:39:15.801+08:00","updated_at":"2023-05-27T10:39:15.801+08:00"},{"id":12335821,"file_name":"D2.png","project_id":540559,"asset_id":633367,"created_at":"2023-05-27T10:39:15.810+08:00","updated_at":"2023-05-27T10:39:15.810+08:00"},{"id":12335822,"file_name":"A1.png","project_id":540559,"asset_id":633368,"created_at":"2023-05-27T10:39:15.817+08:00","updated_at":"2023-05-27T10:39:15.817+08:00"},{"id":12335823,"file_name":"A2.png","project_id":540559,"asset_id":633369,"created_at":"2023-05-27T10:39:15.822+08:00","updated_at":"2023-05-27T10:39:15.822+08:00"}]