{% extends "multiple_choice_template.html" %}
{% block maincode %}
<script language=Javascript1.2><!--

var mOrig; // if 1, then orig. func. is up-facing

var xOrig;
var yOrig;

var xShift;
var yShift;

var flip = getRandomIntRange(0, 1);
var flipSign;

if (flip) {
	flipSign = "-";
} else {
	flipSign = "";
}

var gx; // the answer in terms of f(x)

function generate_quadratic_funcs()
{
	xOrig = getRandomIntRange(-8,8);
	yOrig = getRandomIntRange(-8,8);
	
	if (xOrig > 0) {
		xShift = getRandomIntRange(-6, -1);
	} else {
		xShift = getRandomIntRange(1, 6);
	}

	if ((yOrig > 0 && !flip) || (yOrig < 0 && flip)) {
		yShift = getRandomIntRange(-6, -1);
	} else {
		yShift = getRandomIntRange(1, 6);
	}

	mOrig = getRandomIntRange(-1, 0);
	if (mOrig == 0) {
		mOrig = 1;
	}

	// double minus sign x--c doesn't work for some reason?
	origFunc = mOrig + "*(x+-1*" + xOrig + ")^2+" + yOrig;
	if (flip) {
		flipFunc = mOrig + "*-1*(x+-1*" + xOrig + ")^2+" + (-yOrig);
		yShiftFunc = mOrig + "*-1*(x+-1*" + xOrig + ")^2+" + ((-yOrig) + yShift);
		finFunc = mOrig + "*-1*(x+-1*" + (xOrig + xShift) + ")^2+" + ((-yOrig) + yShift);
	} else {
		yShiftFunc = mOrig + "*(x+-1*" + xOrig + ")^2+" + (yOrig + yShift);
		finFunc = mOrig + "*(x+-1*" + (xOrig + xShift) + ")^2+" + (yOrig + yShift);
	}
}

function nicefy_signs(expr)
{
	while (expr.indexOf("+ -") != -1) {
		expr = expr.replace("+ -", "- ");
	}
	while (expr.indexOf("- -") != -1) {
		expr = expr.replace("- -", "+ ")
	}
	return expr;
}

generate_quadratic_funcs();

if (flip) {
	gx = nicefy_signs("-f(x - " + xShift + ") + " + yShift);
} else {
	gx = nicefy_signs("f(x - " + xShift + ") + " + yShift);
}
setCorrectAnswer(gx);
if (flip) {
	addWrongChoice(nicefy_signs("f(x - " + xShift + ") + " + yShift));
} else {
	addWrongChoice(nicefy_signs("-f(x - " + xShift + ") + " + yShift));
}

addWrongChoice(nicefy_signs("-f(x - " + yShift + ") + " + xShift));
addWrongChoice(nicefy_signs("-f(x + " + yShift + ") - " + xShift));
addWrongChoice(nicefy_signs("-f(x + " + xShift + ") - " + yShift));
addWrongChoice(nicefy_signs("-f(x - " + xShift + ") - " + yShift));

addWrongChoice(nicefy_signs("f(x - " + yShift + ") + " + xShift));
addWrongChoice(nicefy_signs("f(x + " + yShift + ") - " + xShift));
addWrongChoice(nicefy_signs("f(x + " + xShift + ") - " + yShift));
addWrongChoice(nicefy_signs("f(x - " + xShift + ") - " + yShift));

function draw_next_step() {
	if (Exercise.steps_given==0)
	{
		if (flip) {
			present.stroke = "purple";
			present.plot(flipFunc);
		} else {
			Exercise.steps_given = 1;
		}
	}
	if (Exercise.steps_given==1)
	{
		present.stroke = "green";
		present.plot(yShiftFunc);

		present.marker = "arrow";
		present.line([xOrig, (flip?-yOrig:yOrig)], [xOrig, (flip?-yOrig:yOrig) + yShift]);	
	}
	if (Exercise.steps_given==2)
	{
		present.stroke = "blue";
		present.marker = "arrow";
		present.line([xOrig, (flip?-yOrig:yOrig) + yShift], [xOrig + xShift, (flip?-yOrig:yOrig) + yShift]);
	}
	document.getElementById('hint'+Exercise.steps_given).style.display = 'block';
	Exercise.steps_given++;
}


function graph_update() {
	initPlane();
	
	present.stroke="red";
	present.fontstyle="italic";
	present.fontfill="orange";
	present.fontstroke="none";
	present.fontsize="20";
	
	// plot original function
	present.plot(origFunc);

	present.stroke="blue";
	// plot shifted-reflected function
	present.plot(finFunc);
}



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

{% block maincell %}
<div style="font-family:sans-serif;font-size:16;">
<font color="red">`f(x)`</font> is graphed in <font color="red">red</font>.<br/>
<font color="blue">`g(x)`</font> is graphed in <font color="blue">blue</font>.<br/>
What is <font color="blue">`g(x)`</font> in terms of <font color="red">`f(x)`</font>?
</div>

<table><tr>
    <td style="width:560px">
        <iframe name="present" frameborder=0 src="/graphpage.html?w=500&h=500" height="550" width="550"></iframe>
	</td><td>
		<!--Based on the code from even and odd functions.
		Note that here, the hintX numbers X represent number of hints given. 
		These are steps which are all part of one problem.
		In even and odd functions, they were different hints for different solutions.-->
		
		<div id="hint0" style="font-family:sans-serif;color:purple;font-size:16;display:none;">
        To get from `f(x)` to `g(x)`, first "flip" `f(x)` by multiplying by -1, giving `-f(x)`.</div>
        
        <div id="hint1" style="font-family:sans-serif;color:green;font-size:16;display:none;">
        <script language=Javascript1.2><!--
        var yShiftPhrase;
        if (yShift > 0) {
			yShiftPhrase = "up " + yShift + " units";
        } else {
			yShiftPhrase = "down " + (yShift * -1) + " units";
        }
        
        document.write(nicefy_signs("Shift your function `" + flipSign + "f(x)` " + yShiftPhrase +
                ", giving `" + flipSign + "f(x) + " + yShift + "`."));
        //-->
		</script></div>
        <div id="hint2" style="font-family:sans-serif;color:blue;font-size:16;display:none;">
        <script language=Javascript1.2><!--
        var xShiftPhrase;
        if (xShift > 0) {
			xShiftPhrase = "right " + xShift + " units";
        } else {
			xShiftPhrase = "left " + (xShift * -1) + " units";
        }
        
        document.write(nicefy_signs("Now shift the function `" + flipSign + "f(x) + " + yShift + "` "
                + xShiftPhrase + ", giving `" + gx + "`<br/>"));
        document.write("We now know `g(x) = " + nicefy_signs(gx) + "`.");;
        //-->
		</script></div>
    </td>
</tr></table>

{% endblock maincell %}
{% block hintfunction %}draw_next_step(){% endblock hintfunction %}