{"id":7635,"date":"2026-11-05T17:21:18","date_gmt":"2026-11-05T20:21:18","guid":{"rendered":"https:\/\/www.escuelathays.mendoza.edu.ar\/?page_id=7635"},"modified":"2026-11-06T09:17:22","modified_gmt":"2026-11-06T12:17:22","slug":"simulador_transportador-y-compas","status":"publish","type":"page","link":"https:\/\/www.escuelathays.mendoza.edu.ar\/?page_id=7635","title":{"rendered":"Simulador_Transportador y comp\u00e1s"},"content":{"rendered":"\n<div style=\"width: 100%; max-width: 680px; margin: 0 auto;\">\n<iframe srcdoc=\"\n<!DOCTYPE html>\n<html lang='es'>\n<head>\n  <meta charset='UTF-8'>\n  <meta name='viewport' content='width=device-width, initial-scale=1.0'>\n  <title>Laboratorio Virtual de Transportador y Comp\u00e1s<\/title>\n  <script src='https:\/\/cdn.tailwindcss.com'><\/script>\n  <style>\n    body { background-color: #08090d; }\n    .arcade-card {\n      background-color: #141624;\n      border: 1px solid rgba(15, 118, 110, 0.4);\n      box-shadow: 0 0 30px rgba(34, 211, 238, 0.15);\n    }\n  <\/style>\n<\/head>\n<body class='text-slate-100 min-h-screen flex flex-col items-center justify-center p-4'>\n  <div class='max-w-2xl w-full arcade-card rounded-3xl p-6 relative'>\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' target='_parent' class='text-xs font-bold text-slate-400 hover:text-cyan-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-cyan-400 drop-shadow'>\ud83d\udccf Transportador y Comp\u00e1s<\/h1>\n        <p class='text-xs text-slate-400'>Medici\u00f3n e identificaci\u00f3n geom\u00e9trica de \u00e1ngulos<\/p>\n      <\/div>\n      <div class='flex gap-3'>\n        <div class='bg-slate-900 px-3 py-1.5 rounded-xl border border-slate-700 text-center'>\n          <span class='text-[10px] text-slate-400 block tracking-wider'>PUNTOS<\/span>\n          <span id='score' class='text-lg font-bold text-amber-400'>0<\/span>\n        <\/div>\n        <div class='bg-slate-900 px-3 py-1.5 rounded-xl border border-slate-700 text-center'>\n          <span class='text-[10px] text-slate-400 block tracking-wider'>VIDAS<\/span>\n          <span id='lives' class='text-lg font-bold text-rose-400'>\u2764\ufe0f\u2764\ufe0f\u2764\ufe0f<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Pantalla del \u00c1ngulo SVG -->\n    <div class='bg-slate-900\/80 p-6 rounded-2xl border border-cyan-500\/30 flex justify-center items-center mb-6 shadow-inner'>\n      <svg id='angle-canvas' width='260' height='180' viewBox='0 0 260 180' class='drop-shadow-lg'><\/svg>\n    <\/div>\n\n    <!-- Pregunta -->\n    <div class='bg-slate-950 p-4 rounded-xl border border-slate-800 text-center mb-6'>\n      <p class='text-xs text-cyan-400 uppercase tracking-widest mb-1 font-bold'>Determina la medida aproximada del \u00e1ngulo mostrado<\/p>\n      <div id='angle-target-type' class='text-lg font-bold text-white'>\u00bfCu\u00e1ntos grados mide este \u00e1ngulo?<\/div>\n    <\/div>\n\n    <!-- Opciones -->\n    <div id='angle-options' class='grid grid-cols-2 gap-4 mb-4'><\/div>\n\n    <!-- Feedback -->\n    <div id='feedback' class='h-6 text-center text-sm font-bold mb-2'><\/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  <script>\n    let score = 0;\n    let lives = 3;\n    let currentAngle = 45;\n\n    function renderAngleScene(deg) {\n      const svg = document.getElementById('angle-canvas');\n      svg.innerHTML = '';\n\n      const cx = 130, cy = 130, r = 80;\n      const rad = (deg * Math.PI) \/ 180;\n\n      \/\/ Transporte semicircular simulado\n      const protractor = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'path');\n      protractor.setAttribute('d', `M ${cx - 90} ${cy} A 90 90 0 0 1 ${cx + 90} ${cy} Z`);\n      protractor.setAttribute('fill', 'rgba(20, 184, 166, 0.08)');\n      protractor.setAttribute('stroke', '#14b8a6');\n      protractor.setAttribute('stroke-width', '1');\n      protractor.setAttribute('stroke-dasharray', '2 2');\n      svg.appendChild(protractor);\n\n      \/\/ Rayo 1 (Base horizontal)\n      const line1 = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n      line1.setAttribute('x1', cx); line1.setAttribute('y1', cy);\n      line1.setAttribute('x2', cx + r); line1.setAttribute('y2', cy);\n      line1.setAttribute('stroke', '#2dd4bf'); line1.setAttribute('stroke-width', '3');\n      svg.appendChild(line1);\n\n      \/\/ Rayo 2 (\u00c1ngulo deg)\n      const x2 = cx + r * Math.cos(-rad);\n      const y2 = cy + r * Math.sin(-rad);\n\n      const line2 = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n      line2.setAttribute('x1', cx); line2.setAttribute('y1', cy);\n      line2.setAttribute('x2', x2); line2.setAttribute('y2', y2);\n      line2.setAttribute('stroke', '#2dd4bf'); line2.setAttribute('stroke-width', '3');\n      svg.appendChild(line2);\n\n      \/\/ Arco de \u00e1ngulo\n      const arcR = 30;\n      const ax2 = cx + arcR * Math.cos(-rad);\n      const ay2 = cy + arcR * Math.sin(-rad);\n      const largeArc = deg > 180 ? 1 : 0;\n\n      const arc = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'path');\n      arc.setAttribute('d', `M ${cx + arcR} ${cy} A ${arcR} ${arcR} 0 ${largeArc} 0 ${ax2} ${ay2}`);\n      arc.setAttribute('fill', 'rgba(45, 212, 191, 0.2)');\n      arc.setAttribute('stroke', '#f59e0b');\n      arc.setAttribute('stroke-width', '2');\n      svg.appendChild(arc);\n    }\n\n    function newAngleRound() {\n      document.getElementById('feedback').innerText = '';\n      const angles = [30, 45, 60, 90, 120, 135, 150];\n      currentAngle = angles[Math.floor(Math.random() * angles.length)];\n\n      renderAngleScene(currentAngle);\n\n      let choices = new Set([`${currentAngle}\u00b0`]);\n      while (choices.size < 4) {\n        let fake = angles[Math.floor(Math.random() * angles.length)];\n        choices.add(`${fake}\u00b0`);\n      }\n\n      const shuffled = Array.from(choices).sort(() => Math.random() - 0.5);\n      const container = document.getElementById('angle-options');\n      container.innerHTML = '';\n\n      shuffled.forEach(val => {\n        const btn = document.createElement('button');\n        btn.className = 'py-3.5 bg-slate-800 hover:bg-cyan-500 hover:text-slate-950 font-black text-xl rounded-xl border border-slate-700 transition duration-150 text-cyan-300 shadow-md';\n        btn.innerText = val;\n        btn.onclick = () => checkAngle(val);\n        container.appendChild(btn);\n      });\n    }\n\n    function checkAngle(selected) {\n      const fb = document.getElementById('feedback');\n      if (selected === `${currentAngle}\u00b0`) {\n        score += 10;\n        document.getElementById('score').innerText = score;\n        fb.className = 'h-6 text-center text-sm font-bold mb-2 text-emerald-400';\n        fb.innerText = '\ud83c\udf89 \u00a1Excelente medici\u00f3n!';\n        setTimeout(newAngleRound, 800);\n      } else {\n        lives--;\n        document.getElementById('lives').innerText = '\u2764\ufe0f'.repeat(Math.max(0, lives)) || '\u2620\ufe0f';\n        fb.className = 'h-6 text-center text-sm font-bold mb-2 text-rose-400';\n        fb.innerText = `\u274c Medici\u00f3n incorrecta. El \u00e1ngulo era de ${currentAngle}\u00b0`;\n        if (lives <= 0) {\n          setTimeout(resetGame, 1200);\n        } else {\n          setTimeout(newAngleRound, 1200);\n        }\n      }\n    }\n\n    function resetGame() {\n      score = 0; lives = 3;\n      document.getElementById('score').innerText = score;\n      document.getElementById('lives').innerText = '\u2764\ufe0f\u2764\ufe0f\u2764\ufe0f';\n      newAngleRound();\n    }\n\n    newAngleRound();\n  <\/script>\n<\/body>\n<\/html>\"\nstyle=\"width: 100%; height: 640px; border: none; display: block;\" scrolling=\"no\">\n<\/iframe>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","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-7635","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.escuelathays.mendoza.edu.ar\/index.php?rest_route=\/wp\/v2\/pages\/7635","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=7635"}],"version-history":[{"count":3,"href":"https:\/\/www.escuelathays.mendoza.edu.ar\/index.php?rest_route=\/wp\/v2\/pages\/7635\/revisions"}],"predecessor-version":[{"id":7733,"href":"https:\/\/www.escuelathays.mendoza.edu.ar\/index.php?rest_route=\/wp\/v2\/pages\/7635\/revisions\/7733"}],"wp:attachment":[{"href":"https:\/\/www.escuelathays.mendoza.edu.ar\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}