Skip to main content Skip to navigation

Department of Computer Science

The CONSTRUIT! environment

Rethinking the environment for making construals

Objective

  • To simplify the process of working with construals so that this is better integrated within a single online environment. (In conjunction with the Project Manager, this is intended to make it unnecessary to develop construals by working with an external editor, as has been a common practice for some makers.)
  • To incorporate a new feature that makes it possible to scale up models through replicating parts of a construal.
  • To support a more direct and intuitive form of interaction with a construal that is a form of 'live coding'. This live editing process also gives much more timely and informative error messages.
  • To enable construals to be more effectively presented and documented in worksheet-style webpages in which scripts and views can be embedded.
  • To take advantage of the fact that a radically new implementation is required and make changes that are in line with the suggestions made by our consultants (and especially by Peter Tomcsanyi) for simpler syntax (perhaps even at the cost of losing compatibility with older variants of EDEN).

Some radical changes to the environment for making construals have been conceived and are currently being implemented by Nick Pope. These have wide ranging implications for how we present construals and for the way in which we conceive our interaction with them. The key difference is that rather than building up a script of definitions through submitting blocks of definitions through Input Windows, we instead introduce windows through which we in effect directly edit the current script.

Our intention is to make this new version of the MCE (which will be referred to as the CONSTRUIT! environment to reflect the fact that it represents a departure from the 'old-style' EDEN) into the main dissemination vehicle. This is a bold step which is being taken with Nick Pope acting in the lead role with support from Elizabeth Hudnott and Jonny Foss. An immediate goal is to transform existing construals that have been developed in CONSTRUIT! to date so that they work in the CONSTRUIT! environment. We are planning to deploy this environment at the iTAG conference later this month.

Prototype

The prototype for the CONSTRUIT! environment that is relevant to this webpage is at the following url:

http://jseden.dcs.warwick.ac.uk/itag

- as of November 2015, this was a relatively stable version for which Nick undertook to do essential bug fixing whilst he carried out further revision towards meeting all the objectives for the new implementation.

An illustrative example: Introducing the Purse Construal

To test out the new environment, go to the above url, copy-and-paste the following lines into an "Input Window", and press the 'live coding' button on the right hand side of the window:

include("models/wmb/construit/setup.js-e");
include("models/wmb/construit/purse/newpurse.js-e");
include("models/wmb/construit/purse/newpursetutorial.js-e");
include("models/wmb/construit/purse/intro.js-e");

Loading these files will create a worksheet-style environment with canvases and 'Input Windows' embedded in it that is always at the back of the display. To ensure that you It will also bring up some 'extra' windows that you can safely close. It is a good idea to select the 'Hide windows on minimise' option from the Options menu to avoid obscuring parts of the worksheet.

You can adjust the width of the worksheet as a proportion of the entire display by setting the value of the observable pageWidth introduced in the file setup.js-e. For instance:

pageWidth = 60;

(as specified initially) means that the worksheet will take up 60% of the browser display, leaving a blank region in the within the CONSTRUIT! environment to the right of that). This is particularly useful when you spread the browser across two screens so as to get a full-screen worksheet on one screen and a full blank page on the other. Input Windows, Observable Lists etc can then live in the blank page without interfering with the worksheet display. Whether or not you do this, you can use a scroll bar at the bottom of the worksheet screen to slide across into a blank region where you can keep the extra windows needed for modifying the worksheet etc. What you can't do without the 50% is to see both the worksheet and the extra windows at the same time (this is the classic tablet interface syndrome?).

Points to note:

  • the 'scroll bar at the bottom of the screen' may be hard to spot - in Safari on a Mac it may even be invisible.
  • if you adjust the zoom size of the display within the browser, this may affect the content of the embedded canvas windows. For the purse construal, the embedded canvases should show eight coins, a button labelled 'New Purse' and a text string "Offered" below it. It may be difficult to guarantee that this is what is displayed is initially correct on all browser configurations etc: a useful way to control this is to explicitly set the values of the observable 'scaleWidth' and the 'width' of the embedded picture yourself. You can do this by pasting 'ws_pic1|scaleWidth' into the search box in an Observable List, clicking 'Edit listed' to bring up an 'input' window, then live editing the values of 'scaleWidth' and 'width'. For this purpose, you switch to live mode, place the mouse over the value of the observable, hold down the left mouse button and move the mouse left or right to adjust its value.

So far only some of the construals have been converted to the new format. The intention is to transform all the SciFest construals (and the JSPE presentations that accompany them) into this form. Note that the new environment is to a very large extent compatible with previous variants of JS-EDEN, but it does incorporate some new extra syntax (such as the "a is b if x else c" syntax commended by Peter) and will in due course support radically different ways of making definitions based on the 'scoping' principle demonstrated by Nick at C2 in Athens. It does, alas, still have semicolons ;(.

Other illustrative examples

Several existing construals have already beeen reworked to use a worksheet-style rather than a JSPE presentation. They include:

Other illustrative examples of using the new environment have been developed by Nick:

  • Prototypes for interactive worksheets in the CONSTRUIT! environment loosely based on the content of the worksheet for students developed by Ant Harfield and others for session S9 of C2 can be found at the following urls:
    • http://jseden.dcs.warwick.ac.uk/nick/index-dev.html?include=tutorials/start.js-e
    • http://jseden.dcs.warwick.ac.uk/nick/index-dev.html?include=tutorials/start2.js-e
    Ant Harfield is planning to reimplement the student worksheet as an embedded worksheet in this way.
  • A more advanced demo that shows the potential for using scoping to create 'maker-defined prototypes' can be found at the following url:
    • http://jseden.dcs.warwick.ac.uk/nick/index-dev.html?include=tutorials/startarrow.js-e

Note that the above examples can be included using the "include("");" syntax illustrated in the purse construal provided that the Page plugin has first been loaded. This can be achieved by first inputting the command:

require("Page");

Rethinking ...

It may appear that the introduction of 'live coding' is merely a generalisation of the use of an Input Window in early variants of JS-EDEN. Switching on live coding performs the function of Submit. In fact, introducing live coding has a deeper significance - it enables direct live editing of the script for a construal, which is semantically quite different in character from the submission of incremental updates via input. The full implications of this for the design of the environment are still being explored. It is likely that new terms other than 'Input Window' and 'live coding' will be required.