--- html/popWin_crossword.html
+++ html/popWin_crossword.html
... | ... | @@ -75,21 +75,22 @@ |
| 75 | 75 |
<div class="crossword-footer"> |
| 76 | 76 |
<div class="wrap"> |
| 77 | 77 |
<div class="btn-cont"> |
| 78 |
+ <button type="button" id="reload-btn" class="btn-submit btn lg cta">다시풀기</button> |
|
| 78 | 79 |
<button type="button" id="save-answer" class="btn-submit btn lg cta">제출하기</button> |
| 79 | 80 |
</div> |
| 80 | 81 |
</div> |
| 81 | 82 |
</div> |
| 82 | 83 |
</div> |
| 83 | 84 |
|
| 84 |
- <script type="module" src="../resources/front/site/SITE_00000/event/crossword/js/crosswordPuzzle.js"></script> |
|
| 85 |
+ <script type="module" src="../resources/front/site/SITE_00000/event/crossword/js/crosswordPuzzle_dev.js"></script> |
|
| 85 | 86 |
<script> |
| 86 |
- window.puzzleData = {
|
|
| 87 |
- fncType: 'answer', // 퍼즐 만들기, 수정 : make, 퍼즐 해보기 : answer, 풀이한 퍼즐 보기 : view |
|
| 88 |
- loadPuzzleURL: "http://127.0.0.1:5500/resources/front/site/SITE_00000/event/crossword/js/temp/data.json", // 퍼즐 데이터를 읽어올 api url |
|
| 89 |
- puzzleID: "abc",// undefined, // 퍼즐 ID (수정시 필요, 생성시는 저장 시 퍼즐 ID 생성하고 리턴) |
|
| 90 |
- answerPuzzleURL: "http://127.0.0.1:5500/resources/front/site/SITE_00000/event/crossword/js/temp/answer.json", // 퍼즐 답변을 저장할 api url |
|
| 91 |
- afterSaveURL: 'crossword_view.html', // 저장 후 이동할 url |
|
| 92 |
- } |
|
| 87 |
+ // window.puzzleData = {
|
|
| 88 |
+ // fncType: 'answer', // 퍼즐 만들기, 수정 : make, 퍼즐 해보기 : answer, 풀이한 퍼즐 보기 : view |
|
| 89 |
+ // loadPuzzleURL: "../resources/front/site/SITE_00000/event/crossword/js/temp/data.json", // 퍼즐 데이터를 읽어올 api url |
|
| 90 |
+ // puzzleID: "abc",// undefined, // 퍼즐 ID (수정시 필요, 생성시는 저장 시 퍼즐 ID 생성하고 리턴) |
|
| 91 |
+ // answerPuzzleURL: "/resources/front/site/SITE_00000/event/crossword/js/temp/answer.json", // 퍼즐 답변을 저장할 api url |
|
| 92 |
+ // afterSaveURL: 'crossword_view.html', // 저장 후 이동할 url |
|
| 93 |
+ // } |
|
| 93 | 94 |
</script> |
| 94 | 95 |
</body> |
| 95 | 96 |
</html>(파일 끝에 줄바꿈 문자 없음) |
+++ resources/front/site/SITE_00000/event/crossword/js/crosswordPuzzle_dev.js
... | ... | @@ -0,0 +1,447 @@ |
| 1 | +let puzzleSize = 8; | |
| 2 | +let wordPuzzleJson = []; | |
| 3 | +let grid = []; | |
| 4 | +let hints = []; | |
| 5 | + | |
| 6 | +$(document).ready(function(){ | |
| 7 | + const previewGrid = document.querySelector("#preview-grid"); | |
| 8 | + const acrossHints = document.querySelector("#across-hints"); | |
| 9 | + const downHints = document.querySelector("#down-hints"); | |
| 10 | + | |
| 11 | + fetch("../resources/front/site/SITE_00000/event/crossword/js/temp/data.json") | |
| 12 | + .then(response => response.json()) | |
| 13 | + .then(data => { | |
| 14 | + wordPuzzleJson = data.words || []; | |
| 15 | + setupPuzzle(puzzleSize, wordPuzzleJson, drawPuzzle); | |
| 16 | + }) | |
| 17 | + .catch(error => console.error("JSON 로드 실패:", error)); | |
| 18 | + | |
| 19 | + // 퍼즐 그리기 함수 | |
| 20 | + const drawPuzzle = () => { | |
| 21 | + previewGrid.innerHTML = ""; | |
| 22 | + acrossHints.innerHTML = ""; | |
| 23 | + downHints.innerHTML = ""; | |
| 24 | + | |
| 25 | + const grid = Array.from({ length: puzzleSize }, () => Array(puzzleSize).fill(null)); | |
| 26 | + const acrossList = []; | |
| 27 | + const downList = []; | |
| 28 | + | |
| 29 | + let acrossCount = 1; | |
| 30 | + let downCount = 1; | |
| 31 | + | |
| 32 | + wordPuzzleJson.forEach((wordObj) => { | |
| 33 | + const { word, hint, startX, startY, direction } = wordObj; | |
| 34 | + if (startX === -1 && startY === -1) return; | |
| 35 | + | |
| 36 | + const hintNumber = direction === "horizontal" ? acrossCount++ : downCount++; | |
| 37 | + const hintInfo = { | |
| 38 | + number: hintNumber, | |
| 39 | + hint: hint, | |
| 40 | + x: startX, | |
| 41 | + y: startY, | |
| 42 | + direction: direction | |
| 43 | + }; | |
| 44 | + | |
| 45 | + if (direction === "horizontal") { | |
| 46 | + acrossList.push(hintInfo); | |
| 47 | + } else { | |
| 48 | + downList.push(hintInfo); | |
| 49 | + } | |
| 50 | + | |
| 51 | + for (let i = 0; i < word.length; i++) { | |
| 52 | + const x = direction === "horizontal" ? startX + i : startX; | |
| 53 | + const y = direction === "vertical" ? startY + i : startY; | |
| 54 | + grid[y][x] = word[i]; | |
| 55 | + } | |
| 56 | + }); | |
| 57 | + | |
| 58 | + // 힌트 목록 렌더링 | |
| 59 | + const placedWords = wordPuzzleJson.map(item => ({ | |
| 60 | + word: item.word, | |
| 61 | + startX: item.startX, | |
| 62 | + startY: item.startY, | |
| 63 | + direction: item.direction | |
| 64 | + })); | |
| 65 | + | |
| 66 | + // 가로 힌트 | |
| 67 | + acrossList.forEach((hint) => { | |
| 68 | + const listItem = document.createElement("li"); | |
| 69 | + const word = placedWords.find(w => w.direction === "horizontal" && w.startX === hint.x && w.startY === hint.y); | |
| 70 | + const wordLength = word ? word.word.length : 0; | |
| 71 | + listItem.innerHTML = '<span class="hint-number">' + hint.number + '</span> ' + hint.hint + ' (' + wordLength + '칸)'; | |
| 72 | + acrossHints.appendChild(listItem); | |
| 73 | + }); | |
| 74 | + | |
| 75 | + // 세로 힌트 | |
| 76 | + downList.forEach((hint) => { | |
| 77 | + const listItem = document.createElement("li"); | |
| 78 | + const word = placedWords.find(w => w.direction === "vertical" && w.startX === hint.x && w.startY === hint.y); | |
| 79 | + const wordLength = word ? word.word.length : 0; | |
| 80 | + listItem.innerHTML = '<span class="hint-number vertical">' + hint.number + '</span> ' + hint.hint + ' (' + wordLength + '칸)'; | |
| 81 | + downHints.appendChild(listItem); | |
| 82 | + }); | |
| 83 | + | |
| 84 | + // 퍼즐 UI 렌더링 | |
| 85 | + for (let y = 0; y < puzzleSize; y++) { | |
| 86 | + for (let x = 0; x < puzzleSize; x++) { | |
| 87 | + const cell = document.createElement("div"); | |
| 88 | + cell.classList.add("grid-cell"); | |
| 89 | + cell.id = 'ans-cell-' + x + '-' + y; | |
| 90 | + cell.setAttribute("data-x", x); | |
| 91 | + cell.setAttribute("data-y", y); | |
| 92 | + | |
| 93 | + if (grid[y][x]) { | |
| 94 | + const input = document.createElement("input"); | |
| 95 | + input.type = "text"; | |
| 96 | + input.maxLength = 1; | |
| 97 | + input.inputMode = "verbatim"; | |
| 98 | + input.className = "input-cell"; | |
| 99 | + input.oninput = () => { | |
| 100 | + if (input.value.length > 1) { | |
| 101 | + input.value = input.value.slice(0, 1); | |
| 102 | + } | |
| 103 | + input.value = input.value.toUpperCase(); | |
| 104 | + }; | |
| 105 | + cell.appendChild(input); | |
| 106 | + | |
| 107 | + const hintsAtCell = []; | |
| 108 | + const acrossHint = acrossList.find(h => h.x === x && h.y === y); | |
| 109 | + const downHint = downList.find(h => h.x === x && h.y === y); | |
| 110 | + if (acrossHint) hintsAtCell.push({ ...acrossHint, direction: 'horizontal' }); | |
| 111 | + if (downHint) hintsAtCell.push({ ...downHint, direction: 'vertical' }); | |
| 112 | + | |
| 113 | + hintsAtCell.forEach(hint => { | |
| 114 | + const hintNumber = document.createElement("span"); | |
| 115 | + hintNumber.textContent = hint.number.toString(); | |
| 116 | + hintNumber.className = "hint-number"; | |
| 117 | + if (hint.direction === "vertical") { | |
| 118 | + hintNumber.classList.add("vertical"); | |
| 119 | + } | |
| 120 | + cell.appendChild(hintNumber); | |
| 121 | + }); | |
| 122 | + } else { | |
| 123 | + cell.classList.add("disabled"); | |
| 124 | + } | |
| 125 | + | |
| 126 | + previewGrid.appendChild(cell); | |
| 127 | + } | |
| 128 | + } | |
| 129 | + }; | |
| 130 | + | |
| 131 | + function setupPuzzle(size, data, drawFn) { | |
| 132 | + const gridContainer = document.querySelector("#preview-grid"); | |
| 133 | + if (gridContainer) { | |
| 134 | + gridContainer.style.gridTemplateColumns = 'repeat(' + size + ', 1fr)'; | |
| 135 | + gridContainer.style.gridTemplateRows = 'repeat(' + size + ', 1fr)'; | |
| 136 | + } | |
| 137 | + | |
| 138 | + grid = Array.from({ length: size }, () => Array(size).fill(null)); | |
| 139 | + drawFn(data, size); | |
| 140 | + } | |
| 141 | + | |
| 142 | + | |
| 143 | + | |
| 144 | + const drawCheckedPuzzle = function(data, puzzleSize) { | |
| 145 | + const previewGrid = document.querySelector("#preview-grid"); | |
| 146 | + previewGrid.innerHTML = ""; | |
| 147 | + previewGrid.style.gridTemplateColumns = 'repeat(' + puzzleSize + ', 1fr)'; | |
| 148 | + previewGrid.style.gridTemplateRows = 'repeat(' + puzzleSize + ', 1fr)'; | |
| 149 | + | |
| 150 | + const grid = Array.from({ length: puzzleSize }, function() { | |
| 151 | + return Array(puzzleSize).fill(null); | |
| 152 | + }); | |
| 153 | + | |
| 154 | + let acrossCount = 1; | |
| 155 | + let downCount = 1; | |
| 156 | + | |
| 157 | + const acrossHints = []; | |
| 158 | + const downHints = []; | |
| 159 | + const hintMap = {}; // 힌트 번호 저장용 | |
| 160 | + | |
| 161 | + data.forEach(function(item) { | |
| 162 | + const rspnsCn = item.rspnsCn; | |
| 163 | + const answerWord = item.answerWord; | |
| 164 | + const startX = item.startX; | |
| 165 | + const startY = item.startY; | |
| 166 | + const direction = item.direction; | |
| 167 | + const hint = item.hint; | |
| 168 | + | |
| 169 | + if (startX === -1 && startY === -1) return; | |
| 170 | + | |
| 171 | + const key = startX + ',' + startY; | |
| 172 | + if (!hintMap[key]) hintMap[key] = {}; | |
| 173 | + | |
| 174 | + let hintNumber; | |
| 175 | + if (direction === "horizontal") { | |
| 176 | + hintNumber = acrossCount++; | |
| 177 | + hintMap[key].across = hintNumber; | |
| 178 | + acrossHints.push({ hintNumber: hintNumber, hint: hint, answerWord: answerWord }); | |
| 179 | + } else { | |
| 180 | + hintNumber = downCount++; | |
| 181 | + hintMap[key].down = hintNumber; | |
| 182 | + downHints.push({ hintNumber: hintNumber, hint: hint, answerWord: answerWord }); | |
| 183 | + } | |
| 184 | + | |
| 185 | + for (let i = 0; i < answerWord.length; i++) { | |
| 186 | + const x = direction === "horizontal" ? startX + i : startX; | |
| 187 | + const y = direction === "vertical" ? startY + i : startY; | |
| 188 | + | |
| 189 | + if (!grid[y][x]) grid[y][x] = {}; | |
| 190 | + | |
| 191 | + if (!grid[y][x].value) { | |
| 192 | + grid[y][x].value = rspnsCn ? rspnsCn[i] : ""; | |
| 193 | + grid[y][x].correct = rspnsCn && rspnsCn[i] === answerWord[i]; | |
| 194 | + } | |
| 195 | + } | |
| 196 | + }); | |
| 197 | + | |
| 198 | + for (let y = 0; y < puzzleSize; y++) { | |
| 199 | + for (let x = 0; x < puzzleSize; x++) { | |
| 200 | + const cell = document.createElement("div"); | |
| 201 | + cell.classList.add("grid-cell"); | |
| 202 | + cell.id = 'ans-cell-' + x + '-' + y; | |
| 203 | + cell.setAttribute("data-x", x); | |
| 204 | + cell.setAttribute("data-y", y); | |
| 205 | + | |
| 206 | + const gridData = grid[y][x]; | |
| 207 | + if (gridData) { | |
| 208 | + const input = document.createElement("input"); | |
| 209 | + input.type = "text"; | |
| 210 | + input.maxLength = 1; | |
| 211 | + input.className = "input-cell"; | |
| 212 | + input.value = gridData.value || ""; | |
| 213 | + input.oninput = () => { | |
| 214 | + input.value = input.value.charAt(0).toUpperCase(); | |
| 215 | + }; | |
| 216 | + input.value = input.value.trim(); | |
| 217 | + cell.appendChild(input); | |
| 218 | + | |
| 219 | + // 힌트 번호 표시 (가로, 세로 모두 가능) | |
| 220 | + const key = x + ',' + y; | |
| 221 | + if (hintMap[key]) { | |
| 222 | + if (hintMap[key].across) { | |
| 223 | + const hintSpanAcross = document.createElement("span"); | |
| 224 | + hintSpanAcross.className = "hint-number"; | |
| 225 | + hintSpanAcross.innerText = hintMap[key].across; | |
| 226 | + cell.appendChild(hintSpanAcross); | |
| 227 | + } | |
| 228 | + if (hintMap[key].down) { | |
| 229 | + const hintSpanDown = document.createElement("span"); | |
| 230 | + hintSpanDown.className = "hint-number vertical"; | |
| 231 | + hintSpanDown.innerText = hintMap[key].down; | |
| 232 | + cell.appendChild(hintSpanDown); | |
| 233 | + } | |
| 234 | + } | |
| 235 | + } else { | |
| 236 | + cell.classList.add("disabled"); | |
| 237 | + } | |
| 238 | + | |
| 239 | + previewGrid.appendChild(cell); | |
| 240 | + } | |
| 241 | + } | |
| 242 | + | |
| 243 | + // 힌트 영역 초기화 | |
| 244 | + const acrossHintsContainer = document.querySelector("#across-hints"); | |
| 245 | + const downHintsContainer = document.querySelector("#down-hints"); | |
| 246 | + acrossHintsContainer.innerHTML = ""; | |
| 247 | + downHintsContainer.innerHTML = ""; | |
| 248 | + | |
| 249 | + acrossHints.forEach(function(item) { | |
| 250 | + const li = document.createElement("li"); | |
| 251 | + li.innerHTML = '<span class="hint-number">' + item.hintNumber + '</span> ' + item.hint + ' (' + item.answerWord.length + '칸)'; | |
| 252 | + acrossHintsContainer.appendChild(li); | |
| 253 | + }); | |
| 254 | + | |
| 255 | + downHints.forEach(function(item) { | |
| 256 | + const li = document.createElement("li"); | |
| 257 | + li.innerHTML = '<span class="hint-number vertical">' + item.hintNumber + '</span> ' + item.hint + ' (' + item.answerWord.length + '칸)'; | |
| 258 | + downHintsContainer.appendChild(li); | |
| 259 | + }); | |
| 260 | + }; | |
| 261 | + | |
| 262 | + $(document).on('click', '#reload-btn', function (e) { | |
| 263 | + location.reload(); | |
| 264 | + }); | |
| 265 | + | |
| 266 | + $(document).on('click', '#save-answer', function (e) { | |
| 267 | + const answerWords = []; | |
| 268 | + wordPuzzleJson.forEach((word) => { | |
| 269 | + let rspnsCn = ""; | |
| 270 | + let grading = 'Y'; | |
| 271 | + let wordData; | |
| 272 | + | |
| 273 | + if (word.hasOwnProperty("word")) { | |
| 274 | + for (let i = 0; i < word.word.length; i++) { | |
| 275 | + const x = word.direction === "horizontal" ? word.startX + i : word.startX; | |
| 276 | + const y = word.direction === "vertical" ? word.startY + i : word.startY; | |
| 277 | + const targetCell = document.querySelector('#ans-cell-' + x + '-' + y + ' input'); | |
| 278 | + const targetCellV = targetCell?.value.toUpperCase().trim(); | |
| 279 | + | |
| 280 | + rspnsCn += targetCellV ? targetCellV : " "; | |
| 281 | + | |
| 282 | + if (word.word[i] !== targetCellV) { | |
| 283 | + grading = 'N'; | |
| 284 | + } | |
| 285 | + } | |
| 286 | + | |
| 287 | + wordData = { | |
| 288 | + rspnsCn: rspnsCn, | |
| 289 | + hint: word.hint, | |
| 290 | + startX: word.startX, | |
| 291 | + startY: word.startY, | |
| 292 | + direction: word.direction, | |
| 293 | + gradings: grading, | |
| 294 | + answerWord: word.word | |
| 295 | + }; | |
| 296 | + } else { | |
| 297 | + for (let i = 0; i < word.answerWord.length; i++) { | |
| 298 | + const x = word.direction === "horizontal" ? word.startX + i : word.startX; | |
| 299 | + const y = word.direction === "vertical" ? word.startY + i : word.startY; | |
| 300 | + const targetCell = document.querySelector('#ans-cell-' + x + '-' + y + ' input'); | |
| 301 | + const targetCellV = targetCell?.value.toUpperCase().trim(); | |
| 302 | + | |
| 303 | + rspnsCn += targetCellV ? targetCellV : " "; | |
| 304 | + | |
| 305 | + if (word.answerWord[i] !== targetCellV) { | |
| 306 | + grading = 'N'; | |
| 307 | + } | |
| 308 | + } | |
| 309 | + | |
| 310 | + wordData = { | |
| 311 | + rspnsCn: rspnsCn, | |
| 312 | + hint: word.hint, | |
| 313 | + startX: word.startX, | |
| 314 | + startY: word.startY, | |
| 315 | + direction: word.direction, | |
| 316 | + gradings: grading, | |
| 317 | + answerWord: word.answerWord | |
| 318 | + }; | |
| 319 | + } | |
| 320 | + | |
| 321 | + answerWords.push(wordData); | |
| 322 | + }); | |
| 323 | + submitCheckedPuzzle(answerWords, puzzleSize); | |
| 324 | + }); | |
| 325 | + | |
| 326 | + | |
| 327 | + | |
| 328 | + const submitCheckedPuzzle = function(data, puzzleSize) { | |
| 329 | + const previewGrid = document.querySelector("#preview-grid"); | |
| 330 | + previewGrid.innerHTML = ""; | |
| 331 | + previewGrid.style.gridTemplateColumns = 'repeat(' + puzzleSize + ', 1fr)'; | |
| 332 | + previewGrid.style.gridTemplateRows = 'repeat(' + puzzleSize + ', 1fr)'; | |
| 333 | + | |
| 334 | + const grid = Array.from({ length: puzzleSize }, function() { | |
| 335 | + return Array(puzzleSize).fill(null); | |
| 336 | + }); | |
| 337 | + | |
| 338 | + let acrossCount = 1; | |
| 339 | + let downCount = 1; | |
| 340 | + | |
| 341 | + const acrossHints = []; | |
| 342 | + const downHints = []; | |
| 343 | + const hintMap = {}; // 힌트 번호 저장용 | |
| 344 | + | |
| 345 | + data.forEach(function(item) { | |
| 346 | + const rspnsCn = item.rspnsCn; | |
| 347 | + const answerWord = item.answerWord; | |
| 348 | + const startX = item.startX; | |
| 349 | + const startY = item.startY; | |
| 350 | + const direction = item.direction; | |
| 351 | + const hint = item.hint; | |
| 352 | + | |
| 353 | + if (startX === -1 && startY === -1) return; | |
| 354 | + | |
| 355 | + const key = startX + ',' + startY; | |
| 356 | + if (!hintMap[key]) hintMap[key] = {}; | |
| 357 | + | |
| 358 | + let hintNumber; | |
| 359 | + if (direction === "horizontal") { | |
| 360 | + hintNumber = acrossCount++; | |
| 361 | + hintMap[key].across = hintNumber; | |
| 362 | + acrossHints.push({ hintNumber: hintNumber, hint: hint, answerWord: answerWord }); | |
| 363 | + } else { | |
| 364 | + hintNumber = downCount++; | |
| 365 | + hintMap[key].down = hintNumber; | |
| 366 | + downHints.push({ hintNumber: hintNumber, hint: hint, answerWord: answerWord }); | |
| 367 | + } | |
| 368 | + | |
| 369 | + for (let i = 0; i < answerWord.length; i++) { | |
| 370 | + const x = direction === "horizontal" ? startX + i : startX; | |
| 371 | + const y = direction === "vertical" ? startY + i : startY; | |
| 372 | + | |
| 373 | + if (!grid[y][x]) grid[y][x] = {}; | |
| 374 | + | |
| 375 | + if (!grid[y][x].value) { | |
| 376 | + grid[y][x].value = rspnsCn ? rspnsCn[i] : ""; | |
| 377 | + grid[y][x].correct = rspnsCn && rspnsCn[i] === answerWord[i]; | |
| 378 | + } | |
| 379 | + } | |
| 380 | + }); | |
| 381 | + | |
| 382 | + for (let y = 0; y < puzzleSize; y++) { | |
| 383 | + for (let x = 0; x < puzzleSize; x++) { | |
| 384 | + const cell = document.createElement("div"); | |
| 385 | + cell.classList.add("grid-cell"); | |
| 386 | + | |
| 387 | + const gridData = grid[y][x]; | |
| 388 | + if (gridData) { | |
| 389 | + const input = document.createElement("input"); | |
| 390 | + input.type = "text"; | |
| 391 | + input.maxLength = 1; | |
| 392 | + input.className = "input-cell"; | |
| 393 | + input.value = gridData.value || ""; | |
| 394 | + input.readOnly = true; | |
| 395 | + | |
| 396 | + if (gridData.correct) { | |
| 397 | + cell.classList.add("correct"); | |
| 398 | + } else { | |
| 399 | + cell.classList.add("wrong"); | |
| 400 | + } | |
| 401 | + | |
| 402 | + cell.appendChild(input); | |
| 403 | + | |
| 404 | + // 힌트 번호는 단어 시작 위치에만 표시 | |
| 405 | + const key = x + ',' + y; | |
| 406 | + if (hintMap[key]) { | |
| 407 | + if (hintMap[key].across) { | |
| 408 | + const hintSpanAcross = document.createElement("span"); | |
| 409 | + hintSpanAcross.className = "hint-number"; | |
| 410 | + hintSpanAcross.innerText = hintMap[key].across; | |
| 411 | + cell.appendChild(hintSpanAcross); | |
| 412 | + } | |
| 413 | + if (hintMap[key].down) { | |
| 414 | + const hintSpanDown = document.createElement("span"); | |
| 415 | + hintSpanDown.className = "hint-number vertical"; | |
| 416 | + hintSpanDown.innerText = hintMap[key].down; | |
| 417 | + cell.appendChild(hintSpanDown); | |
| 418 | + } | |
| 419 | + } | |
| 420 | + | |
| 421 | + } else { | |
| 422 | + cell.classList.add("disabled"); | |
| 423 | + } | |
| 424 | + | |
| 425 | + previewGrid.appendChild(cell); | |
| 426 | + } | |
| 427 | + } | |
| 428 | + | |
| 429 | + // 힌트 영역 초기화 | |
| 430 | + const acrossHintsContainer = document.querySelector("#across-hints"); | |
| 431 | + const downHintsContainer = document.querySelector("#down-hints"); | |
| 432 | + acrossHintsContainer.innerHTML = ""; | |
| 433 | + downHintsContainer.innerHTML = ""; | |
| 434 | + | |
| 435 | + acrossHints.forEach(function(item) { | |
| 436 | + const li = document.createElement("li"); | |
| 437 | + li.innerHTML = '<span class="hint-number">' + item.hintNumber + '</span> ' + item.hint + ' (' + item.answerWord.length + '칸)'; | |
| 438 | + acrossHintsContainer.appendChild(li); | |
| 439 | + }); | |
| 440 | + | |
| 441 | + downHints.forEach(function(item) { | |
| 442 | + const li = document.createElement("li"); | |
| 443 | + li.innerHTML = '<span class="hint-number vertical">' + item.hintNumber + '</span> ' + item.hint + ' (' + item.answerWord.length + '칸)'; | |
| 444 | + downHintsContainer.appendChild(li); | |
| 445 | + }); | |
| 446 | + }; | |
| 447 | +})(파일 끝에 줄바꿈 문자 없음) |
--- resources/front/site/SITE_00000/event/crossword/js/temp/data.json
+++ resources/front/site/SITE_00000/event/crossword/js/temp/data.json
... | ... | @@ -1,61 +1,141 @@ |
| 1 | 1 |
{
|
| 2 |
- "size" : "10", |
|
| 2 |
+ "size" : "8", |
|
| 3 | 3 |
"words" : [ |
| 4 |
- {
|
|
| 5 |
- "word": "ASDFG", |
|
| 6 |
- "hint": "경주에서 가장 거대한 석탑으로 신라 문무왕이 세운 탑의 이름", |
|
| 7 |
- "startX": 0, |
|
| 8 |
- "startY": 0, |
|
| 9 |
- "direction": "horizontal" |
|
| 10 |
- }, |
|
| 11 |
- {
|
|
| 12 |
- "word": "ABCDEF", |
|
| 13 |
- "hint": "abcdef", |
|
| 14 |
- "startX": 0, |
|
| 15 |
- "startY": 0, |
|
| 16 |
- "direction": "vertical" |
|
| 17 |
- }, |
|
| 18 |
- {
|
|
| 19 |
- "word": "GAG", |
|
| 20 |
- "hint": "gag", |
|
| 21 |
- "startX": 4, |
|
| 22 |
- "startY": 0, |
|
| 23 |
- "direction": "vertical" |
|
| 24 |
- }, |
|
| 25 |
- {
|
|
| 26 |
- "word": "DBA", |
|
| 27 |
- "hint": "dba", |
|
| 28 |
- "startX": 2, |
|
| 29 |
- "startY": 0, |
|
| 30 |
- "direction": "vertical" |
|
| 31 |
- }, |
|
| 32 |
- {
|
|
| 33 |
- "word": "CTADG", |
|
| 34 |
- "hint": "ctadg", |
|
| 35 |
- "startX": 0, |
|
| 36 |
- "startY": 2, |
|
| 37 |
- "direction": "horizontal" |
|
| 38 |
- }, |
|
| 39 |
- {
|
|
| 40 |
- "word": "DEAR", |
|
| 41 |
- "hint": "dear", |
|
| 42 |
- "startX": 3, |
|
| 43 |
- "startY": 2, |
|
| 44 |
- "direction": "vertical" |
|
| 45 |
- }, |
|
| 46 |
- {
|
|
| 47 |
- "word": "EDSAFE", |
|
| 48 |
- "hint": "edsafe", |
|
| 49 |
- "startX": 0, |
|
| 50 |
- "startY": 4, |
|
| 51 |
- "direction": "horizontal" |
|
| 52 |
- }, |
|
| 53 |
- {
|
|
| 54 |
- "word": "AEA", |
|
| 55 |
- "hint": "aea", |
|
| 56 |
- "startX": 5, |
|
| 57 |
- "startY": 3, |
|
| 58 |
- "direction": "vertical" |
|
| 59 |
- } |
|
| 4 |
+ {
|
|
| 5 |
+ "word": "고진감래", |
|
| 6 |
+ "hint": "쓴 것이 다하면 단 것이 온다는 뜻으로 고생 끝에 낙이 온다는 뜻의 사자성어", |
|
| 7 |
+ "startX": 0, |
|
| 8 |
+ "startY": 0, |
|
| 9 |
+ "direction": "horizontal", |
|
| 10 |
+ "gradings": false |
|
| 11 |
+ }, |
|
| 12 |
+ {
|
|
| 13 |
+ "word": "월계관", |
|
| 14 |
+ "hint": "고대 그리스에서 우승장의 머리에 씌워주던 월계수 잎으로 만든 관", |
|
| 15 |
+ "startX": 5, |
|
| 16 |
+ "startY": 0, |
|
| 17 |
+ "direction": "horizontal", |
|
| 18 |
+ "gradings": false |
|
| 19 |
+ }, |
|
| 20 |
+ {
|
|
| 21 |
+ "word": "이구동성", |
|
| 22 |
+ "hint": "입은 다르나 목소리는 같다는 뜻으로 여러 사람이 같은 말을 한다는 뜻의 사자성어", |
|
| 23 |
+ "startX": 2, |
|
| 24 |
+ "startY": 2, |
|
| 25 |
+ "direction": "horizontal", |
|
| 26 |
+ "gradings": false |
|
| 27 |
+ }, |
|
| 28 |
+ {
|
|
| 29 |
+ "word": "명연설", |
|
| 30 |
+ "hint": "아주 잘한 연설을 이르는 말", |
|
| 31 |
+ "startX": 0, |
|
| 32 |
+ "startY": 3, |
|
| 33 |
+ "direction": "horizontal", |
|
| 34 |
+ "gradings": false |
|
| 35 |
+ }, |
|
| 36 |
+ {
|
|
| 37 |
+ "word": "유교", |
|
| 38 |
+ "hint": "공자가 체계화한 사상으로 유학을 기반으로 한 종교", |
|
| 39 |
+ "startX": 6, |
|
| 40 |
+ "startY": 3, |
|
| 41 |
+ "direction": "horizontal", |
|
| 42 |
+ "gradings": false |
|
| 43 |
+ }, |
|
| 44 |
+ {
|
|
| 45 |
+ "word": "분서갱유", |
|
| 46 |
+ "hint": "중국 진나라 시황제가 책을 불사르고 학자들을 산채로 묻은 사건", |
|
| 47 |
+ "startX": 3, |
|
| 48 |
+ "startY": 4, |
|
| 49 |
+ "direction": "horizontal", |
|
| 50 |
+ "gradings": false |
|
| 51 |
+ }, |
|
| 52 |
+ {
|
|
| 53 |
+ "word": "농구", |
|
| 54 |
+ "hint": "손으로 하는 구기 종목으로 그물이 있는 골대에 공을 던져서 득점하는 스포츠", |
|
| 55 |
+ "startX": 0, |
|
| 56 |
+ "startY": 5, |
|
| 57 |
+ "direction": "horizontal", |
|
| 58 |
+ "gradings": false |
|
| 59 |
+ }, |
|
| 60 |
+ {
|
|
| 61 |
+ "word": "어부지리", |
|
| 62 |
+ "hint": "양쪽의 다툼을 틈타 제 3 자가 이익을 얻는다는 뜻의 사자성어", |
|
| 63 |
+ "startX": 1, |
|
| 64 |
+ "startY": 6, |
|
| 65 |
+ "direction": "horizontal", |
|
| 66 |
+ "gradings": false |
|
| 67 |
+ }, |
|
| 68 |
+ {
|
|
| 69 |
+ "word": "종묘", |
|
| 70 |
+ "hint": "조선시대 왕과 왕비의 신주를 모신 사당", |
|
| 71 |
+ "startX": 6, |
|
| 72 |
+ "startY": 6, |
|
| 73 |
+ "direction": "horizontal", |
|
| 74 |
+ "gradings": false |
|
| 75 |
+ }, |
|
| 76 |
+ {
|
|
| 77 |
+ "word": "고장난명", |
|
| 78 |
+ "hint": "한쪽 손뼉으로는 소리를 낼 수 없다는 말로 혼자서는 이룰 수 없다는 뜻의 사자성어", |
|
| 79 |
+ "startX": 0, |
|
| 80 |
+ "startY": 0, |
|
| 81 |
+ "direction": "vertical", |
|
| 82 |
+ "gradings": false |
|
| 83 |
+ }, |
|
| 84 |
+ {
|
|
| 85 |
+ "word": "감언이설", |
|
| 86 |
+ "hint": "달콤한 말로 상대방을 현혹시켜 이익을 얻는다는 뜻의 사자성어", |
|
| 87 |
+ "startX": 2, |
|
| 88 |
+ "startY": 0, |
|
| 89 |
+ "direction": "vertical", |
|
| 90 |
+ "gradings": false |
|
| 91 |
+ }, |
|
| 92 |
+ {
|
|
| 93 |
+ "word": "관포지교", |
|
| 94 |
+ "hint": "관중과 포숙아처럼 변하지 않는 두터운 우정을 뜻하는 사자성어", |
|
| 95 |
+ "startX": 7, |
|
| 96 |
+ "startY": 0, |
|
| 97 |
+ "direction": "vertical", |
|
| 98 |
+ "gradings": false |
|
| 99 |
+ }, |
|
| 100 |
+ {
|
|
| 101 |
+ "word": "성동격서", |
|
| 102 |
+ "hint": "동쪽에서 소리지르고 서쪽에서 친다는 뜻으로 상대방을 속여 공략한다는 뜻의 사자성어", |
|
| 103 |
+ "startX": 4, |
|
| 104 |
+ "startY": 1, |
|
| 105 |
+ "direction": "vertical", |
|
| 106 |
+ "gradings": false |
|
| 107 |
+ }, |
|
| 108 |
+ {
|
|
| 109 |
+ "word": "연목구어", |
|
| 110 |
+ "hint": "나무에서 물고기를 구한다는 말로 불가능한일을 고집한다는 뜻의 사자성어", |
|
| 111 |
+ "startX": 1, |
|
| 112 |
+ "startY": 3, |
|
| 113 |
+ "direction": "vertical", |
|
| 114 |
+ "gradings": false |
|
| 115 |
+ }, |
|
| 116 |
+ {
|
|
| 117 |
+ "word": "유유상종", |
|
| 118 |
+ "hint": "같은 부류의 사람들끼리 모인다는 뜻의 사자성어", |
|
| 119 |
+ "startX": 6, |
|
| 120 |
+ "startY": 3, |
|
| 121 |
+ "direction": "vertical", |
|
| 122 |
+ "gradings": false |
|
| 123 |
+ }, |
|
| 124 |
+ {
|
|
| 125 |
+ "word": "분토지언", |
|
| 126 |
+ "hint": "똥과 흙 같은 더럽고 이치에 맞지 않는 말을 의미하는 사자성어", |
|
| 127 |
+ "startX": 3, |
|
| 128 |
+ "startY": 4, |
|
| 129 |
+ "direction": "vertical", |
|
| 130 |
+ "gradings": false |
|
| 131 |
+ }, |
|
| 132 |
+ {
|
|
| 133 |
+ "word": "묘사", |
|
| 134 |
+ "hint": "어떤 대상을 그림이나 말로 자세하게 표현하는 것", |
|
| 135 |
+ "startX": 7, |
|
| 136 |
+ "startY": 6, |
|
| 137 |
+ "direction": "vertical", |
|
| 138 |
+ "gradings": false |
|
| 139 |
+ } |
|
| 60 | 140 |
] |
| 61 | 141 |
} |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?