Quest sets up the User Interface in the InitInterface function, which is defined in Core.aslx. The last thing it does is call another function, InitUserInterface, which is empty (after which game.start will run, unless the player is resuming with a saved game). The best way to modify the user interface, then, is to define your own InitUserInterface function.

[Note, however, that you should not print anything from the InitUserInterface function (you might feel tempted to output CSS or some JavaScripts using msg or OutputTextRawNoBr). If you do, when a saved game is reloaded, all the new text will get inserted into the top of the existing text.]

The big advantage of doing it this way is that this will be called whenever Quest thinks the interface needs updating, which is not just at the start of the game (for example, when the screen is cleared). You also get the bonus of having all your interface stuff in the same place, which keeps it neat.

Unfortunately, this will not work if you are editing on-line, as the on-line editor will not let you create a function with the same name as one already in the game. The moral here is that if you want to do fancy stuff, use the off-line editor! If you are editing on-line, put the code in the start script on the game object, and make sure you do not clear the screen.

To create the function, right click in the left pane, and select "New function". Call it "InitUserInterface" (no quotes, no spaces, exact capitalisation).

Because it is easier to show on a forum post, all the tricks here will be in code. In the script section at the bottom, click on the seventh icon, "Code view", and a text box will appear. Just copy-and-paste code into here. You can paste in as many code blocks as you like, and it should work fine (note that that is not necessarily true of all code).


Rename the interface features

You can rename the features of the interface using the request script command. it takes two parameters, the first is SetInterfaceString (note that this is not a string, so has no quote marks), the second is the instruction, i.e, the name of the feature, an equals sign and the new text. That is a string, so needs to be in double quotes. Like this:

  request (SetInterfaceString, "InventoryLabel=You are holding")
  request (SetInterfaceString, "StatusLabel=How you are doing")
  request (SetInterfaceString, "PlacesObjectsLabel=Things you can see")
  request (SetInterfaceString, "CompassLabel=Directions you can go")
  request (SetInterfaceString, "InButtonLabel=In")
  request (SetInterfaceString, "OutButtonLabel=out")
  request (SetInterfaceString, "EmptyListLabel=Stuff all")
  request (SetInterfaceString, "NothingSelectedLabel=-")
  request (SetInterfaceString, "TypeHereLabel=Now what?")
  request (SetInterfaceString, "ContinueLabel=Just press a button to get on with it")

Not sure when you see EmptyListLabel or NothingSelectedLabel, but the rest are obvious enough.

As of Quest 5.6, this seems to be broken.

A simple alternative is to change the templates.

At the bottom left, click Filter - Show Library Elements. In the search box just above the left pane, type "label" (no quotes), and press Enter. Select the label you want to change, and its template will appear on the right. Click copy at the far right, then type your own text in the Text field.


Change the look and feel with Built-in Functions

There are some built-in functions to change the UI.

  SetFramePicture (filename)
  ClearFramePicture
  SetBackgroundOpacity (opacity)
  SetBackgroundColour(string colour)
  SetBackgroundImage (filename)
  SetAlignment(string alignment)
  SetFontName
  SetFontSize
  SetForegroundColour
  SetWebFontName

Then there are a set of options available through the request script command, allowing you to turn on or off the location at the top, the panes at the right and the command bar at the bottom.

  // The panels on the right
  request (Show, "Panes")
  request (Hide, "Panes")
  // The text input
  request (Show, "Command")
  request (Hide, "Command")
  // the status bar at the top
  request (Show, "Location")
  request (Hide, "Location")

Most of these can be done by setting options on the game object, and that is generally a better way to do, unless you want to make changes during play.


Using the JS object

The JS object (JavaScript) has a bunch of functions (or methods, they should probably be called).

  JS.setGameWidth(width)
  JS.hideBorder()
  JS.showBorder()
  JS.setGamePadding(top, bottom, left, right)
  JS.addExternalStyleheet(stylesheet)
  // I think the stylesheet should be a file name (or perhaps a URL) as the parameter
  JS.SetMenuBackground(colour)
  JS.SetMenuForeground(colour)
  JS.SetMenuHoverBackground(colour)
  JS.SetMenuHoverForeground(colour)
  JS.SetMenuFontName(fontname)
  // these refer to the menu that appears when the player clicks on a hyperlink in the text
  JS.SetMenuFontSize(size)
  // the size must be a string that is a number followed by "pt"
  JS.TurnOffHyperlinksUnderline()
  JS.TurnOnHyperlinksUnderline()

Using JavaScript

When you have exhausted those possibilities you are delving into the murky would of CSS and JQuery, via the eval method of JS. To understand how that fits together, we will look at each technology in turn.


Using CSS

Cascading style sheets (CSS) is the primary way for web pages to define the style, as opposed to the content; what font to use, colours, etc. An example might looks like this:

#gameBorder {
  background-color: #800080;
}

The first line determines what is controlled - in this case an element with the ID gameBorder (the # indicates ID rather than a class or element type). The second line defines the settings. There can be several lines, before we get to the close brace (this is the conventional way to layout CSS). For the second line, there are two parts, the name, in this case "background-color", and the value, "#800080" (which is a dark magenta).

In summary, then this CSS code will set the background colour of something with the ID "gameBorder" to be dark magenta.


Using JQuery

Static web pages use CSS like that, but it you want things to change, you need JavaScript, and JQuery is a quick way to access an element in JavaScript. To do the above in JavaScript/JQuery, you would do this:

  $('#gameBorder').css('background-color', '#800080');

Notice that all the same information is there, just arranged differently, according to the syntax of JavaScript/JQuery. The $ at the start signifies this is JQuery, and $('#gameBorder') will grab the thing with the ID "gameBorder" (again, the # indicates this is an ID). Once we have that we call a method (function) called "css", and send it two parameters, the thing we want to change and the new value.


Using JQuery in Quest

To do it is Quest, you have to send that as a string to the JS.eval function:

  JS.eval("$('#gameBorder').css('background-color', '#800080');")

Once you have that template, you can change a shed load of setting, you just need to know what each bit (like "gameBorder") is called, what the CSS property (like "background-color") is called and what value (like "#800080") is allowed.

Elements

Bits of an HTML page are called elements, and "gameBorder" is just one of them. All HTML documents have an "html" element that contains everything else, and inside that it has a "head" and a "body" elements. Quest then has a few dozen elements that make up the interface inside the "body" element.

You can look at those elements as you play a game. In the off-line editor, click on HTML Tools (on-line, your browser will probably have the facility to do this too). On the left you will see a hierarchy of elements (you will need to expand them to see them all), and on the right a list of properties. Click on an element, and it will be highlighted in your game so you can see what it refers to.

Most of the interesting elements are of the type "div", and each is identified by an "id". The gameBorder one looks like this:



CSS Properties and Values

There are a large number of CSS properties, to get a full list, use the internet. I will mention of of the interesting ones. You do need to be careful that you supply the right type of value, but we will look at that too. Also, be aware that CSS uses America spelling for "center" and "color".

color

The colour of text is determined by the "color" property. You can set colours in a number of ways, the easiest is to use a name. This Wiki page has a full list of available names (note that there are no spaces in the name; for once, capitalisation does not matter):
http://en.wikipedia.org/wiki/Web_colors

 JS.eval("$('#gameBorder').css('color', 'blueviolet');")

You can also set colours by using the RGB code. These both set the colour to red.

 JS.eval("$('#gameBorder').css('color', 'rgb(255, 0, 0)');")
 JS.eval("$('#gameBorder').css('color', '#ff0000');")

Each splits colours in to three components: red, green, blue. In the first, each component is a number from 0 to 255. In the second, if is a hexadecimal number from 00 to ff. If you do not know what hexadecimal is, use the other format.

background-color

This works just the same as color, but changes the background for this element.

 JS.eval("$('#gameBorder').css('background-color', 'blueviolet');")

background-image

In theory, you should be able to set the background image for each element, but I have not got that to work. You can set it for the entire page using the SetBackgroundImage function. If anyone can do it with CSS/JQuery, let me know how!

The status bar at the top uses an image. If you want to stop that image displaying, do this:

 JS.eval("$('#status').css('background-image', 'none');")

width

This will change the width of the element. You have the potential to mess up big time here, so change one element at a time and see what happens. Elements do impact on each other, so you may not see any difference. When experimenting, change the width of Quest itself to see what effect that has too.

Note that the value must include "px", which says the units are pixels.

 JS.eval("$('#gameBorder').css('width', '950px');")

opacity

The opacity property defines how much this element covers the one below (the reverse of transparency). It can range from 0.0 (this element is not visible) to 1.0 (this element is completely opaque).

 JS.eval("$('#gameBorder').css('opacity', '0.5');")

border

The border property lets you set borders. You can set various aspects in one go, so in this example a dashed line, 5 px wide and blue, will be added.

  JS.eval("$('#gameBorder').css('border', 'dashed 5px blue');")

The status bar at the top has a blue border. If you want to remove it, do this (also set the width to 950px to keep it aligned):

 JS.eval("$('#status').css('border', 'none');")

Fonts

There are about a dozen "base fonts" available in Quest. These are fonts that are pretty much guaranteed to be available on any computer (or at least equivalents, so we have Arial on PC, or Helvetica on Mac or failing that sans-serif).

If you want to change the font during a game, use the SetFontName function. This allows you to list the equivalent fonts, so will ensure users on other operating systems see more-or-less the same thing.

SetFontName("Arial, Heletica, sans-serif")
msg("This is in Heletica")
SetFontName("'Courier New', Courier, monospace")
msg("This is in Courier")
SetFontName("Impact, Charcoal, sans-serif")
msg("This is in Charcoal")

The sans-serif and monospace as generic fonts; there are also serif, cursive and fantasy. They will all map to something on every computer, though the cursive and fantasy tend to fall well short of the names.

You also have access to web fonts. These are provided on-line by Google, and by default you can access just one in your game. To use any more, you need to call the SetWebFontName to pull the font off the internet, and then SetFontName as normal to actually use it.

// Pull the fonts off the internet
SetWebFontName("Wallpoet")
SetWebFontName("Admina")

// Now we can swap between them as much as we like
SetFontName("Wallpoet")
msg("This is in Wallpoet")
SetFontName("Admina")
msg("This is in Admina")
SetFontName("Wallpoet")
msg("This is in Wallpoet")

The "Continue" link

You can change in the colour of hyperlinks on the Display tab of the game object, but it does not affect the "Continue" message when the game waits for the player to press a button, because that is actually part of the command line, not the output text. However, you can change it with JQuery, like this:

JS.eval ("$('#txtCommandDiv a').css('color', 'orange');")

Where and When To Do Stuff

When changing the styles of existing elements, put the code the InitUserInterface function. However, if you are adding new elements that may not work.

To add a new element, you need to output the HTML code, and Quest only offers one way to do that - using the msg command (okay, there are also some OutputXxx functions, but they are also essentially the same). We have no control when the text will appear in the HTML source, it will go at the end of the output section.

Note that the HTML code will get saved when the player clicks the save button, because it is part of the output text. For this reason it may be better in game.start, rather than InitUserInterface (if it is in InitUserInterface, when the player resumes play from a save, the HTML code will be added a second time.

However, it is important to remember that if you try to change the CSS values of your new HTML code before it has been added, it will not work. If you have JavaScript telling it to be in blue in InitUserInterface, but your msg command in in game.start, the text will not be blue because the JavaScript will try to change it before it exists. You should, therefore, try to have all the styling included in the HTML.

If you find you need to change CSS styles before adding the elements, the way to do that is to add a new style element to the HTML source, and in there define the styles for a class. When you later add your new HTML code, use that class. A fair knowledge of HTML and CSS is useful here!

Another approach is to move the HTML after it has been added, using the JQuery functions insertAfter or insertBefore for example. If the code gets moved out of the divOutput part then it will not be saved. In this case it should be safe to put it into InitUserInterface.

That said, using insertAfter or insertBefore in InitUserInterface can have problems of its own, and you can find that after the player reloads a saved game, new output text appears above the old text instead of below it. I have yet to establish under what conditions this happens, so it is vital that after you upload your game you play it, then save it, then reload a save game and play that too and see if it still works as it should.

Reordering the Panes

You can use JQuery to rearrange the panes on the right. Why would you want to do that? If you put the compass rose a the top, then it will stay in the same place. The way it is set out normally, the compass rose jumps around depending on how many items are in the location and inventory and what the player is doing with them.

The JQuery we are going to use looks like this:

$('#compassLabel').insertBefore('#inventoryLabel')

As before, the $ flags this as JQuery, and then we grab the element with the ID "compassLabel". Then we invoke the "insertBefore" method (function), telling JQuery it want the elemet to go before the inventoryLabel element.

In Quest, it will look like this (I am moving the status variables up as well, they they do not change their height much either):

JS.eval ("$('#compassLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#compassAccordion').insertBefore('#inventoryLabel')")
JS.eval ("$('#statusVarsLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#statusVarsAccordion').insertBefore('#inventoryLabel')")

Removing Just One Pane

Perhaps you just want to get rid of one of the panes altogether. This example removes he compass by setting the CSS "display" property to "none":

JS.eval ("$('#compassLabel').css('display', 'none')")
JS.eval ("$('#compassAccordion').css('display', 'none')")

Changing the Ending

The "finish" script command terminates the game, and replaces the panes on the right with a message. You can change the default font using JQuery again, to make it consistent with your game:

JS.eval ("$('#gamePanesFinished').css('font-family', 'Berkshire Swash');")

You can also change what gets displayed, using the JQuery html method. In this example, I am modifying the text, and adding an image (and we have to use GetFileURL to do that). I am also building the string first, and then calling JS.eval.

s = "$('#gamePanesFinished').html('<h2>Game Over</h2>"
s = s + "<p>This game has finished and you are dead!".</p><img src=\""
s = s + GetFileURL("gravestone.png")
s = s + "\" />');"
JS.eval (s)
finish

Changing the Arrows

The arrows in the compass rose and the triangles to the left of the panes are icons that are defined in JQuery. To change their color, you need to replace the image file (they are all in one file).

You an get an image file with the right colours, from here:
http://download.jqueryui.com/themerolle ... 56x240.png

You can change the number 800080 to the RGB colour what you want (I guess the file server creates the images on the fly, and will accept any value, but that may not be the case), this is a dark purple I was trying. Save the file in your game folder.

Then you just need to do this to get the new icons in your game (again, modifying the number for your downloaded file):

    JS.eval ("$('.ui-icon').css('background-image', 'url(" + GetFileURL("ui-icons_800080_256x240.png") + ")')")

Once you have the file, you could edit it to change the shape of the arrows too, or make them multicoloured.


Changing the Status Bar

How do you change the colour of the status bar across the top? Its identity is "status", but if you set its background color like this, nothing will happen:

JS.eval ("$('#status').css('background-color', 'black')")

The reason is that there is an image there, and you need to get rid of that first:

JS.eval ("$('#status').css('background-image', 'none')")

Turning the Map On and Off

These lines of code will turn the grid/map on and off respectively in game.

JS.eval ("$('#gridPanel').css('display', 'block')")
JS.eval ("$('#gridPanel').css('display', 'none')")

Sticking the command bar to the bottom of the screen.

You can use this to keep the box where the player types pinned to the bottom of the screen. The first line sets its position to "fixed", this means it will stay in one place relative to the screen. The second line specifies where it will be fixed. The third line stops the game printing messages behind the input box.

JS.eval("$('#txtCommandDiv').css('position', 'fixed');")
JS.eval("$('#txtCommandDiv').css('bottom', '10px');")
JS.eval("$('#gameContent').css('margin-bottom', '70px');")

Colour blend background

This will give a background that fades from colour1 at the top to colour2 at the bottom of the window.

    JS.eval ("$('#gamePanes').css('background-color', 'transparent');")
    JS.eval ("$('#gameBorder').css('background-color', 'transparent');")
    JS.eval ("$('body').css('background-color', '" + colour1 + "');")
    JS.eval ("$('body').css('background-image', 'linear-gradient(to bottom,  " + colour1 + ", " + colour2 + ")');")
    JS.eval ("$('body').css('background-image', '-webkit-linear-gradient(top,  " + colour1 + ", " + colour2 + ")');")
    JS.eval ("$('body').css('background-attachment', 'fixed');")
    JS.eval ("$('body').css('background-position', 'left bottom');")

Other Tricks

"Classic" look:
viewtopic.php?f=10&t=4760&hilit=background&start=15#p31389

Make a certain letter disappear and reappear:
viewtopic.php?f=10&t=5121

Blurring text (getting drunk):
viewtopic.php?f=10&t=4947

Injecting stylesheets (CSS in a string attribute on the game object):
viewtopic.php?f=18&t=4747

Adding command links to the bottom of the screen:
viewtopic.php?f=18&t=4681

JQuery dialogue box:
viewtopic.php?f=18&t=4822

Additional inventory pane:
viewtopic.php?f=18&t=3789

Adding a progress bar
viewtopic.php?f=18&t=5770

Image fade-in
viewtopic.php?f=10&t=5796&p=40225#p40192

Control how images are displayed
viewtopic.php?f=18&t=5566

Create images on the fly
viewtopic.php?f=18&t=5875

ohh, This is a nice little nugget of knowledge......

just to add this link here, as it goes better with Pixie's GUI modification guide, than not realizing it as another thread (never knowing about it, and it show-cases a cool design (this person did a good job):

viewtopic.php?f=18&t=4410

pretty impressive colors+design used, at least if you like black (my fav color), lol

I have had a play around with some JavaScript, and created a tiny example game with commands above the panes on the right, and a help pop-up. You can see it in action here:

http://textadventures.co.uk/games/view/ ... ui-example

My motivation was to keep the narrative flowing. There is no chance for the player to mistype something and with careful use of verbs you can ensure that the player has no opportunity to try something the parser cannot handle. Everything the player sees in the output is what happens to the player character in the game world.

Here is the code:

<!--Saved by Quest 5.6.5510.29036-->
<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="UI Example">
    <gameid>df6b8f30-03fa-444f-9a57-639b6dc5ceee</gameid>
    <version>1.0</version>
    <firstpublished>2015</firstpublished>
    <stuff><![CDATA[
       <div id="spacer">
            <br/>
            <br/>
            <br/>
       </div>
       <div id="command_buttons" style="border:#79b7e7 thin solid; padding: 5px;font-weight: bold;border-radius: 5px;text-align:center;margin-top:50 px;">
            <span id="look_button"  class="ui-widget"><a id="verblink1" style="text-decoration: none;color:Orange;font-size:12pt;" class="cmdlink commandlink" data-elementid="look" data-command="look">Look</a></span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span id="wait_button"  class="ui-widget"><a id="verblink1" style="text-decoration: none;color:Orange;font-size:12pt;" class="cmdlink commandlink" data-elementid="wait" data-command="wait">Wait</a></span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span id="help_button"  class="ui-widget"><a id="verblink1" style="text-decoration: none;color:Orange;font-size:12pt;" class="cmdlink commandlink" data-elementid="help" data-command="help">Help</a></span>
       </div>
       <div id="dialog_window_1" class="dialog_window" title="Help">
            <p id="page0">Welcome to <i>UI Example</i> help system. Click the buttons at the bottom to see different stuff!</p>
            <p id="page1" style="display:none;">Click on an object or person in the lists on the right to see what actions you can perform with them.<br/><br/>If you are reading this, you probably already found the <i>HELP</i> coomand, with <i>LOOK</i> and <i>WAIT</i>.</p>
            <p id="page2" style="display:none;">Just try clicking stuff. Seriously, how hard can it be?</p>
            <p id="page3" style="display:none;">Created by The Pixie.<br/><br/>Thanks to Alex Warren for creating Quest, and to members of the forum for various bits of code, in particular The Pixie for this interface stuff (bits of which originate with Jay Nabonne).<br/><br/>Feel free to use and abuse this in your own games!</p>
       </div>
       <script>
            function setPage(page) {
                $('#page0').css('display', 'none');
                $('#page1').css('display', 'none');
                $('#page2').css('display', 'none');
                $('#page3').css('display', 'none');
                $('#page' + page).css('display', 'block');
            }
       
            $(document).ready(function () {
                $('#dialog_window_1').dialog({
	                autoOpen: false,
                   height: 400,
                   width: 640,
                   buttons: {
	                   "Intro": function() { setPage(0);},
	                   "Commands": function() { setPage(1);},  
	                   "Hints": function() { setPage(2);},  
	                   "Credits": function() { setPage(3);},  
	                   "Done": function() { $(this).dialog("close");} 
	               }
               });
            });
       </script>
            ]]></stuff>
    <showcommandbar type="boolean">false</showcommandbar>
    <autodescription type="boolean">false</autodescription>
    <echohyperlinks type="boolean">false</echohyperlinks>
    <autodisplayverbs type="boolean">false</autodisplayverbs>
    <start type="script">
      OutputTextNoBr (game.stuff)
      JS.eval ("$('#spacer').insertBefore('#inventoryLabel')")
      JS.eval ("$('#command_buttons').insertBefore('#inventoryLabel')")
      JS.eval ("$('#compassLabel').insertBefore('#inventoryLabel')")
      JS.eval ("$('#compassAccordion').insertBefore('#inventoryLabel')")
      JS.eval ("$('#statusVarsLabel').insertBefore('#inventoryLabel')")
      JS.eval ("$('#statusVarsAccordion').insertBefore('#inventoryLabel')")
      request (SetInterfaceString, "PlacesObjectsLabel=People and Objects")
      request (Hide, "Command")
      game.echocommand = false
    </start>
    <author>The Pixie</author>
  </game>
  <command>
    <pattern>help</pattern>
    <script>
      JS.eval ("$('#dialog_window_1').dialog('open')")
    </script>
  </command>
  <object name="big_room">
    <inherit name="editor_room" />
    <description>This is a big room with lots of space.</description>
    <alias>Big Room</alias>
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
    </object>
    <exit alias="south" to="small_room">
      <inherit name="southdirection" />
    </exit>
    <object name="teapot">
      <inherit name="editor_object" />
      <alias>Teapot</alias>
      <take />
      <look>A funny little teapot with a broken spout.</look>
    </object>
  </object>
  <object name="small_room">
    <inherit name="editor_room" />
    <description>A room so small you barely fit in it.</description>
    <alias>Small room</alias>
    <exit alias="north" to="big_room">
      <inherit name="northdirection" />
    </exit>
  </object>
</asl>

Here is a way to add CSS into a game, devised by Jay Nabonne.

You need to add a couple of functions to your game (go to Tools - Code view, and insert this code just above the very last line).

  <function name="addStyleSheet" parameters="css">
    AddExternalStylesheet ("data:text/css," + urlEncode(css))
  </function>
  <function name="urlEncode" parameters="s" type="string"><![CDATA[
    s = Replace(s, "%", "%25")
    s = Replace(s, " ", "%20")
    s = Replace(s, "\"", "%22")
    s = Replace(s, "#", "%23")
    s = Replace(s, "$", "%24")
    s = Replace(s, "&", "%26")
    s = Replace(s, "'", "%27")
    s = Replace(s, ",", "%2C")
    s = Replace(s, ":", "%3A")
    s = Replace(s, ";", "%3B")
    s = Replace(s, "<", "%3C")
    s = Replace(s, "=", "%3D")
    s = Replace(s, ">", "%3E")
    s = Replace(s, ">", "%3F")
    s = Replace(s, "{", "%7B")
      s = Replace(s, "}", "%7D")
    return (s)
  ]]></function>

Put your CSS into a string attribute; an attribute called "css" on the game object for example.

    <css>
        img {
          float:left;
          padding:5px;
        }
        body {
          background-color:yellow;
        }
    </css>

Then you can do this in the start script on the game object:

addStyleSheet (game.css)

Alternatively, you can put the data in a standard CSS file, and then retrieve it using GetFileData.

addStyleSheet (GetFileData("styles.css"))

How to add a status box

So you want to display some kind of status values in a cool way (say like this). There are two parts to the process, the first is to put the box on the screen, the second is updating it during the game. Some knowledge of CSS is going to be useful here!


Putting the box on the screen

For the first part we have to go to File - Code view, which generally I would advise against, but here is is necessary. At the top you will see something like this:

<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="test">

There may be more lines if you have added libraries (or are using another language), and the name will be different. You need to insert this text into the very next line:

    <statusbox><![CDATA[
       <div id="status_div" style="padding: 5px;font-weight: bold;border-radius: 5px;text-align:center;margin-top:50 px;color:maroon;font-size:14pt;position:fixed;left:5px;top:40px;border:grey solid thin;background-color:#FCF0EA;width:200px;">
         This is your status!
       </div>
        ]]></statusbox>

By the way, if you have to come back and edit this later, you may find Quest has moved it down a bit; if it has, that is not a problem, you can leave it there, and edit away.

Now go back to the GUI. Go to the Script tab of the game object, and add this as your starting script:

OutputTextNoBr (game.statusbox)

Go in game, and you should see your new status box at the top left.

Usually you put fancy formatting stuff in InitUserInterface, but in this case we are printing to screen, not styling existing content.


How does it work?

The OutputTextNoBr just prints out the text; you can use msg, and get the same effect, but you will get a new line at the end. The text that is printed out is a new HTML DIV, i.e., a section of text that we can format. It is given the name (or id) "status_div", so we can handle it later. It is also given a bunch of CSS styling.

The important stylings are "position", "left" and "top". The "position" is set to "fixed", so this text area will have the same position on the screen all the time. The "left" and "top" are used to define what that position is (and you can also use "right" and "bottom" to set it relative to the right or bottom).

The rest of the styling gives a nice border, etc. Giving it a "width" means it stays the same size when the text changes (you might want to add a "height" too).


Updating

To change the status, we can use a JQuery method called html, which changes the content of an HTML element. The JavaScript looks like this:

$('#status_div').html('The status has changed!');

For Quest, to change the status to the value of a string, s, do this:

JS.eval ("$('#status_div').html('" + s + "');")

Probably the best way is to create a new function, UpdateStatus, set its return type to none, give is a single parameter, s, then paste the above code into the script. Now you can do this:

UpdateStatus("You are feeling hungry")

Finally

If you put the status bar at the bottom, you should change the margin of the gameContent element. All the text gets output into this, and you do not want it appearing behind your status box, so set the bottom margin to perhaps 70 px in InitUserInterface:

JS.eval("$('#gameContent').css('margin-bottom', '70px');")

Let's say I started a gamebook game and I wanted to add a file image as background. How would i do that? I'm not a smart man and I was confused by all the code talk

Game books have a very stripped-down engine, designed to keep them simple, but makes it more complicated when you try to do anything fancy. As far as I can see your best option is to modify the existing InitInterface function; game books do not seem to have a InitUserFunction. You would only be able to do that if you are working off-line, as the on-line editor has its own set of restrictions, but the basic principles are the same as above.