<!DOCTYPE html>
<!--[if IE 8]>   
<html class="no-js lt-ie9" lang="en" ng-app="waggleui.student">
    <![endif]-->
    <!--[if gt IE 8]><!--> 
    <html class="no-js" lang="en">
        <!--<![endif]-->
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
            <title>CK12 - Geometry Authoring</title>
            <link rel="stylesheet" href="//st1.ck12.org/assessment/tools/geometry-tool/build-20180919161315/./vendor/foundation/normalize.css" />
            <link rel="stylesheet" href="//st1.ck12.org/assessment/tools/geometry-tool/build-20180919161315/./vendor/foundation/foundation.min.css" />
            <link rel="stylesheet" href="//st1.ck12.org/assessment/tools/geometry-tool/build-20180919161315/./vendor/animate-css/animate.min.css" />
            <link rel="stylesheet" href="//st1.ck12.org/assessment/tools/geometry-tool/build-20180919161315/./vendor/fonts/font-proximanova/font-proximanova.min.css" />
            <link rel="stylesheet" href="//st1.ck12.org/assessment/tools/geometry-tool/build-20180919161315/./vendor/fonts/font-awesome/css/font-awesome.min.css" />
            <link rel="stylesheet" href="//st1.ck12.org/assessment/tools/geometry-tool/build-20180919161315/./vendor/tangerine-ui/tangerine-ui.css" />
            <link rel="stylesheet" href="//st1.ck12.org/assessment/tools/geometry-tool/build-20180919161315/./vendor/uikit/css/ui-kit.css" />
            <link rel="stylesheet" href="//st1.ck12.org/assessment/tools/geometry-tool/build-20180919161315/./vendor/fonts/ck12/fontck12.css" />
            <link rel="stylesheet" href="//st1.ck12.org/assessment/tools/geometry-tool/build-20180919161315/./themes/tangerine/css/geometrytool-ui.css" />
            <link rel="stylesheet" href="//st1.ck12.org/assessment/tools/geometry-tool/build-20180919161315/./themes/common/css/spectrum.css" />
            <!-- <link rel="stylesheet" href="//st1.ck12.org/assessment/tools/geometry-tool/build-20180919161315/./vendor/flexcroll/modules/news-ticker/flexcrollstyles.css" /> -->
            <link rel="stylesheet" type="text/css" href="//st1.ck12.org/assessment/tools/geometry-tool/build-20180919161315/./themes/common/css/jsxgraph.css">
            <link rel="stylesheet" href="//st1.ck12.org/assessment/tools/geometry-tool/build-20180919161315/./themes/common/css/algorithmic.css" />
            <script src="//st1.ck12.org/assessment/tools/geometry-tool/build-20180919161315/./vendor/modernizr/custom.modernizr.js"></script>
          
        </head>
        <body>
            <!-- Header and Nav -->
            <nav class="top-bar app-top-bar">
                <ul class="title-area">
                    <!-- Title Area -->
                    <li class="name">
                        <h1>
                            <a href="#">
                            <img src="//st1.ck12.org/assessment/tools/geometry-tool/build-20180919161315/./themes/common/images/CK12-logo-300dpi.png" class="app-logo" alt="CK-12 Logo"/>
                            </a>
                        </h1>
                    </li>
                    <!--<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>-->
                </ul>
                <section class="top-bar-section">
                    <!-- Right Nav Section -->
                    <ul class="right">
                        <li><a href="#" class="app-name">Geometry Tool</a></li>
                    </ul>
                </section>
            </nav>
            <!-- Main Page Content and Sidebar -->
            <div class="row">
                <!-- Sidebar -->
                <aside class="large-1 columns">
                    <div class="app-toolbar animated hide">
                        <div class="row">
                            <div id = "toolbar" class="large-10 small-6 large-centered columns">
                                <ul class="side-nav tools">
                                    <li class="active tool" data-tool-type="arrow">
                                        <a href="#">
                                        <i class="icon-location-arrow"></i><br/>
                                        <span>Select</span></a>
                                    </li>
                                    <li class = "tool" data-tool-type="point">
                                        <a href="#">
                                        <i class="icon-bullseye"></i><br/>
                                        <span>Point</span></a>
                                    </li>
                                    <li class = "tool" data-tool-type="line">
                                        <a href="#">
                                        <i class="icon-resize-full"></i><br/>
                                        <span>Line</span></a>
                                    </li>
                                    <li class = "tool" data-tool-type="circle">
                                        <a href="#">
                                        <i class="icon-circle-blank"></i><br/>
                                        <span>Circle</span></a>
                                    </li>
                                    <li class = "tool polygon-style" data-tool-type="polygon">
                                        <a href="#" data-dropdown="drop1">
                                        <i class="icon-unchecked"></i><br/>
                                        <span>Polygon</span></a>
                                      <!--   <ul id="drop1" class="f-dropdown polygon-input-wrapper" data-dropdown-content>
                                            <li class="polygon-input-li">
                                            	<span class="left span-label"># Sides:</span>
	                                            <span class="right"><input type="text" class="polygon-input polygon-vertices" maxlength="2"/></span>
                                            </li>
                                        </ul> -->
                                    </li>
                                    <li class = "tool" data-tool-type="angle">
                                        <a href="#">
                                        <i class="icon-angle-right"></i><br/>
                                        <span>Angle</span></a>
                                    </li>
                                    <li class = "tool" data-tool-type="text">
                                        <a href="#">
                                        <i class="icon-font"></i><br/>
                                        <span>Text</span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </aside>
                <!-- End Sidebar -->
                <!-- Main Blog Content -->
                <div class="large-10 large-offset-1 columns">
                    <div class="app-canvas-menu">
                        <div class="row">
                            <div class="large-11 columns">
                                <ul class="inline-list right">
                                    <li>
                                        <div class="button secondary tangerine animated flipInX small" id="importData"><i class="icon-level-down"></i>Import</div>
                                    </li>
                                    <li>
                                        <div class="button secondary tangerine animated flipInX small" id="exportData"><i class="icon-level-up"></i>Export</div>
                                    </li>
                                    <li>
                                        <div class="button secondary limegreen animated flipInX small" id="preview"><i class="icon-eye-open"></i><span>Preview</span></div>
                                    </li>
                                    <li>
                                        <div class="button secondary purple animated flipInX small" id="add-variables"><i class="icon-plus-sign"></i>Add Variable</div>
                                    </li>
                                </ul>
                            </div>
                            <div class="large-1 columns">
                            </div>
                        </div>
                    </div>
                    <div class="app-canvas-wrapper">
                        <div class="row">
                            <!-- canvas -->
                            <div id="canvas-wrapper" class="large-6 columns" style="padding:10px;">
                            <div id="box" class="app-canvas animated bounceInUp jxgbox grid_6"></div>
                                <!-- <div id="box" class="jxgbox grid_6" style="width:500px;height: 500px;"></div> -->
                            </div>
                            <!--  tab html -->
                            <div class="large-3 columns app-canvas-objects animated hide">
                                <div class="section-container auto" data-section="tabs" id="canvasTab">
                                    <section>
                                        <p class="title" data-section-title>
                                            <a href="#">CANVAS SETTING</a>
                                        </p>
                                        <div class="content canvas-setting-container" data-section-content>
                                            <div class="row">
                                                <div class="small-12 columns app-canvas-objects-list">
                                                    <ul class="sub-nav row tool-ui">
                                                        <li class="row">
                                                            <div class="columns small-3">height</div>
                                                            <div class="columns small-9">
                                                                <input type="text" class= "canvas-height small-size-input right" placeholder="height" disabled="">
                                                            </div>
                                                        </li>
                                                        <li class="row">
                                                            <div class="columns small-3">width</div>
                                                            <div class="text-right columns small-9">
                                                                <input type="text" class= "canvas-width small-size-input right" placeholder="width" disabled="">
                                                            </div>
                                                        </li>
                                                        <li class="row">
                                                            <div class="columns small-3">color</div>
                                                            <div class="text-right columns small-9">
                                                                <input class = "canvas-color" />
                                                            </div>
                                                        </li>
                                                        <li class="row">
                                                            <div class="columns small-3">axis</div>
                                                            <div class="columns small-9 text-right">
                                                                <div class="custom-box">
                                                                    <input id="checkbox2w" checked="checked" class="canvas-axis" type="checkbox" />
                                                                    <label class="checkbox" for="checkbox2w">
                                                                    <span>
                                                                    <i class="icon-validated"></i>
                                                                    </span>
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </section>
                                    <section class ="active middle">
                                        <p class="title" data-section-title>
                                            <a href="#">CANVAS OBJECTS</a>
                                        </p>
                                        <div class="content main-container" data-section-content>
                                            <div id="layers" class="row temp-controller">
                                             <div class ="columns small-12 select-all text-right select-all-hide">
                                                       <!--<div class="columns small-11 text-right select-all-text">select all</div>
                                                       <div class="columns small-1 text-right"> 
                                                        <div class="custom-box">
                                                                 <input id="checkbox131" class = "select-all-elements" type="checkbox" tabindex = "1"/>
                                                                          <label class="checkbox" for="checkbox131">
                                                                            <span>
                                                                                <i class="icon-validated"></i>
                                                                            </span>
                                                                          </label>
                                                         </div>
                                                       </div> -->
                                                       <span class="select-all-text">select all</span>
	                                                    <span class="custom-box">
	                                                        <input id="checkbox131" class = "select-all-elements" type="checkbox" tabindex = "1"/>
	                                                        <label class="checkbox" for="checkbox131">
	                                                        <span>
	                                                        <i class="icon-validated"></i>
	                                                        </span>
	                                                        </label>
	                                                    </span>
                                                    </div>
                                                <div class="small-12 columns question">
                                                	<div id="temp-inner-controller" class="app-canvas-objects-list"> 
	                                                   	<ul id = "ele-layer" class="sub-nav layers">
	                                                    </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </section>
                                     <section class ="hide">
                                        <p class="title" data-section-title>
                                            <a href="#"><span id="tool-heading">OBJECTS</span>
                                            <span class ="next-temp-selector close-template text-right"><i class="icon-remove-sign right"></i></span>
                                            </a>
                                        </p>
                                        <div class="content main-container" data-section-content>
                                            <div class = "temp-container row" id="toolProperties"></div>
                                        </div>
                                    </section>
                                </div>
                            </div>
                            <div class="large-3 columns">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Main Content -->
            </div>
            <div id="propertyPanel" class="reveal-modal modal-uikit">
                <div class="close close-reveal-modal">+</div>
                <div class="header">Modal Header</div>
                <div class="content">This modal is totally awesome! So fresh and so clean! Some more copy here to show padding and line height.</div>
                <div class="button turquoise">Here's a button!</div>
                <div class="button dusty-grey">I don't like buttons</div>
            </div>
            <div id="propertyPanel2" class="f-dropdown content" data-dropdown-content>
                <h2>Awesome. I have it.</h2>
                <p class="lead">Your couch.  It is mine.</p>
                <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
                <a class="close-reveal-modal">&#215;</a>
            </div>
            <div id="dataPlaceHolderModal" class="reveal-modal modal-uikit medium">
                <div class="close close-modal">+</div>
                <div class="content">
                    <!-- <span class="sub-text"></span> -->
                    <label for="data-placeholder">Data</label>
                    <textarea id="data-placeholder" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
                    <label for="geo-variables">Variables</label>
                    <textarea id="geo-variables" placeholder="Enter comma separated list of key=value. Eg a=1,b=2"></textarea>
                </div>
                <div class="text-center">
                    <div class="button turquoise hide" id="setData">Set</div>
                    <div class="button turquoise  close-modal">Close</div>
                </div>
            </div>
            <div id ="delete-alert" class="reveal-modal modal-uikit small">
                <div class="close close-alert">+</div>
                <div class = "delete-alert-text">Do you want to delete the element ?</div>
                <div class="text-center">
                    <div class="button turquoise yes-delete" id="">Yes</div>
                    <div class="button turquoise  no-delete">No</div>
                </div>    
            </div>
               <div id ="association-alert" class="reveal-modal modal-uikit small">
                <div class="close close-alert">+</div>
                <div class = "association-alert-text">No element is present for association.</div>
                <div class="text-center">
                    <div class="button turquoise ok-association" id="">Ok</div>
                </div>    
            </div>
              <div id ="intersection-alert" class="reveal-modal modal-uikit small">
                <div class="close close-alert">+</div>
                <div class = "intersection-alert-text">No element is present for intersection.</div>
                <div class="text-center">
                    <div class="button turquoise ok-intersection" id="">Ok</div>
                </div>    
            </div>
            <div id="polygon-vert" class = "reveal-modal small modal-uikit">
                <div class="close vert-close">+</div>
                <div class ="row">
                    <div class="columns small-12">
                    <div class="columns small-6"></div>
                    <div class="columns small-6 text-left" id = "sides_error_msg">Sides should be in the range of 3-10.</div></div>
                    <div class="columns small-12">
                    <div class="columns small-6 polygon-modal-text">Enter number of sides :</div>
                    <div class="columns small-6 polygon-modal-input"><input type="text" class="polygon-input polygon-vertices long-input" maxlength="2"/></div></div>
                 </div>  
                <div class="text-center">
                    <div class="button turquoise vertices-set" id="">Yes</div>
                    <div class="button turquoise  vertices-deset">No</div>
                </div>  
            </div>
            <div class="hide">
                <div id = "properties-palate">
                    <div id="point-template">
                        <div id = "point-properties-palate" class="small-12 columns tool-canvas-objects-list flexcroll">
                           <!--  <div class = "name tool-heading-name"><span class ="next-temp-selector back-temp"><i class="icon-circle-arrow-left left"></i></span><span class="tool-heading">Point 0</span></div> -->
                           <!--  <div class = "row tool-property-header">Point</div> -->
                            <ul class="sub-nav row tool-ui">
                                <li class="row" index = "1">
                                    <div class="columns small-3 tool-property-ch-name">fixed</div>
                                    <div class="columns small-9 text-right">
                                        <div class="custom-box">
                                            <input id="checkbox1" class = "pointPosition" type="checkbox" tabindex = "1" />
                                            <label class="checkbox" for="checkbox1">
                                            <span>
                                            <i class="icon-validated"></i>
                                            </span>
                                            </label>
                                        </div>
                                    </div>
                                </li>
                               <!--  <li class="row">
                                    <div class="columns small-3 tool-property-ch-name">Visible</div>
                                    <div class="columns small-9 text-right">
                                        <div class="custom-box">
                                            <input id="checkbox2" checked="checked" class="pointVisible" type="checkbox" tabindex = "1" />
                                            <label class="checkbox" for="checkbox2">
                                            <span>
                                            <i class="icon-validated"></i>
                                            </span>
                                            </label>
                                        </div>
                                    </div>
                                </li> -->
                                <li class="row" index = "2">
                                    <div class="columns small-3 tool-property-name">size</div>
                                    <div class="text-right columns small-9">
                                        <input type="text" class= "point-size small-size-input right" placeholder="size" tabindex = "2">
                                    </div>
                                </li>
                                <li class="row" index = "3">
                                    <div class="columns small-3 tool-property-name">color</div>
                                    <div class="text-right columns small-9">
                                        <input class = "point-color" tabindex = "3"/>
                                    </div>
                                </li>
                              
                                <li class="row" index = "5">
                                    <div class="columns small-3 tool-property-name">opacity</div>
                                    <div class="text-right columns small-9">
                                        <input type="text" class= "point-opacity small-size-input right" placeholder="size" tabindex = "6">
                                    </div>
                                </li>
                                 <li class="row" index = "6">
                                    <div class="columns small-3 center tool-property-name">label</div>
                                    <div class="text-right columns small-9 tool-property-name">
                                        <span class="text-right p-center columns small-4"> </span>
                                        <span class ="center-point columns small-3"><i class="icon-cog next-temp-selector lbl-setting"></i></span>
                                    </div>
                                </li> 
                                 <li class="row" index = "7">
                                    <div class="columns small-3 tool-property-name">association</div>
                                    <div class="text-right columns small-9">
                                          <div class="custom-box columns small-7"><div class="right">
                                            <input id="checkbox222" class="point-association" type="checkbox"/>
                                            <label class="checkbox columns small-3" for="checkbox222">
                                            <span>
                                            <i class="icon-validated"></i>
                                            </span>
                                            </label></div>
                                          </div>
                                         <div class="columns small-4"><input type="text" class="small-size-input right associated-element" placeholder="" disabled></div>
                                         <div class="down-icon columns small-1"><i class="icon-caret-down"></i></div>
                                    </div>
                                </li> 
                                  <li class="row" index = "4">
                                    <div class="columns small-3 tool-property-name">position</div>
                                   <div class="columns small-9"><div class="right">
                                    <input type="text" placeholder="x" class="left point-x-position small-size-input" tabindex = "4">
                                    <input type="text" placeholder="y" class="left point-y-position small-size-input" tabindex = "5">
                                    </div></div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div id="line-template">
                        <div id = "line-properties-palate"class="small-12 columns tool-canvas-objects-list">
                          <!--   <div class = "name tool-heading-name"><span class ="next-temp-selector back-temp"><i class="icon-circle-arrow-left left"></i></span><span class="center tool-heading">Line 0</span></div> -->
                            <ul class="sub-nav row tool-ui after-intersection">
                              <!--  <li class="row">
                                    <div class="column small-3 tool-property-name">equation</div>
                                    <div class="equation text-right columns small-9">
                                                 
                                    </div>
                                </li> -->
                                <li class="row">
                                    <div class="column small-3 point1 tool-property-name">point 1</div>
                                    <div class="right columns small-9 tool-property-name">
                                        <span class="text-right line-first-point columns small-4">
                                        </span><span class="text-right columns small-3 line-points" index="1"><i class="icon-cog next-temp-selector"></i></span>
                                    </div>
                                </li>
                                <li class="row">
                                    <div class="column small-3 point2 tool-property-name">point 2</div>
                                    <div class="right columns small-9 tool-property-name">
                                        <span class=" text-right line-second-point columns small-4"></span>
                                        <span class="text-right columns small-3 line-points" index="2"><i class="icon-cog next-temp-selector"></i></span>
                                    </div>
                                </li>
                                <li class="row">
                                    <div class="columns small-3 tool-property-ch-name">fixed</div>
                                    <div class="text-right columns small-9">
                                        <div class="custom-box">
                                            <input id="checkbox4" class="line-position" type="checkbox">
                                            <label class="checkbox" for="checkbox4">
                                            <span>
                                            <i class="icon-validated"></i>
                                            </span>
                                            </label>
                                        </div>
                                    </div>
                                </li>
                                 <li class="row">
                                    <div class="columns small-3 tool-property-ch-name">straight-first</div>
                                    <div class="columns small-9 text-right">
                                        <div class="custom-box">
                                            <input id="line-stf" class = "line-stf" type="checkbox" />
                                            <label class="checkbox" for="line-stf">
                                            <span>
                                            <i class="icon-validated"></i>
                                            </span>
                                            </label>
                                        </div>
                                    </div>
                                </li>
                                 <li class="row">
                                    <div class="columns small-3 tool-property-ch-name">straight-last</div>
                                    <div class="columns small-9 text-right">
                                        <div class="custom-box">
                                            <input id="line-stl" class = "line-stl" type="checkbox" />
                                            <label class="checkbox" for="line-stl">
                                            <span>
                                            <i class="icon-validated"></i>
                                            </span>
                                            </label>
                                        </div>
                                    </div>
                                </li>
                                 <li class="row">
                                    <div class="columns small-3 tool-property-ch-name">first-arrow</div>
                                    <div class="columns small-9 text-right">
                                        <div class="custom-box">
                                            <input id="line-fa" class = "line-fa" type="checkbox" />
                                            <label class="checkbox" for="line-fa">
                                            <span>
                                            <i class="icon-validated"></i>
                                            </span>
                                            </label>
                                        </div>
                                    </div>
                                </li>
                                 <li class="row">
                                    <div class="columns small-3 tool-property-ch-name">last-arrow</div>
                                    <div class="columns small-9 text-right">
                                        <div class="custom-box">
                                            <input id="line-la" class = "line-la" type="checkbox" />
                                            <label class="checkbox" for="line-la">
                                            <span>
                                            <i class="icon-validated"></i>
                                            </span>
                                            </label>
                                        </div>
                                    </div>
                                </li>
                                 <li class="row">
                                    <div class="columns small-3 tool-property-ch-name">decorators</div>
                                    <div class="right columns large-9"><div class="right decorators">
                                    <i class="icon-cog line-decorator"></i>
                                    </div></div>
                                </li>
                                <li class="row">
                                    <div class="columns small-3 tool-property-name">color</div>
                                    <div class="text-right columns small-9"><span><input class = "line-color" /></span></div>
                                </li>
                                <li class="row">
                                    <div class="columns small-3 tool-property-name">width</div>
                                    <div class="right columns small-9">
                                        <input type="text" class="line-width small-size-input" placeholder="width">
                                    </div>
                                </li>
                                <li class="row">
                                    <div class = "columns small-3 tool-property-name">rotate</div>
                                    <div class="right columns small-9">
                                        <input type="text"  class="rotate-spinner small-size-input" placeholder="rotation">
                                    </div>
                                </li>
                                <li class="row">
                                    <div class="columns small-3 tool-property-name">pivot</div>
                                    <div class="right columns large-9"><div class="right">
                                        <input type="text" class ="pivot-x small-size-input left" placeholder="x">
                                        <input type="text" class ="pivot-y small-size-input left" placeholder="y">
                                     </div></div>
                                </li>
                                <li class= "row">
                                    <div class="columns small-3 tool-property-name">intersection</div>
                                    <div class="right columns large-9"><div class="right">
                                    <i class="intersection-icon icon-random"></i>
                                    </div></div>
                                </li>
                               <!--   <li class="row">
                                    <div class="columns small-3 center tool-property-name">label</div>
                                    <div class="text-right columns small-9 tool-property-name">
                                        <span class="text-right p-center columns small-4"> </span>
                                        <span class ="center-point columns small-3"><i class="icon-cog next-temp-selector lbl-setting"></i></span>
                                    </div>
                                </li>  -->
                            </ul>
                        </div>
                    </div>
                    <div id="circle-template">
                        <div id = "circle-properties-palate" class="small-12 columns tool-canvas-objects-list">
                           <!--  <div class = "name tool-heading-name"><span class ="next-temp-selector back-temp"><i class="icon-circle-arrow-left left"></i></span><span class="center tool-heading">Circle 0</span></div> -->
                            <ul class="sub-nav row tool-ui tangents">
                                <li class="row">
                                    <div class="columns small-3 center tool-property-name">point 1</div>
                                    <div class="text-right columns small-9 tool-property-name">
                                        <span class="text-right p-center columns small-4"> </span>
                                        <span class ="center-point columns small-3" index="1"><i class="icon-cog next-temp-selector"></i></span>
                                    </div>
                                </li>
                                 <li class="row">
                                    <div class="columns small-3 circle-point2 tool-property-name">point 2</div>
                                    <div class="text-right columns small-9 tool-property-name">
                                        <span class="text-right p-circum columns small-4"> </span>
                                        <span class ="center-point columns small-3" index="2"><i class="icon-cog next-temp-selector"></i></span>
                                    </div>
                                </li>
                                <li class="row">
                                    <div class="columns small-3 tool-property-ch-name">fixed</div>
                                    <div class="text-right columns small-9">
                                        <div class="custom-box">
                                            <input id="checkbox5" class="circle-position" type="checkbox">
                                            <label class="checkbox" for="checkbox5">
                                            <span>
                                            <i class="icon-validated"></i>
                                            </span>
                                            </label>
                                        </div>
                                    </div>
                                </li>
                                <li class="row">
                                    <div class="columns small-4 tool-property-name"> border color</div>
                                    <div class="text-right columns small-8"><span><input class="circle-border-color"  /></span></div>
                                </li>
                                <li class="row">
                                    <div class="columns small-3 tool-property-name">color</div>
                                    <div class="text-right columns small-9"><span><input class = "circle-color" /></span></div>
                                </li>
                            <!--     <li class="row">
                                    <div class="columns small-3 tool-property-name">radius</div>
                                    <div class="text-right columns small-9">
                                        <input type="text" class="circle-radius small-size-input" placeholder="radius">
                                    </div>
                                </li> -->
                                <li class="row">
                                    <div class="columns small-3 tool-property-name">width</div>
                                    <div class="text-right columns small-9">
                                        <input type="text" class="circle-width small-size-input" placeholder="width">
                                    </div>
                                </li>
                                <li class="row">
                                    <span class = "columns small-3 tool-property-name">rotate</span>
                                    <div class="text-right columns small-9">
                                        <input type="text"  class="rotate-spinner small-size-input" placeholder="rotation">
                                    </div>
                                </li>
                                <li class="row">
                                    <div class="columns small-3 tool-property-name">pivot</div>
                                    <div class="text-right columns large-9"><div class="right">
                                        <input type="text" class ="pivot-x small-size-input left" placeholder="x">
                                        <input type="text" class ="pivot-y small-size-input left" placeholder="y">
                                     </div></div>
                                </li>
                                <li class= "row">
                                    <div class="columns small-3 tool-property-name">intersection</div>
                                    <div class="right columns large-9"><div class="right">
                                    <i class="intersection-icon icon-random"></i>
                                    </div></div>
                                </li>
                                  <li class= "row">
                                    <div class="columns small-4 tool-property-name">tangent-points</div>
                                    <div class="right columns large-8"><div class="right">
                                    <i class="tangent-icon icon-tumblr"></i>
                                    </div></div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- polygon -->
                    <div id="polygon-template">
                        <div id = "polygon-properties-palate" class="small-12 columns tool-canvas-objects-list">
                         <!--    <div class = "name tool-heading-name"><span class ="next-temp-selector back-temp"><i class="icon-circle-arrow-left left"></i></span><span class="center tool-heading">Polygon 0</span></div> -->
                            <ul class="sub-nav row tool-ui after-this">
                                <li class="row">
                                    <div class="columns small-3 tool-property-ch-name">fixed</div>
                                    <div class="text-right columns small-9">
                                        <div class="custom-box">
                                            <input id="checkbox6" class="polygon-fixed"  type="checkbox">
                                            <label class="checkbox" for="checkbox6">
                                            <span>
                                            <i class="icon-validated"></i>
                                            </span>
                                            </label>
                                        </div>
                                    </div>
                                </li>
                                <li class="row">
                                    <span class="columns small-3 tool-property-name">color</span> 
                                    <div class="text-right columns small-9"><span><input class="polygon-color" /></span></div>
                                </li>
                                <li class="row">
                                    <span class = "columns small-3 tool-property-name">rotate</span>
                                    <div class="text-right columns small-9">
                                        <input type="text"  class="rotate-spinner small-size-input" placeholder="rotation">
                                    </div>
                                </li>
                                <li class="row">
                                    <span class="columns small-3 tool-property-name">pivot</span>
                                    <div class="text-right columns small-9"><div class="right">
                                        <input type="text" class ="pivot-x small-size-input left" placeholder="x">
                                        <input type="text" class ="pivot-y small-size-input left" placeholder="y">
                                     </div></div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--  angle -->
                    <div id="angle-template">
                        <div id = "angle-properties-palate" class="small-12 columns tool-canvas-objects-list">
                          <!--   <div class = "name tool-heading-name"><span class ="next-temp-selector back-temp"><i class="icon-circle-arrow-left left"></i></span><span class="center tool-heading">Angle 0</span></div> -->
                            <ul class="sub-nav row tool-ui">
                                <li class="row">
                                    <div class="columns small-3 point1 tool-property-name">point 1</div>
                                    <div class="text-right columns small-9"><span class ="angle-point-first columns small-4"></span><span class ="columns small-3 angle-points" index = "1"><i class="icon-cog next-temp-selector"></i></span></div>
                                </li>
                                <li class="row">
                                    <div class="columns small-3 point2 tool-property-name">point 2</div>
                                    <div class="text-right columns small-9"><span class ="angle-point-second columns small-4"></span><span class ="columns small-3 angle-points" index = "2"><i class="icon-cog next-temp-selector"></i></span></div>
                                </li>
                                <li class="row">
                                    <span class="columns small-3 point3 tool-property-name">point 3</span> 
                                    <div class="text-right columns small-9"><span class ="angle-point-third columns small-4"></span><span class ="columns small-3 angle-points" index = "3"><i class="icon-cog next-temp-selector"></i></span></div>
                                </li>
                                <li class="row">
                                    <span class="columns small-3 tool-property-ch-name">fixed</span>
                                    <div class="text-right columns small-9">
                                        <div class="custom-box">
                                            <input id="checkbox7" class="angle-fixed" type="checkbox">
                                            <label class="checkbox" for="checkbox7">
                                            <span>
                                            <i class="icon-validated"></i>
                                            </span>
                                            </label>
                                        </div>
                                    </div>
                                </li>
                                <li class="row">
                                    <div class="columns small-4 tool-property-ch-name">withoutlabel</div>
                                    <div class="text-right columns small-8">
                                        <div class="custom-box">
                                            <input id="checkbox8" class="hide-angle-label" type="checkbox">
                                            <label class="checkbox" for="checkbox8">
                                            <span>
                                            <i class="icon-validated"></i>
                                            </span>
                                            </label>
                                        </div>
                                    </div>
                                </li>
                                <li class="row">
                                    <div class="columns small-4 tool-property-name">angle radius</div>
                                    <div class="text-right columns small-8">
                                        <input type="text" class="angle-radius small-size-input" placeholder="radius">
                                    </div>
                                </li>
                                <li class="row">
                                    <div class="columns small-4 tool-property-ch-name">true angle</div>
                                    <div class="text-right columns small-8">
                                        <div class="custom-box">
                                            <input id="checkbox9" class="true-angle" type="checkbox">
                                            <label class="checkbox" for="checkbox9">
                                            <span>
                                            <i class="icon-validated"></i>
                                            </span>
                                            </label>
                                        </div>
                                    </div>
                                </li>
                                <li class="row">
                                    <div class="columns small-5 tool-property-name">variable angle</div>
                                    <div class="text-right columns small-7"><div class="right">
                                        <input type="text" class="angle-value variable-angle small-size-input left" placeholder="variable">
                                    </div></div>
                                <li class="row">
                                    <div class = "columns small-3 tool-property-name">rotate</div>
                                    <div class="text-right columns small-9">
                                        <input type="text"  class="rotate-spinner small-size-input" placeholder="rotation">
                                    </div>
                                </li>
                                <li class="row">
                                    <div class="columns small-3 tool-property-name">pivot</div>
                                    <div class="text-right columns small-9"><div class="right">
                                        <input type="text" class ="pivot-x small-size-input left" placeholder="x">
                                        <input type="text" class ="pivot-y small-size-input left" placeholder="y">
                                     </div></div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- text -->
                    <div id="text-template">
                        <div id = "text-properties-palate" class="small-12 columns tool-canvas-objects-list">
                           <ul class="sub-nav row tool-ui">
                                <li class="row hide show-label">
                                    <div class="columns small-3 tool-property-ch-name">hide</div>
                                    <div class="text-right columns small-9">
                                        <div class="custom-box">
                                            <input id="checkbox12" class="label-visiblity" type="checkbox" />
                                            <label class="checkbox" for="checkbox12">
                                            <span>
                                            <i class="icon-validated"></i>
                                            </span>
                                            </label>
                                        </div>
                                    </div>
                                </li>
                                <li class="row text-fixed-prop">
                                    <div class="columns small-3 tool-property-ch-name">fixed</div>
                                    <div class="text-right columns small-9">
                                        <div class="custom-box">
                                            <input id="checkbox10" class="text-fixed" type="checkbox">
                                            <label class="checkbox" for="checkbox10">
                                            <span>
                                            <i class="icon-validated"></i>
                                            </span>
                                            </label>
                                        </div>
                                    </div>
                                </li>
                                <li class="row">
                                    <div class="columns small-4 tool-property-name">font size</div>
                                    <div class="text-right columns small-8">
                                        <input type="text" class="text-size small-size-input" placeholder="font-size">
                                    </div>
                                </li>
                                <li class="row">
                                    <div class = "columns small-3 tool-property-name">rotate</div>
                                    <div class="text-right columns small-9">
                                        <input type="text"  class="rotate-spinner small-size-input" placeholder="rotation">
                                    </div>
                                </li>
                                <li class="row">
                                    <div class="columns small-3 tool-property-name">color</div>
                                    <div class="text-right columns small-9"><input class = "text-color" /></div>
                                </li>
                                <li class="row">
                                    <div class="columns small-3 tool-property-name">position</div>
                                    <div class="text-right columns small-9"><div class="right">
                                        <input type="text" class ="text-x-position small-size-input left" placeholder="x">
                                        <input type="text" class ="text-y-position small-size-input left" placeholder="y">
                                    </div></div>
                                </li>
                                <li class="row">
                                    <div class="columns small-3 tool-property-name">value</div>
                                    <div class="text-right columns small-9"><div class="right">
                                        <input type="text" id = "text-value" class="text-value long-input left algo-header-1" placeholder="value" />
                                    </div></div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- tangent template -->
                    <div id="tangent-template">
                        <div id = "tangent-properties-palate" class="small-12 columns tool-canvas-objects-list">
                           <ul class="sub-nav row tool-ui">
                            <li class="row">
                                    <div class="columns small-3 tangent-point tool-property-name"></div>
                                    <div class="text-right columns small-9 tool-property-name">
                                          <span class ="tangent-point-name columns small-4"></span>
                                          <span class ="columns small-3"><i class="icon-cog next-temp-selector tanget-point-selector"></i>
                                          </span>
                                    </div>
                                </li>
                                <li class="row">
                                    <div class="columns small-3 tool-property-name">color</div>
                                    <div class="text-right columns small-9"><input class = "tangent-color" /></div>
                                </li>
                                 <li class="row">
                                    <div class="columns small-3 tool-property-name">width</div>
                                    <div class="text-right columns small-9">
                                        <input type="text" class="tangent-width small-size-input" placeholder="width">
                                    </div>
                                </li>
                                 <li class="row">
                                    <div class="columns small-3 tool-property-ch-name">first-arrow</div>
                                    <div class="columns small-9 text-right">
                                        <div class="custom-box">
                                            <input id="line-tfa" class = "line-tfa" type="checkbox" />
                                            <label class="checkbox" for="line-tfa">
                                            <span>
                                            <i class="icon-validated"></i>
                                            </span>
                                            </label>
                                        </div>
                                    </div>
                                </li>
                                 <li class="row">
                                    <div class="columns small-3 tool-property-ch-name">last-arrow</div>
                                    <div class="columns small-9 text-right">
                                        <div class="custom-box">
                                            <input id="line-tla" class = "line-tla" type="checkbox" />
                                            <label class="checkbox" for="line-tla">
                                            <span>
                                            <i class="icon-validated"></i>
                                            </span>
                                            </label>
                                        </div>
                                    </div>
                                </li>
                                 <li class="row">
                                    <div class="columns small-3 tool-property-ch-name">visible</div>
                                    <div class="columns small-9 text-right">
                                        <div class="custom-box">
                                            <input id="tan-v" checked="checked" class="tan-v" type="checkbox"/>
                                            <label class="checkbox" for="tan-v">
                                            <span>
                                            <i class="icon-validated"></i>
                                            </span>
                                            </label>
                                        </div>
                                    </div>
                                </li>
                           </ul>
                        </div>
                    </div>
                    <!-- line decorator -->
                     <div id="line-decorator">
                        <div id = "line-decorator-palette" class="small-12 columns tool-canvas-objects-list">
                           <ul class="sub-nav row tool-ui">
                            <li class = "row">
                            <div class="columns small-6">visible</div>
                            <div class="columns small-6 text-right"><div class="custom-box">
                                            <input id="line-tick-visible" class="line-tick-visible" type="checkbox"/>
                                            <label class="checkbox" for="line-tick-visible">
                                            <span>
                                            <i class="icon-validated"></i>
                                            </span>
                                            </label>
                                        </div></div>
                        </li>
                         <li class = "row">
                            <div class="columns small-6">arrow</div>
                            <div class="columns small-6 text-right">
                            <div class="custom-box">
                                            <input id="line-tick-arrow" class="line-tick-arrow" type="checkbox"/>
                                            <label class="checkbox" for="line-tick-arrow">
                                            <span>
                                            <i class="icon-validated"></i>
                                            </span>
                                            </label>
                                        </div>
                            </div>
                        </li>
                        <li class = "row">
                            <div class="columns small-6">ticks count</div>
                            <div class="columns small-6">
                             <input type="text" class="line-tick-count small-size-input" placeholder="count">
                            </div>
                        </li>
                        <li class = "row">
                            <div class="columns small-6">color</div>
                            <div class="columns small-6 text-right"><input class="line-tick-color" /></div>
                        </li>
                        <li class = "row">
                            <div class="columns small-6">height</div>
                            <div class="columns small-6">
                            <input type="text" class="line-tick-height small-size-input" placeholder="height">
                            </div>
                        </li>
                       
                         <li class = "row">
                            <div class="columns small-6">dash</div>
                            <div class="columns small-6">
                            <input type="text" class="line-tick-dash small-size-input" placeholder="dash"></div>
                        </li>
                           </ul>
                        </div>
                    </div>
                    
                </div>
            </div>
            <script type="text/javascript" src="//st1.ck12.org/assessment/tools/geometry-tool/build-20180919161315/./vendor/jquery/1.10/jquery.min.js"></script>
            <!-- script src="vendor/foundation/foundation.min.js"></script-->
            <script type="text/javascript" data-main="//st1.ck12.org/assessment/tools/geometry-tool/build-20180919161315/./require_config.js" src="//st1.ck12.org/assessment/tools/geometry-tool/build-20180919161315/./vendor/require/2.1.6/require.min.js"></script>
            <!-- <script type='text/javascript' src="//st1.ck12.org/assessment/tools/geometry-tool/build-20180919161315/./vendor/flexcroll/modules/news-ticker/flexcroll.js"></script> -->
            <script type="text/javascript">
            	
                     var DisplayIMge = document.getElementsByTagName("body")[0];
                      $(DisplayIMge).append("<div id = 'load-image'><img src= 'themes/tangerine/images/ajax-loader%20.gif' alt='Loading...'"/><h4></h4></div>");
             </script>
        </body>
    </html>
