{"version":3,"sources":["webpack:///./src/components/mathematics/Math10thGrade/demoTangent/Lesson.vue?0e86","webpack:///./src/components/mathematics/Math10thGrade/demoTangent/Lesson.vue","webpack:///./src/components/mathematics/Math10thGrade/demoTangent/Boxes.js","webpack:///src/components/mathematics/Math10thGrade/demoTangent/Lesson.vue","webpack:///./src/components/mathematics/Math10thGrade/demoTangent/Lesson.vue?53cc","webpack:///./src/components/mathematics/Math10thGrade/demoTangent/Lesson.vue?9d15"],"names":["ref","staticClass","attrs","staticRenderFns","Boxes","box1","JXG","Options","board","minimizeReflow","point","showInfoBox","highlight","image","text","fixed","line","polygon","circle","cssDefaultStyle","brd1","JSXGraph","initBoard","boundingbox","keepaspectratio","axis","ticks","grid","showCopyright","showNavigation","pan","enabled","zoom","makeResponsive","options","layer","placeTitle","placeLogo","reload","placeShuffle","hoverMe","redo","placeErase","centerx","centery","i","rad","XList","on","ty","pt0","create","face","name","size","strokeColor","fillColor","visible","label","fontSize","canvasHeight","cssStyle","setAttribute","offset","pt1","c1","fillOpacity","strokeWidth","highlightFillOpacity","p_P","snapToGrid","seg_op","dash","p_M","c2","center","p_Q","p_R","borders","seg_pr","seg_qr","p_S","display","anchorX","anchorY","CssStyle","Math","round","canvasWidth","L","toFixed","created","_this","$store","commit","title","newTopics","img","action","goto","newshowhome","newMath","newLeftArrow","newModule","mounted","MathJax","Hub","Queue","metaInfo","titleTemplate","meta","content","component"],"mappings":"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","file":"js/chunk-5437d55c.c636d155.js","sourcesContent":["export * from \"-!../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Lesson.vue?vue&type=style&index=0&id=3e6d6f4c&prod&lang=scss&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('br'),_c('h5',[_vm._v(\"Problem Description\")]),_vm._m(0),_c('h5',{ref:\"pg\"},[_vm._v(\"\\n    MagicGraph | Finding the Length of a Tangent\\n  \")]),_c('p',{staticClass:\"big mt-2\"},[_vm._v(\"\\n    In this MagicGraph, you will learn about\\n    finding the length of a tangent of a circle using Pythagoras theorem.\\n  \")]),_c('v-responsive',[_c('v-layout',{attrs:{\"justify-center\":\"\"}},[_c('div',{staticClass:\"edliy-box-about\",attrs:{\"id\":\"jxgbox1\"}})])],1)],1)\n}\nvar staticRenderFns = [function (){var _vm=this,_c=_vm._self._c;return _c('p',{staticClass:\"big mt-2\"},[_vm._v(\"\\n    You are given a circle with center at O and radius=OR. PR is a tangent to the circle drawn from point P and touches the circle at point R.\"),_c('br'),_vm._v(\"\\n    In a circle, a tangent is perpendicular to the radius of the circle at the point of contact.\"),_c('br'),_vm._v(\"\\n    Thus, triangle ORP is a right-angled triangle with ∠ORP = \\\\(90^o\\\\). \"),_c('br'),_vm._v(\"\\n    You can use Pythagoras theorem to relate the three lengths OR, PR and OP as follows:\\n    $$OP^2 = PR^2 + OR^2$$\\n    or\\n    $$PR^2 = OP^2 - OR^2$$\\n    or\\n    $$PR = \\\\sqrt{OP^2 - OR^2}$$\\n    \"),_c('br')])\n}]\n\nexport { render, staticRenderFns }","// Import the edliy_utils\r\nimport {\r\n    makeResponsive,\r\n    placeTitle,\r\n    placeImage,\r\n    placeInput,\r\n    placeSlider,\r\n    hoverMe,\r\n    placeRec,\r\n    hiddenPt,\r\n    fixedPt,\r\n    clearInputFields,\r\n    dragMe,\r\n    placeArrow,\r\n    placeGravity,\r\n    placeMiddleText,\r\n    placeLine,\r\n    placePoint,\r\n    placeGlider,\r\n    placeRuler,\r\n    placeLeftText,\r\n    placeRightText,\r\n    placeSliderSwitch,\r\n    placeCircle,\r\n    placeLogo,\r\n    placeShuffle,\r\n    placeTest,\r\n    placeErase,\r\n    placeStartOver\r\n} from '../Utils.js';\r\nconst Boxes = {\r\n  box1: function () {\r\n\tJXG.Options.board.minimizeReflow = 'none';\r\n  JXG.Options.point.showInfoBox=false;\r\n  JXG.Options.point.highlight=false;\r\n  JXG.Options.image.highlight=false;\r\n  JXG.Options.text.highlight=false;\r\n  JXG.Options.text.fixed=true;\r\n  JXG.Options.line.highlight=false;\r\n  JXG.Options.polygon.highlight=false;\r\n  JXG.Options.circle.highlight=false;\r\n  JXG.Options.text.cssDefaultStyle='fontFamily:Oswald;'\r\n  var brd1 = JXG.JSXGraph.initBoard('jxgbox1',{boundingbox: [-6, 12, 14, -8],keepaspectratio: true, axis:false, ticks:true, grid:true, showCopyright:false, showNavigation:false, pan:{enabled:false}, zoom:{enabled:false}});\r\n  //brd1.suspendUpdate();\r\n  makeResponsive(brd1);\r\n  brd1.options.layer['image'] =12;\r\n  brd1.options.layer['circle'] =3;\r\n  brd1.options.layer['line'] =4;\r\n  brd1.options.layer['point'] =5;\r\n  brd1.options.layer['glider'] =6;\r\n//\tbrd1.create('text', [6, 11.5, 'Fraction'],{highlight:false, display:'internal', anchorX:'middle', anchorY:'middle', CssStyle:'fontFamily:Oswald;fontWeight:bold',fontSize:function(){return Math.round(32*brd1.canvasWidth/800.)}, fixed:true});\r\n  placeTitle(brd1, 'Length of a Tangent', '');\r\n  placeLogo(brd1);\r\n  var reload = placeShuffle(brd1, 'left');\r\n  hoverMe(brd1, reload, 'Shuffle', 0, 0);\r\n  //var test = placeTest(brd1);\r\n  var redo = placeErase(brd1, 'right');\r\n  hoverMe(brd1, redo, 'Start Over', 0, 0);\r\n  var centerx = 0;\r\n  var centery = 0;\r\n  var i =0;\r\n  var rad = [2, 3, 4, 5, 5];\r\n  var XList=[7, 6, 8, 7, 8];\r\n  reload.on('down', function(){\r\n    if(i<4){\r\n    i +=1;\r\n    }\r\n    else{\r\n      i=0;\r\n    }\r\n  });\r\n  redo.on('down', function(){\r\n    i=0;\r\n  });\r\n  let switchStatus = true;\r\n\r\n  var tx = 10;\r\n  var ty = 6.5;\r\n\r\n  var sizeOk = 1;\r\n  var inpX = tx + 1.8;\r\n  var inpY =ty + 1.5;\r\n\r\n  var inpX2 = tx ;\r\n  var inpY2 =ty-2.5;\r\n\r\n  var x0_tape = 5;\r\n  var y0_tape = 1;\r\n  var size_tape = 2;\r\n\r\n  //Radius\r\n  //var radius = brd1.create('slider',[[-5.5,1],[-5.5,5],[1,3,5]], {snapWidth:1 ,face:'>', size:8, strokeWidth:2, name:'&nbsp; R', strokeColor:'black', fillColor: '#5B43FF',  baseline: { strokeColor: '#5B43FF'}, highline: { strokeColor: '#5B43FF'}, postLabel: '', label:{offset:[0,25], fontSize:function(){return 18*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald'}});\r\n//  var radius = placeSlider(brd1, 0, 8, 0, 3, 5, 5, 'R');\r\n  //Circle\r\n  var pt0 = brd1.create('point', [centerx, centery],{fixed:true, face:'o' , name:'O', size:3, strokeColor: 'black', fillColor: 'black', visible:true, label:{fontSize:function(){return 18*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald'}});\r\n  pt0.label.setAttribute({offset:[0, -20]});\r\n\r\n  var pt1 = brd1.create('point', [()=>centerx+rad[i], centery],{fixed:true, face:'o' , name:'O', size:3, strokeColor: '#5B43FF', fillColor: '#5B43FF', visible:false, label:{fontSize:function(){return 18*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald'}});\r\n\r\n  var c1 = brd1.create('circle', [pt0, pt1], {strokeColor: '#5B43FF', fillColor:'white', fillOpacity:0.5, strokeWidth: 4, fixed:true, highlightFillOpacity:0.2});\r\n  //OP\r\n  var p_P = brd1.create('point', [()=>XList[i],()=>0.0], {name: 'P', face:'circle', size:3, snapToGrid:true, strokeColor: 'black', fillColor: 'black', label:{offset: [-5, 20], fontSize:function(){return 18*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald'}});\r\n  var seg_op = brd1.create('segment', [p_P, pt0], {fixed: true, strokeColor: 'red', strokeWidth: 3, dash:0});\r\n  p_P.label.setAttribute({offset:[0, -20]});\r\n\r\n  //Tangents\r\n  var p_M = brd1.create('midpoint', [seg_op], {visible: false, name: 'M', face:'circle', size:2, label:{offset: [-5, 20], fontSize:function(){return 18*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald'}});\r\n  var c2 = brd1.create('circle', [p_M, p_P], {center:{visible:false}, visible: false, strokeColor: '#5B43FF', strokeWidth: 4, fixed:true});\r\n\r\n  //Intersection\r\n  var p_Q = brd1.create('intersection', [c1, c2, 0], {visible:false, face:'o' , name:'Q', size:3, strokeColor: 'black', fillColor: 'black', fixed:false, label:{fontSize:function(){return 18*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald'}});\r\n  var p_R = brd1.create('intersection', [c1, c2, 1], {face:'o' , name:'R', size:3, strokeColor: 'black', fillColor: 'black', fixed:false, visible:true, label:{fontSize:function(){return 18*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald'}});\r\n  p_R.label.setAttribute({offset:[0, 20]});\r\n  brd1.create('polygon', [p_R,p_P,pt0], {fillColor:'red', fillOpacity:0.0,  borders:{visible:false}});\r\n  //PR and PQ\r\n  var seg_pr = brd1.create('segment', [p_P, p_Q], {visible:false, fixed: true, strokeColor: '#FF3B3B', strokeWidth: 3});\r\n  var seg_pq = brd1.create('segment', [p_P, p_R], {fixed: true, strokeColor: '#FF3B3B', strokeWidth: 3});\r\n  var seg_qr = brd1.create('segment', [p_Q, p_R], {visible:false, fixed: true, strokeColor: '#FF3B3B', strokeWidth: 3});\r\n\r\n  var p_S = brd1.create('intersection', [seg_op, seg_qr, 0], {face:'o' , name:'S', size:3, strokeColor: '#5B43FF', fillColor: '#5B43FF', fixed:false, visible:false, label:{fontSize:function(){return 18*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald'}});\r\n\r\n  var seg_os = brd1.create('segment', [pt0, p_S], {visible: false, fixed: true, strokeColor: '#FF3B3B', strokeWidth: 3});\r\n\r\n  //Radius line\r\n  var seg_radius1 = brd1.create('segment', [pt0, p_Q], {fixed: true, strokeColor: 'blue', strokeWidth: 3, dash: 0, visible: false});\r\n  var seg_radius2 = brd1.create('segment', [pt0, p_R], {fixed: true, strokeColor: 'red', strokeWidth: 3, dash: 0, visible: true});\r\n\r\n  //Tape\r\n  /*\r\n  var tape = brd1.create('tapemeasure', [[0,-5], [5,-5]], {name:'',\r\n                                                           strokeColor: 'orange',\r\n                                                           strokeWidth: 5,\r\n                                                           highlightStrokeColor: 'orange',\r\n                                                           withTicks: true,\r\n                                                           withLabel: true,\r\n                                                          precision: 2,\r\n\r\n                                                          point1: {\r\n                                                              visible: 'inherit',\r\n                                                              strokeColor: 'black',\r\n                                                              fillColor: 'orange',\r\n                                                              fillOpacity: 1.0,\r\n                                                              highlightFillOpacity: 0.1,\r\n                                                              size:5,\r\n                                                              snapToPoints: true,\r\n                                                              attractorUnit: 'screen',\r\n                                                              attractorDistance: 20,\r\n                                                              showInfobox: false,\r\n                                                              withLabel: false,\r\n                                                              name: '',\r\n                                                              highlight:false\r\n                                                          },\r\n\r\n                                                          point2: {\r\n                                                              visible: 'inherit',\r\n                                                              strokeColor: 'black',\r\n                                                              fillColor: 'orange',\r\n                                                              fillOpacity: 1.0,\r\n                                                              highlightFillOpacity: 0.1,\r\n                                                              size:5,\r\n                                                              snapToPoints: true,\r\n                                                              attractorUnit: 'screen',\r\n                                                              attractorDistance: 20,\r\n                                                              showInfobox: false,\r\n                                                              withLabel: false,\r\n                                                              name: '',\r\n                                                              highlight:false\r\n                                                          },\r\n\r\n                                                          ticks: {\r\n                                                              drawLabels: false,\r\n                                                              drawZero: true,\r\n                                                              insertTicks: true,\r\n                                                              minorHeight: 8,\r\n                                                              majorHeight: 16,\r\n                                                              minorTicks: 4,\r\n                                                              tickEndings: [0, 1],\r\n                                                              defaultDistance: 0.1,\r\n                                                              strokeOpacity: 1,\r\n                                                              strokeWidth: 3,\r\n                                                              strokeColor: 'black',\r\n                                                              visible: 'inherit'\r\n                                                          },\r\n                                                          label: {\r\n                                                              position: 'top',\r\n                                                              offset:[0, 15],\r\n                                                              fontSize:function(){return 18*brd1.canvasHeight/800}, cssStyle:'fontFamily:Oswald'\r\n                                                          }\r\n  }); */\r\n//angle\r\nbrd1.create('angle', [pt0, p_R, p_P],{name:'90^o', highlight:false, strokeWidth:1, strokeColor:'black', fillColor:'white', label:{visible:false, offset:[0, -10]}});\r\n  //Texts\r\n  /*var subtitle = brd1.create('text', [7, 13, function(){return 'Given RQ = ' + (seg_qr.L()).toFixed(2) + ' ,  can you find the length of the tangent RP ?'}],{fixed: true, anchorX: 'middle', anchorY: 'middle', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(14*brd1.canvasWidth/500.)}},);\r\n*/\r\n  var txt1 = brd1.create('text', [4, ty+3, 'Triangle ORP is a Right-Angled Triangle'],{display:'internal',visible: true, fixed: true, anchorX: 'middle', anchorY: 'middle', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(14*brd1.canvasWidth/500.)}},);\r\n  var txt2 = brd1.create('text', [4,ty + 1,  'Pythagorean Theorem: OP^2 = OR^2 + PR^2'],{visible: true, fixed: true, anchorX: 'middle', anchorY: 'middle', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(14*brd1.canvasWidth/500.)}},);\r\n  brd1.create('text', [4, ty+2, 'OR = Height | PR = Base | OP = Hypotenuse'],{display:'internal', visible: true, fixed: true, anchorX: 'middle', anchorY: 'middle', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(14*brd1.canvasWidth/500.)}},);\r\n  //var txt3 = brd1.create('text', [4.0,ty, ''],{visible: true, fixed: true, anchorX: 'middle', anchorY: 'middle', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(14*brd1.canvasWidth/500.)}});\r\n  brd1.create('text',[4.0,ty,function(){return 'PR = &radic;(OP^2 - OR^2) =&radic;(' +(seg_op.L()).toFixed(2)+ '^2 - ' + rad[i] + '^2) = '+(seg_pr.L()).toFixed(2);}],{visible: true, fixed: true, anchorX: 'middle', anchorY: 'middle', CssStyle:'fontFamily:Oswald',fontSize:function(){return Math.round(14*brd1.canvasWidth/500.)}});\r\n},\r\n}\r\nexport default Boxes;\r\n","<template>\r\n  <div>\r\n    <br>\r\n    <h5>Problem Description</h5>\r\n    <p class=\"big mt-2\">\r\n      You are given a circle with center at O and radius=OR. PR is a tangent to the circle drawn from point P and touches the circle at point R.<br>\r\n      In a circle, a tangent is perpendicular to the radius of the circle at the point of contact.<br>\r\n      Thus, triangle ORP is a right-angled triangle with &angle;ORP = \\(90^o\\). <br>\r\n      You can use Pythagoras theorem to relate the three lengths OR, PR and OP as follows:\r\n      $$OP^2 = PR^2 + OR^2$$\r\n      or\r\n      $$PR^2 = OP^2 - OR^2$$\r\n      or\r\n      $$PR = \\sqrt{OP^2 - OR^2}$$\r\n      <br>\r\n    </p>\r\n    <h5 ref=\"pg\">\n      MagicGraph | Finding the Length of a Tangent\r\n    </h5>\r\n    <p class=\"big mt-2\">\n      In this MagicGraph, you will learn about\r\n      finding the length of a tangent of a circle using Pythagoras theorem.\r\n    </p>\r\n    <v-responsive>\r\n      <v-layout justify-center>\r\n        <div id=\"jxgbox1\" class=\"edliy-box-about\" />\r\n      </v-layout>\r\n    </v-responsive>\r\n  </div>\r\n</template>\r\n<script>\r\nimport Boxes from './Boxes.js'\r\nexport default {\r\n  name: 'TangentLength',\r\n  created: function () {\r\n    this.$store.commit('navigation/resetState');\r\n    let title = 'Length of a Tangent';\r\n    this.$store.commit('navigation/changeTitle', title);\r\n    this.$store.commit('navigation/changeMenu', title);\r\n    let newTopics = [\r\n      {title: 'Probability', img:'/assets/number-1.svg', action: () => this.goto('intro')},\r\n      {title: 'Probability of an Event', img:'/assets/number-2.svg', action: () => this.goto('types')},\r\n      {title: 'MagicGraph',img:'/assets/touch.svg', action: () => this.goto('pg')},\r\n    ];\r\n    this.$store.commit('navigation/replaceTopics', newTopics);\r\n    let newshowhome = false;\r\n    this.$store.commit('navigation/toggleshowhome', newshowhome);\r\n    let newMath =true;\r\n    this.$store.commit('navigation/replaceMath', newMath);\r\n    let newLeftArrow =true;\r\n    this.$store.commit('navigation/replaceLeftArrow', newLeftArrow);\r\n    let newModule=true;\r\n    this.$store.commit('navigation/replaceModule', newModule);\r\n  },\r\n  mounted () {\r\n    MathJax.Hub.Queue([\"Typeset\", MathJax.Hub]);\r\n    Boxes.box1();\r\n  },\r\n  metaInfo() {\r\n  return{ title: 'Tangent Length',\r\n          titleTemplate: '%s | Learn interactively',\r\n          meta: [ {name: 'viewport', content: 'width=device-width, initial-scale=1'},\r\n                  {name: 'description', content: 'Learn interactively about length of a tangent of a circle.'}\r\n                ]\r\n        }\r\n   },\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n@import 'src/styles/edliy-box.scss';\r\n@import 'src/styles/subtopic-menu.scss';\r\n@import 'src/styles/edliy-box-about.scss';\r\n@import 'src/styles/screen-sizes.scss';\r\n.icn{\r\ncolor: var(--v-red-base);;\r\n}\r\n</style>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Lesson.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Lesson.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Lesson.vue?vue&type=template&id=3e6d6f4c&\"\nimport script from \"./Lesson.vue?vue&type=script&lang=js&\"\nexport * from \"./Lesson.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Lesson.vue?vue&type=style&index=0&id=3e6d6f4c&prod&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}