{% extends "page_template.html" %}
{% block pagetitle %}Exercise{% endblock pagetitle %}
{% block pagescript %}
  <link rel="stylesheet" href="/stylesheets/caja-gadget.css">
  <script type="text/javascript" src="/javascript/caja.js?{{App.version}}"></script>  
  <script type="text/javascript" src="/javascript/embedded-scripts.js?{{App.version}}"></script>  
  <script type="text/javascript" src="/javascript/ASCIIMathML.js?{{App.version}}"></script>
  <script type="text/javascript" src="/javascript/ASCIIsvg.js?{{App.version}}"></script>
  <script type="text/javascript" src="/javascript/fontdetect.js?{{App.version}}"></script>
  <script type="text/javascript" src="/javascript/seedrandom.js?{{App.version}}"></script>
  {% comment %}
     We can't append App.version to MathJax.js because it confuses MathJax.  Instead we map
     /MathJax-version to /MathJax in app.yaml and update the version there and here whenever
     we update MathJax.
  {% endcomment %}
  <script type="text/javascript" src="/MathJax-svn382-2/MathJax.js">
      MathJax.Hub.Config({
	showProcessingMessages: true,
	delayStartupUntil: "onload",
	skipStartupTypeset: true,
        extensions: ["mml2jax.js"],
	jax: ["input/MathML", "output/HTML-CSS"],
	"HTML-CSS": {
		scale: 100,
		availableFonts:["STIX", "TeX"],
		preferredFont: "TeX",
		webFont: "TeX",
		imageFont: null
	}
      });
  </script>
  <script type="text/javascript" src="/javascript/metautil.js?{{App.version}}"></script>
  <script type="text/javascript" src="/javascript/exerciseutil.js?{{App.version}}"></script>
  <script type="text/javascript" src="/javascript/graphutil.js?{{App.version}}"></script>
  <script type="text/javascript"><!--
$(document).ready(function () {
	KhanAcademy.onMathMLSupportReady(function() {
		translate();	
		drawPictures();		
	});
	loadScripts('http://caja.appspot.com/'); // TODO: Use our own server.
});
var username = "{{cookiename}}";
var currentexercise = "{{exid}}";
KhanAcademy.problem_number = "{{problem_number}}";
Math.seedrandom(KhanAcademy.problem_number);
function submitForm(value)
{
	var form = document.forms['answerform'];
	if (form.beenSubmitted)
		return false;
	else
		form.beenSubmitted = true;
	form.submit();
}
// -->
</script>
{% endblock pagescript %}

{% block pagesubmenu %}
  			<table border=0 width="100%" cellpadding=0 cellspacing=0>
  				<tr>
  					<td bgcolor=#e5ecf9 align=left width="100%"><B><A href="/">Exercises </a>: {{extitle}}</B>
  					{% if exercise_videos %}
  						<A href="/viewexercisevideos?exkey={{exercise.key}}">[Watch Videos]</A>
  					{% endif %}
  					</td>
  					<td bgcolor=#e5ecf9 align=right style="white-space:nowrap;">
  						<A href="/printexercise?exid={{exid}}&num_problems={{num_problems_to_print}}">Print next {{num_problems_to_print}} problems</A>
  						&nbsp;&nbsp;
  					</td>
                    <td bgcolor=#e5ecf9>
                        {% streak_bar user_exercise %}
  					</td>
  				</tr>
  			</table>
{% endblock pagesubmenu %}

{% block pagemessage %}
{% if endangered %}
		<div class=hdg style="padding: 1em;"><h3>
		Uh oh.&nbsp;  You missed a problem in an exercise that you'd previously mastered.&nbsp;  
		If you get this problem right without any hints, I'll assume you're still proficient.
		</h3></div>	
{% else %}
	{% if reviewing %}
		<div class=hdg style="padding: 1em;"><h3>
		You haven't done an exercise that covers this in a while.&nbsp;  Let's see if you still remember how to do it.
		</h3></div>
	{% else %}
		{% if proficient %}
		<div class=hdg style="padding: 1em;"><h3>
		I, the website, think you're pretty good at this!&nbsp;<BR>
		If you're in the mood, you might want to go to the main <A href='/exercisedashboard'>exercises page</a> and see if I've 
		suggested any other exercises.
		</h3></div>	
		{% endif %}
	{% endif %}
{% endif %}
{% endblock pagemessage %}

{% block pagecontent %}
<div id="scratch_pad_toggle" style="display: none;">
	<a id="scratch_pad_show" href="#" style="display: none;">Show scratch pad</a>
	<a id="scratch_pad_hide" href="#" style="display: none;">Hide scratch pad</a>
</div>
<div>
	<div id="safe_content" class=".vdoc-body___" style="position: relative; padding-top: 75px; padding-left: 50px; float: left; width: 100%;">
{{ exercise.safe_html }}
	</div>
    <script type="text/javascript">
      registerForScript("safe_content",
        "{{ exercise.safe_js|escapejs|escape }}"
      );
    </script>	
</div>
<div style="clear: both;"></div>
<script type="text/javascript"><!--
$(document).ready(function() {
	function hideScratchPad() {
		$('#scratch_pad_hide').css('display', 'none');			
		$('#scratch_pad_show').css('display', 'inline');
		$('#svgedit').css('display', 'none');
		$('#question_area').css('min-height', 'auto');
	}
	function showScratchPad() {
		$('#scratch_pad_show').css('display', 'none');
		$('#scratch_pad_hide').css('display', 'inline');
		$('#question_area').css('min-height', '400px');
		var svgedit = $('#svgedit');
		svgedit.css('display', 'block');
		if (!svgedit.attr('src')) {
			/*
			NOTE 1: app.yaml redirects svg-editor.html to our custom version in /helperpages/svg-editor.html.
			NOTE 2: To avoid caching issues, the svg-edit version number below needs to be updated here and 
			in app.yaml whenever we update svg-edit.
			*/
			svgedit.attr('src', '/svg-edit-2.5-khan-100827/svg-editor.html');				
		}
	}
	function getUrlVars(){
		var vars = [], hash;
		var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
		for(var i = 0; i < hashes.length; i++)
		{
			hash = hashes[i].split('=');
			vars.push(hash[0]);
			vars[hash[0]] = hash[1];
		}
		return vars;
	}

	hideScratchPad();
	if (!$.browser.msie)
	{
		$('#scratch_pad_show').click(showScratchPad);
		$('#scratch_pad_hide').click(hideScratchPad);
		$('#scratch_pad_toggle').css('display', 'block');
	}	
});
//--></script>
{% endblock pagecontent %}