{"id":7646,"date":"2026-11-05T17:34:28","date_gmt":"2026-11-05T20:34:28","guid":{"rendered":"https:\/\/www.escuelathays.mendoza.edu.ar\/?page_id=7646"},"modified":"2026-11-06T10:24:13","modified_gmt":"2026-11-06T13:24:13","slug":"graficador-dinamico_parabola","status":"publish","type":"page","link":"https:\/\/www.escuelathays.mendoza.edu.ar\/?page_id=7646","title":{"rendered":"Graficador din\u00e1mico_Par\u00e1bola"},"content":{"rendered":"\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n<div id=\"game-portal-wrapper\" style=\"background-color: #08090d; color: #f8fafc; min-height: 85vh; display: flex; justify-content: center; align-items: center; padding: 20px 10px; border-radius: 20px; margin: 20px 0;\">\n\n  <div class=\"max-w-2xl w-full rounded-3xl p-6 relative\" style=\"background-color: #141624; border: 1px solid rgba(59, 130, 246, 0.4); box-shadow: 0 0 30px rgba(59, 130, 246, 0.15);\">\n    \n    <!-- Enlace de regreso al portal -->\n    <div class=\"mb-4 text-left\">\n      <a href=\"https:\/\/www.escuelathays.mendoza.edu.ar\/?page_id=7474\" class=\"text-xs font-bold text-slate-400 hover:text-blue-400 transition-colors\">\n        \u2190 Volver al Portal\n      <\/a>\n    <\/div>\n\n    <!-- Header -->\n    <div class=\"flex justify-between items-center mb-6\">\n      <div>\n        <h1 class=\"text-2xl font-black text-blue-400\">\ud83d\udcc9 Funci\u00f3n Cuadr\u00e1tica<\/h1>\n        <p class=\"text-xs text-slate-400\">An\u00e1lisis de concavidad y ordenada f(x) = ax\u00b2 + c<\/p>\n      <\/div>\n      <div class=\"bg-slate-900 px-4 py-2 rounded-xl border border-slate-700 text-center\">\n        <span class=\"text-[10px] text-slate-400 block tracking-wider\">V\u00c9RTICE (Xv)<\/span>\n        <span id=\"xv-val\" class=\"text-xl font-bold text-blue-300\">0.00<\/span>\n      <\/div>\n    <\/div>\n\n    <!-- Canvas SVG Par\u00e1bola (Contenedor Inyectable) -->\n    <div id=\"quad-canvas-box\" class=\"bg-slate-950 p-6 rounded-2xl border border-blue-500\/40 flex justify-center items-center mb-6 shadow-inner\" style=\"min-height: 200px;\">\n      <!-- SVG generado por script -->\n    <\/div>\n\n    <!-- Sliders de Coeficientes a, c -->\n    <div class=\"space-y-4 mb-6\">\n      <div>\n        <div class=\"flex justify-between text-sm font-semibold mb-1\">\n          <span class=\"text-blue-400\">Coeficiente a (Concavidad): <span id=\"val-a-txt\">1<\/span><\/span>\n        <\/div>\n        <input id=\"slider-a-quad\" type=\"range\" min=\"-3\" max=\"3\" step=\"1\" value=\"1\" class=\"w-full accent-blue-500 cursor-pointer\">\n      <\/div>\n      <div>\n        <div class=\"flex justify-between text-sm font-semibold mb-1\">\n          <span class=\"text-emerald-400\">Coeficiente c (Ordenada): <span id=\"val-c-txt\">0<\/span><\/span>\n        <\/div>\n        <input id=\"slider-c-quad\" type=\"range\" min=\"-4\" max=\"4\" step=\"1\" value=\"0\" class=\"w-full accent-emerald-500 cursor-pointer\">\n      <\/div>\n    <\/div>\n\n    <!-- Resultados -->\n    <div class=\"bg-slate-950 p-4 rounded-xl border border-slate-700 text-center font-mono text-sm text-blue-300\">\n      <span id=\"quad-info\">f(x) = 1x\u00b2 + 0<\/span>\n    <\/div>\n\n    <!-- Cr\u00e9ditos -->\n    <footer class=\"mt-6 pt-4 text-center text-[0.70rem] text-slate-500 border-t border-slate-800\/80\">\n      Creado por las profesoras <strong class=\"text-slate-400\">Pamela D\u00edaz<\/strong> y <strong class=\"text-slate-400\">Yemina Lusi<\/strong>\n    <\/footer>\n  <\/div>\n\n<\/div>\n\n<script>\n  (function initQuadGame() {\n    function renderParabola(a, c) {\n      var box = document.getElementById('quad-canvas-box');\n      if (!box) return;\n\n      var pts = [];\n      for (var px = 20; px <= 240; px += 4) {\n        var x = (px - 130) \/ 25;\n        var y = a * x * x + c;\n        var svgX = px;\n        var svgY = 140 - (y * 20);\n        pts.push(svgX + ',' + svgY);\n      }\n\n      var svgMarkup = '<svg width=\"260\" height=\"180\" viewBox=\"0 0 260 180\" class=\"bg-slate-900 rounded-xl\" style=\"display:block;\">' +\n        '<line x1=\"20\" y1=\"140\" x2=\"240\" y2=\"140\" stroke=\"#475569\" stroke-width=\"1.5\"><\/line>' +\n        '<line x1=\"130\" y1=\"20\" x2=\"130\" y2=\"160\" stroke=\"#475569\" stroke-width=\"1.5\"><\/line>' +\n        '<polyline points=\"' + pts.join(' ') + '\" fill=\"none\" stroke=\"#3b82f6\" stroke-width=\"3\"><\/polyline>' +\n        '<\/svg>';\n\n      box.innerHTML = svgMarkup;\n    }\n\n    function updateQuad() {\n      var sliderA = document.getElementById('slider-a-quad');\n      var sliderC = document.getElementById('slider-c-quad');\n      var valATxt = document.getElementById('val-a-txt');\n      var valCTxt = document.getElementById('val-c-txt');\n      var xvVal = document.getElementById('xv-val');\n      var quadInfo = document.getElementById('quad-info');\n\n      if (!sliderA || !sliderC) return;\n\n      var a = parseInt(sliderA.value, 10);\n      if (a === 0) {\n        a = 1;\n        sliderA.value = 1;\n      }\n      var c = parseInt(sliderC.value, 10);\n\n      if (valATxt) valATxt.innerText = a;\n      if (valCTxt) valCTxt.innerText = c;\n      if (xvVal) xvVal.innerText = '0.00';\n      if (quadInfo) quadInfo.innerText = 'f(x) = ' + a + 'x\u00b2 ' + (c >= 0 ? '+ ' + c : '- ' + Math.abs(c));\n\n      renderParabola(a, c);\n    }\n\n    document.addEventListener('input', function(e) {\n      if (e.target && (e.target.id === 'slider-a-quad' || e.target.id === 'slider-c-quad')) {\n        updateQuad();\n      }\n    });\n\n    \/\/ Bucle de inicializaci\u00f3n para garantizar render en Gutenberg\n    var attempts = 0;\n    var timer = setInterval(function() {\n      updateQuad();\n      attempts++;\n      if (attempts > 10) clearInterval(timer);\n    }, 150);\n  })();\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u2190 Volver al Portal \ud83d\udcc9 Funci\u00f3n Cuadr\u00e1tica An\u00e1lisis de concavidad y ordenada f(x) = ax\u00b2 + c V\u00c9RTICE (Xv) 0.00 [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_eb_attr":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7646","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.escuelathays.mendoza.edu.ar\/index.php?rest_route=\/wp\/v2\/pages\/7646","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.escuelathays.mendoza.edu.ar\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.escuelathays.mendoza.edu.ar\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.escuelathays.mendoza.edu.ar\/index.php?rest_route=\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.escuelathays.mendoza.edu.ar\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7646"}],"version-history":[{"count":4,"href":"https:\/\/www.escuelathays.mendoza.edu.ar\/index.php?rest_route=\/wp\/v2\/pages\/7646\/revisions"}],"predecessor-version":[{"id":7746,"href":"https:\/\/www.escuelathays.mendoza.edu.ar\/index.php?rest_route=\/wp\/v2\/pages\/7646\/revisions\/7746"}],"wp:attachment":[{"href":"https:\/\/www.escuelathays.mendoza.edu.ar\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}