{"id":2520,"date":"2025-10-11T15:14:15","date_gmt":"2025-10-11T06:14:15","guid":{"rendered":"https:\/\/punipunidictionary.com\/?page_id=2520"},"modified":"2025-12-29T10:30:37","modified_gmt":"2025-12-29T01:30:37","slug":"quiz-library-november-2025","status":"publish","type":"page","link":"https:\/\/punipunidictionary.com\/?page_id=2520","title":{"rendered":"Quiz Library \u2014 November 2025"},"content":{"rendered":"\n<div class=\"swell-block-fullWide pc-py-60 sp-py-40 alignfull\" style=\"background-color:#f7f7f7\"><div class=\"swell-block-fullWide__inner l-article\">\n<!-- September Quiz: image + 4 choices (English version) -->\n<div class=\"pp-quiz-wrap\"\n     data-title=\"Quiz\"\n     data-correct-text=\"Correct!\"\n     data-wrong-text=\"Wrong...\">\n  <section class=\"pp-quiz\"\n           data-explain=\"&quot;Uto Uto&quot; is correct, which describes drowsy, half-asleep moments!\">\n    <!-- Replace the image URL below -->\n    <figure class=\"pp-quiz-figure\">\n      <img decoding=\"async\" src=\"https:\/\/punipunidictionary.com\/wp-content\/uploads\/2025\/10\/november_quiz.png\" alt=\"Quiz illustration\" loading=\"lazy\" \/>\n      \n    <\/figure>\n\n    <h3 class=\"pp-quiz-q\" style=\"margin-top:40px\">Q:<BR>Which Japanese sound word matches this illustration best?<\/h3>\n\n    <div class=\"pp-quiz-choices\">\n      <!-- Add data-correct=\"true\" only to the right answer -->\n      <button class=\"pp-choice\">Jito Jito<\/button>\n      <button class=\"pp-choice\" data-correct=\"true\">Uto Uto<\/button>\n      <button class=\"pp-choice\">Doro Doro<\/button>\n      <button class=\"pp-choice\">Gakkari<\/button>\n    <\/div>\n\n    <div class=\"pp-quiz-feedback\" hidden aria-live=\"polite\"><\/div>\n  <\/section>\n\n  <div class=\"pp-quiz-controls\">\n    <button class=\"pp-next\" disabled>See Result \u2192<\/button>\n    <div class=\"pp-score\" aria-live=\"polite\"><\/div>\n  <\/div>\n<\/div>\n\n\n\n<style>\n\/* ========= Customizable colors (edit freely) ========= *\/\n.pp-quiz-wrap{\n  --pp-correct-border:#B2E3D7;  \/* Correct border color *\/\n  --pp-correct-bg:#7AE3CD;      \/* Correct background color *\/\n  --pp-wrong-border:#898989;    \/* Wrong border color *\/\n  --pp-wrong-bg:#D6D6D6;        \/* Wrong background color *\/\n  --pp-feedback-ok:#7AE3CD;     \/* Correct feedback text color *\/\n  --pp-feedback-ng:#F88C9B;     \/* Wrong feedback text color *\/\n}\n\n\/* ====== Layout & sizing ====== *\/\n.pp-quiz-wrap{\n  border:4px solid #eee;border-radius:12px;padding:20px;\n  max-width:720px;margin:0 auto; \/* overall wrapper *\/\n}\n\n.pp-quiz-figure{margin:0 0 10px;text-align:center}\n.pp-quiz-figure img{\n  width:100%;height:auto;border-radius:10px;display:block;\n  max-width:220px;margin:0 auto;\n}\n.pp-quiz-figure figcaption{font-size:.9rem;color:#666;margin-top:6px}\n\n.pp-quiz-q{margin:0 0 12px}\n.pp-quiz-choices{display:grid;gap:10px}\n\n\/* ====== Choice buttons ====== *\/\n.pp-choice{\n  padding:14px 16px;\n  border:1px solid #ddd;\n  border-radius:30px;       \/* <<< more roundness *\/\n  background:#fff;\n  cursor:pointer;\n  text-align:center;        \/* <<< center the text *\/\n  font-weight:500;\n  color:#898989;   \/* \u2605\u3053\u3053\u3067\u30c6\u30ad\u30b9\u30c8\u30ab\u30e9\u30fc\u3092\u6307\u5b9a *\/\n}\n.pp-choice:hover{box-shadow:0 1px 4px rgba(0,0,0,.06)}\n.pp-choice[disabled]{opacity:.75;cursor:default}\n\n\/* ====== Correct \/ Wrong colors (editable above) ====== *\/\n.pp-choice.pp-correct{border-color:var(--pp-correct-border);background:var(--pp-correct-bg)}\n.pp-choice.pp-wrong{border-color:var(--pp-wrong-border);background:var(--pp-wrong-bg)}\n\n\/* \u30b9\u30af\u30ed\u30fc\u30eb\u6642\u306b\u898b\u51fa\u3057\u304c\u30d8\u30c3\u30c0\u30fc\u306b\u96a0\u308c\u306a\u3044\u3088\u3046\u3001\u4e0a\u30de\u30fc\u30b8\u30f3\u3092\u78ba\u4fdd *\/\n.pp-quiz-wrap{ --pp-sticky-offset: 100px; }  \/* \u30d8\u30c3\u30c0\u30fc\u304c\u9ad8\u3044\u306a\u3089120-140px\u306b\u8abf\u6574\u53ef *\/\n#pp-result-title{ scroll-margin-top: var(--pp-sticky-offset, 100px); }\n\n.pp-more-btn {\n  display:inline-block;\n  padding:10px 16px;\n  border:1px solid #ddd;\n  border-radius:30px;\n  text-decoration:none;\n  color:#898989;       \/* \u2605\u3053\u3053\u3067\u6587\u5b57\u8272\u3092\u6307\u5b9a *\/\n}\n\n.pp-more-btn:hover {\n  color:#898989;       \/* \u2605\u30db\u30d0\u30fc\u6642\u306e\u8272 *\/\n  box-shadow:0 1px 4px rgba(0,0,0,.06);\n}\n\n\n\/* ====== Feedback text ====== *\/\n.pp-quiz-feedback{margin-top:8px;font-size:1rem}\n.pp-quiz-feedback.ok{color:var(--pp-feedback-ok);font-weight:700}\n.pp-quiz-feedback.ng{color:var(--pp-feedback-ng);font-weight:700}\n\n.pp-quiz-controls{\n  display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:12px\n}\n.pp-next{padding:10px 14px;border-radius:30px;border:1px solid #ddd;background:#fafafa}\n.pp-next:disabled{opacity:.6}\n.pp-score{font-weight:600}\n<\/style>\n\n\n\n<script>\n(() => {\n  const wrap = document.querySelector('.pp-quiz-wrap');\n  if(!wrap) return;\n\n  const section  = wrap.querySelector('.pp-quiz');\n  const scoreBox = wrap.querySelector('.pp-score');\n  const nextBtn  = wrap.querySelector('.pp-next');\n  const title    = wrap.dataset.title || 'Quiz';\n  const okText   = wrap.dataset.correctText || 'Correct!';\n  const ngText   = wrap.dataset.wrongText || 'Wrong!';\n  let score = 0;\n\n  \/\/ helper: scroll to the quiz box smoothly\n  function scrollQuizIntoView(offset = 0){\n    const y = wrap.getBoundingClientRect().top + window.scrollY + offset;\n    window.scrollTo({ top: y, behavior: 'smooth' });\n  }\n\n  function lockChoices(sec){\n    sec.querySelectorAll('.pp-choice').forEach(b => b.disabled = true);\n  }\n\n  const feedback = section.querySelector('.pp-quiz-feedback');\n  section.querySelectorAll('.pp-choice').forEach(btn => {\n    btn.addEventListener('click', () => {\n      if(btn.disabled) return;\n      const correct = btn.hasAttribute('data-correct');\n      lockChoices(section);\n\n      if(correct){\n        btn.classList.add('pp-correct');\n        feedback.className = 'pp-quiz-feedback ok';\n        feedback.textContent = okText + ' ' + (section.dataset.explain || '');\n        score = 1;\n      }else{\n        btn.classList.add('pp-wrong');\n        const right = section.querySelector('.pp-choice[data-correct]');\n        if(right) right.classList.add('pp-correct');\n        feedback.className = 'pp-quiz-feedback ng';\n        feedback.textContent = ngText + ' ' + (section.dataset.explain || '');\n      }\n\n      feedback.hidden = false;\n      nextBtn.disabled = false;\n      scoreBox.textContent = `Score: ${score} \/ 1`;\n\n      \/\/ \u89e3\u7b54\u5f8c\u306b\u30af\u30a4\u30ba\u4e0a\u90e8\u3078\u81ea\u52d5\u30b9\u30af\u30ed\u30fc\u30eb\uff08\u898b\u5931\u308f\u306a\u3044\u3088\u3046\u306b\uff09\n      scrollQuizIntoView(-20);\n    });\n  });\n\nnextBtn.addEventListener('click', () => {\n  \/\/ \u7d50\u679cHTML\uff08\u898b\u51fa\u3057\u306b id \u3092\u4ed8\u4e0e\uff09\n  wrap.innerHTML = `\n    <div class=\"pp-quiz-result\" style=\"text-align:center;padding:24px\">\n      <h3 id=\"pp-result-title\">${title} Complete!<\/h3>\n      <p style=\"font-size:1.1rem\">Score: <strong>${score} \/ 1<\/strong><\/p>\n      <!-- \u2605\u3053\u3053\u3092\u8ffd\u52a0\uff1aKira Kira \u30c8\u30d4\u30c3\u30af\u3078\u306e\u30ea\u30f3\u30af\u30dc\u30bf\u30f3 -->\n      <a class=\"pp-more-btn\" href=\"https:\/\/punipunidictionary.com\/?p=1351\" style=\"display:inline-block;margin-top:16px\">\n        Learn more about \u201cUto Uto\u201d \u2192\n      <\/a><BR>\n      <a class=\"pp-more-btn\" href=\"https:\/\/punipunidictionary.com\/?p=2063\" style=\"display:inline-block;margin-top:16px\">\n        Back to \u201cQuiz Library\u201d home page \u2192\n      <\/a>\n    <\/div>`;\n\n  \/\/ \u2605\u3053\u3053\u304c\u30dd\u30a4\u30f3\u30c8\uff1a\u63cf\u753b\u304c\u53cd\u6620\u3055\u308c\u305f\u201c\u6b21\u306e\u30d5\u30ec\u30fc\u30e0\u201d\u3067\u898b\u51fa\u3057\u306b\u30b9\u30af\u30ed\u30fc\u30eb\n  requestAnimationFrame(() => {\n    const head = document.getElementById('pp-result-title');\n    if (head) head.scrollIntoView({ behavior: 'smooth', block: 'start' });\n  });\n\n  \/\/ \uff08\u3082\u3057\u3053\u306e\u76f4\u5f8c\u306b scrollQuizIntoView(...) \u3092\u6b8b\u3057\u3066\u3044\u305f\u3089\u524a\u9664\u3057\u3066\u304f\u3060\u3055\u3044\uff09\n});\n\n  scoreBox.textContent = `Score: 0 \/ 1`;\n})();\n<\/script>\n<\/div><\/div>\n\n\n\n<div class=\"swell-block-button is-style-btn_normal\"><a href=\"https:\/\/punipunidictionary.com\/?page_id=2063\" class=\"swell-block-button__link\"><span>Quiz Library Home<\/span><\/a><\/div>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":2515,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"swell_btn_cv_data":"","footnotes":""},"class_list":["post-2520","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/punipunidictionary.com\/index.php?rest_route=\/wp\/v2\/pages\/2520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/punipunidictionary.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/punipunidictionary.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/punipunidictionary.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/punipunidictionary.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2520"}],"version-history":[{"count":5,"href":"https:\/\/punipunidictionary.com\/index.php?rest_route=\/wp\/v2\/pages\/2520\/revisions"}],"predecessor-version":[{"id":4902,"href":"https:\/\/punipunidictionary.com\/index.php?rest_route=\/wp\/v2\/pages\/2520\/revisions\/4902"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/punipunidictionary.com\/index.php?rest_route=\/wp\/v2\/media\/2515"}],"wp:attachment":[{"href":"https:\/\/punipunidictionary.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}