{% extends "page_template.html" %}
{% block pagetitle %}Exercise{% endblock pagetitle %}
{% block pagescript %}
<style>
    /* Temporary styles to fit new exercises into old template, will be removed when new template is dropped in. */
    #page_sub_nav {display: none;}
</style>
  {% exercises_javascript %}
  {% 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-1.1/MathJax.js">
      MathJax.Hub.Config({
	showProcessingMessages: true,
	delayStartupUntil: "onload",
	skipStartupTypeset: true,
        extensions: ["mml2jax.js", "tex2jax.js"],
	jax: ["input/TeX", "input/MathML", "output/HTML-CSS"],
	"HTML-CSS": {
		scale: 100,
		availableFonts:["STIX", "TeX"],
		preferredFont: "TeX",
		webFont: "TeX",
		imageFont: null
	}
      });
  </script>
  <script type="text/javascript"><!--

{% if exercise.summative %}
    KhanAcademy.is_summative = true;
{% endif %}

KhanAcademy.updateSeed({{problem_number|escapejs}});

// Because of legacy code's document.write usage,
// Exercise.init and display must be called this way
Exercise.init();  
$(document).ready(function () {
	KhanAcademy.onMathMLSupportReady(function() {
	    {% if exercise.summative %}
	    Exercise.fSupportsAjax = false;
	    {% endif %}
        Exercise.display();
	});

});
var username = "{{cookiename|escapejs}}";
var currentexercise = "{{exid|escapejs}}";

// -->
</script>
{% endblock pagescript %}

{% block pagecontent %}
<div id="container" class="single-exercise" style="overflow: hidden">
<div id="back-to-dashboard" class="single-exercise"><a href="/exercisedashboard" id="dashboard-breadcrumb" title="Back to Dashboard">&laquo;Dashboard</a></div> 
<div class="exercise-badge single-exercise" data-id="{{exercise.name|escape}}">

        {% exercise_icon exercise App %}

		<div id="exercise-points" class="energy-points-badge">{{exercise_points}}</div>
		<div class="exercise-title"><A href="/exercises?exid={{exercise.name}}">{{exercise.display_name|escape}}</A></div>
		<div class="energy-points-badge">{{exercise_points}}</div>
		<div class="energy-points-badge">{{exercise_points|escape}}</div>
        <div class="exercise-title">
            <a href="/exercises?exid={{exercise.name|escape}}">{{ exercise.display_name|escape }}</a>
            {% if not exercise.live %}
            <span style="color:red;">(admins only, <a href="/editexercise?name={{ exercise.name|escape }}">deploy</a>)</span>
            {% endif %}
        </div>
		{% streak_bar user_exercise %}
		<div class="related-content">
            {% if exercise.summative %}
                Get {{exercise.prerequisites|length}} streaks of 10 to complete this challenge. Once you complete a streak, it will not be reset.
                This problem is from <a href="/exercises?exid={{exercise_non_summative.name|escape}}">{{exercise_non_summative.display_name|escape}}</a>.
            {% else %}
                {% related_videos exercise_videos %}
            {% endif %}
        </div>
    </div>

    {% if not read_only %}
        {% exercise_message exercise coaches exercise_states %}
    {% endif %}
    
<div id="extras" class="single-exercise">
    <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>
    {% if not read_only and num_problems_to_print %}
        | <A href="/printexercise?exid={{exid}}&num_problems={{num_problems_to_print}}">Print next {{num_problems_to_print}} problems</A>
    {% endif %}
</div>

<div>
	<div id='question_area'>
{% block maincode %}

{% endblock maincode %}
		{% comment %}
		We use a table here just because existing graphdisplay blocks create a table cell.
		{% endcomment %}
		<div id="question_content_container" style="width: 2000px">
    		<div id="question_content" style="position:relative; float: left"></div>
		</div>
		<table style='float: right;'><tr>
		{% block graphdisplay %}  {% endblock graphdisplay %}
		</tr></table>
		{% block maincell %}
		    {% if exercise.summative %}
    		    <iframe name="present" frameborder=0 src="/graphpage.html?w=400&h=300" height="350" width="100%"></iframe>
		    {% endif %}
		{% endblock maincell %}
		<iframe id="svgedit" name="svgedit" width="99%" height="99%" allowtransparency="true" frameBorder="0" scrolling="no" style="background-color: transparent; position: absolute; top: 0; left: 0; width: 99%; height: 99%; overflow: hidden; border:none;"></iframe>
	</div>
	<div id="answer_area">
	   <form id="answerform" action="/registeranswer" method="GET">
	   <div class="info-box fancy-scrollbar">
			{% block answerform %}

            {% if read_only %}
                <span class="info-box-header">Problem #{{ problem_number|escape }}</span>
                <span class="info-box-subheader">You are viewing a problem in {{ exercise.display_name|escape }}.</span>
                <span class="info-box-sub-description">To see the solution, 
                    <input class="button orange" type="button" value="show the next hint." onclick="evaluate_hint(true, true);"/></span>
                <span class="info-box-sub-description">To work on problems like this, <a href="/exercises?exid={{ exid }}">start this exercise</a>.</span>
            {% endif %}

			<input type="hidden" id="exid" name="exid" value="{{exid|escape}}">
			<input type="hidden" id="streak" name="streak" value="{{streak|escape}}">
			<input type="hidden" id="key" name="key" value="{{key|escape}}">
			<input type="hidden" id="start_time" name="start_time" value="{{start_time|escape}}">
			<input type="hidden" id="correct" name="correct" value="0" />
			<input type="hidden" id="hint_used" name="hint_used" value="0" />
			<input type="hidden" id="time_warp" name="time_warp" value="{{time_warp|escape}}">
			<input type="hidden" id="problem_number" name="problem_number" value="{{problem_number|escape}}">
            {% block answerarea %}
                {% if not read_only %}
                <span class="info-box-header">Answer</span><input {% if is_mobile %} type="number" {% else %} type="text" {% endif %}  id="answer" autocomplete="off" name="answer" onkeypress="if (event.keyCode == 13) {check_answer_block(); return false;}">
                {% endif %}
            {% endblock answerarea %}
            {% if not read_only %}
            {% block feedbackarea %}
			<input type="button" class="button green" id="check-answer-button" tabindex="10" value="Check Answer" onClick="check_answer_block()">
			<div id="check-answer-results">
                <img src="/images/blank.gif" name="feedback" id="feedback" style="display: none">
                <div id="next-container" class="button" style="position:relative; display: none;">
                    <input id="next-question-button" type="button" class="button green" name="correctnextbutton" value="Correct! Next Question..." onClick="Exercise.submitForm()">
                    <img src="/images/throbber.gif" id="throbber" style="display:none;" />
                </div>
            </div>
            {% endblock feedbackarea %}
            {% endif %}
			{% endblock answerform %}
		<script type="text/javascript"><!--
			// some modules already have a check_answer...
			function check_answer_block() {
				{% block checkanswer %}
				highlight_answer();
				checkFreeAnswer();
				{% endblock checkanswer %}
			}

			var elForm = document.forms['answerform'];
			if (elForm)
			{
				elForm.reset();
				if (elForm.answer) elForm.answer.focus();
			}
			function relabel_hint()
			{
				if (elForm && elForm.hint) elForm.hint.value = "Next Hint";
			}
			function evaluate_hint(fSkipConfirmation, fSkipResetStreak)
			{
				confirmed = true;
				confirmation_text = 'One-time warning: Using a hint will erase your streak.\nAre you sure you want to continue?'
				cookie_name = "exercise_hint_warning";
				cookie_value = '1'
				cookie_length = 365; //days

				if(readCookie(cookie_name) != cookie_value)
                    confirmed = false;

                confirmed = confirmed || fSkipConfirmation

				if(confirmed || confirm(confirmation_text))
				{
					relabel_hint();
					{% block hintfunction %}next_step(){% endblock hintfunction %};
					if (!fSkipResetStreak)
						reset_streak();
				}

                if (!fSkipConfirmation)
    				createCookie(cookie_name,cookie_value,cookie_length);
			}
			function highlight_answer()
			{
			    if (elForm.answer) {
				elForm.answer.focus();
				elForm.answer.select();
			    }
			}
		//--></script>
        </div>
        <div class="info-box">
            <span class="info-box-header">Need Help?</span>

            {% if exercise_videos %}
                <span class="info-box-subheader">Watch a video</span>
                <span class="info-box-sub-description">Watching videos <strong>does not</strong> reset your streak.</span>
                <div id="related-video-list">
                    {% related_videos_with_points exercise_videos %}
                </div>
            {% endif %}

            {% if exercise.summative %}
                <span class="info-box-subheader">Prepare for this challenge</span>
                <a href="/exercises?exid={{exercise_non_summative.name|escape}}">Practice more problems like this one</a>.
            {% endif %}

            {% if not read_only %}
            <span class="info-box-subheader">Get a hint</span>
            <span class="info-box-sub-description">Getting a hint <strong>will</strong> reset your streak!</span>
            <input id="hint" type="button" class="button orange" value="I'd like a hint" name="hint" onClick="evaluate_hint();">
            {% endif %}
        </div>
        </form>
	</div>
</div>
<div style="clear: both;"></div>
<script type="text/javascript"><!--
$(document).ready(function() {
    var scratchpad_cookie_name = "show_scratchpad";

    $('#svgedit').css('border', '1px solid #ccc');

	function hideScratchPad() {
		$('#scratch_pad_hide').css('display', 'none');
		$('#scratch_pad_show').css('display', 'inline');
		$('#svgedit').css('display', 'none');
		$('#question_area').css('min-height', 'auto').css('padding-left', '0');
        createCookie(scratchpad_cookie_name,"false",365);
        return false;
	}
	function showScratchPad() {
		$('#scratch_pad_show').css('display', 'none');
		$('#scratch_pad_hide').css('display', 'inline');
		$('#question_area').css('min-height', '460px').css('padding-left', '54px');
		var svgedit = $('#svgedit');
		svgedit.css('display', 'block');
		if (!svgedit.attr('src')) {
			/*
			NOTE: To avoid caching issues, the scratchpad version number below needs to be updated here and
			in app.yaml whenever we update scratchpad.
			*/
            svgedit.attr('src', '/scratchpad-2011-04-06/scratchpad.html');
		}
        createCookie(scratchpad_cookie_name,"true",365);
        return false;
	}
	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;
	}

    $('#scratch_pad_show').click(showScratchPad);
    $('#scratch_pad_hide').click(hideScratchPad);
    $('#scratch_pad_toggle').css('display', 'inline');

    if(readCookie(scratchpad_cookie_name) == "true")
        showScratchPad();
    else
        hideScratchPad();

});
//--></script>
</div>
{% endblock pagecontent %}

{% block pagefooter %}
{% include "page_footer_short.html" %}
{% endblock %}