{"id":1493,"date":"2026-05-25T17:36:01","date_gmt":"2026-05-25T17:36:01","guid":{"rendered":"https:\/\/cuentoskecuentan.com\/?p=1493"},"modified":"2026-05-25T17:59:15","modified_gmt":"2026-05-25T17:59:15","slug":"leo-and-the-big-machine","status":"publish","type":"post","link":"https:\/\/cuentoskecuentan.com\/?p=1493","title":{"rendered":"Leo and the big machine"},"content":{"rendered":"\n<iframe loading=\"lazy\" src=\"https:\/\/drive.google.com\/file\/d\/1fXTrPfFsJ3yWnRnnQV0SDNVyF-vynC5y\/preview\" width=\"640\" height=\"480\"><\/iframe>\n\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lato:wght@300;400;700&#038;display=swap\" rel=\"stylesheet\">\n\n<div class=\"english-activity\">\n\n<h1>Leo and AI \u2013 Reading Activities<\/h1>\n<p class=\"intro\">Read the story and complete the activities.<\/p>\n\n<!-- MATCHING -->\n<div class=\"card\">\n\n  <h2>1. Match the Words<\/h2>\n  <p>Click one word and then its correct meaning.<\/p>\n\n  <div class=\"matching-wrapper\">\n\n    <svg id=\"lines-svg\"><\/svg>\n\n    <div class=\"matching-container\">\n\n      <div class=\"column\">\n\n        <div class=\"match-item\" data-match=\"d\">careful<\/div>\n        <div class=\"match-item\" data-match=\"a\">fake<\/div>\n        <div class=\"match-item\" data-match=\"b\">private information<\/div>\n        <div class=\"match-item\" data-match=\"e\">tool<\/div>\n        <div class=\"match-item\" data-match=\"c\">AI<\/div>\n\n      <\/div>\n\n      <div class=\"column\">\n\n        <div class=\"match-target\" data-id=\"a\">not real<\/div>\n        <div class=\"match-target\" data-id=\"b\">protected information<\/div>\n        <div class=\"match-target\" data-id=\"c\">thinking machine<\/div>\n        <div class=\"match-target\" data-id=\"d\">paying attention<\/div>\n        <div class=\"match-target\" data-id=\"e\">something that helps you<\/div>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n<!-- TRUE OR FALSE -->\n<div class=\"card\">\n\n  <h2>2. True or False<\/h2>\n\n  <div class=\"quiz\">\n\n    <p>1. Leo was 12 years old.<\/p>\n\n    <label><input type=\"radio\" name=\"q1\" value=\"wrong\"> True<\/label>\n    <label><input type=\"radio\" name=\"q1\" value=\"correct\"> False<\/label>\n\n    <p>2. Emma checked the information in a book.<\/p>\n\n    <label><input type=\"radio\" name=\"q2\" value=\"correct\"> True<\/label>\n    <label><input type=\"radio\" name=\"q2\" value=\"wrong\"> False<\/label>\n\n    <p>3. The dolphin had three tails.<\/p>\n\n   <label><input type=\"radio\" name=\"q3\" value=\"wrong\"> True<\/label>\n    <label><input type=\"radio\" name=\"q3\" value=\"correct\"> False<\/label>\n\n  <\/div>\n\n  <button onclick=\"checkTrueFalse()\">Check Answers<\/button>\n\n  <div id=\"tf-feedback\" class=\"feedback\"><\/div>\n\n<\/div>\n\n<!-- COMPLETE -->\n<div class=\"card\">\n\n  <h2>3. Complete the Sentences<\/h2>\n\n  <p class=\"word-bank\">\n    <strong>Word Bank:<\/strong>\n    brain \u2013 mistakes \u2013 dolphins \u2013 private \u2013 safe\n  <\/p>\n\n  <div class=\"fill-blanks\">\n\n    <p>\n      1. AI can make\n      <input type=\"text\" id=\"blank1\">\n    <\/p>\n\n    <p>\n      2. We should never share\n      <input type=\"text\" id=\"blank2\">\n      information online.\n    <\/p>\n\n    <p>\n      3. Leo used his\n      <input type=\"text\" id=\"blank3\">\n      to think first.\n    <\/p>\n\n    <p>\n      4.\n      <input type=\"text\" id=\"blank4\">\n      eat fish and small sea animals.\n    <\/p>\n\n  <\/div>\n\n  <button onclick=\"checkBlanks()\">Check Answers<\/button>\n\n  <div id=\"blank-feedback\" class=\"feedback\"><\/div>\n\n<\/div>\n\n<!-- MULTIPLE CHOICE -->\n<div class=\"card\">\n\n  <h2>4. Choose the Correct Answer<\/h2>\n\n  <div class=\"quiz\">\n\n    <p>1. What did Leo use?<\/p>\n\n    <label><input type=\"radio\" name=\"q4\" value=\"wrong\"> a computer<\/label><br>\n    <label><input type=\"radio\" name=\"q4\" value=\"correct\"> a tablet<\/label><br>\n    <label><input type=\"radio\" name=\"q4\" value=\"wrong\"> a phone<\/label>\n\n    <p>2. Who helped Leo?<\/p>\n\n    <label><input type=\"radio\" name=\"q5\" value=\"correct\"> Emma<\/label><br>\n    <label><input type=\"radio\" name=\"q5\" value=\"wrong\"> his teacher<\/label><br>\n    <label><input type=\"radio\" name=\"q5\" value=\"wrong\"> his friend<\/label>\n\n  <\/div>\n\n  <button onclick=\"checkMultipleChoice()\">Check Answers<\/button>\n\n  <div id=\"mc-feedback\" class=\"feedback\"><\/div>\n\n<\/div>\n\n<\/div>\n\n<style>\n\n.english-activity{\n  max-width:900px;\n  margin:auto;\n  padding:30px;\n  background:#faf7fb;\n  font-family:'Lato', sans-serif;\n}\n\n.english-activity h1{\n  text-align:center;\n  color:#793d7A;\n  font-size:40px;\n  margin-bottom:10px;\n}\n\n.intro{\n  text-align:center;\n  color:#666;\n  margin-bottom:30px;\n}\n\n.card{\n  background:white;\n  padding:25px;\n  margin-bottom:25px;\n  border-radius:18px;\n  border:2px solid #ead7ea;\n  box-shadow:0 3px 10px rgba(0,0,0,0.06);\n}\n\n.card h2{\n  color:#793d7A;\n  margin-top:0;\n}\n\n.matching-wrapper{\n  position:relative;\n}\n\n.matching-container{\n  display:flex;\n  justify-content:space-between;\n  gap:60px;\n  position:relative;\n  z-index:2;\n}\n\n.column{\n  width:45%;\n}\n\n.match-item,\n.match-target{\n  background:#f7eef7;\n  border:2px solid #d8bfd8;\n  padding:14px;\n  border-radius:12px;\n  margin-bottom:14px;\n  cursor:pointer;\n  transition:0.3s;\n}\n\n.match-item:hover,\n.match-target:hover{\n  background:#f0dff0;\n}\n\n.selected{\n  border:2px solid #793d7A;\n  background:#edd8ed;\n}\n\n.correct{\n  background:#dff5df !important;\n  border-color:#62a862 !important;\n}\n\n.wrong{\n  background:#ffe3e3 !important;\n  border-color:#d45c5c !important;\n}\n\n#lines-svg{\n  position:absolute;\n  top:0;\n  left:0;\n  width:100%;\n  height:100%;\n  z-index:1;\n  pointer-events:none;\n}\n\n.quiz p{\n  margin-top:20px;\n  font-weight:700;\n}\n\n.fill-blanks input{\n  border:none;\n  border-bottom:2px solid #793d7A;\n  background:transparent;\n  padding:5px;\n  width:140px;\n  font-size:16px;\n  font-family:'Lato', sans-serif;\n}\n\n.word-bank{\n  background:#f3e7f3;\n  padding:12px;\n  border-radius:10px;\n}\n\nbutton{\n  margin-top:20px;\n  background:#793d7A;\n  color:white;\n  border:none;\n  padding:12px 18px;\n  border-radius:10px;\n  cursor:pointer;\n  font-size:15px;\n  font-family:'Lato', sans-serif;\n}\n\nbutton:hover{\n  opacity:0.9;\n}\n\n.feedback{\n  margin-top:18px;\n  font-weight:700;\n  color:#793d7A;\n}\n\n@media(max-width:700px){\n\n  .matching-container{\n    flex-direction:column;\n  }\n\n  .column{\n    width:100%;\n  }\n\n  #lines-svg{\n    display:none;\n  }\n\n}\n\n<\/style>\n\n<script>\n\nlet selectedItem = null;\n\nconst items = document.querySelectorAll('.match-item');\nconst targets = document.querySelectorAll('.match-target');\nconst svg = document.getElementById('lines-svg');\n\nitems.forEach(item => {\n\n  item.addEventListener('click', () => {\n\n    if(item.classList.contains('correct')) return;\n\n    items.forEach(i => i.classList.remove('selected'));\n\n    item.classList.add('selected');\n\n    selectedItem = item;\n\n  });\n\n});\n\ntargets.forEach(target => {\n\n  target.addEventListener('click', () => {\n\n    if(!selectedItem) return;\n\n    if(target.classList.contains('correct')){\n      return;\n    }\n\n    const correctMatch = selectedItem.dataset.match;\n    const targetId = target.dataset.id;\n\n    if(correctMatch === targetId){\n\n      selectedItem.classList.add('correct');\n      target.classList.add('correct');\n\n      selectedItem.classList.remove('selected');\n\n      selectedItem.style.pointerEvents = 'none';\n      target.style.pointerEvents = 'none';\n\n      drawLine(selectedItem, target);\n\n    } else {\n\n      selectedItem.classList.add('wrong');\n      target.classList.add('wrong');\n\n      setTimeout(() => {\n\n        selectedItem.classList.remove('wrong');\n        target.classList.remove('wrong');\n\n      }, 700);\n\n    }\n\n    selectedItem = null;\n\n  });\n\n});\n\nfunction drawLine(item, target){\n\n  const svgRect = svg.getBoundingClientRect();\n\n  const rect1 = item.getBoundingClientRect();\n  const rect2 = target.getBoundingClientRect();\n\n  const x1 = rect1.right - svgRect.left;\n  const y1 = rect1.top + rect1.height \/ 2 - svgRect.top;\n\n  const x2 = rect2.left - svgRect.left;\n  const y2 = rect2.top + rect2.height \/ 2 - svgRect.top;\n\n  const line = document.createElementNS(\n    \"http:\/\/www.w3.org\/2000\/svg\",\n    \"line\"\n  );\n\n  line.setAttribute(\"x1\", x1);\n  line.setAttribute(\"y1\", y1);\n  line.setAttribute(\"x2\", x2);\n  line.setAttribute(\"y2\", y2);\n\n  line.setAttribute(\"stroke\", \"#62a862\");\n  line.setAttribute(\"stroke-width\", \"4\");\n  line.setAttribute(\"stroke-linecap\", \"round\");\n\n  svg.appendChild(line);\n\n}\n\nfunction checkTrueFalse(){\n\n  let correct = 0;\n\n  ['q1','q2','q3'].forEach(q => {\n\n    const selected = document.querySelector('input[name=\"'+q+'\"]:checked');\n\n    if(selected && selected.value === 'correct'){\n      correct++;\n    }\n\n  });\n\n  document.getElementById('tf-feedback').innerHTML =\n  \"Score: \" + correct + \" \/ 3\";\n\n}\n\nfunction checkBlanks(){\n\n  let correct = 0;\n\n  const answers = {\n    blank1:'mistakes',\n    blank2:'private',\n    blank3:'brain',\n    blank4:'dolphins'\n  };\n\n  for(let id in answers){\n\n    const input = document.getElementById(id);\n\n    if(input.value.toLowerCase().trim() === answers[id]){\n\n      input.style.borderBottom = '3px solid #62a862';\n      correct++;\n\n    } else {\n\n      input.style.borderBottom = '3px solid #d45c5c';\n\n    }\n\n  }\n\n  document.getElementById('blank-feedback').innerHTML =\n  \"Score: \" + correct + \" \/ 4\";\n\n}\n\nfunction checkMultipleChoice(){\n\n  let correct = 0;\n\n  ['q4','q5'].forEach(q => {\n\n    const selected = document.querySelector('input[name=\"'+q+'\"]:checked');\n\n    if(selected && selected.value === 'correct'){\n      correct++;\n    }\n\n  });\n\n  document.getElementById('mc-feedback').innerHTML =\n  \"Score: \" + correct + \" \/ 2\";\n\n}\n\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Leo and AI \u2013 Reading Activities Read the story and complete the activities. 1. Match the Words Click one word and then its correct meaning. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1493","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/posts\/1493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1493"}],"version-history":[{"count":8,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/posts\/1493\/revisions"}],"predecessor-version":[{"id":1504,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/posts\/1493\/revisions\/1504"}],"wp:attachment":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}