{"id":506,"date":"2025-12-03T20:31:57","date_gmt":"2025-12-04T01:31:57","guid":{"rendered":"https:\/\/sites.wp.odu.edu\/fromdata2dialogue\/?page_id=506"},"modified":"2025-12-04T01:51:38","modified_gmt":"2025-12-04T06:51:38","slug":"506-2","status":"publish","type":"page","link":"https:\/\/sites.wp.odu.edu\/fromdata2dialogue\/506-2\/","title":{"rendered":"How Well Do You Know Your FireWood?"},"content":{"rendered":"\n<p>\n<div id=\"timber-wrapper\" style=\"text-align:center; margin:2rem 0;\">\r\n\r\n  <!-- BIG RED COUNTDOWN -->\r\n  <p id=\"timberCountdown\" style=\"\r\n    font-size:3rem;\r\n    margin-top:1rem;\r\n    font-weight:900;\r\n    color:#dc2626;\r\n    text-align:center;\r\n  \"><\/p>\r\n\r\n  <!-- TIMBER TEXT -->\r\n  <p id=\"timberText\" style=\"\r\n    display:none;\r\n    font-size:4rem;\r\n    font-weight:900;\r\n    color:#dc2626;\r\n    margin-top:0.75rem;\r\n    text-align:center;\r\n  \">TIMBER!!<\/p>\r\n\r\n  <!-- SCROLL DOWN TEXT -->\r\n  <p id=\"scrollDownText\" style=\"\r\n    display:none;\r\n    font-size:2rem;\r\n    font-weight:700;\r\n    color:#1f2937;\r\n    margin-top:0.5rem;\r\n    text-align:center;\r\n  \">\u2193 Scroll Down \u2193<\/p>\r\n\r\n  <!-- Hidden audio -->\r\n  <audio id=\"timberSound\" preload=\"auto\">\r\n    <source src=\"https:\/\/www.dropbox.com\/scl\/fi\/4oxf9bfyasstu8mc6vl0y\/Tree-Cutting-Wood-Cutting-and-Falling-Sound-Effect.mp3?rlkey=xc0r82ep6vuzokd8lnfnzvdfx&st=avw4p025&raw=1\" type=\"audio\/mpeg\">\r\n  <\/audio>\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n  const countdownEl = document.getElementById('timberCountdown');\r\n  const timberText = document.getElementById('timberText');\r\n  const scrollText = document.getElementById('scrollDownText');\r\n  const audio = document.getElementById('timberSound');\r\n\r\n  let count = 10; \/\/ 10-second countdown\r\n  countdownEl.textContent = count;\r\n\r\n  const timer = setInterval(function () {\r\n    count--;\r\n    if (count > 0) {\r\n      countdownEl.textContent = count;\r\n    } else {\r\n      clearInterval(timer);\r\n\r\n      \/\/ Remove countdown\r\n      countdownEl.textContent = \"\";\r\n\r\n      \/\/ Reveal TIMBER!!\r\n      timberText.style.display = \"block\";\r\n\r\n      \/\/ Reveal scroll-down text\r\n      scrollText.style.display = \"block\";\r\n\r\n      \/\/ Save original volume\r\n      const originalVolume = audio.volume;\r\n\r\n      \/\/ Set volume to 4%\r\n      audio.volume = 0.04;\r\n\r\n      \/\/ Play sound once\r\n      audio.currentTime = 0;\r\n      audio.loop = false;\r\n      audio.play().catch(()=>{});\r\n\r\n      \/\/ Restore volume after the sound ends\r\n      audio.addEventListener(\"ended\", function restore() {\r\n        audio.volume = originalVolume;\r\n        audio.removeEventListener(\"ended\", restore);\r\n      });\r\n    }\r\n  }, 1000);\r\n})();\r\n<\/script>\n<\/p>\n\n\n\n<p>\n<div id=\"wood-match-game\">\r\n  <h2>Wood Species Match-Up<\/h2>\r\n  <p>Click a wood name, then click the picture you think matches it.<\/p>\r\n\r\n  <!-- Word list (will be shuffled by JS) -->\r\n  <div class=\"word-list\">\r\n    <button class=\"word-btn\" data-name=\"Fir\">Fir<\/button>\r\n    <button class=\"word-btn\" data-name=\"Oak\">Oak<\/button>\r\n    <button class=\"word-btn\" data-name=\"Hickory\">Hickory<\/button>\r\n    <button class=\"word-btn\" data-name=\"Maple\">Maple<\/button>\r\n    <button class=\"word-btn\" data-name=\"Ash\">Ash<\/button>\r\n    <button class=\"word-btn\" data-name=\"Birch\">Birch<\/button>\r\n    <button class=\"word-btn\" data-name=\"Beech\">Beech<\/button>\r\n    <button class=\"word-btn\" data-name=\"Cherry\">Cherry<\/button>\r\n    <button class=\"word-btn\" data-name=\"Walnut\">Walnut<\/button>\r\n    <button class=\"word-btn\" data-name=\"Pine\">Pine<\/button>\r\n    <button class=\"word-btn\" data-name=\"Spruce\">Spruce<\/button>\r\n  <\/div>\r\n\r\n  <!-- Image grid (fixed order) -->\r\n  <div class=\"image-grid\">\r\n    <!-- FIR -->\r\n    <div class=\"image-card\" data-name=\"Fir\">\r\n      <img decoding=\"async\" src=\"http:\/\/sites.wp.odu.edu\/fromdata2dialogue\/wp-content\/uploads\/sites\/40141\/2025\/12\/IMG_2932.jpeg\" alt=\"Fir firewood\">\r\n    <\/div>\r\n\r\n    <!-- OAK -->\r\n    <div class=\"image-card\" data-name=\"Oak\">\r\n      <img decoding=\"async\" src=\"http:\/\/sites.wp.odu.edu\/fromdata2dialogue\/wp-content\/uploads\/sites\/40141\/2025\/12\/IMG_2919.jpeg\" alt=\"Oak firewood\">\r\n    <\/div>\r\n\r\n    <!-- HICKORY -->\r\n    <div class=\"image-card\" data-name=\"Hickory\">\r\n      <img decoding=\"async\" src=\"http:\/\/sites.wp.odu.edu\/fromdata2dialogue\/wp-content\/uploads\/sites\/40141\/2025\/12\/IMG_2920.jpeg\" alt=\"Hickory firewood\">\r\n    <\/div>\r\n\r\n    <!-- MAPLE -->\r\n    <div class=\"image-card\" data-name=\"Maple\">\r\n      <img decoding=\"async\" src=\"http:\/\/sites.wp.odu.edu\/fromdata2dialogue\/wp-content\/uploads\/sites\/40141\/2025\/12\/IMG_2921.jpeg\" alt=\"Maple firewood\">\r\n    <\/div>\r\n\r\n    <!-- ASH -->\r\n    <div class=\"image-card\" data-name=\"Ash\">\r\n      <img decoding=\"async\" src=\"http:\/\/sites.wp.odu.edu\/fromdata2dialogue\/wp-content\/uploads\/sites\/40141\/2025\/12\/IMG_2922.jpeg\" alt=\"Ash firewood\">\r\n    <\/div>\r\n\r\n    <!-- BIRCH -->\r\n    <div class=\"image-card\" data-name=\"Birch\">\r\n      <img decoding=\"async\" src=\"http:\/\/sites.wp.odu.edu\/fromdata2dialogue\/wp-content\/uploads\/sites\/40141\/2025\/12\/IMG_2923.jpeg\" alt=\"Birch firewood\">\r\n    <\/div>\r\n\r\n    <!-- BEECH -->\r\n    <div class=\"image-card\" data-name=\"Beech\">\r\n      <img decoding=\"async\" src=\"http:\/\/sites.wp.odu.edu\/fromdata2dialogue\/wp-content\/uploads\/sites\/40141\/2025\/12\/IMG_2927.jpeg\" alt=\"Beech firewood\">\r\n    <\/div>\r\n\r\n    <!-- CHERRY -->\r\n    <div class=\"image-card\" data-name=\"Cherry\">\r\n      <img decoding=\"async\" src=\"http:\/\/sites.wp.odu.edu\/fromdata2dialogue\/wp-content\/uploads\/sites\/40141\/2025\/12\/IMG_2928.jpeg\" alt=\"Cherry firewood\">\r\n    <\/div>\r\n\r\n    <!-- WALNUT -->\r\n    <div class=\"image-card\" data-name=\"Walnut\">\r\n      <img decoding=\"async\" src=\"http:\/\/sites.wp.odu.edu\/fromdata2dialogue\/wp-content\/uploads\/sites\/40141\/2025\/12\/IMG_2929.jpeg\" alt=\"Walnut firewood\">\r\n    <\/div>\r\n\r\n    <!-- PINE -->\r\n    <div class=\"image-card\" data-name=\"Pine\">\r\n      <img decoding=\"async\" src=\"http:\/\/sites.wp.odu.edu\/fromdata2dialogue\/wp-content\/uploads\/sites\/40141\/2025\/12\/IMG_2930.jpeg\" alt=\"Pine firewood\">\r\n    <\/div>\r\n\r\n    <!-- SPRUCE -->\r\n    <div class=\"image-card\" data-name=\"Spruce\">\r\n      <img decoding=\"async\" src=\"http:\/\/sites.wp.odu.edu\/fromdata2dialogue\/wp-content\/uploads\/sites\/40141\/2025\/12\/IMG_2931.jpeg\" alt=\"Spruce firewood\">\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <p id=\"wood-match-message\"><\/p>\r\n<\/div>\r\n\r\n<style>\r\n  #wood-match-game {\r\n    max-width: 900px;\r\n    margin: 2rem auto;\r\n    padding: 1.5rem;\r\n    border-radius: 12px;\r\n    background: rgba(255, 255, 255, 0.9);\r\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\r\n  }\r\n  #wood-match-game h2 {\r\n    text-align: center;\r\n    margin-bottom: 0.5rem;\r\n  }\r\n  #wood-match-game p {\r\n    text-align: center;\r\n  }\r\n  .word-list {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 0.5rem;\r\n    justify-content: center;\r\n    margin: 1rem 0 1.5rem;\r\n  }\r\n  .word-btn {\r\n    padding: 0.35rem 0.75rem;\r\n    border-radius: 999px;\r\n    border: 1px solid #ccc;\r\n    background: #f5f5f5;\r\n    cursor: pointer;\r\n    font-size: 0.9rem;\r\n    transition: background 0.15s, transform 0.1s, border-color 0.15s;\r\n  }\r\n  .word-btn:hover {\r\n    background: #e5e5e5;\r\n    transform: translateY(-1px);\r\n  }\r\n  .word-btn.selected {\r\n    background: #2563eb;\r\n    color: white;\r\n    border-color: #2563eb;\r\n  }\r\n  .word-btn.correct {\r\n    background: #16a34a;\r\n    color: white;\r\n    border-color: #16a34a;\r\n    cursor: default;\r\n  }\r\n  .image-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));\r\n    gap: 0.75rem;\r\n  }\r\n  .image-card {\r\n    position: relative;\r\n    border-radius: 10px;\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n    border: 2px solid transparent;\r\n    transition: transform 0.1s, box-shadow 0.1s, border-color 0.15s;\r\n    background: #f3f3f3;\r\n  }\r\n  .image-card img {\r\n    display: block;\r\n    width: 100%;\r\n    height: 120px;\r\n    object-fit: cover;\r\n  }\r\n  .image-card:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.15);\r\n  }\r\n  .image-card.correct {\r\n    border-color: #16a34a;\r\n    box-shadow: 0 0 0 2px #16a34a;\r\n    cursor: default;\r\n  }\r\n  .image-card.wrong {\r\n    border-color: #dc2626;\r\n  }\r\n  #wood-match-message {\r\n    margin-top: 1rem;\r\n    font-weight: 600;\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n  const wordList = document.querySelector('#wood-match-game .word-list');\r\n  const wordButtons = Array.from(wordList.querySelectorAll('.word-btn'));\r\n\r\n  \/\/ Fisher\u2013Yates shuffle for the word buttons\r\n  for (let i = wordButtons.length - 1; i > 0; i--) {\r\n    const j = Math.floor(Math.random() * (i + 1));\r\n    [wordButtons[i], wordButtons[j]] = [wordButtons[j], wordButtons[i]];\r\n  }\r\n  \/\/ Re-append in new randomized order\r\n  wordButtons.forEach(btn => wordList.appendChild(btn));\r\n\r\n  const words = document.querySelectorAll('#wood-match-game .word-btn');\r\n  const images = document.querySelectorAll('#wood-match-game .image-card');\r\n  const message = document.getElementById('wood-match-message');\r\n\r\n  let selectedWord = null;\r\n  let matches = 0;\r\n  const total = words.length;\r\n\r\n  words.forEach(btn => {\r\n    btn.addEventListener('click', () => {\r\n      if (btn.classList.contains('correct')) return;\r\n\r\n      words.forEach(b => b.classList.remove('selected'));\r\n      selectedWord = btn;\r\n      btn.classList.add('selected');\r\n      message.textContent = 'Now click the matching picture for \"' + btn.dataset.name + '\".';\r\n    });\r\n  });\r\n\r\n  images.forEach(card => {\r\n    card.addEventListener('click', () => {\r\n      if (!selectedWord || card.classList.contains('correct')) return;\r\n\r\n      const wordName = selectedWord.dataset.name;\r\n      const imageName = card.dataset.name;\r\n\r\n      images.forEach(c => c.classList.remove('wrong'));\r\n\r\n      if (wordName === imageName) {\r\n        selectedWord.classList.remove('selected');\r\n        selectedWord.classList.add('correct');\r\n        card.classList.add('correct');\r\n        selectedWord = null;\r\n        matches++;\r\n        message.textContent = 'Nice! You correctly matched ' + wordName + '.';\r\n\r\n        if (matches === total) {\r\n          message.textContent = 'Great job! You matched all the wood types correctly.';\r\n        }\r\n      } else {\r\n        card.classList.add('wrong');\r\n        message.textContent = 'Not quite. Try a different picture for \"' + wordName + '\".';\r\n      }\r\n    });\r\n  });\r\n})();\r\n<\/script>\n<\/p>\n\n\n\n<p>\n<!-- Invisible looping fire sound -->\r\n<audio id=\"fireSound\" muted loop style=\"display:none;\">\r\n  <source src=\"https:\/\/www.dropbox.com\/scl\/fi\/ef97yv4voxjh3nxslog5l\/Short-Fireplace-Video-Loop-with-Sound-1-minute-loop-Template-Fireplace-for-Background-Winter.mp3?rlkey=05fgp5optoh1p7ipk4phq7tdq&st=1zbh9zos&raw=1\" type=\"audio\/mpeg\">\r\n<\/audio>\r\n\r\n<script>\r\n(document.addEventListener || window.addEventListener)(\"scroll\", function () {\r\n    const audio = document.getElementById(\"fireSound\");\r\n    if (audio.paused) {\r\n        audio.play().catch(()=>{});\r\n        audio.muted = false;\r\n    }\r\n}, { once: true });\r\n<\/script>\n<\/p>\n\n\n\n<p>\n<!-- THREE TREE SCENE (Only middle tree falls) -->\r\n<div class=\"three-tree-scene\">\r\n  \r\n  <!-- LEFT TREE (static) -->\r\n  <div class=\"tree-wrap left-tree\">\r\n    <div class=\"tree\">\r\n      <div class=\"tree-top\"><\/div>\r\n      <div class=\"tree-trunk\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- MIDDLE TREE (falls after 23s) -->\r\n  <div class=\"tree-wrap middle-tree\">\r\n    <div class=\"tree\">\r\n      <div class=\"tree-top\"><\/div>\r\n      <div class=\"tree-trunk\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- RIGHT TREE (static) -->\r\n  <div class=\"tree-wrap right-tree\">\r\n    <div class=\"tree\">\r\n      <div class=\"tree-top\"><\/div>\r\n      <div class=\"tree-trunk\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"tree-ground\"><\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* Scene container *\/\r\n.three-tree-scene {\r\n  position: relative;\r\n  width: 100%;\r\n  max-width: 850px;\r\n  height: 450px;\r\n  margin: 2rem auto;\r\n  overflow: visible;\r\n}\r\n\r\n\/* Ground line *\/\r\n.tree-ground {\r\n  position: absolute;\r\n  bottom: 50px;\r\n  left: 0;\r\n  right: 0;\r\n  height: 5px;\r\n  background: #4b5563;\r\n}\r\n\r\n\/* Shared tree wrapper base *\/\r\n.tree-wrap {\r\n  position: absolute;\r\n  bottom: 50px;\r\n  transform-origin: bottom center;\r\n}\r\n\r\n\/* Positioning Trees *\/\r\n.left-tree {\r\n  left: 10%;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n.middle-tree {\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n.right-tree {\r\n  left: 90%;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n\/* TREE DESIGN (same for all three trees) *\/\r\n.tree {\r\n  position: relative;\r\n  width: 90px;        \/* big width *\/\r\n  height: 350px;      \/* big height *\/\r\n}\r\n\r\n\/* Tall trunk *\/\r\n.tree-trunk {\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 50%;\r\n  width: 28px;        \/* thicker trunk *\/\r\n  height: 180px;      \/* taller trunk *\/\r\n  background: #92400e;\r\n  border-radius: 6px;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n\/* Big evergreen top *\/\r\n.tree-top {\r\n  position: absolute;\r\n  bottom: 170px;\r\n  left: 50%;\r\n  width: 0;\r\n  height: 0;\r\n  border-left: 110px solid transparent;\r\n  border-right: 110px solid transparent;\r\n  border-bottom: 180px solid #15803d;\r\n  transform: translateX(-50%);\r\n  filter: drop-shadow(0 0 10px rgba(22, 163, 74, 0.8));\r\n}\r\n\r\n\/* FALL ANIMATION \u2014 applied ONLY to middle tree *\/\r\n.middle-tree {\r\n  animation: tree-fall 3.5s ease-in-out forwards;\r\n  animation-delay: 23s;\r\n}\r\n\r\n@keyframes tree-fall {\r\n  0%   { transform: translateX(-50%) rotate(0deg); }\r\n  50%  { transform: translateX(-50%) rotate(-55deg); }\r\n  70%  { transform: translateX(-50%) rotate(-80deg); }\r\n  100% { transform: translateX(-50%) rotate(-90deg) translateY(10px); }\r\n}\r\n<\/style>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>TIMBER!! \u2193 Scroll Down \u2193 Wood Species Match-Up Click a wood name, then click the picture you think matches it. Fir Oak Hickory Maple Ash Birch Beech Cherry Walnut Pine Spruce<\/p>\n","protected":false},"author":31707,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/sites.wp.odu.edu\/fromdata2dialogue\/wp-json\/wp\/v2\/pages\/506"}],"collection":[{"href":"https:\/\/sites.wp.odu.edu\/fromdata2dialogue\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.wp.odu.edu\/fromdata2dialogue\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wp.odu.edu\/fromdata2dialogue\/wp-json\/wp\/v2\/users\/31707"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wp.odu.edu\/fromdata2dialogue\/wp-json\/wp\/v2\/comments?post=506"}],"version-history":[{"count":5,"href":"https:\/\/sites.wp.odu.edu\/fromdata2dialogue\/wp-json\/wp\/v2\/pages\/506\/revisions"}],"predecessor-version":[{"id":568,"href":"https:\/\/sites.wp.odu.edu\/fromdata2dialogue\/wp-json\/wp\/v2\/pages\/506\/revisions\/568"}],"wp:attachment":[{"href":"https:\/\/sites.wp.odu.edu\/fromdata2dialogue\/wp-json\/wp\/v2\/media?parent=506"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}