{"id":1414,"date":"2026-05-19T18:13:14","date_gmt":"2026-05-19T18:13:14","guid":{"rendered":"https:\/\/cuentoskecuentan.com\/?page_id=1414"},"modified":"2026-05-19T20:01:52","modified_gmt":"2026-05-19T20:01:52","slug":"porcentajes","status":"publish","type":"page","link":"https:\/\/cuentoskecuentan.com\/?page_id=1414","title":{"rendered":"Porcentajes"},"content":{"rendered":"\n<div id=\"percentApp793d7a\">\n\n  <style>\n\n    #percentApp793d7a{\n      font-family:Arial, sans-serif;\n      background:#f6f3f6;\n      padding:20px;\n      color:#333;\n    }\n\n    #percentApp793d7a *{\n      box-sizing:border-box;\n    }\n\n    .container793d7a{\n      max-width:950px;\n      margin:auto;\n      background:white;\n      border-radius:24px;\n      padding:25px;\n      box-shadow:0 8px 24px rgba(0,0,0,.12);\n      border:4px solid #793d7a;\n    }\n\n    .title793d7a{\n      text-align:center;\n      color:#793d7a;\n      font-size:42px;\n      font-weight:bold;\n      margin-bottom:10px;\n    }\n\n    .subtitle793d7a{\n      text-align:center;\n      font-size:18px;\n      margin-bottom:25px;\n      color:#666;\n    }\n\n    .section793d7a{\n      background:#faf7fa;\n      border-radius:20px;\n      padding:20px;\n      margin-bottom:25px;\n      box-shadow:0 4px 10px rgba(0,0,0,.06);\n    }\n\n    .topBar793d7a{\n      display:flex;\n      justify-content:space-between;\n      align-items:center;\n      flex-wrap:wrap;\n      gap:10px;\n      margin-bottom:20px;\n    }\n\n    .score793d7a,\n    .level793d7a{\n      background:#793d7a;\n      color:white;\n      padding:10px 18px;\n      border-radius:14px;\n      font-weight:bold;\n      font-size:18px;\n    }\n\n    .question793d7a{\n      background:white;\n      border-left:6px solid #793d7a;\n      border-radius:16px;\n      padding:20px;\n      font-size:28px;\n      line-height:1.5;\n      margin-bottom:20px;\n      box-shadow:0 4px 10px rgba(0,0,0,.06);\n    }\n\n    .input793d7a{\n      width:100%;\n      padding:16px;\n      border-radius:14px;\n      border:2px solid #793d7a;\n      font-size:22px;\n      margin-bottom:18px;\n      text-align:center;\n    }\n\n    .buttons793d7a{\n      display:flex;\n      gap:12px;\n      flex-wrap:wrap;\n    }\n\n    .buttons793d7a button{\n      flex:1;\n      min-width:180px;\n      padding:16px;\n      border:none;\n      border-radius:14px;\n      background:#793d7a;\n      color:white;\n      font-size:18px;\n      cursor:pointer;\n      transition:.3s;\n      font-weight:bold;\n    }\n\n    .buttons793d7a button:hover{\n      transform:translateY(-2px);\n      opacity:.92;\n    }\n\n    .feedback793d7a{\n      margin-top:20px;\n      min-height:40px;\n      text-align:center;\n      font-size:24px;\n      font-weight:bold;\n    }\n\n    .correct793d7a{\n      color:green;\n    }\n\n    .wrong793d7a{\n      color:#c62828;\n    }\n\n    .stars793d7a{\n      text-align:center;\n      font-size:34px;\n      margin-top:15px;\n    }\n\n    .progressWrap793d7a{\n      width:100%;\n      height:20px;\n      background:#ddd;\n      border-radius:20px;\n      overflow:hidden;\n      margin-top:15px;\n    }\n\n    .progress793d7a{\n      height:100%;\n      width:0%;\n      background:#793d7a;\n      transition:.4s;\n    }\n\n    @media(max-width:768px){\n\n      .title793d7a{\n        font-size:32px;\n      }\n\n      .question793d7a{\n        font-size:22px;\n      }\n\n      .input793d7a{\n        font-size:18px;\n      }\n\n    }\n\n  <\/style>\n\n  <div class=\"container793d7a\">\n\n    <div class=\"title793d7a\">\n      Percentage Adventure\n    <\/div>\n\n    <div class=\"subtitle793d7a\">\n      Practice percentages with fun questions!\n    <\/div>\n\n    <div class=\"section793d7a\">\n\n      <div class=\"topBar793d7a\">\n\n        <div class=\"level793d7a\" id=\"level793d7a\">\n          Beginner\n        <\/div>\n\n        <div class=\"score793d7a\">\n          Points:\n          <span id=\"score793d7a\">0<\/span>\n        <\/div>\n\n      <\/div>\n\n      <div class=\"question793d7a\" id=\"question793d7a\">\n        Loading question&#8230;\n      <\/div>\n\n      <input\n        type=\"number\"\n        id=\"answer793d7a\"\n        class=\"input793d7a\"\n        placeholder=\"Type your answer\"\n      >\n\n      <div class=\"buttons793d7a\">\n\n        <button onclick=\"checkAnswer793d7a()\">\n          Check Answer\n        <\/button>\n\n        <button onclick=\"nextQuestion793d7a()\">\n          Next Question\n        <\/button>\n\n      <\/div>\n\n      <div class=\"feedback793d7a\" id=\"feedback793d7a\"><\/div>\n\n      <div class=\"stars793d7a\" id=\"stars793d7a\">\n        *\n      <\/div>\n\n      <div class=\"progressWrap793d7a\">\n        <div class=\"progress793d7a\" id=\"progress793d7a\"><\/div>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n  <script>\n\n    const questions793d7a = [\n\n      \/\/ BEGINNER\n\n      {\n        level:\"Beginner\",\n        question:\"What is 50% of 20?\",\n        answer:10\n      },\n\n      {\n        level:\"Beginner\",\n        question:\"What is 25% of 40?\",\n        answer:10\n      },\n\n      {\n        level:\"Beginner\",\n        question:\"What is 10% of 70?\",\n        answer:7\n      },\n\n      {\n        level:\"Beginner\",\n        question:\"What is 20% of 60?\",\n        answer:12\n      },\n\n      {\n        level:\"Beginner\",\n        question:\"What is 75% of 80?\",\n        answer:60\n      },\n\n      {\n        level:\"Beginner\",\n        question:\"What is 30% of 90?\",\n        answer:27\n      },\n\n      {\n        level:\"Beginner\",\n        question:\"What is 15% of 200?\",\n        answer:30\n      },\n\n      {\n        level:\"Beginner\",\n        question:\"What is 5% of 100?\",\n        answer:5\n      },\n\n      \/\/ INTERMEDIATE\n\n      {\n        level:\"Intermediate\",\n        question:\"Liam has memorized 4 of the 5 verses from the monthly Scripture passage. What percent of the verses has he memorized?\",\n        answer:80\n      },\n\n      {\n        level:\"Intermediate\",\n        question:\"Sophia read 15 of the 20 pages in her book. What percent of the book did she read?\",\n        answer:75\n      },\n\n      {\n        level:\"Intermediate\",\n        question:\"Emma answered 18 out of 24 questions correctly. What percent did she answer correctly?\",\n        answer:75\n      },\n\n      {\n        level:\"Intermediate\",\n        question:\"Noah finished 12 of his 16 homework problems. What percent did he finish?\",\n        answer:75\n      },\n\n      {\n        level:\"Intermediate\",\n        question:\"A class has 30 students. 40% of them brought lunch from home. How many students brought lunch?\",\n        answer:12\n      },\n\n      {\n        level:\"Intermediate\",\n        question:\"Olivia drank 6 of her 8 water bottles for the week. What percent did she drink?\",\n        answer:75\n      },\n\n      {\n        level:\"Intermediate\",\n        question:\"A basketball team won 8 out of 10 games. What percent did they win?\",\n        answer:80\n      },\n\n      \/\/ ADVANCED\n\n      {\n        level:\"Advanced\",\n        question:\"At the school picnic, 70% of the 125 sandwiches were eaten. How many sandwiches were eaten?\",\n        answer:87.5\n      },\n\n      {\n        level:\"Advanced\",\n        question:\"There are 60 members in the school band. Of those members, 35% are in the brass section. How many members are in the brass section?\",\n        answer:21\n      },\n\n      {\n        level:\"Advanced\",\n        question:\"90% of 150 students joined the field trip. How many students joined?\",\n        answer:135\n      },\n\n      {\n        level:\"Advanced\",\n        question:\"A toy costs $80. It is on sale for 25% off. How much money is discounted?\",\n        answer:20\n      },\n\n      {\n        level:\"Advanced\",\n        question:\"A bakery sold 45% of its 200 cupcakes before noon. How many cupcakes were sold?\",\n        answer:90\n      },\n\n      {\n        level:\"Advanced\",\n        question:\"A soccer team won 18 out of 24 games. What percent of games did they win?\",\n        answer:75\n      },\n\n      {\n        level:\"Advanced\",\n        question:\"65% of 240 tickets were sold. How many tickets were sold?\",\n        answer:156\n      }\n\n    ];\n\n    let current793d7a = 0;\n    let score793d7a = 0;\n\n    const questionEl =\n    document.getElementById(\"question793d7a\");\n\n    const answerEl =\n    document.getElementById(\"answer793d7a\");\n\n    const feedbackEl =\n    document.getElementById(\"feedback793d7a\");\n\n    const scoreEl =\n    document.getElementById(\"score793d7a\");\n\n    const levelEl =\n    document.getElementById(\"level793d7a\");\n\n    const starsEl =\n    document.getElementById(\"stars793d7a\");\n\n    const progressEl =\n    document.getElementById(\"progress793d7a\");\n\n    \/\/ SHUFFLE ARRAY\n\n    function shuffleArray793d7a(array){\n\n      for(let i = array.length - 1; i > 0; i--){\n\n        const j =\n        Math.floor(Math.random() * (i + 1));\n\n        [array[i], array[j]] =\n        [array[j], array[i]];\n      }\n\n    }\n\n    \/\/ SHUFFLE QUESTIONS BY LEVEL\n\n    function shuffleQuestions793d7a(){\n\n      const beginner =\n      questions793d7a.filter(\n        q => q.level === \"Beginner\"\n      );\n\n      const intermediate =\n      questions793d7a.filter(\n        q => q.level === \"Intermediate\"\n      );\n\n      const advanced =\n      questions793d7a.filter(\n        q => q.level === \"Advanced\"\n      );\n\n      shuffleArray793d7a(beginner);\n      shuffleArray793d7a(intermediate);\n      shuffleArray793d7a(advanced);\n\n      questions793d7a.length = 0;\n\n      questions793d7a.push(\n        ...beginner,\n        ...intermediate,\n        ...advanced\n      );\n\n    }\n\n    function loadQuestion793d7a(){\n\n      const q =\n      questions793d7a[current793d7a];\n\n      questionEl.textContent =\n      q.question;\n\n      levelEl.textContent =\n      q.level;\n\n      answerEl.value = \"\";\n\n      feedbackEl.textContent = \"\";\n\n      progressEl.style.width =\n      ((current793d7a) \/\n      questions793d7a.length) * 100 + \"%\";\n    }\n\n    function checkAnswer793d7a(){\n\n      const userAnswer =\n      parseFloat(answerEl.value);\n\n      const correctAnswer =\n      questions793d7a[current793d7a].answer;\n\n      if(userAnswer === correctAnswer){\n\n        score793d7a++;\n\n        scoreEl.textContent =\n        score793d7a;\n\n        feedbackEl.textContent =\n        \"Correct! Great job!\";\n\n        feedbackEl.className =\n        \"feedback793d7a correct793d7a\";\n\n      }else{\n\n        feedbackEl.textContent =\n        \"Try again! Correct answer: \" +\n        correctAnswer;\n\n        feedbackEl.className =\n        \"feedback793d7a wrong793d7a\";\n      }\n\n      updateStars793d7a();\n    }\n\n    function nextQuestion793d7a(){\n\n      current793d7a++;\n\n      if(current793d7a >=\n      questions793d7a.length){\n\n        questionEl.textContent =\n        \"Amazing Work!\";\n\n        feedbackEl.textContent =\n        \"Final Score: \" +\n        score793d7a +\n        \" \/ \" +\n        questions793d7a.length;\n\n        answerEl.style.display =\n        \"none\";\n\n        progressEl.style.width =\n        \"100%\";\n\n        return;\n      }\n\n      loadQuestion793d7a();\n    }\n\n    function updateStars793d7a(){\n\n      if(score793d7a <= 3){\n\n        starsEl.textContent = \"*\";\n\n      }else if(score793d7a <= 7){\n\n        starsEl.textContent = \"**\";\n\n      }else{\n\n        starsEl.textContent = \"***\";\n      }\n\n    }\n\n    \/\/ START GAME\n\n    shuffleQuestions793d7a();\n    loadQuestion793d7a();\n\n  <\/script>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Percentage Adventure Practice percentages with fun questions! Beginner Points: 0 Loading question&#8230; Check Answer Next Question *<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1414","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"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=1414"}],"version-history":[{"count":7,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1414\/revisions"}],"predecessor-version":[{"id":1423,"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=\/wp\/v2\/pages\/1414\/revisions\/1423"}],"wp:attachment":[{"href":"https:\/\/cuentoskecuentan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}