【財商數學創客營】保險賓果 | 程式專案

{"id":853090,"student_id":2589,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\r\\n\u003chtml lang=\\\"zh-Hant\\\"\u003e\\r\\n\u003chead\u003e\\r\\n    \u003cmeta charset=\\\"UTF-8\\\"\u003e\\r\\n    \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\r\\n    \u003ctitle\u003e隨機抽選\u003c/title\u003e\\r\\n    \u003clink rel=\\\"stylesheet\\\" href=\\\"styles.css\\\"\u003e\\r\\n\u003c/head\u003e\\r\\n\u003cbody\u003e\\r\\n    \u003cdiv class=\\\"container\\\"\u003e\\r\\n        \u003ch1\u003e⭐保險賓果⭐\u003c/h1\u003e\\r\\n        \u003cdiv class=\\\"button-container\\\"\u003e\\r\\n            \u003cbutton id=\\\"draw-button\\\"\u003e抽選\u003c/button\u003e\\r\\n            \u003cbutton id=\\\"answer-button\\\"\u003e答案\u003c/button\u003e\\r\\n        \u003c/div\u003e\\r\\n        \u003cdiv id=\\\"result\\\" class=\\\"result\\\"\u003e\u003c/div\u003e\\r\\n    \u003c/div\u003e\\r\\n    \u003cscript src=\\\"script.js\\\"\u003e\u003c/script\u003e\\r\\n\u003c/body\u003e\\r\\n\u003c/html\u003e\\r\\n\",\"css\":\"* {\\r\\n    box-sizing: border-box;\\r\\n    margin: 0;\\r\\n    padding: 0;\\r\\n}\\r\\n\\r\\nbody {\\r\\n    font-family: Arial, sans-serif;\\r\\n    background-color: #f4f4f4;\\r\\n    display: flex;\\r\\n    justify-content: center;\\r\\n    align-items: center;\\r\\n    height: 100vh;\\r\\n}\\r\\n\\r\\n.container {\\r\\n    width: 1200px;\\r\\n    height: 900px;\\r\\n    background-color: white;\\r\\n    border-radius: 20px;\\r\\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\\r\\n    display: flex;\\r\\n    flex-direction: column;\\r\\n    align-items: center;\\r\\n    justify-content: center;\\r\\n}\\r\\n\\r\\nh1 {\\r\\n    margin-bottom: 20px;\\r\\n    font-size: 40px;\\r\\n}\\r\\n\\r\\n.button-container {\\r\\n    display: flex;\\r\\n    gap: 20px; /* 使按鈕之間有空隙 */\\r\\n}\\r\\n\\r\\nbutton {\\r\\n    padding: 15px 30px;\\r\\n    font-size: 24px;\\r\\n    border-radius: 10px;\\r\\n    border: none;\\r\\n    cursor: pointer;\\r\\n    transition: background-color 0.3s;\\r\\n}\\r\\n\\r\\n#draw-button {\\r\\n    background-color: #007bff;\\r\\n    color: white;\\r\\n}\\r\\n\\r\\n#draw-button:hover {\\r\\n    background-color: #0056b3;\\r\\n}\\r\\n\\r\\n#answer-button {\\r\\n    background-color: #ffc107; /* 黃色 */\\r\\n    color: black;\\r\\n}\\r\\n\\r\\n#answer-button:hover {\\r\\n    background-color: #e0a800; /* 深黃色 */\\r\\n}\\r\\n\\r\\n.result {\\r\\n    margin-top: 30px;\\r\\n    font-size: 28px;\\r\\n    border-radius: 10px;\\r\\n    padding: 30px;\\r\\n    background-color: #e9ecef;\\r\\n    width: 80%;\\r\\n    height: 170px; /* 固定高度 */\\r\\n    text-align: left; \\r\\n    overflow: auto; /* 超出顯示滾動條 */\\r\\n    \\r\\n}\\r\\n\\r\\n.answer {\\r\\n    color: red; /* 答案顏色為紅色 */\\r\\n    margin-top: 35px; /* 答案與抽中內容之間的間距 */\\r\\n    text-align: right;\\r\\n}\\r\\n\",\"js\":\"const drawButton = document.getElementById(\\\"draw-button\\\");\\r\\nconst answerButton = document.getElementById(\\\"answer-button\\\");\\r\\nconst resultDiv = document.getElementById(\\\"result\\\");\\r\\n\\r\\nlet selectedItem = \\\"\\\";\\r\\nlet hasAnswered = false; // 標記是否已經回答過\\r\\nlet drawnIndexes = []; // 已經抽取過的索引\\r\\n\\r\\n// 抽選內容，所有內容後面加上句號\\r\\nconst items = [\\r\\n    \\\"叔叔因疾病去世。\\\",\\r\\n    \\\"家裡的主要收入來源者因意外事故去世。\\\",\\r\\n    \\\"爺爺去世，孫子成為了受益人。\\\",\\r\\n    \\\"阿伯因車禍去世。\\\",\\r\\n    \\\"家中唯一的經濟來源者因突發疾病過世。\\\",\\r\\n    \\\"媽媽生病住院，需要接受長期治療。\\\",\\r\\n    \\\"小花因為骨折住院。\\\",\\r\\n    \\\"小明因重感冒住院治療。\\\",\\r\\n    \\\"爺爺需要進行心臟手術住院。\\\",\\r\\n    \\\"媽媽因肺炎需要住院觀察一週。\\\",\\r\\n    \\\"小明在游泳池邊滑倒，摔傷了牙齒。\\\",\\r\\n    \\\"爸爸在家中修理家具時不慎砸到手，導致骨折。\\\",\\r\\n    \\\"小花在戶外活動時被足球擊中，導致眼睛受傷。\\\",\\r\\n    \\\"爸爸在騎自行車時摔倒，導致膝蓋受傷。\\\",\\r\\n    \\\"小明在學校的操場上摔傷了手腕。\\\",\\r\\n    \\\"爸爸開車發生車禍，對方受傷。\\\",\\r\\n    \\\"媽媽開車不小心撞到行人。\\\",\\r\\n    \\\"爸爸在開車時與另一輛車相撞，對方駕駛受傷。\\\",\\r\\n    \\\"爸爸在路口發生了追尾事故，對方駕駛受傷。\\\",\\r\\n    \\\"家中的車子在雨天打滑撞到其他車輛，導致對方受傷。\\\",\\r\\n    \\\"家裡廚房起火，導致部分房屋損壞。\\\",\\r\\n    \\\"電線短路引起火災，導致家裡家具損毀。\\\",\\r\\n    \\\"鄰居家火災蔓延到自己家，導致房屋受損。\\\",\\r\\n    \\\"客廳的電器短路引發小火災，損壞了牆壁和家具。\\\",\\r\\n    \\\"爺爺的書房因為放置的燭火未熄滅而引發火災。\\\",\\r\\n    \\\"家人搭乘的飛機因為天氣原因延誤。\\\",\\r\\n    \\\"小明的行李在旅途中丟失。\\\",\\r\\n    \\\"航班因機械故障取消，旅行計畫被打亂。\\\",\\r\\n    \\\"在國外旅遊時，重要旅行文件如護照丟失。\\\",\\r\\n    \\\"飛機延誤導致錯過轉機航班，必須重新安排行程。\\\"\\r\\n];\\r\\n\\r\\n// 答案對應\\r\\nconst answers = [\\r\\n    \\\"人壽保險\\\",\\r\\n    \\\"人壽保險\\\",\\r\\n    \\\"人壽保險\\\",\\r\\n    \\\"人壽保險\\\",\\r\\n    \\\"人壽保險\\\",\\r\\n    \\\"醫療險\\\",\\r\\n    \\\"醫療險\\\",\\r\\n    \\\"醫療險\\\",\\r\\n    \\\"醫療險\\\",\\r\\n    \\\"醫療險\\\",\\r\\n    \\\"意外險\\\",\\r\\n    \\\"意外險\\\",\\r\\n    \\\"意外險\\\",\\r\\n    \\\"意外險\\\",\\r\\n    \\\"意外險\\\",\\r\\n    \\\"汽車強制險\\\",\\r\\n    \\\"汽車強制險\\\",\\r\\n    \\\"汽車強制險\\\",\\r\\n    \\\"汽車強制險\\\",\\r\\n    \\\"汽車強制險\\\",\\r\\n    \\\"住宅火災險\\\",\\r\\n    \\\"住宅火災險\\\",\\r\\n    \\\"住宅火災險\\\",\\r\\n    \\\"住宅火災險\\\",\\r\\n    \\\"住宅火災險\\\",\\r\\n    \\\"旅行不便險\\\",\\r\\n    \\\"旅行不便險\\\",\\r\\n    \\\"旅行不便險\\\",\\r\\n    \\\"旅行不便險\\\",\\r\\n    \\\"旅行不便險\\\"\\r\\n];\\r\\n\\r\\n// 隨機抽選且確保不重複\\r\\ndrawButton.addEventListener(\\\"click\\\", () =\u003e {\\r\\n    if (drawnIndexes.length \u003c items.length) {\\r\\n        let randomIndex;\\r\\n        do {\\r\\n            randomIndex = Math.floor(Math.random() * items.length);\\r\\n        } while (drawnIndexes.includes(randomIndex));\\r\\n\\r\\n        drawnIndexes.push(randomIndex);\\r\\n        selectedItem = items[randomIndex];\\r\\n        hasAnswered = false; // 重置答案狀態\\r\\n        resultDiv.innerHTML = `${selectedItem}`; // 使用innerHTML以支持換行\\r\\n        answerButton.classList.remove(\\\"disabled\\\"); // 啟用答案按鈕\\r\\n        answerButton.style.display = \\\"inline-block\\\"; // 顯示答案按鈕\\r\\n        answerButton.style.pointerEvents = \\\"auto\\\"; // 重新啟用按鈕點擊事件\\r\\n        answerButton.style.opacity = \\\"1\\\";\\r\\n    } else {\\r\\n        resultDiv.innerHTML = \\\"所有項目已經抽完。\\\";\\r\\n        answerButton.style.display = \\\"none\\\"; // 隱藏答案按鈕\\r\\n    }\\r\\n});\\r\\n\\r\\nanswerButton.addEventListener(\\\"click\\\", () =\u003e {\\r\\n    if (!hasAnswered) {\\r\\n        const index = items.indexOf(selectedItem);\\r\\n        if (index !== -1) {\\r\\n            resultDiv.innerHTML += `\u003cdiv class=\\\"answer\\\"\u003e答案：${answers[index]}\u003c/div\u003e`;\\r\\n            hasAnswered = true;\\r\\n            answerButton.style.pointerEvents = \\\"none\\\"; // 禁用答案按鈕\\r\\n            answerButton.style.opacity = \\\"0.5\\\"; // 淡化按鈕顯示\\r\\n        }\\r\\n    }\\r\\n});\\r\\n\"}","created_at":"2024-10-03T11:23:08.062+08:00","updated_at":"2024-10-03T11:27:12.994+08:00","name":"【財商數學創客營】保險賓果","language":"web","screenshot":{"url":"https://cdn4.koding.school/uploads/project/screenshot/853090/09a9339661a77febd1044b3940afbe25.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":3,"hashid":"wdksmz589","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}