arithmetic_template.html

{% extends "page_template.html" %}
{% block pagetitle %}Exercise{% endblock pagetitle %}
{% block pagescript %}
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
<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-git-2011-01-14/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"><!--
$(document).ready(function () {
	KhanAcademy.onMathMLSupportReady(function() {
		translate();
	});
});
var username = "{{cookiename}}";
var currentexercise = "{{exid}}";
KhanAcademy.problem_number = "{{problem_number}}";
KhanAcademy.problem_seed = KhanAcademy.problem_number;
{% if exercise.summative %}
    {# We use different seeds for summative exercises so they do not reuse content already seen in normal exercises. #}
    KhanAcademy.problem_seed = KhanAcademy.problem_seed + "-summative";
{% endif %}
KhanAcademy.seedRandom(KhanAcademy.problem_seed);
function submitForm(value)
{
	var form = document.forms['answerform'];
	if (form.beenSubmitted)
		return false;
	else
		form.beenSubmitted = true;
	form.submit();
}
// -->
</script>
{% endblock pagescript %}

{% block pagecontent %}
<div id="container" class="single-exercise">
<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}}">

        {% exercise_icon exercise App %}

		<div class="energy-points-badge">{{exercise_points}}</div>
		<div class="exercise-title"><A href="/exercises?exid={{exercise.name}}">{{exercise.display_name|escape}}</A></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 %}
        {% if endangered or reviewing or proficient or struggling %}
            {% exercise_message exercise coaches endangered reviewing proficient struggling %}
        {% endif %}
    {% 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 %}
		<table style='float: right;'><tr>
		{% block graphdisplay %}  {% endblock graphdisplay %}
		</tr></table>
		{% block maincell %}{% endblock maincell %}
		<iframe id="svgedit" name="svgedit" width="100%" height="100%" allowtransparency="true" style="background-color: transparent; position: absolute; top: -26px; left: 0; width: 100%; height: 100%; overflow: hidden; border:none;"></iframe>
	</div>
	<div id="answer_area">
	   <form id="answerform" action="/registeranswer" method="post">
	   <div class="info-box">
			{% block answerform %}

            {% if read_only %}
                <span class="info-box-header">Problem #{{ problem_number }}</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}}">
			<input type="hidden" id="streak" name="streak" value="{{streak}}">
			<input type="hidden" id="key" name="key" value="{{key}}">
			<input type="hidden" id="start_time" name="start_time" value="{{start_time}}">
			<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}}">
			<input type="hidden" id="problem_number" name="problem_number" value="{{problem_number}}">
            {% block answerarea %}
                {% if not read_only %}
                <span class="info-box-header">Answer</span><input type="text" id="answer" autocomplete="off" name="answer" onkeypress="if (event.keyCode == 13) {check_answer_block(); return false;}">
                {% endif %}
            {% endblock answerarea %}

            {% if not read_only %}
			<input type="button" class="button green" id="check-answer-button" value="Check Answer" onClick="check_answer_block()">
			<div id="check-answer-results" style="display: none;">
                <img src="/images/blank.gif" name="feedback" id="feedback">
                <div id="nextbutton" class="button" style="position:relative; display: none;">
                    <input type="button" class="button green" name="correctnextbutton" value="Correct! Next Question..." onClick="submitForm()">
                </div>
            </div>
            {% endif %}
			{% endblock answerform %}
		<script language=Javascript1.2><!--
			// 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()
			{
				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";

	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-top', '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', '400px').css('padding-top', '54px');
		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-120310-3/svg-editor.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;
	}

	if (!$.browser.msie)
	{
		$('#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 %}