老師｜財富之路 2.0 | 程式專案

{"id":847536,"student_id":2589,"content":"{\"html\":\"\u003c!doctype html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n    \u003cmeta charset=\\\"utf-8\\\"\u003e\\n    \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\"\u003e\\n    \u003clink rel=\\\"stylesheet\\\" href=\\\"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css\\\" integrity=\\\"sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ==\\\" crossorigin=\\\"anonymous\\\" referrerpolicy=\\\"no-referrer\\\" /\u003e\\n    \u003clink href=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css\\\" rel=\\\"stylesheet\\\" integrity=\\\"sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0\\\" crossorigin=\\\"anonymous\\\"\u003e\\n    \u003ctitle\u003e老師｜財富之路\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv id=\\\"loading\\\"\u003e\\n        \u003cdiv class=\\\"spinner-border text-light\\\" role=\\\"status\\\"\u003e\\n            \u003cspan class=\\\"visually-hidden\\\"\u003eLoading...\u003c/span\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n    \u003cdiv id=\\\"content\\\" class=\\\"h-100\\\"\u003e\\n        \u003cimg src=\\\"avatar-8.png\\\" class=\\\"avatar\\\" id=\\\"avatar-8\\\" alt=\\\"Avatar 8\\\" draggable=\\\"false\\\"\u003e\\n        \u003cimg src=\\\"avatar-7.png\\\" class=\\\"avatar\\\" id=\\\"avatar-7\\\" alt=\\\"Avatar 7\\\" draggable=\\\"false\\\"\u003e\\n        \u003cimg src=\\\"avatar-6.png\\\" class=\\\"avatar\\\" id=\\\"avatar-6\\\" alt=\\\"Avatar 6\\\" draggable=\\\"false\\\"\u003e\\n        \u003cimg src=\\\"avatar-5.png\\\" class=\\\"avatar\\\" id=\\\"avatar-5\\\" alt=\\\"Avatar 5\\\" draggable=\\\"false\\\"\u003e\\n        \u003cimg src=\\\"avatar-4.png\\\" class=\\\"avatar\\\" id=\\\"avatar-4\\\" alt=\\\"Avatar 4\\\" draggable=\\\"false\\\"\u003e\\n        \u003cimg src=\\\"avatar-3.png\\\" class=\\\"avatar\\\" id=\\\"avatar-3\\\" alt=\\\"Avatar 3\\\" draggable=\\\"false\\\"\u003e\\n        \u003cimg src=\\\"avatar-2.png\\\" class=\\\"avatar\\\" id=\\\"avatar-2\\\" alt=\\\"Avatar 2\\\" draggable=\\\"false\\\"\u003e\\n        \u003cimg src=\\\"avatar-1.png\\\" class=\\\"avatar\\\" id=\\\"avatar-1\\\" alt=\\\"Avatar 1\\\" draggable=\\\"false\\\"\u003e\\n\\n        \u003c!-- \u003ch1\u003eHello, world!\u003c/h1\u003e --\u003e\\n        \u003cdiv class=\\\"container-fluid h-100\\\"\u003e\\n            \u003cdiv class=\\\"row h-100\\\"\u003e\\n                \u003cdiv class=\\\"col-12 col-md-8 h-100 p-3\\\"\u003e\\n                    \u003cdiv class=\\\"h-100 w-100 map-sec\\\"\u003e\\n                        \u003c!-- \u003cdiv class=\\\"h-100 w-100 text-sec\\\"\u003e\u003c/div\u003e --\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n                \u003cdiv class=\\\"col-12 col-md-4 h-100 p-3 form-sec\\\"\u003e\\n                    \u003cdiv class=\\\"container h-100 d-flex flex-column py-3\\\"\u003e\\n                        \u003cdiv class=\\\"row d-flex justify-content-between mb-3 mb-4\\\"\u003e\\n                            \u003cdiv class=\\\"col-12\\\"\u003e\\n                                \u003cselect id=\\\"game-round-select\\\" class=\\\"form-select form-select-lg w-100\\\" aria-label=\\\".form-select-lg example\\\"\u003e\\n                                \u003c/select\u003e\\n                            \u003c/div\u003e\\n                        \u003c/div\u003e\\n                        \u003cdiv class=\\\"row d-flex justify-content-between mb-3 mb-4\\\"\u003e\\n                            \u003cdiv class=\\\"col-12\\\"\u003e\\n                                \u003cselect id=\\\"insurance-round-select\\\" class=\\\"form-select form-select-lg\\\" aria-label=\\\".form-select-lg example\\\"\u003e\\n                                \u003c/select\u003e\\n                            \u003c/div\u003e\\n                        \u003c/div\u003e\\n                        \u003cdiv class=\\\"row d-flex justify-content-between mb-3 mb-4\\\"\u003e\\n                            \u003cdiv class=\\\"col-12\\\"\u003e\\n                                \u003cselect id=\\\"stock-round-select\\\" class=\\\"form-select form-select-lg\\\" aria-label=\\\".form-select-lg example\\\"\u003e\\n                                \u003c/select\u003e\\n                            \u003c/div\u003e\\n                        \u003c/div\u003e\\n                        \u003cdiv class=\\\"row d-flex justify-content-between mb-3 mb-4\\\"\u003e\\n                            \u003cdiv class=\\\"col-12\\\"\u003e\\n                                \u003cselect id=\\\"house-round-select\\\" class=\\\"form-select form-select-lg\\\" aria-label=\\\".form-select-lg example\\\"\u003e\\n                                \u003c/select\u003e\\n                            \u003c/div\u003e\\n                        \u003c/div\u003e\\n                        \u003cdiv class=\\\"row d-flex justify-content-between mb-4\\\"\u003e\\n                            \u003cdiv class=\\\"col-3\\\"\u003e\\n                                \u003cbutton id=\\\"stock-button\\\" type=\\\"button\\\" class=\\\"btn btn-lg btn-warning w-100 \\\"\u003e股票卡\u003c/button\u003e\\n                            \u003c/div\u003e\\n                            \u003cdiv class=\\\"col-3\\\"\u003e\\n                                \u003cbutton id=\\\"house-button\\\" type=\\\"button\\\" class=\\\"btn btn-lg btn-warning w-100 h-100\\\"\u003e房屋卡\u003c/button\u003e\\n                            \u003c/div\u003e\\n                            \u003cdiv class=\\\"col-3\\\"\u003e\\n                                \u003cbutton id=\\\"risk-button\\\" type=\\\"button\\\" class=\\\"btn btn-lg btn-danger w-100\\\"\u003e風險卡\u003c/button\u003e\\n                            \u003c/div\u003e\\n                            \u003cdiv class=\\\"col-3\\\"\u003e\\n                                \u003cbutton id=\\\"game-button\\\" type=\\\"button\\\" class=\\\"btn btn-lg btn-success w-100\\\"\u003e遊戲卡\u003c/button\u003e\\n                            \u003c/div\u003e\\n                        \u003c/div\u003e\\n                        \u003cdiv class=\\\"row d-flex justify-content-between flex-grow-1 \\\"\u003e\\n                            \u003cdiv class=\\\"col-12 h-100\\\"\u003e\\n                                \u003cdiv class=\\\"p-3 border border-light border-5 rounded position-relative h-100 bg-white\\\"\u003e\\n                                    \u003cdiv id=\\\"card-loading\\\"\u003e\\n                                        \u003cdiv class=\\\"spinner-border text-dark\\\" role=\\\"status\\\"\u003e\\n                                            \u003cspan class=\\\"visually-hidden\\\"\u003eLoading...\u003c/span\u003e\\n                                        \u003c/div\u003e\\n                                    \u003c/div\u003e\\n                                    \u003cdiv class=\\\"card-sec w-100 h-100\\\"\u003e\u003c/div\u003e\\n                                \u003c/div\u003e\\n                            \u003c/div\u003e\\n\\n                        \u003c/div\u003e\\n                    \u003c/div\u003e\\n\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n    \u003cscript src=\\\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js\\\" integrity=\\\"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==\\\" crossorigin=\\\"anonymous\\\" referrerpolicy=\\\"no-referrer\\\"\u003e\u003c/script\u003e\\n    \u003cscript src=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js\\\" integrity=\\\"sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8\\\" crossorigin=\\\"anonymous\\\"\u003e\u003c/script\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"* {\\n    font-weight: 700 !important;\\n}\\n\\n.btn-warning {\\n    color: #333;\\n    background-color: #f6c354;\\n    border-color: #f6c354;\\n}\\n.btn-warning:hover, .btn-warning:focus, .btn-warning:active:hover, .btn-warning:disabled {\\n    color: #333;\\n    background-color: #daaf4c;\\n    border-color: #daaf4c;\\n}\\n\\n.btn-danger {\\n    color: #fff;\\n    background-color: #ec706f;\\n    border-color: #ec706f;\\n}\\n.btn-danger:hover, .btn-danger:focus, .btn-danger:active:hover, .btn-danger:disabled {\\n    color: #fff;\\n    background-color: #cd6464;\\n    border-color: #cd6464;\\n}\\n \\n.btn-success {\\n    color: #fff;\\n    background-color: #019c94;\\n    border-color: #019c94;\\n}\\n.btn-success:hover, .btn-success:focus, .btn-success:active:hover, .btn-success:disabled {\\n    color: #fff;\\n    background-color: #00807a;\\n    border-color: #00807a;\\n}\\n\\n/* 設定整個頁面內容水平置中、內寬為 30 像素：*/\\nbody {\\n    position: relative;\\n    width: 100vw;\\n    /* height: 100vh; */\\n    height: calc(var(--vh,1vh) * 100);\\n    overflow: hidden;\\n    background-color: #333;\\n}\\n\\n.map-sec {\\n    background-image: url('map.svg');\\n    background-size: contain;\\n    /* 使背景圖片覆蓋整個容器 */\\n    background-position: center;\\n    /* 使背景圖片居中顯示 */\\n    background-repeat: no-repeat;\\n    /* 防止圖片重複 */\\n}\\n\\n.text-sec {\\n    background-image: url('財富之路.png');\\n    background-size: contain;\\n    /* 使背景圖片覆蓋整個容器 */\\n    background-position: center;\\n    /* 使背景圖片居中顯示 */\\n    background-repeat: no-repeat;\\n    /* 防止圖片重複 */\\n}\\n\\n.avatar {\\n    width: 2.5vw;\\n    height: auto;\\n    position: absolute;\\n    bottom: 50px;\\n    right: 50px;\\n    cursor: default;\\n    /* 初始為默認游標 */\\n    z-index: 999;\\n    object-fit: cover;\\n    border-radius: 50%;\\n    border: 2px #ffffff solid;\\n    padding: 2px;\\n    box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);\\n    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); */\\n}\\n\\n.card-sec {\\n    background-image: url('stock-1.png');\\n    background-size: contain;\\n    /* 使背景圖片覆蓋整個容器 */\\n    background-position: center;\\n    /* 使背景圖片居中顯示 */\\n    background-repeat: no-repeat;\\n    /* 防止圖片重複 */\\n}\\n\\n#card-heading {\\n    height: 50px;\\n    background-color: red;\\n}\\n\\n#card-body {\\n    background-color: blue;\\n}\\n\\n\\n.card {\\n    margin: 5px 0;\\n}\\n\\n/* 設定文字的顏色為淡黑色 */\\np {\\n    color: #555555;\\n}\\n\\n#content {\\n    display: none;\\n}\\n\\n#loading, #card-loading {\\n    width: 0;\\n    display: inline-block;\\n    position: absolute;\\n    top: 50%;\\n    left: 50%;\\n    transform: translate(-50%, -50%);\\n}\\n\\n#insurance-round-select {\\n    color: red;\\n}\",\"js\":\"function setVH() {\\n    let vh = $(window).height() * 0.01;\\n    $(':root').css('--vh', `${vh}px`);\\n}\\n\\n// 在加載和窗口調整大小時運行\\n$(window).on('resize', setVH);\\n$(window).on('load', setVH);\\n\\n$(document).ready(function() {\\n\\n    // 預先載入 MP3 文件\\n    var drawStockCardSound = new Audio('draw_stock_cards.mp3');\\n    drawStockCardSound.load(); // 預先加載音頻\\n    \\n    // 預先載入 MP3 文件\\n    var drawHouseCardSound = new Audio('draw_house_cards.mp3');\\n    drawHouseCardSound.load(); // 預先加載音頻\\n    \\n    // 預先載入 MP3 文件\\n    var drawRiskCardSound = new Audio('draw_risk_cards.mp3');\\n    drawRiskCardSound.load(); // 預先加載音頻\\n    \\n    // 預先載入 MP3 文件\\n    var drawGameCardSound = new Audio('draw_game_cards.mp3');\\n    drawGameCardSound.load(); // 預先加載音頻\\n    \\n    // 預先載入 MP3 文件\\n    var selectGameStageSound = new Audio('select_game_stage.mp3');\\n    selectGameStageSound.load(); // 預先加載音頻\\n    \\n    // 預先載入 MP3 文件\\n    var selectInsuranceStageSound = new Audio('select_insurance_stage.mp3');\\n    selectInsuranceStageSound.load(); // 預先加載音頻\\n    \\n    // 預先載入 MP3 文件\\n    var selectStockStageSound = new Audio('select_stock_stage.mp3');\\n    selectStockStageSound.load(); // 預先加載音頻\\n    \\n    // 預先載入 MP3 文件\\n    var selectHouseStageSound = new Audio('select_house_stage.mp3');\\n    selectHouseStageSound.load(); // 預先加載音頻\\n    \\n    var isDropdownOpen = false;\\n\\n    var imageSets = {\\n        stock: {\\n            loaded: false, images: []\\n        },\\n        game: {\\n            loaded: false, images: []\\n        },\\n        house: {\\n            loaded: false, images: []\\n        },\\n        risk: {\\n            loaded: false, images: []\\n        }\\n    };\\n\\n    // 预加载必要的图片（例如头像）\\n    var essentialImages = [\\n        \\\"avatar-1.png\\\",\\n        \\\"avatar-2.png\\\",\\n        \\\"avatar-3.png\\\",\\n        \\\"avatar-4.png\\\",\\n        \\\"avatar-5.png\\\",\\n        \\\"avatar-6.png\\\",\\n        \\\"avatar-7.png\\\",\\n        \\\"avatar-8.png\\\",\\n        \\\"game-1.png\\\",\\n        \\\"game-2.png\\\",\\n        \\\"game-3.png\\\",\\n        \\\"game-4.png\\\",\\n        \\\"game-5.png\\\",\\n        \\\"house-1.png\\\",\\n        \\\"house-2.png\\\",\\n        \\\"house-20.png\\\",\\n        \\\"house-3.png\\\",\\n        \\\"house-4.png\\\",\\n        \\\"house-5.png\\\",\\n        \\\"house-6.png\\\",\\n        \\\"house-7.png\\\",\\n        \\\"house-8.png\\\",\\n        \\\"house-9.png\\\",\\n        \\\"house-10.png\\\",\\n        \\\"house-11.png\\\",\\n        \\\"house-12.png\\\",\\n        \\\"house-13.png\\\",\\n        \\\"house-14.png\\\",\\n        \\\"house-15.png\\\",\\n        \\\"house-16.png\\\",\\n        \\\"house-17.png\\\",\\n        \\\"house-18.png\\\",\\n        \\\"house-19.png\\\",\\n        \\\"risk-1.png\\\",\\n        \\\"risk-2.png\\\",\\n        \\\"risk-3.png\\\",\\n        \\\"risk-4.png\\\",\\n        \\\"risk-5.png\\\",\\n        \\\"risk-6.png\\\",\\n        \\\"risk-7.png\\\",\\n        \\\"risk-8.png\\\",\\n        \\\"risk-9.png\\\",\\n        \\\"risk-10.png\\\",\\n        \\\"risk-11.png\\\",\\n        \\\"risk-12.png\\\",\\n        \\\"risk-13.png\\\",\\n        \\\"risk-14.png\\\",\\n        \\\"risk-15.png\\\",\\n        \\\"risk-16.png\\\",\\n        \\\"risk-17.png\\\",\\n        \\\"risk-18.png\\\",\\n        \\\"risk-19.png\\\",\\n        \\\"risk-20.png\\\",\\n        \\\"risk-21.png\\\",\\n        \\\"risk-22.png\\\",\\n        \\\"risk-23.png\\\",\\n        \\\"risk-24.png\\\",\\n        \\\"risk-25.png\\\",\\n        \\\"risk-26.png\\\",\\n        \\\"risk-27.png\\\",\\n        \\\"risk-28.png\\\",\\n        \\\"stock-1.png\\\",\\n        \\\"stock-2.png\\\",\\n        \\\"stock-3.png\\\",\\n        \\\"stock-4.png\\\",\\n        \\\"stock-5.png\\\",\\n        \\\"stock-6.png\\\",\\n        \\\"stock-7.png\\\",\\n        \\\"stock-8.png\\\",\\n        \\\"stock-9.png\\\",\\n        \\\"stock-10.png\\\",\\n        \\\"stock-11.png\\\",\\n        \\\"stock-12.png\\\",\\n        \\\"stock-13.png\\\",\\n        \\\"stock-14.png\\\",\\n        \\\"stock-15.png\\\",\\n        \\\"stock-16.png\\\",\\n        \\\"stock-17.png\\\",\\n        \\\"stock-18.png\\\",\\n        \\\"stock-19.png\\\",\\n        \\\"stock-20.png\\\",\\n        \\\"stock-21.png\\\",\\n        \\\"stock-22.png\\\",\\n        \\\"stock-23.png\\\",\\n        \\\"stock-24.png\\\",\\n        \\\"stock-25.png\\\",\\n        \\\"stock-26.png\\\",\\n        \\\"stock-27.png\\\",\\n        \\\"stock-28.png\\\",\\n        \\\"stock-29.png\\\",\\n        \\\"stock-30.png\\\",\\n        \\\"stock-31.png\\\",\\n        \\\"stock-32.png\\\",\\n        \\\"stock-33.png\\\",\\n        \\\"stock-34.png\\\",\\n        \\\"stock-35.png\\\",\\n        \\\"stock-36.png\\\"\\n    ];\\n\\n\\n    var essentialPromises = essentialImages.map(function(path) {\\n        return preloadImage(path).catch(function(failedPath) {\\n            console.error(\\\"Failed to load image:\\\", failedPath);\\n        });\\n    });\\n\\n    Promise.all(essentialPromises).then(function() {\\n        console.log(\\\"Essential images loaded\\\");\\n        $('#loading').hide();\\n        $('#content').show();\\n        $('#card-loading').hide();\\n    });\\n\\n\\n    function preloadImage(src) {\\n        return new Promise(function(resolve, reject) {\\n            var img = new Image();\\n            img.onload = function() {\\n                resolve(img);\\n            };\\n            img.onerror = function() {\\n                reject(src);\\n            };\\n            img.src = src;\\n        });\\n    }\\n\\n    let currentInterval; // 全局变量，用于存储当前的定时器\\n\\n    function changeImage(imagePrefix, maxImages, intervalTime, totalTime) {\\n\\n\\n        let currentImage = 1;\\n        let selectedImage = Math.floor(Math.random() * maxImages) + 1;\\n        let imageSet = imageSets[imagePrefix];\\n\\n        // 显示加载指示器\\n        $('#card-loading').show();\\n        $('.card-sec').hide();\\n        $('.card-sec').css('background-image', \\\"none\\\");\\n\\n        // 禁用所有按钮\\n        disableButtons(true);\\n\\n        if (!imageSet.loaded) {\\n            // 预加载此卡片组的图片\\n            let imagePromises = [];\\n            for (let i = 1; i \u003c= maxImages; i++) {\\n                imagePromises.push(preloadImage(`${imagePrefix}-${i}.png`));\\n            }\\n\\n            Promise.all(imagePromises).then(function(loadedImages) {\\n                imageSet.loaded = true;\\n                imageSet.images = loadedImages;\\n\\n                // 隐藏加载指示器并开始轮播\\n                $('#card-loading').hide();\\n                $('.card-sec').show();\\n\\n                startRotation();\\n            }).catch(function(err) {\\n                console.error(\\\"Error loading images:\\\", err);\\n                // 处理错误，重新启用按钮\\n                disableButtons(false);\\n                $('#card-loading').hide();\\n            });\\n        } else {\\n            // 图片已加载\\n            $('#card-loading').hide();\\n            $('.card-sec').show();\\n\\n            startRotation();\\n        }\\n\\n        function startRotation() {\\n            \\n            // 播放音效\\n            if(imagePrefix == \\\"stock\\\"){\\n                drawStockCardSound.currentTime = 0;\\n                drawStockCardSound.play();\\n            }\\n            if(imagePrefix == \\\"house\\\"){\\n                drawHouseCardSound.currentTime = 0;\\n                drawHouseCardSound.play();\\n            }\\n            if(imagePrefix == \\\"risk\\\"){\\n                drawRiskCardSound.currentTime = 0;\\n                drawRiskCardSound.play();\\n            }\\n            if(imagePrefix == \\\"game\\\"){\\n                drawGameCardSound.currentTime = 0;\\n                drawGameCardSound.play();\\n            }\\n            \\n            // 开始轮播动画\\n            currentInterval = setInterval(changeBackground, intervalTime);\\n\\n            // 在指定时间后停止轮播\\n            setTimeout(function() {\\n                clearInterval(currentInterval);\\n\\n                // 显示随机选中的图片\\n                $('.card-sec').css('background-image', `url(\\\"${imagePrefix}-${selectedImage}.png\\\")`);\\n\\n                // 重新启用按钮\\n                disableButtons(false);\\n            }, totalTime);\\n        }\\n\\n        function changeBackground() {\\n            $('.card-sec').css('background-image', `url(\\\"${imagePrefix}-${currentImage}.png\\\")`);\\n            currentImage = currentImage \u003c maxImages ? currentImage + 1: 1;\\n        }\\n    }\\n\\n    // 共用按钮禁用与启用逻辑\\n    function disableButtons(disable) {\\n        $('button').prop('disabled', disable);\\n    }\\n\\n    // 为每个按钮设置点击事件\\n    $('#stock-button').click(function() {\\n        changeImage('stock', 36, 100, 4000); // 6 秒\\n        $('#stock-round-select').css({\\n            'background-color': '#f6ef60'\\n        });\\n        $('#house-round-select').css({\\n            'background-color': '#ffffff'\\n        });\\n    });\\n    \\n    $('#house-button').click(function() {\\n        changeImage('house', 20, 100, 4000); // 6 秒\\n        \\n        $('#stock-round-select').css({\\n            'background-color': '#ffffff'\\n        });\\n        $('#house-round-select').css({\\n            'background-color': '#f6ef60'\\n        });\\n    });\\n    \\n    $('#risk-button').click(function() {\\n        changeImage('risk', 28, 100, 4500); // 6 秒\\n        $('#stock-round-select').css({\\n            'background-color': '#ffffff'\\n        });\\n        $('#house-round-select').css({\\n            'background-color': '#ffffff'\\n        });\\n    });\\n    \\n    $('#game-button').click(function() {\\n        changeImage('game', 5, 100, 4500); // 6 秒\\n        $('#stock-round-select').css({\\n            'background-color': '#ffffff'\\n        });\\n        $('#house-round-select').css({\\n            'background-color': '#ffffff'\\n        });\\n        \\n    });\\n    \\n    $('.avatar').mousedown(function() {\\n        $('#stock-round-select').css({\\n            'background-color': '#ffffff'\\n        });\\n        $('#house-round-select').css({\\n            'background-color': '#ffffff'\\n        });\\n        \\n    });\\n\\n    var gameRounds = [\\n        \\\"📍 第 1 回合：遊戲開始\\\",\\n        \\\"📍 第 2 回合\\\",\\n        \\\"📍 第 3 回合\\\",\\n        \\\"🔔 第 4 回合\\\",\\n        \\\"🔔 第 5 回合：發放房屋租金 🏠\\\",\\n        \\\"📍 第 6 回合：發放股票利息 📈\\\",\\n        \\\"🔔 第 7 回合\\\",\\n        \\\"📍 第 8 回合：發放儲蓄利息 🏦\\\",\\n        \\\"🔔 第 9 回合\\\",\\n        \\\"📍 第 10 回合：發放房屋租金 🏠\\\",\\n        \\\"🔔 第 11 回合\\\",\\n        \\\"📍 第 12 回合：發放股票利息 📈\\\",\\n        \\\"📍 第 13 回合\\\",\\n        \\\"🔔 第 14 回合\\\",\\n        \\\"🔔 第 15 回合：發放房屋租金 🏠\\\",\\n        \\\"📍 第 16 回合：發放儲蓄利息 🏦\\\"\\n    ];\\n\\n    // 取得 select 元素\\n    var selectElement = $('#game-round-select');\\n\\n    // 將陣列中的每個元素作為 option 添加到 select 中\\n    $.each(gameRounds, function(index, round) {\\n        selectElement.append($('\u003coption\u003e', {\\n            value: index + 1,\\n            text: round\\n        }));\\n    });\\n\\n    selectElement.val(1);\\n    \\n    var selectGameStage = $('#game-round-select');\\n    \\n    selectGameStage.on('mousedown', function() {\\n        selectGameStageSound.currentTime = 0;\\n        isDropdownOpen = true;\\n    });\\n\\n    selectGameStage.on('change', function() {\\n        if (isDropdownOpen) {\\n            selectGameStageSound.play();\\n            isDropdownOpen = false;\\n        }\\n    });\\n\\n    var stockRounds = [\\n        \\\"股票：第 5 階段 / 價格 +1000  / 股利 +250\\\",\\n        \\\"股票：第 4 階段 / 價格 +800  / 股利 +200\\\",\\n        \\\"股票：第 3 階段 / 價格 +600  / 股利 +150\\\",\\n        \\\"股票：第 2 階段 / 價格 +400  / 股利 +100\\\",\\n        \\\"股票：第 1 階段 / 價格 +200  / 股利 +50\\\",\\n        \\\"股票：第 0 階段 / 價格 +0  / 股利 +0\\\",\\n        \\\"股票：第 -1 階段 / 價格 -200  / 股利 -50\\\",\\n        \\\"股票：第 -2 階段 / 價格 -400  / 股利 -100\\\",\\n        \\\"股票：第 -3 階段 / 價格 -600  / 股利 -150\\\",\\n        \\\"股票：第 -4 階段 / 價格 -800  / 股利 -200\\\",\\n        \\\"股票：第 -5 階段 / 價格 -1000  / 股利 -250\\\"\\n    ];\\n\\n    // 取得 select 元素\\n    var selectElement = $('#stock-round-select');\\n\\n    // 將陣列中的每個元素作為 option 添加到 select 中\\n    $.each(stockRounds, function(index, round) {\\n        selectElement.append($('\u003coption\u003e', {\\n            value: index + 1,\\n            text: round\\n        }));\\n    });\\n\\n    selectElement.val(6);\\n    \\n    var selectStockStage = $('#stock-round-select');\\n    \\n    selectStockStage.on('mousedown', function() {\\n        selectStockStageSound.currentTime = 0;\\n        isDropdownOpen = true;\\n    });\\n\\n    selectStockStage.on('change', function() {\\n        if (isDropdownOpen) {\\n            selectStockStageSound.play();\\n            isDropdownOpen = false;\\n        }\\n    });\\n\\n    var houseRounds = [\\n        \\\"房屋：第 5 階段 / 價格 +1000\\\",\\n        \\\"房屋：第 4 階段 / 價格 +800\\\",\\n        \\\"房屋：第 3 階段 / 價格 +600\\\",\\n        \\\"房屋：第 2 階段 / 價格 +400\\\",\\n        \\\"房屋：第 1 階段 / 價格 +200\\\",\\n        \\\"房屋：第 0 階段 / 價格 +0\\\",\\n        \\\"房屋：第 -1 階段 / 價格 -200\\\",\\n        \\\"房屋：第 -2 階段 / 價格 -400\\\",\\n        \\\"房屋：第 -3 階段 / 價格 -600\\\",\\n        \\\"房屋：第 -4 階段 / 價格 -800\\\",\\n        \\\"房屋：第 -5 階段 / 價格 -1000\\\"\\n    ];\\n\\n    // 取得 select 元素\\n    var selectElement = $('#house-round-select');\\n\\n    // 將陣列中的每個元素作為 option 添加到 select 中\\n    $.each(houseRounds, function(index, round) {\\n        selectElement.append($('\u003coption\u003e', {\\n            value: index + 1,\\n            text: round\\n        }));\\n    });\\n\\n    selectElement.val(6);\\n    \\n    var selectHouseStage = $('#house-round-select');\\n    \\n    selectHouseStage.on('mousedown', function() {\\n        selectHouseStageSound.currentTime = 0;\\n        isDropdownOpen = true;\\n    });\\n\\n    selectHouseStage.on('change', function() {\\n        if (isDropdownOpen) {\\n            selectHouseStageSound.play();\\n            isDropdownOpen = false;\\n        }\\n    });\\n\\n    var insuranceRounds = [\\n        \\\"保險：賣完就沒囉！目前還有 10 張保險卡\\\",\\n        \\\"保險：賣完就沒囉！目前只剩下 9 張保險卡\\\",\\n        \\\"保險：賣完就沒囉！目前只剩下 8 張保險卡\\\",\\n        \\\"保險：賣完就沒囉！目前只剩下 7 張保險卡\\\",\\n        \\\"保險：賣完就沒囉！目前只剩下 6 張保險卡\\\",\\n        \\\"保險：賣完就沒囉！目前只剩下 5 張保險卡\\\",\\n        \\\"保險：賣完就沒囉！目前只剩下 4 張保險卡\\\",\\n        \\\"保險：賣完就沒囉！目前只剩下 3 張保險卡\\\",\\n        \\\"保險：賣完就沒囉！目前只剩下 2 張保險卡\\\",\\n        \\\"保險：賣完就沒囉！目前只剩下 1 張保險卡\\\",\\n        \\\"保險：沒有保險卡可以買囉！\\\",\\n    ];\\n\\n    // 取得 select 元素\\n    var selectElement = $('#insurance-round-select');\\n\\n    // 將陣列中的每個元素作為 option 添加到 select 中\\n    $.each(insuranceRounds, function(index, round) {\\n        selectElement.append($('\u003coption\u003e', {\\n            value: index + 1,\\n            text: round\\n        }));\\n    });\\n\\n    selectElement.val(1);\\n    \\n    var selectInsuranceStage = $('#insurance-round-select');\\n    \\n    selectInsuranceStage.on('mousedown', function() {\\n        selectInsuranceStageSound.currentTime = 0;\\n        isDropdownOpen = true;\\n    });\\n\\n    selectInsuranceStage.on('change', function() {\\n        if (isDropdownOpen) {\\n            selectInsuranceStageSound.play();\\n            isDropdownOpen = false;\\n        }\\n    });\\n\\n    function makeDraggable($element) {\\n        var isDragging = false;\\n        var offsetX, offsetY;\\n\\n        $element.on('mousedown touchstart', function(e) {\\n            e.preventDefault();\\n\\n            var clientX, clientY;\\n            if (e.type === 'touchstart') {\\n                clientX = e.touches[0].clientX;\\n                clientY = e.touches[0].clientY;\\n            } else {\\n                clientX = e.clientX;\\n                clientY = e.clientY;\\n            }\\n\\n            offsetX = clientX - $element.offset().left;\\n            offsetY = clientY - $element.offset().top;\\n\\n            if (!isDragging) {\\n                $(document).on('mousemove touchmove', onMove);\\n                $element.css('cursor', 'grab');\\n                isDragging = true;\\n            } else {\\n                $(document).off('mousemove touchmove', onMove);\\n                $element.css('cursor', 'default');\\n                isDragging = false;\\n            }\\n        });\\n\\n        function onMove(e) {\\n            var clientX, clientY;\\n            if (e.type === 'touchmove') {\\n                clientX = e.touches[0].clientX;\\n                clientY = e.touches[0].clientY;\\n            } else {\\n                clientX = e.clientX;\\n                clientY = e.clientY;\\n            }\\n\\n            $element.css({\\n                left: clientX - offsetX + 'px',\\n                top: clientY - offsetY + 'px'\\n            });\\n        }\\n\\n        $(document).on('mouseup touchend', function() {\\n            if (isDragging) {\\n                $(document).off('mousemove touchmove', onMove);\\n                $element.css('cursor', 'default');\\n                isDragging = false;\\n            }\\n        });\\n    }\\n\\n    // 將拖動功能應用到每個圖片元素\\n    for (var i = 1; i \u003c= 10; i++) {\\n        makeDraggable($('#avatar-' + i));\\n    }\\n});\"}","created_at":"2024-09-25T14:21:16.831+08:00","updated_at":"2024-09-25T14:21:42.519+08:00","name":"老師｜財富之路 2.0","language":"web","screenshot":{"url":null},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":23,"hashid":"2pdsp5qnk","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}