##Adjust font size.
bindCSSNumericProperty("#jspe_slide", "font-size", "jspeFontSize", "pt");
jspeFontSize = 14;

MakingMoneyMathIntro is Slide("
<h3>
Making Money Math
</h3>
<p>
We can derive a program similar to money math from the basic Shopping construal.
This can be done by following an incremental development.
It is not hard to work out what needs to be done at each step in this development.  
This doesn't need specialist computing knowledge.
Basic technical knowledge is needed to carry out each step.
This will be introduced as it is needed.
</p>
");

A_PrototypingMakeMoneyMath is Slide("
<p>
Will first adapt basic shopping construal so that
<ul>
<li>you get a random set of coins</li>
<li>you can assert Y/N whether you have enough money to buy all the items for sale</li>
</ul>
Have buttons to set up a new problem, and to select Y or N.
</p>
<p>
This will be done in three steps:
<ul>
<li>Step 1: make a button to set up a random set of 8 coins</li>
<li>Step 2: introduce yes/no buttons so that you can say whether you think you have enough momey for your selected items</li>
<li>Step 3: add a text to give a suitable response when you get the answer right and wrong</li>
</ul>
</p>
");

A_randomiseCoins is Slide("
<h3>Step 1: make a button to set up a random set of 8 coins</h3>
<p>
To set up the button, we first need to know what determines the value of each coin.
Each coin appears on the display, so we only need to trace the observables on which the coin images depend.
We can do this by
<ul>
<li>looking at the definition of the 'picture' observable to see that that the first coin displayed corresponds to the observable 'coin1pic'</li>
<li>consulting the dependency map viewer to find out what observables coin1pic depends on</li>
<li>showing by experiment that just one of these observables determines what the first coin is.</li>
</ul>
</p>
<p>
Exercise:
<ol>
<li>Create an action to define each of the 8 coins randomly.</li>
</ol>
<p>
Use Dependency Map to determine what observables <code>coin1pic</code> depends on.
</p>

");

A_randomiseCoinsAns is Slide("
<h3>Observables that affect <code>coin1pic</code></h3>
<jseden>
scaleWidth = scaleWidth+10;
</jseden>
<jseden>
scaleWidth = scaleWidth-10;
</jseden>
<jseden>
coinsselected[1]=1-coinsselected[1];
</jseden>
<jseden>
ix1 is randomInteger(1,8);
</jseden>
<p>
So now know how to replace all the coins randomly ...
</p>
");

A_randomcoinaction is Slide("
<h3>Action to create a random of 8 coins:</h3>
<jseden>
proc initpurse: newgamename_clicked {
		ix1 is randomInteger(1,8);
		ix2 is randomInteger(1,8);
		ix3 is randomInteger(1,8);
		ix4 is randomInteger(1,8);
		ix5 is randomInteger(1,8);
		ix6 is randomInteger(1,8);
		ix7 is randomInteger(1,8);
		ix8 is randomInteger(1,8);
	}
</jseden>
<jseden>
initpurse();
</jseden>
");

A_addNewGameButton is Slide("
<h3>Add 'New Game' button</h3>
<p>
Define button:
</p>
<jseden>
newgame is Button(\"newgamename\", \"New Game\", scaleWidth*0.5, 7*scaleWidth, true);
</jseden>
<p>
Place it on the screen:
</p>
<jseden>
	picture is [coin1pic,coin2pic,coin3pic,coin4pic,coin5pic,coin6pic,coin7pic,coin8pic, item1pic,item2pic,item3pic,item4pic,item5pic,item6pic, coin1text,coin2text,coin3text,coin4text,coin5text,coin6text,coin7text,coin8text,item1text,item2text,item3text,item4text,item5text,item6text, MyCoinsText,CoinsOfferedText,MyItemsText,ItemsOfferedText, newgame];
	
coinspics is [coin1pic,coin2pic,coin3pic,coin4pic,coin5pic,coin6pic,coin7pic,coin8pic];
itemspics is [item1pic,item2pic,item3pic,item4pic,item5pic,item6pic];
coinstext is [coin1text,coin2text,coin3text,coin4text,coin5text,coin6text,coin7text,coin8text];
itemstext is [item1text,item2text,item3text,item4text,item5text,item6text];
addedtext is [MyCoinsText,CoinsOfferedText,MyItemsText,ItemsOfferedText];
	
picture is coinspics // itemspics // coinstext // itemstext // addedtext // [newgame];

</jseden>
");

A_introYNbuttons is Slide("
<h3>Step 2: introduce yes/no buttons</h3>
<p>
Recall the defn:
<pre>
		newgame is Button(\"newgamename\", \"New Game\", scaleWidth*0.5, 7*scaleWidth,true);
</pre>
</p>
<p>
Can make buttons for Yes and No:
</p>
<jseden>
yesButt is Button(\"yes\", \"YES\", scaleWidth*0.5 + 90, 7*scaleWidth, true);
noButt is Button(\"no\", \"NO\", scaleWidth*0.5 + 140, 7*scaleWidth, true);

picture is coinspics // itemspics // coinstext // itemstext // addedtext // [newgame, yesButt, noButt];
	
myanswer = \"\";
	
proc recordYans: yes_clicked {
	if (yes_clicked) myanswer = \"Y\";
}
	
proc recordNans: no_clicked {	
	if (no_clicked) myanswer = \"N\";
}
</jseden>
</p>
");

A_finishing_logic is Slide("
<h3>
Refine the logic ...
</h3>
<jseden>
costofallitems is round(price1 + price2 + price3 + price4 + price5 + price6, 2);
	
myanswercorrect is ((myanswer==\"Y\") && (spendingmoney>=costofallitems)) || ((myanswer==\"N\") && (spendingmoney<costofallitems));
</jseden>
<p>
Change things so that I only have the option of new game when I get the correct answer:
</p>
<jseden>
newgame is Button(\"newgamename\", \"New Game\", scaleWidth*0.5, 7*scaleWidth, myanswercorrect);
</jseden>
");

A_finishing_interface is Slide("
<h3>
Refine the interface: 
</h3>
<p>
Helpful to add a colour to the button which has been selected:
<jseden>	
yesButt is Button(\"yes\", \"YES\", scaleWidth*0.5 + 90, 7*scaleWidth, true, (myanswer==\"Y\") ? \"lightblue\" : \"\");
noButt is Button(\"no\", \"NO\", scaleWidth*0.5 + 140, 7*scaleWidth, true, (myanswer==\"N\") ? \"lightblue\" : \"\");
		
proc initpurse: newgamename_clicked {
		ix1 is randomInteger(1,8);
		ix2 is randomInteger(1,8);
		ix3 is randomInteger(1,8);
		ix4 is randomInteger(1,8);
		ix5 is randomInteger(1,8);
		ix6 is randomInteger(1,8);
		ix7 is randomInteger(1,8);
		ix8 is randomInteger(1,8);
		myanswer = \"\";
}
</jseden>
</p>
");

A_feedback is Slide("
<h3>
Step 3: Add a message that responds to whether you get it right or wrong
</h3>
<p>
Frame the question to be answered:
<jseden>
questiontext is Text(\"Have you enough money?\", scaleWidth*0.5, 7.5*scaleWidth, scaleWidth/4);
picture is coinspics // itemspics // coinstext // itemstext // addedtext // [newgame, yesButt, noButt, questiontext];
	
	yesButt is Button(\"yes\", \"YES\", 3.5*scaleWidth, 7.4*scaleWidth, true, (myanswer==\"Y\") ? \"lightblue\" : \"\");
	noButt is Button(\"no\", \"NO\", 4.5*scaleWidth, 7.4*scaleWidth, true, (myanswer==\"N\") ? \"lightblue\" : \"\");
		
responsetext is Text((myanswercorrect) ? \"Well done!\" : \"Try again\", 5.5*scaleWidth, 7.5*scaleWidth, scaleWidth/4);
picture is coinspics // itemspics // coinstext // itemstext // addedtext // [newgame, yesButt, noButt, questiontext, responsetext];
</jseden>
</p>
");

slideList is [MakingMoneyMathIntro,A_PrototypingMakeMoneyMath,A_randomiseCoins,A_randomiseCoinsAns,A_randomcoinaction,A_addNewGameButton,A_introYNbuttons, A_finishing_logic, A_finishing_interface, A_feedback];

B_morelikeMoneyMath is Slide("
<h3>Making it more like MoneyMath</h3>
<p>
Now need to make this more like Steve's version of Money Math:
</p>
<p>
<ul>
<li>don't have all eight coins, and choose just 2 items randomly</li>
<li>remove the display of the values of the coins and other extra text not needed</li>
<li>turn the coins over, so that you don't see the value of the coin</li>
</ul>
</p>
");

B_modifyPicture is Slide("
<p>
Modify the picture so that there are just 4 coins and the 2 items ...
</p>
<jseden>
coinspics is [coin1pic,coin2pic,coin3pic,coin4pic,coin5pic,coin6pic,coin7pic,coin8pic];
coinspics is [coin1pic,coin2pic,coin3pic,coin4pic];

itemspics is [item1pic,item2pic,item3pic,item4pic,item5pic,item6pic];
itemspics is [item1pic,item2pic];

itemstext is [item1text,item2text,item3text,item4text,item5text,item6text];
itemstext is [item1text,item2text];
</jseden>
<p>
Remove the extra text etc:
</p>
<jseden>
coinstext is [coin1text,coin2text,coin3text,coin4text,coin5text,coin6text,coin7text,coin8text];
coinstext is [];
</jseden>
<p>
... or as below omit coinstext altogether:
</p>
<jseden>
picture is coinspics // itemspics // coinstext // itemstext // addedtext // [newgame, yesButt, noButt, questiontext, responsetext];
picture is coinspics // itemspics // itemstext // [newgame, yesButt, noButt, questiontext, responsetext];
</jseden>
");

B_turningcoinsover is Slide("
## retrieve different images to turn the coins over:

<jseden>
func coindisplay {
	para ix;
	if (ix==1) return \"1ph.gif\";
	if (ix==2) return \"2ph.gif\";
	if (ix==3) return \"5ph.gif\";
	if (ix==4) return \"10ph.gif\";
	if (ix==5) return \"20ph.jpg\";
	if (ix==6) return \"50ph.jpg\";
	if (ix==7) return \"poundh.gif\";
	if (ix==8) return \"2poundsh.gif\";
}
</jseden>
<p>
... the original form of coindisplay() didn't have an 'h' before the '.' in the specification of the images.
</p>
");

B_chooserandpairitems is Slide("
<p>Choose the two items you wish to buy at random ...
<jseden>
	pairofitems is [items[jx1], items[jx2]];
	jx1 is randomInteger(1,6);
	jx2 is randomInteger(1,6);

	item1pic is HTMLImage(\"item1pic\",scaleWidth*0.5,5.5*scaleWidth-2*scaleWidth*itemsselected[1],scaleWidth,scaleWidth,imagelocation // itemdisplay(jx1));

	item2pic is HTMLImage(\"item2pic\", scaleWidth*1.8, 5.5*scaleWidth-2*scaleWidth*itemsselected[2],scaleWidth,scaleWidth,imagelocation // itemdisplay(jx2));

	item1text is Text(pricedisplay(jx1, items), 0.6*scaleWidth,4.5*scaleWidth,scaleWidth/5);
	item2text is Text(pricedisplay(jx2, items), 1.9*scaleWidth,4.5*scaleWidth,scaleWidth/5);
</jseden>
</p>
<p>
	&hellip; randomising the items when you start a new game:
<jseden>
	proc initpurse: newgamename_clicked {
		ix1 is randomInteger(1,8);
		ix2 is randomInteger(1,8);
		ix3 is randomInteger(1,8);
		ix4 is randomInteger(1,8);
		ix5 is randomInteger(1,8);
		ix6 is randomInteger(1,8);
		ix7 is randomInteger(1,8);
		ix8 is randomInteger(1,8);
		myanswer = \"\";
		jx1 is randomInteger(1,6);
		jx2 is randomInteger(1,6);
	}
</jseden>
</p>
");

B_updatelogic is Slide("
<p>Change the logic so that it relates to the correct values (currently these are 'spendingmoney' and 'costofallitems':
<jseden>
	costofallitems is round(price1 + price2 + price3 + price4 + price5 + price6, 2);
	
	myanswercorrect is (myanswer==\"Y\") && (spendingmoney>=costofallitems) || (myanswer==\"N\") && (spendingmoney < costofallitems);
</jseden>
</p>
<p>
Might think of using <code>price1</code> and <code>price2</code> to compute <code>costofallitems</code>, but this is incorrect, since <code>price1</code> and <code>price2</code> refer to the prices for the first two items in the original form of the construal and are fixed. 
</p>
<p>
Can overcome this by defining
<jseden>
prices is [price1, price2, price3, price4, price5, price6];
costofallitems is round(prices[jx1] + prices[jx2], 2);
</jseden>
... the original definition of spending money was:
<pre>
	spendingmoney is (purse[1]+purse[2]+purse[3]+purse[4]+purse[5]+purse[6]+purse[7]+purse[8])/100;
</pre>
</p>
<p>
... which is modified to:
<jseden>
spendingmoney is (purse[1]+purse[2]+purse[3]+purse[4])/100;
</jseden>
</p>
");


A_slides is [A_PrototypingMakeMoneyMath,A_randomiseCoins,A_randomiseCoinsAns,A_randomcoinaction,A_addNewGameButton,A_introYNbuttons, A_finishing_logic, A_finishing_interface, A_feedback];
B_slides is [B_morelikeMoneyMath,B_modifyPicture, B_turningcoinsover, B_chooserandpairitems, B_updatelogic];
slideList is [MakingMoneyMathIntro] // A_slides // B_slides;