include("models/jspe/run.e");

intro is Slide("
<h3>Making a simple construal from scratch</h3>
<p>
We want you to build a construal of a vending machine.
</p>
<p>
Imagine that you are standing in front of a vending machine.
</p>
<p>
<i>
Since this is a short exercise, we make some assumptions to simplify your task.
In general, you might want to make different initial assumptions.  
</i>
</p>
<p>
Suppose that 
<ul>
<li>your machine sells six types of fruit juice: 
apple, grape, orange, strawberry, banana and pear.</li>
<li>for each fruit, there is a panel you can press to make your selection</li>
<li>there is a delivery tray for the juice cartons</li>
<li>there is a slot into which you can insert coins</li>
<li>there is a container beneath it to hold any change</li>
<li>to buy juice, you press a panel and put coins in the slot.
When you have put in enough money, you receive a juice carton and your change.</li>
</ul>
</p>
");

roughsketch is Slide("
<h3>Making a 2D pencil-and-paper sketch</h3>
<p>
Suppose that the components of the vending machine are 
<ul>
<li>
a compartment to hold the items for sale</li>
<li>
a slot to put coins in
</li>
<li>
the delivery tray
</li>
</ul>
<p>
You could draw these as cubes, but we only have 2D! - so we'll use rectangles.
<p>
Suppose that you have been given (or have been able to find or create) images of the six different fruits.
</p>
<p>
Using only rectangular shapes and these six images, draw a rough sketch on a piece of paper of what you see in your imagination.
</p>
");

orientation is Slide("
<h3>
Sketch using the computer
</h3>
<p>
Your first task is to use the computer to imitate the experience of standing in front of the vending machine.
</p>
<p>
You will do this by trying to draw a simple sketch of the vending machine in the canvas 2D window.
</p>
<p>
Your computer sketch can be similar to your pencil and paper sketch.
</p>

");

primitives is Slide("
<h3>Drawing a rectangle</h3>
<p>
To create a rectangle you make a definition:
<pre>
testrectangle is Rectangle(10,10,100,50);
</pre>
</p>
<p>
To save typing (and errors!) you can press the 'Submit' of 'Copy to Input' buttons below
to make definitions automatically.
</p>
<p>
<jseden>
testrectangle is Rectangle(10,10,100,50);
</jseden>
</p>
<p>
To put this rectangle on the screen:
<jseden>
picture is [testrectangle];
</jseden>
</p>
<p>
We call testrectangle <i>an observable</i>.
It probably isn't a rectangle that you can use in your sketch!
You will want to change the size and position of testrectangle.
</p>
<p>
There are exercises to enable you to do this on the next slide ...
</p>
");

makingconnections is Slide("
<h3>Making connections</h3>
<p>
Making construals is all about 'making connections' through direct interaction.
</p>
<p>
To do this, you have to arrange things on the computer screen so that the connections can be experienced.
</p>
<p>
The observable testrectangle is defined as 'Rectangle(10,10,100,50)'.
</p>
<p>
We'd like to make the connection between the values 10, 10, 100, 50 and the observable testrectangle.
</p>
<p>
To experience this connection, you first arrange the screen so that you can see a Script Input Window,
the Canvas 2D window, and can read this presentation. 
</p>
<p>
If you go back to the previous slide, you can try putting different values into the Rectangle() function.
To do this, you use 'Copy to input' and edit the values.
</p>
<p>
Changing the values by editing is tedious and indirect.
A better way of making the connection between the values 10, 10, 100, 50 and the observable testrectangle is to
substitute observables for the values
</p>
<p>
Let's call them albert, brian, cynthia and diana. We can define them by
<jseden>
albert = 10;
brian = 10;
cynthia = 100;
diana = 50;
</jseden>
and introduce them into testrectangle:
</p>
<p>
<jseden>
testrectangle is Rectangle(albert, brian, cynthia, diana);
</jseden>


</p>

");

exptrectangle is Slide("
<h3>
Enriching connections - indefinitely! 
</h3>
<p>
Making connections is a very subjective thing. Connections are personal and not binary. 
</p>
<p>
[We can all make some connection between the fragments from the Antikythera and an actual mechanism in a historical context. But consider how much richer an expert's understanding of that connection is that than other people's.]
</p>
<p>
We enrich our understanding by experimenting with the rectangle and making new connections:
</p>
<p>
Set up a new window by submitting
<jseden>
showObservables(\"Rectangle|testrectangle\");
</jseden>
</p>
to open a new 'Symbol List' window on your display.
<ul>
<li>Arrange the windows so that you can easily see this new window.</li>
<li>
Explore what connections you can make by changing albert, brian, cynthia and diana, and looking at its content.</li>
<li>
Hover the mouse over the green definition of testrectangle and see what this reveals.
</li>
<!--
<li>
What happens if you restore the definition of testrectangle with explicit values on the first slide?
</li>
-->
</ul>
</p>
<p>
Select 'All sources' from the drop-down menu in the 'Symbol List'.
<ul>
<li>How does this help you think of better names for Albert, Brian, Cynthia and Diane?</li>
<li>Why does this enrich the connection you make?</li>
<li>Would this work in the same way for everyone?</li>
<!--<li></li>-->
</ul>
</p>

");

moreconnections is Slide("
<h3>
More kinds of connections 
</h3>
<p>
Another kind of connection is the connection between things we draw on the screen. Recall the first definition
of the observable testrectangle:
<jseden>
testrectangle is Rectangle(10,10,100,50);
</jseden>

</p>
<p>
Copy this definition to input and edit it by appending a '0' character to the name of testrectangle.
Submit this definition.
</p>
<p>
You now have two observables - one referring to the first rectangle we drew, the other one referring to the
rectangle we've been experimenting with.
</p>
<p>
You can put them both on the canvas:
<jseden>
picture is [testrectangle, testrectangle0];
</jseden> 
</p>
With the windows still arranged so that you can see the canvas, input window, Symbol List, slides, try these 'redefinitions'
of testrectangle:
<jseden>
testrectangle is Rectangle(albert, brian, cynthia, diana, \"red\");

</jseden>
<jseden>
testrectangle is Rectangle(albert, brian, cynthia, diana, \"white\", \"red\");

</jseden>
</p>
<p>
What other connections are you able to make in this way?
</p>
");

firststep is Slide("
<h3>Making your construal - step 1</h3>
<p>
When you've made the connections between observables of type 'Rectangle' described above, you've
understood the basic nature of learning to make construals. 
</p>
<p>
You've also learnt some basic skills that you can now use in making your construal of the vending machine.
</p>
<p>
You are now ready to put these into action! All you have to do now (!) is to draw the rectangles to represent the
components of the vending machine: 
<ul>
<li>
a compartment to hold the items for sale</li>
<li>
a slot to put coins in
</li>
<li>
the delivery tray
</li>
</ul>
</p>
<p>

</p>
");


slideListA is [intro, roughsketch, orientation, primitives, makingconnections, exptrectangle, moreconnections, firststep];

bluepeter is Slide("
<h3>What your vending machine might look like</h3>
<p>
Laying out the rectangles for your sketch can be rather boring (!), but this is what is interesting
about making construals: you do lots of quite boring things, and yet can get a most interesting and engaging
overall effect.
</p>
<p>
<p>
Consider how the best players of billiards are those who play long sequences of what seem to be exceptionally easy shots.
To be good at making construals is to maintain vivid connections continuously in the stream of thought.
</p> 

<jseden>
size = 80;
machine is Rectangle(0, 0, 2*size, 4*size);
deliveryTray is Rectangle(0, 3*size, 2*size,1* size, \"#808080\");
panel is Rectangle(2*size, 0, 1*size, 4*size, \"red\");
delivery is Rectangle(0, 3*size, 2*size,1*size, \"#808080\");
coinSlot is Rectangle(2.1*size, 0.9*size, 0.05*size, 0.25*size, \"black\");
changeBox is Rectangle(2.1*size, 1.2*size, 0.8*size, 0.2*size, \"white\");
</jseden>
<jseden>
picture is [delivery, machine, panel, coinSlot, changeBox, changeDisplay];
</jseden>
</p>
");

slideList is slideListA // [bluepeter];

completevendingmachine is Slide("
<p>
To load the 'complete' purse and vending machine construal

<jseden>
include(\"models/construit-c2-teacher-cpd/purseandvendingmachine.js-e\");
</jseden>
</p>
<p>
To operate the machine: 

<ol>
<li>select a fruit juice by clicking on the apple or the grape</li>
<li>select coins from your purse</li>
<li>click over the coinslot</li>
<!--<li></li>-->
</ol>
</p>
<p>
To reset the vending machine for the next purchase:
<jseden>
change = -1;
selection = 0;
totalcost = 0;
</jseden>
</p>
<p>
There are some issues:
<ul>
<li>there is nothing to indicate your selection</li>
<li>the cost of the items isn't displayed</li>
<li>you can - sometimes! - change your mind</li>
<!--<li></li>-->
</ul>

</p>
<p>
The resources to continue this exploration can be found online.
Feel free to send your questions and answers to info@construit.org   
</p>

");

slideList is slideListA // [bluepeter] // [completevendingmachine];


/*
<p>
Displaying the change ...
<li>
<jseden>
changeDisp is (change<=0)? "" : decodeHTML("&pound;") // str(numpounds) // "." // str(numpence);
changeDisplay is Text(changeDisp, 2.2*size, 1.2*size);
numpounds is int(change / 100);
numpence is change%100;
</jseden>
</li>
</p>

<li>
the items for sale

<jseden>
apple is HTMLImage("apple", 0.1*size, 0.1*size, 0.8*size, 0.8*size, "models/SciFest2015/shopping/img/apple.png");
grapes is HTMLImage("grapes", 1.1*size, 0.1*size, 0.8*size, 0.8*size, "models/SciFest2015/shopping/img/grapes.png");
picture is [apple, grapes, delivery, machine, panel, coinSlot, changeBox, changeDisplay]
</jseden>
</li>

<li>
Putting a coin in the slot

inCoinSlot is (mouseX>=2.1*size) &&  (mouseX<=2.15*size) && (mouseY>=0.9*size) &&  (mouseY<=1.15*size);
</li>

*/