{"id":1225,"date":"2025-07-23T09:12:30","date_gmt":"2025-07-23T00:12:30","guid":{"rendered":"https:\/\/dod77.synology.me\/wordpress\/?p=1225"},"modified":"2025-07-30T18:16:24","modified_gmt":"2025-07-30T09:16:24","slug":"%ec%9d%bc%ec%83%81%ec%83%9d%ed%99%9c-%ed%95%9c%ec%9e%90%ec%84%b1%ec%96%b4-%ed%80%b4%ec%a6%88-20","status":"publish","type":"post","link":"https:\/\/dod77.synology.me\/wordpress\/1225\/","title":{"rendered":"\uc77c\uc0c1\uc0dd\ud65c \ud55c\uc790\uc131\uc5b4 \ud034\uc988 20"},"content":{"rendered":"\n<br><br><p class=\"jk-custom1\"><a href=\"https:\/\/contents.premium.naver.com\/dodbook\/dodumlab\/contents\/250723145052613na\">\uc77c\uc0c1\uc0dd\ud65c \ud55c\uc790\uc131\uc5b4 20\ub9e4 PDF \ud559\uc2b5\uc9c0 \ub2e4\uc6b4\ub85c\ub4dc \ubc1b\uae30<\/a><\/p>\n\n\n\n<div id=\"quiz-container\" style=\"padding: 20px; max-width: 600px; margin: 0 auto; background: #fff8dc; border: 2px solid #000; border-radius: 10px;\">\n  \ud034\uc988\ub97c \ubd88\ub7ec\uc624\ub294 \uc911\uc785\ub2c8\ub2e4&#8230;\n<\/div>\n\n<script>\nconst password = \"1234\";\nlet quizData = [];\nlet currentIndex = 0;\n\n\/\/ \ub370\uc774\ud130 \uac00\uc838\uc624\uae30\nfunction fetchQuizData() {\n  fetch(\"https:\/\/script.google.com\/macros\/s\/AKfycbxS12uzd-inoyvyu65v3kVC7eQhnk3dXEK1AbN0jQIeqkc6-JYvAUnjMh7zq9dCB4qeXw\/exec\", {\n    method: \"POST\",\n    headers: { \"Content-Type\": \"application\/x-www-form-urlencoded\" },\n    body: new URLSearchParams({ pw: password })\n  })\n  .then(response => response.json())\n  .then(data => {\n    if (data.error) {\n      document.getElementById(\"quiz-container\").textContent = data.error;\n    } else {\n      quizData = data.slice(1); \/\/ \uccab \ud589\uc740 \ud5e4\ub354\uc774\ubbc0\ub85c \uc81c\uc678\n      showStartOptions();\n    }\n  })\n  .catch(error => {\n    console.error(\"\uc694\uccad \uc2e4\ud328:\", error);\n    document.getElementById(\"quiz-container\").textContent = \"\ub370\uc774\ud130\ub97c \ubd88\ub7ec\uc624\uc9c0 \ubabb\ud588\uc2b5\ub2c8\ub2e4.\";\n  });\n}\n\n\/\/ \uc2dc\uc791 \uc635\uc158 \ud654\uba74\nfunction showStartOptions() {\n  document.getElementById(\"quiz-container\").innerHTML = `\n    <div class=\"quiz-header start-header\">\n      <h3>\ucd1d ${quizData.length} \ubb38\ud56d\uc774 \uc900\ube44\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.<\/h3>\n      <button class=\"fullscreen-btn\" onclick=\"toggleFullscreen()\">\uc804\uccb4\ud654\uba74<\/button>\n    <\/div>\n    <div class=\"button-group\">\n      <button onclick=\"startRandomQuiz()\">\ub79c\ub364\uc73c\ub85c \ud034\uc988\ub0b4\uae30<\/button>\n      <button onclick=\"startSequentialQuiz()\">\uc21c\uc11c\ub300\ub85c \ubb38\uc81c\ub0b4\uae30<\/button>\n      <input type=\"number\" id=\"start-number\" min=\"1\" max=\"${quizData.length}\" value=\"1\" style=\"width:60px;\">\n    <\/div>\n  `;\n}\n\n\/\/ \ud034\uc988 \uc2dc\uc791\nfunction startRandomQuiz() {\n  quizData = shuffleArray(quizData);\n  currentIndex = 0;\n  showQuiz();\n}\n\nfunction startSequentialQuiz() {\n  const startInput = document.getElementById('start-number');\n  let startNumber = parseInt(startInput.value) || 1;\n  startNumber = Math.max(1, Math.min(startNumber, quizData.length));\n  currentIndex = startNumber - 1;\n  showQuiz();\n}\n\n\/\/ \ubb38\uc81c \ucd9c\ub825\nfunction showQuiz() {\n  if (currentIndex >= quizData.length) {\n    document.getElementById(\"quiz-container\").innerHTML = `\n      <div class=\"quiz-header\">\n        <span class=\"quiz-progress\">\ubb38\uc81c ${currentIndex} \/ ${quizData.length}<\/span>\n        <button class=\"fullscreen-btn\" onclick=\"toggleFullscreen()\">\uc804\uccb4\ud654\uba74<\/button>\n        <input type=\"range\" id=\"font-size-slider\" min=\"0.5\" max=\"3\" step=\"0.1\" value=\"1\" title=\"\uae00\uc790 \ud06c\uae30 \uc870\uc808\">\n      <\/div>\n      <h3>\ud034\uc988\uac00 \ubaa8\ub450 \ub05d\ub0ac\uc2b5\ub2c8\ub2e4!<\/h3>\n      <button onclick=\"showStartOptions()\">\ub2e4\uc2dc \uc2dc\uc791\ud558\uae30<\/button>\n    `;\n    initFontSizeSlider();\n    return;\n  }\n\n  const quizItem = quizData[currentIndex];\n  const meaning = quizItem[3];\n\n  const quizHtml = `\n    <div class=\"quiz-header\">\n      <span class=\"quiz-progress\">\ubb38\uc81c ${currentIndex + 1} \/ ${quizData.length}<\/span>\n      <button class=\"fullscreen-btn\" onclick=\"toggleFullscreen()\">\uc804\uccb4\ud654\uba74<\/button>\n      <input type=\"range\" id=\"font-size-slider\" min=\"0.5\" max=\"3\" step=\"0.1\" value=\"1\" title=\"\uae00\uc790 \ud06c\uae30 \uc870\uc808\">\n    <\/div>\n    <div class=\"question-text\">\ubb38\uc81c: ${meaning}<\/div>\n    <div class=\"button-group\">\n      <button onclick=\"showInitialHint()\">\ucd08\uc131 \ud78c\ud2b8 \ubcf4\uae30<\/button>\n      <button onclick=\"showAnswer()\">\uc815\ub2f5 \ubcf4\uae30<\/button>\n    <\/div>\n    <div id=\"hint-container\"><\/div>\n  `;\n\n  document.getElementById(\"quiz-container\").innerHTML = quizHtml;\n  initFontSizeSlider();\n}\n\nfunction showInitialHint() {\n  const quizItem = quizData[currentIndex];\n  const word = quizItem[1];\n  const initials = getInitialConsonants(word);\n  const boxedInitials = [...initials].map(ch => `<span class=\"boxed-initial\">${ch}<\/span>`).join('');\n\n  const hintContainer = document.getElementById(\"hint-container\");\n  if (hintContainer) {\n    hintContainer.innerHTML = `<div>\ucd08\uc131 \ud78c\ud2b8: ${boxedInitials}<\/div>`;\n  }\n}\n\nfunction showAnswer() {\n  const quizItem = quizData[currentIndex];\n  const word = quizItem[1];\n  const hanja = quizItem[2];\n\n  const answerHtml = `\n    <div class=\"quiz-header\">\n      <span class=\"quiz-progress\">\ubb38\uc81c ${currentIndex + 1} \/ ${quizData.length}<\/span>\n      <button class=\"fullscreen-btn\" onclick=\"toggleFullscreen()\">\uc804\uccb4\ud654\uba74<\/button>\n      <input type=\"range\" id=\"font-size-slider\" min=\"0.5\" max=\"3\" step=\"0.1\" value=\"1\" title=\"\uae00\uc790 \ud06c\uae30 \uc870\uc808\">\n    <\/div>\n    <div class=\"answer-section\">\n      <p><strong>${word}<\/strong><\/p>\n      <p><span class=\"answer-hanja\">${hanja}<\/span><\/p>\n    <\/div>\n    <div class=\"button-group\">\n      <button onclick=\"nextQuiz()\">\ub2e4\uc74c \ubb38\uc81c<\/button>\n    <\/div>\n  `;\n\n  document.getElementById(\"quiz-container\").innerHTML = answerHtml;\n  initFontSizeSlider();\n}\n\nfunction nextQuiz() {\n  currentIndex++;\n  showQuiz();\n}\n\nfunction getInitialConsonants(str) {\n  const INITIALS = [\"\u3131\",\"\u3132\",\"\u3134\",\"\u3137\",\"\u3138\",\"\u3139\",\"\u3141\",\"\u3142\",\"\u3143\",\"\u3145\",\"\u3146\",\"\u3147\",\"\u3148\",\"\u3149\",\"\u314a\",\"\u314b\",\"\u314c\",\"\u314d\",\"\u314e\"];\n  let result = '';\n  for (let char of str) {\n    const code = char.charCodeAt(0);\n    if (code >= 0xAC00 && code <= 0xD7A3) {\n      const uniVal = code - 0xAC00;\n      const initialIndex = Math.floor(uniVal \/ 588);\n      result += INITIALS[initialIndex];\n    } else {\n      result += char;\n    }\n  }\n  return result;\n}\n\nfunction toggleFullscreen() {\n  const gameContainer = document.getElementById('quiz-container');\n  if (!document.fullscreenElement) {\n    gameContainer.requestFullscreen().catch(err => alert(err.message));\n  } else {\n    document.exitFullscreen();\n  }\n}\n\nfunction initFontSizeSlider() {\n  const slider = document.getElementById('font-size-slider');\n  if (slider) {\n    slider.addEventListener('input', function() {\n      document.getElementById('quiz-container').style.fontSize = this.value + 'em';\n    });\n  }\n}\n\n\/\/ \ubc30\uc5f4 \uc11e\uae30\nfunction shuffleArray(array) {\n  return array.sort(() => Math.random() - 0.5);\n}\n\n\/\/ \ub85c\ub529 \uc2dc \uc2dc\uc791\nfetchQuizData();\n<\/script>\n\n<style>\n#quiz-container {\n  position: relative;\n  max-width: 800px;\n  margin: 50px auto;\n  padding: 60px 20px 20px 20px;\n  background: #fff8dc;\n  border: 2px solid #000;\n  border-radius: 10px;\n  box-sizing: border-box;\n  line-height: 1.6;\n}\n\n.quiz-header {\n  position: absolute;\n  top: 4px;\n  left: 20px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 16px !important;\n}\n\n.quiz-header.start-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  position: static;\n}\n\n.quiz-progress {\n  font-size: 16px !important;\n  font-weight: bold;\n  color: #333;\n}\n\n.fullscreen-btn {\n  padding: 5px 10px;\n  font-size: 14px !important;\n  border: 1px solid #000;\n  border-radius: 5px;\n  background-color: #eee;\n  cursor: pointer;\n}\n\n.fullscreen-btn:hover {\n  background-color: #ddd;\n}\n\n#quiz-container:fullscreen {\n  width: 100vw;\n  height: 100vh;\n  font-size: 1em;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background-color: #fff8dc;\n}\n\n#quiz-container:fullscreen .quiz-progress {\n  font-size: 1.5em;\n}\n\n#quiz-container:fullscreen .fullscreen-btn {\n  font-size: 1.2em;\n  padding: 8px 16px;\n}\n\n.question-text {\n  font-size: 2em;\n  font-weight: bold;\n  background-color: #f5f5dc;\n  padding: 40px;\n  border-left: 5px solid #555;\n  margin-bottom: 20px;\n}\n\n.answer-section {\n  text-align: center;\n  margin: 30px 0;\n}\n\n.answer-section p {\n  font-size: 1.2em;\n  margin: 15px 0;\n  line-height: 1.6;\n}\n\n.answer-section .answer-hanja {\n  font-size: 2.5em;\n  background-color: #f0f8ff;\n  display: inline-block;\n  padding: 10px 50px;\n  border-radius: 20px;\n  margin-left: 10px;\n}\n\n.button-group {\n  display: flex;\n  gap: 10px;\n  justify-content: center;\n  margin: 20px 0;\n}\n\n#quiz-container button:not(.fullscreen-btn) {\n  margin: 10px;\n  padding: 15px 30px;\n  font-size: 1.2em;\n  border: 2px solid #000;\n  background-color: #87cefa;\n  border-radius: 10px;\n  cursor: pointer;\n}\n\n#quiz-container button:hover:not(.fullscreen-btn) {\n  background-color: #add8e6;\n}\n\n.boxed-initial {\n  display: inline-block;\n  border: 2px solid #000;\n  border-radius: 4px;\n  padding: 3px 8px;\n  margin: 0 2px;\n  background-color: #f0f0f0;\n  font-weight: bold;\n  font-size: 1.2em;\n}\n\n#font-size-slider {\n  width: 120px;\n  margin-left: 10px;\n  font-size: 14px !important;\n}\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>\uc77c\uc0c1\uc0dd\ud65c \ud55c\uc790\uc131\uc5b4 20\ub9e4 PDF \ud559\uc2b5\uc9c0 \ub2e4\uc6b4\ub85c\ub4dc \ubc1b\uae30 \ud034\uc988\ub97c \ubd88\ub7ec\uc624\ub294 \uc911\uc785\ub2c8\ub2e4&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[],"_links":{"self":[{"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/posts\/1225"}],"collection":[{"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/comments?post=1225"}],"version-history":[{"count":0,"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/posts\/1225\/revisions"}],"wp:attachment":[{"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/media?parent=1225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/categories?post=1225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dod77.synology.me\/wordpress\/wp-json\/wp\/v2\/tags?post=1225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}