<!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">
      <head>
         <meta charset="utf-8" />
         <meta name="apple-mobile-web-app-capable" content="yes">
         <meta name="apple-touch-fullscreen" content="yes">
         <meta name="description" content="Learn,Play and Explore by using interactive PLIX.">
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
         <title>CK-12 PLIX Series</title>
         <link rel="stylesheet" href="/plix/modalities.css">

         <style type="text/css">
         	.loader-overlay{
				margin: 0 auto;
				position: fixed;
				left: 0;
				top: 0;
				height: 100%;
				width: 100%;
				z-index: 112;
				background: #f2f2f2;
				background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #ffffff 30%, #cccccc 100%);
				background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#ffffff 30%,#cccccc 100%);
				background: radial-gradient(ellipse at center,  #ffffff 0%,#ffffff 30%,#cccccc 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=1 );
				background-size: cover;
				-moz-background-size: cover;
				-webkit-background-size: cover;
				-o-background-size: cover;
			}
			.loader-contet-wrapper{
				top: 50%;
				-webkit-transform: translateY(-50%);
				-moz-transform: translateY(-50%);
			    -o-transform: translateY(-50%);
			    transform: translateY(-50%);
			    -ms-transform: translateY(-50%);
				text-align: center;
			    line-height: 1;
			    padding: 0 100px;
				position: relative;
			}
			.plix-text{
				color: #666;
			    font-size: 2rem;
			    letter-spacing: 1rem;
			    font-family: roboto-light;
			    margin: 1rem 0;
			}
			.plix-defination{
				color: #666;
			    margin-bottom: 1rem;
			}
			.loader-background{
			    white-space: nowrap;
			    text-align: left;
			}
			.loader-foreground{
				height: 2px;
			    background-color: #008E7F;
			    width: 0;
			    border-radius: 3px;
			    display: inline-block;
			}
			.loader-percentage {
			    color: #008E7F;
			    font-size: 2rem;
			    margin-left: .5rem;
			    vertical-align: middle;
			    display: inline-block;
			}
         </style>
         
        <!--  <script type="text/ecmascript">document.domain = "ck12.org";</script> -->
         <script src="/plix/dexterjs.min.js"></script>
         <script>
             if (window.dexterjs) {
                 window.dexterjs.set("config", {
                     clientID : 24839961,
                     trackPageTime : false
                 });
             }
         </script>
	<!-- Check for lms context -->
         <script>
            var _context = sessionStorage.getItem('app-context');
            if (_context && _context === 'lti-app' && window.name !=="lms-context-override"){
                try {
                    // Set data-app-context for css
                    if (sessionStorage.getItem('lms-assignment') === 'plix' && window.name !=="lms-context-ref"){
                        document.getElementsByTagName('html')[0].setAttribute('data-lms-assignment','plix');
                    } else {
                        document.getElementsByTagName('html')[0].setAttribute('data-app-context','lti_app');
                    }
		    
                    // Set window lmsContext for js
                    window.lmsContext='lti-app';
                } catch(e){
                    console.log("Error setting lms app context:"+ String(e));
                }
            }
         </script>
         <script>
      if (!window.location.origin) { // Some browsers (mainly IE) does not have this property, so we need to build it manually...
        window.location.origin = window.location.protocol + '//' + window.location.hostname + (window.location.port ? (':' + window.location.port) : '');
      }
			window.API_SERVER_URL = window.location.origin;	// setting API_SERVER_URL for modality assign config change
		 </script> 

         <script type="text/x-mathjax-config">
        	var  screenWidth = window.innerWidth,
            	 lineWidth = "";
          	if (screenWidth > 1600) {
            	lineWidth = "740px";
        	} else if (screenWidth > 1400) {
            	lineWidth = "564px";
          	} else {
            	lineWidth = "360px";
          	}
    		MathJax.Hub.Config({
         		messageStyle: "none",
          		extensions: ["tex2jax.js","TeX/AMSmath.js", "TeX/AMSsymbols.js"],
          		jax: ["input/TeX","output/HTML-CSS"],
          		tex2jax: {inlineMath: [["@$","@$"]], displayMath: [ ['@$$','@$$'] ]},
          		"HTML-CSS": { linebreaks: { automatic: true, width: lineWidth } },
          		"showMathMenu": false,
          		"showMathMenuMSIE": false
    		});
  		</script>

        <!-- Google Tag Manager -->


        <!-- Start Alexa Certify Javascript -->

        <!-- End Alexa Certify Javascript -->
      </head>
      <body class="no-touch plix-modal">
				<script>
					var browseHost;
					if(-1 !== window.API_SERVER_URL.indexOf("gamma")){
						browseHost = "simtest.ck12.org";
					} else if(-1 !== window.API_SERVER_URL.indexOf("www")){
						browseHost =  "interactives.ck12.org";
					}
					if(browseHost){
						var apihostIframe = document.createElement("iframe");
						apihostIframe.setAttribute("id","i-cross-d");
						apihostIframe.setAttribute("style","display:none");
						apihostIframe.setAttribute("src","//"+browseHost+"/plix/storage.html");
						document.body.appendChild(apihostIframe); 
					}
			
				</script>
      <noscript>
	   <div style="position:fixed; top:0;left:0;right:0;margin:auto; z-index:9999;">
	      <div class="row collapsed" style="text-align:center;background-color:#FFFF99;padding:5px 5px 5px 5px; border:2px solid #999;font-size:16px;text-shadow:none;color:#000000;">
	          <div>To use this website, please enable javascript in your browser. <a style="text-shadow: none;color:#0000FF;text-decoration:underline;" href="/nojavascript/">Learn more</a></div>
	      </div>
	   </div>
	  </noscript>
        <section id="guide"></section>
        <div itemscope itemtype="http://schema.org/WebPage">
      <!-- <div id = "overlyy" class="hide">
      	<div class="dontShow no-display">Don't show again </div>
      </div> -->
      <div class="dvLoading no-display" id="dvLoading"></div>
	  <div class="success-feedback-container"><span class="success-feedback" id="success-feedback" style="display : none"><!-- Feedback sent. Thank you for your valuable feedback! --></span></div>
      <div id="deviceCompatibilityAlertPlix" class="device-alertPlix landscapePlix">
      	<div class="device-messagePlix"></div>
      	<div class="device-error-messagePlix" id="sorry-mssg">Sorry!</div>
      	<div class="device-error-messagePlix">PLIX are not supported on screens smaller than 7-inches or with resolution below 1024x768.</div>
      	<div class="device-error-messagePlix">Please change your resolution settings or use a different device.</div>
      	<!-- div class="continue-wrapper continue-wrapper-combatibility"><input type="button" class="continue" value="Continue Anyway" /></div -->
      </div>
      
      <div id="portraitView">
      	<div class="whoops-message">WHOOPS!</div>
      	<div class="plix-orientation-error-message mobile-msg">To continue, please turn device to landscape mode</div>
      	<div class="plix-orientation-error-message desktop-msg">Not enough room for PLIX</div>
      	<div class="rotation-display"></div>
      	<!-- div class="continue-wrapper continue-wrapper-orientation"><input type="button" class="continue" value="Continue Anyway" /></div -->
      </div>
      
      <div id="landscapeView">
         <div id="ToolBarView" class="sim-tool-bar no-display initial-header">
            <a href="//www.ck12.org" class="back-to-source ck12icon-linearrow2 hide-for-lti-context" id="backToSrc"></a>
            <a href="//www.ck12.org" class="sim-logo hide-for-lti-context" id="ck12-logo">PLIX Series </a>
	    <a href="#" class="sim-logo show-for-lti-context">PLIX Series </a>
            <span class="current-concept" id="current-concept"><span class="ck12icon-Next breadcrumb"></span><span id="concept-name"></span></span>
            <div class="tool-menus-list">
               <div class="tool-menu user-avatar hide-for-lti-context">
                  <img class="user-avatar-image modal-visible" id="userAvatar" src="/" alt="User's Profile picture">
                  <div class="separator"></div>
               </div>
               <div class="tool-menu font-size-button modal-visible" id="toolBarFont">
                  Aa
                  <div class="separator"></div>
               </div>
               <div class="tool-menu challenge hide" id="toolBarChallenge">
                  Challenge Me
                  <div class="separator"></div>
               </div>
               <div class="tool-menu feedbackcontainer feedback" id="feedback">
	               <div class="ck12icon-Feedback"></div>
	               <span class="feedback-text">Feedback</span>
	               <div class="separator"></div>
               </div>
               <div class="tool-menu walkthrough hide" id="toolBarWalkThrough">
                  Walkthrough
                  <div class="separator"></div>
               </div>
               <div class="tool-menu more ck12icon-loadmore modal-visible" id="toolBarMore" title="More Options">
                 <div class="explore-plix-tooltip" id="explore-plix"><span>You can take a tour on "</span><span class="explore-plix-action">How to explore a PLIX</span><span>" from here anytime you want.</span></div>
               </div>
               <div class="modality-info-wrapper tool-menu">
	               <div class="button standard tangerine btn modality-info hide-for-lti-context">
	               		<i class="icon-grps_assgnmts grp-assignment-sim"></i>Assign to class
	               </div>
	               <div class="button standard tangerine btn modality-info show-for-lti-context assign-to-lms">
	               		<i class="icon-grps_assgnmts grp-assignment-sim"></i>Create Assignment
	               </div>
	               <span class="assign-info-img icon-Info hide-for-lti-context"></span>
					<div class="hide-for-lti-context">
						<div id="assign-tooltip" class="hide">
							<strong>Quick Assignments!</strong>
							<div class="speech-text">
					 			You can now directly assign a PLIX to your classes and set a due date for each class.
							</div>
							<div class="text-center">
								<button class="button tangerine standard speech-btn" id="assign-ok-button">OK</button>
							</div>
						</div>
					</div>	               
               </div>

            </div>
         </div>
         <!-- Start html for loader overlay  -->
         <div class="loader-overlay" id="loader-overlay">
         	<div class="loader-contet-wrapper" id="loader-contet-wrapper">
         		<br>
         		<div class="plix-text" id="plix-text">PLIX</div>
         		<div class="plix-defination" id="plix-defination">Play Learn Interact eXplore</div>
         		<div class="loader-background" id="loader-background">
	         		<div class="loader-foreground" id="loader-foreground"></div>
	         		<div class="loader-percentage"><span id="loader-percentage">0</span><span>%</span></div>
         		</div>
         	</div>
         </div>
         <div class="full-screen-loader-overlay hide"></div>
         <!-- End html for loader overlay  -->
         
         <div id="plix" class="plix">
            <!-- start of body HTML -->
            
            <div id = "plixWrapper" class="plixWrapper row activePage">
            	<div id="leftBackWrapper" class="leftBackWrapper columns small-6"></div>
                <div id="plixLeftWrapper" class="plixLeftWrapper columns small-6">
                <div class="leftTopFixedBar">
               		<div class="title-container">
               			<div class="show-challenge" style="display: none;" id="show-challenge">
                			<span class="return-symbol ck12icon-linearrow2"></span>
                			<span>Back to Challenge</span>
                		</div>
                		<h1 id="title" itemprop="name"></h1>
                		<div id="plixQestionPlayer1" style="display:none;">
	                		<div class="show-description">
	                			<span class="return-symbol ck12icon-linearrow2"></span>
	                			<span>Show Description</span>
	                		</div>
		                    <div id="questionController1" class="row">
		                        <div class="columns small-11 challenge">
		                        <span>Challenge</span>
		                        <span id="counter" class="counter">1/1</span>
		                        </div>
		                        <!-- div class="close-q columns small-1 text-right">&times;</div -->
		                     </div>
		                </div>
                		<div id="underline" class="underline border-theme-color"></div>
               		</div>
               		<!-- div class="leftTopFixedBarOverlay"></div -->
               </div>
               	  <div id="plixLeftMiddleContainer" class="plixLeftMiddleContainer animated bounceInUp">
	                  <div id="plixDescriptionContainer" class="plixDescriptionContainer" >
	                     <div id="description" itemprop="description"></div>
	                  </div>
                  </div>
                  <div id="plixLeftMiddlequestionContainer" class="plixLeftMiddlequestionContainer animated bounceInUp" style="display:none;"></div>
	              	<div id="plixQuestionPlayerFixed" class="plixQuestionPlayerFixed">
	              		<div class="plixQuestionPlayerFixedOverlay">
              			  <div class=" ck12icon-swipedown swipe-on-overflow hide"></div>
		                  <!-- div id="plixQestionPlayer1" class="plixQestionPlayer" style="display:none;">
		                     <div id ="questionController1" class="questionController">
		                        <div id="cross" class="cross columns small-2"><div class="close-q ck12icon-Close1" title="Close&nbsp;Questionnaire"></div></div>
		                        <div class="columns small-8">Challenge Me</div>
		                        <div id="counter" class="counter columns small-2">3/4</div>
		                     </div>
		                  </div -->
		                  <div id="plixQestionPlayer" class="plixQestionPlayer animated bounceInUp">
		                     <div id ="questionController" class="questionController secondary-background-color">
		                        Challenge Me
		                        <!-- div id="challengeButton" class="challengeButton columns small-6" title="Questionnaire">
		                           <div id="play-btn" class="play-btn ck12icon-Play">
		                           </div>
		                        </div -->
		                     </div>
		                  </div>
		               </div>
                  </div>
                  <div class="overflow-indicator secondary-background-color ck12icon-more hide"></div>
                  <div class="overflow-container hide"></div>
               </div>
               <div id = "plixRightWrapper" class="plixRightWrapper columns small-6">
               		<div class="rightFixedContainer" id="rightFixedContainer">
	               	   <div class="plixRightMiddleContainer" id="plixRightMiddleContainer">
	               	   	   <div id="plixIframeOverlay" class="plixIframeOverlay no-display">
	               	   	   </div>
			               <div id="plixIFrameContainer" class="plixIFrameContainer">
			                <div id="plixIframeWrapper" class="plixIframeWrapper">
                        <div itemprop="thumbnailUrl" itemscope  itemtype="" id="thumbnailUrlItemType">
			                   <iframe id="plix-frame" src= "" scrolling="no" frameborder="0"></iframe>
                        </div>
			                  <div id="plixNavigator" class="plixNavigator hide">
			                     <div id = "navigationWrapper" class="navigationWrapper">
			                        <div id = "navigatorController" class="navigatorController">
			                           <ul>
			                           	  <li class="ck12icon-reset" id ="reset" title="Reset"></li>
			                           	  <li class="vertical-seprator border-theme-color" data-navigate="hide"></li>
			                              <li class="ck12icon-add" id ="zoomIn" title="Zoom In" data-navigate="hide"></li>
			                           	  <li class="ck12icon-circle" id ="unZoom" title="Unzoom" data-navigate="hide"></li>
			                              <li class="ck12icon-minus" id ="zoomOut" title="Zoom Out" data-navigate="hide"></li>
			                              <li class="ck12icon-downarrow" id ="moveDown" title="Move Down" data-navigate="hide"></li>
			                              <li class="ck12icon-uparrow" id ="moveUp" title="Move Up" data-navigate="hide"></li>
			                              <li class="ck12icon-linearrow2" id ="moveLeft" title="Move Left" data-navigate="hide"></li>
			                              <li class="ck12icon-rightarrow" id ="moveRight" title="Move Right" data-navigate="hide"></li>
			                           </ul>
			                        </div>
			                        <div id = "nextIconWrapper" class="nextIconWrapper">
			                        </div>
			                     </div>
			                  </div>
			                 </div>
			                 <div class="read-more-container no-display">
			               		<span class="ck12icon ck12icon-info secondary-theme read-more-js" title="Learn More"></span>
			               		<div class="read-more secondary-theme read-more-js" id="readMore">Learn More</div>
			                 </div>
			               </div>
		                </div>
                  </div>
               </div>
            </div>
            <!-- related plix wrapper -->
            <div class="relatedPlixWrapper inActive" id="relatedPlixWrapper">
            	<div class="relatedPlixBox">
	            	<div id="relatedPlixHeader" class="relatedPlixHeader">Similar PLIX</div>
	            	<div id="relatedPlixSeprator" class="relatedPlixSeprator border-theme-color"></div>
	            	<div class="relatedPlixContainer no-visibility no-display">
	            	      <a class="relatedPlix no-display">
	            	           <div class="relatedPlixAvatar"></div>
	            	           <div class="relatedPlixTitle"></div>
	            	      </a>
	            	      <a class="relatedPlix middle no-display">
	            	           <div class="relatedPlixAvatar"></div>
	            	           <div class="relatedPlixTitle"></div>
	            	      </a>
	            	      <a class="relatedPlix no-display">
	            	           <div class="relatedPlixAvatar"></div>
	            	           <div class="relatedPlixTitle"></div>
	            	      </a>
	            	</div>
	            	<div class="relatedPlixContainer no-visibility no-display">
	            	      <a class="relatedPlix no-display">
	            	           <div class="relatedPlixAvatar"></div>
	            	           <div class="relatedPlixTitle"></div>
	            	      </a>
	            	      <a class="relatedPlix middle no-display">
	            	           <div class="relatedPlixAvatar"></div>
	            	           <div class="relatedPlixTitle"></div>
	            	      </a>
	            	      <a class="relatedPlix no-display">
	            	           <div class="relatedPlixAvatar"></div>
	            	           <div class="relatedPlixTitle"></div>
	            	      </a>
	            	</div>
	            </div>
            	
            	<!-- start html for tile of creating new PLIX -->
            	<!-- <div class="contribute-content-tile-wrapper no-display" id="createPLix">
	            	<div class="modality js-signin-required contribute-content-tile">
						<div class="create-modality-container">
							<div style="height:21px;"></div>
							<div class="create-modality-plus">
								<span class="js-add-modality"></span>
            	      </div>
							<div>
								<h2 class="text-center">Create a PLIX</h2>
								<div class="contribute-content-data">Help teach the world by creating a PLIX for this concept.</div>
            	      </div>
            	      </div>
            	</div>
              </div> -->
			</div>	
				<!-- end html for tile of creating new PLIX -->
				
            <!-- <div class="shareOthersWrapper inActive" id="shareOthersWrapper">
            	<div class="shareIconContainer" id="shareIconContainer">
	            	<div class="shareIconWrapper" id="shareIconWrapper">
	            		<span class="ck12icon-fb share-icon st_facebook_large"></span>
	            		<span class="ck12icon-Tweet share-icon st_twitter_large"></span>
	            		<span class="ck12icon-Mail share-icon st_email_large"></span>
	            		<span class="ck12icon-Group share-icon"></span>
	            	</div>
	            	<div class="border-theme-color share-border"></div>
	            	<div class="shareText" id="shareText">Share with your friends</div>
            	</div>
            </div> -->
         </div>
         <div id="prev-button-conatiner" class="prev-button-conatiner no-display" title="Previous">
         	<span class="prevPage ck12icon-Next" id="prevPage"></span>
         	<span class="prev-text">Previous</span>
       	</div>
       	<div id="next-button-conatiner" class="next-button-conatiner no-display">
         	<span class="nextPage ck12icon-Next" id="nextPage"></span>
         	<span class="next-text" title="Similar PLIX">Next</span>
       	</div>
       	
       	<!-- start html for toolbar header -->
       		<!-- start html for feedback modal -->
       			<div id="ReportIssueView" class="ReportIssue-screen no-display">
				  <div class="reportIssue-container" id="reportContainer">
				    <div class="header">
				      Give us your valuable feedback
				    </div>
				    <div class="info-container">
				    <!-- <label id="ie9-placeholder" class="ie9-placeholder no-display">Please type your feedback here.</label> -->
				      <textarea id="reportIssueText" rows="4" cols="50" type="text" maxlength="300" class="comment-box" placeholder="Please type your feedback here."></textarea>
				    </div>
				    <div id="uploadError" class="hide">
				      File format not supported, use jpg or png
				    </div>
				    <div class="upload-img-list hide" id="imageList">
				      <div class="upload-img">
				        <span class="delete-icon" id="removeImg">
				        </span>
				        <span class="img-name" id="imageUploaded">
				          Image 01
				        </span>
				      </div>
				    </div>
				    <div class="upload-images">
				      <input class="input-image" id="inputImage" type="file" title="Upload Image">
				      <span class="upload-icon">
				      </span>
				      <span class="upload-text">
				        Upload Image
				      </span>
				    </div>
				    <input type="file" name="pic" class="hide" accept="image/*">
				    <div class="button-container ">
				      <div id="sendReport" class="send-button report-button">
				        SEND
				      </div>
				      <div id="cancelReport" class="cancel-button report-button">
				        CANCEL
				      </div>
				    </div>
				    <div class="reportIssueClose" id="reportIssueClose">
				    </div>
				  </div>
				  <div class="load-image no-display" id="load-image">
				  </div>
				</div>
       		<!-- end html for feedback modal -->
       		
       		<!-- start html for about -->
       		<div id="MoreView" class="menu-container modal-visible">
  				  <div id="" class="menu-options-parent ">
  				    <div id="aboutSim" class="menu-options vertical-buttons about icon">
  				      <span>
  				        <div class="icon-container">
  				        </div>
  				        About
  				      </span>
  				    </div>
  				    <div id="reportIssue" class="menu-options vertical-buttons icon report-issue">
  				      <span>
  				        <div class="icon-container">
  				        </div>
  				        Report an issue
  				      </span>
  				    </div>
              <div id="plixIntro" class="menu-options vertical-buttons icon js-intro-tour">
                <span>
                  <div class="icon-container">
                  </div>
                  How to explore a PLIX?
                </span>
              </div>
  				    <!-- div id="" class="guideContainer">
  				    <div class="ck12icon-Guide guide-icon">
  				        </div>
  				      <span class="guide-text">
  				        Guide
  				      </span>
  				    </div -->
  				  </div>
  				  <div id="" class="menu-options-parent share-menu" style="padding-bottom:3% !important">
  				    <div id="mailShare" displaytext="" title="Share Me" style="text-align:center;cursor:pointer;">
                        Share Me
  				    </div>
  				    <div id="" class="menu-options horizontal-buttons icon share group hide" displaytext="Group">
  				    </div>
  				  </div>
				  </div>
       		<!-- end html for about -->
       		<!-- start html for font menu -->
       			<div id="fontSizeMenu" class="font-size-menu modal-visible">
                	<div id="font1" class="small-font font font-select">Aa</div>
                    <div id="font2" class="medium-font font font-select">Aa</div>
                    <div id="font3" class="large-font font font-select">Aa</div>
                </div>
            <!-- end html for font menu -->
            <!-- start html for user profile  -->
            <div id="UserProfileView" class="user-profile-screen no-display modal-visible">
			  <div class="user-profile-container">
			     <div class="name"></div>
			    <div class="email"></div>
			    <div class="seperator">
			    </div>
			    <div class="options">
			      <div class="settings hide icons">
			        Settings
			      </div>
			      <div class="signout icons">
			        Sign Out
			      </div>
			    </div>
			  </div>
			</div>
			<!-- end html for user profile  -->
			<!-- start html for about view  -->
			<div id="AboutView" class="about-screen no-display">
			 <!--  <div class="background">
			  </div> -->
			  <div class="about-container">
			    <div class="header">
			      About
			    </div>
			    <div class="info-container">
			    <div>
			      <div class="info-block">
			        <div class="title">
			          Difficulty Level:
			        </div>
			        <div id="difficulty-level" class="about-view-text"></div>
			      </div>
			      <div class="info-block" id="grades-info">
			        <div class="title">
			          Grades:
			        </div>
			        <div id="grades" class="about-view-text"></div>
			      </div>
			      <div class="info-block">
			        <div class="title">
			          Date Created:
			        </div>
			        <div id="date-created" class="about-view-text"></div>
			      </div>
			      </div>
			      
			      <div>
			      <div class="info-block">
			        <div class="title">
			          Categories:
			        </div>
			        <div id="categories" class="about-view-text"></div>
			      </div>
			      <div class="info-block">
			        <div class="title">
			          Concepts:
			        </div>
			        <div id="concepts" class="about-view-text"></div>
			      </div>
			      </div>
			    </div>
			    <div class="aboutClose" id="aboutClose">
			    </div>
			  </div>
			</div>
			<div id = "answer" class="answer no-visibility"></div>
			<div class="preload-image-fb"></div>
			<div class="preload-image-tweet"></div>
			<div class="preload-image-mail"></div>
			<!-- end html for about view  -->
       	<!-- end html for toolbar header -->
       	<!-- modal for read moadlity  -->
       	<div id="readModal" class="reveal-modal large">
			<a id="closeModal" class="close-reveal-modal close closeModal">+</a>
			<div class="learn-more-content">
				<iframe id="readConceptFrame" src=""></iframe>
			</div>
		</div>
		<div id="ansModal" class="reveal-modal small">
			<a id="closeModal" class="close-reveal-modal close closeModal">+</a>
			<div>Correct answer is -</div>
			<div class="correct-ans-list-contaner">
				<ul id="correct-ans-list"></ul>
			</div>
		</div>
		<div id="hintModal" class="reveal-modal large">
			<a id="closeModal" class="close-reveal-modal close closeModal">+</a>
		</div>
		<div id="templates" class="no-display">
			<div id="hintTemplate">
				<li>
					<span class="index">#@@index@@</span>
					<div class="hint-content default">@@content@@</div>
				</li>
			</div>
			<div id="hintCarousalTemplate">
				<div class="carousal-container" id="hint-@@id@@">
					<div class="hint-carousal-container">
						<ul class="hint-carousal">@@hintContent@@</ul>
					</div>
					<div class="hide desktopHintNavigationArrow">
						<div class="navigation-button previous">
							<span class="ck12icon-Next"></span>
						</div>
						<div class="navigation-button next">
							<span class="ck12icon-Next"></span>
						</div>
					</div>
				</div>	
			</div>
		</div>
    </div>
    </div>
		<!-- end modal for read moadlity -->
      </body>
   </html>
