var tdv_sdk = {}; tdv_sdk.list = [ { id: "gjkmg09", name: "dog", image: "https://image.senaai.tech/images/dog7.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_dog_06d80eb0.mp3", }, { id: "2byl8ac", name: "cat", image: "https://image.senaai.tech/images/Cat.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_cat_d077f244.mp3", }, { id: "yb4z60c", name: "fish", image: "https://image.senaai.tech/images/Clownfish.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_fish_83e4a96a.mp3", }, { id: "7npcqv0", name: "bird", image: "https://image.senaai.tech/images/Bird31.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_bird_abaecf8c.mp3", }, { id: "pbb8nxj", name: "mouse", image: "https://image.senaai.tech/images/Gerbil3.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_mouse_40203abe.mp3", }, { id: "pbb8nxj_cow", name: "cow", // Đã bổ sung con bò theo yêu cầu của bạn image: "https://image.senaai.tech/images/cow.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_cow_81566e98.mp3", }, { id: "2byl8ac", name: "cat", image: "https://image.senaai.tech/images/Cat.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_cat_d077f244.mp3", }, { id: "yb4z60c", name: "fish", image: "https://image.senaai.tech/images/Clownfish.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_fish_83e4a96a.mp3", }, { id: "7npcqv0", name: "bird", image: "https://image.senaai.tech/images/Bird31.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_bird_abaecf8c.mp3", }, { id: "gjkmg09", name: "dog", image: "https://image.senaai.tech/images/dog7.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_dog_06d80eb0.mp3", }, { id: "7npcqv0", name: "bird", image: "https://image.senaai.tech/images/Bird31.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_bird_abaecf8c.mp3", }, { id: "gjkmg09", name: "dog", image: "https://image.senaai.tech/images/dog7.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_dog_06d80eb0.mp3", }, { id: "2byl8ac", name: "cat", image: "https://image.senaai.tech/images/Cat.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_cat_d077f244.mp3", }, { id: "yb4z60c", name: "fish", image: "https://image.senaai.tech/images/Clownfish.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_fish_83e4a96a.mp3", }, { id: "7npcqv0", name: "bird", image: "https://image.senaai.tech/images/Bird31.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_bird_abaecf8c.mp3", }, { id: "pbb8nxj", name: "mouse", image: "https://image.senaai.tech/images/Gerbil3.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_mouse_40203abe.mp3", }, { id: "pbb8nxj_cow", name: "cow", // Đã bổ sung con bò theo yêu cầu của bạn image: "https://image.senaai.tech/images/cow.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_cow_81566e98.mp3", }, { id: "2byl8ac", name: "cat", image: "https://image.senaai.tech/images/Cat.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_cat_d077f244.mp3", }, { id: "yb4z60c", name: "fish", image: "https://image.senaai.tech/images/Clownfish.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_fish_83e4a96a.mp3", }, { id: "7npcqv0", name: "bird", image: "https://image.senaai.tech/images/Bird31.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_bird_abaecf8c.mp3", }, { id: "gjkmg09", name: "dog", image: "https://image.senaai.tech/images/dog7.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_dog_06d80eb0.mp3", }, { id: "7npcqv0", name: "bird", image: "https://image.senaai.tech/images/Bird31.png", audio: "https://audio.senaai.tech/audio/Sena_Voice1_bird_abaecf8c.mp3", }, ]; tdv_sdk.pageCardConfig = [1, 2, 3, 4, 5, 6]; tdv_sdk.getImageStyle = function (name) { for (let i in tdv_sdk.style) { if (tdv_sdk.style[i].name == name) { return tdv_sdk.style[i].image; } } return ""; }; tdv_sdk.pageCurrent = 0; tdv_sdk.totalPage = 0; tdv_sdk.currentPageList = []; tdv_sdk.getTotalPage = function () { return tdv_sdk.totalPage; }; tdv_sdk.getCurrentPage = function () { return tdv_sdk.pageCurrent; }; tdv_sdk.nextPage = function () { if (tdv_sdk.pageCurrent < tdv_sdk.totalPage) { tdv_sdk.pageCurrent++; tdv_sdk.updateMaxCardByPage(); tdv_sdk.getPostionInPage(); } }; tdv_sdk.prePage = function () { if (tdv_sdk.pageCurrent > 0) { tdv_sdk.pageCurrent--; tdv_sdk.updateMaxCardByPage(); tdv_sdk.getPostionInPage(); } }; tdv_sdk.getCurrentPageListInfo_getTotal = function () { console.log(tdv_sdk.currentPageList.length - 1); return tdv_sdk.currentPageList.length - 1; }; tdv_sdk.getCurrentPageListInfo_getByIndex = function (index, attr) { return tdv_sdk.currentPageList[index][attr]; }; tdv_sdk.start = function () { tdv_sdk.pageInfo = []; let list = tdv_sdk.list; let index = 0; for (let i = 0; i < tdv_sdk.pageCardConfig.length; i++) { let count = tdv_sdk.pageCardConfig[i]; let startIdx = index; let endIdx = Math.min(index + count, list.length); let cardList = []; for (let j = startIdx; j < endIdx; j++) { const _obj = { id: list[j].id, name: list[j].name, image: list[j].image, audio: list[j].audio, value: list[j].value, x: 0, y: 0, }; cardList.push(_obj); } tdv_sdk.pageInfo.push({ index: i, totalCardInpage: cardList.length, cardList: cardList, }); index = endIdx; if (endIdx >= list.length) break; // dừng nếu hết dữ liệu } tdv_sdk.totalPage = tdv_sdk.pageInfo.length - 1; tdv_sdk.pageCurrent = 0; tdv_sdk.updateMaxCardByPage(); tdv_sdk.getPostionInPage(); }; tdv_sdk.getPostionInPage = function () { const _currentPage = tdv_sdk.pageInfo[tdv_sdk.pageCurrent]; const max_width = 1200, max_height = 1200, margin_x = 80, margin_y = 80, card_width = 300, card_height = 300; const totalCards = _currentPage.totalCardInpage; // --- ĐIỂM CẦN SỬA --- // Mặc định là 3 cột (cho trường hợp 3, 5, 6 card) let max_col = 3; // Nếu có đúng 4 card -> Ép xuống thành 2 cột để ra dạng Grid 2x2 if (totalCards === 4) { max_col = 2; } // -------------------- const num_rows = Math.ceil(totalCards / max_col); // Tính chiều cao tổng thể để căn giữa dọc const total_block_height = num_rows * card_height + (num_rows - 1) * margin_y; const start_y = (max_height - total_block_height) / 2 + card_height / 2; _currentPage.cardList.forEach((card, index) => { const row_idx = Math.floor(index / max_col); const col_idx = index % max_col; // Tính số item trong hàng hiện tại để căn giữa ngang let items_in_current_row; // Logic xác định số lượng card trong hàng hiện tại // Nếu là hàng cuối cùng if (row_idx === num_rows - 1) { // Lấy số dư. Nếu chia hết (dư 0) thì tức là hàng đó đầy (bằng max_col) let remainder = totalCards % max_col; items_in_current_row = remainder === 0 ? max_col : remainder; } else { // Các hàng bên trên luôn đầy items_in_current_row = max_col; } const current_row_width = items_in_current_row * card_width + (items_in_current_row - 1) * margin_x; const start_x = (max_width - current_row_width) / 2 + card_width / 2; card.x = start_x + col_idx * (card_width + margin_x); card.y = start_y + row_idx * (card_height + margin_y); }); tdv_sdk.currentPageList = _currentPage.cardList; }; // get card info tdv_sdk.getTotalCardInpage = function () { return tdv_sdk.list.length; }; tdv_sdk.getText = function (index) { return tdv_sdk.list[index].name; }; tdv_sdk.getId = function (index) { return tdv_sdk.list[index].id; }; tdv_sdk.getAnswers = function (index) { return tdv_sdk.answers[index]; }; tdv_sdk.playSound = function (index) { console.log("play sound : ", index); const _audio = tdv_sdk.currentPageList[index].audio; console.log("audio : ", _audio); if (_audio == "") return; if (window["audioPlayer"]) { window["audioPlayer"].pause(); window["audioPlayer"].src = _audio; window["audioPlayer"].play(); } else { window["audioPlayer"] = new Audio(_audio); window["audioPlayer"].play(); } }; tdv_sdk.setMaxCardInPage = function (num) { tdv_sdk.maxCardInPage = num; }; tdv_sdk.updateMaxCardByPage = function () { // Nếu có cấu hình cho trang hiện tại thì lấy, không thì giữ nguyên giá trị trước đó const index = tdv_sdk.pageCurrent; if (tdv_sdk.pageCardConfig && tdv_sdk.pageCardConfig[index] !== undefined) { tdv_sdk.maxCardInPage = tdv_sdk.pageCardConfig[index]; } }; // Hàm kiểm tra xem có phải trang cuối cùng không tdv_sdk.isLastPage = function () { if (tdv_sdk.pageCurrent >= tdv_sdk.totalPage) { return 1; // Đúng là trang cuối } return 0; // Chưa phải trang cuối };