JS functions
The JS object is how Quest exposes the user interface. What this means is that we can use the JS object to call JavaScript functions that will modify what the player sees. The basic format is to append the JavaScript function name with a dot, so to call addText (the JavaScript function Quest uses to show text on the screen), use something like this:
JS.addText("You are in a deep hole.")addExternalStylesheet
Section titled “addExternalStylesheet”JS.addExternalStylesheet (string url)Adds a <link rel="stylesheet"> for the given URL to the page, loading an external CSS file.
addScript
Section titled “addScript”JS.addScript (string text)Inserts the text into the HTML document. This can be used for adding JavaScript or CSS, or for adding HTML that will be out of the normal sequence, such as a custom pane or dialogue panel. Use addText for game text.
JS.addScript("<script>function setNumber(n) { number = n; }</script>")addText
Section titled “addText”JS.addText (string text)Inserts the given text into the page. This is how msg displays text. Use addScript to add code, such as CSS or JavaScript, or to add HTML outside the normal text flow.
AddYouTube
Section titled “AddYouTube”JS.AddYouTube (string id)Embeds an autoplaying YouTube video for the given video ID. See Adding videos.
colourBlend
Section titled “colourBlend”JS.colourBlend (string colour1, string colour2)Sets a colour blend as the background, going from colour1 at the top to colour2 at the bottom.
JS.colourBlend("red", "#ff0080")JS.eval (string JavaScript code)Causes the given string to be evaluated by the JavaScript engine. This is a way to run any JavaScript code in your game, which can be used to move around the components of the UI or add new ones, among other things.
Grid_ClearAllLayers
Section titled “Grid_ClearAllLayers”JS.Grid_ClearAllLayers ()Clears everything drawn on the map grid - rooms and any custom layers. Used when resetting the map entirely, e.g. when the player teleports to an unconnected region. See Showing a map.
hideBorder
Section titled “hideBorder”JS.hideBorder ()Removes the border around the game area.
panesVisible
Section titled “panesVisible”JS.panesVisible (boolean visible)Shows or hides the panes on the right of the screen.
JS.panesVisible(false)scrollToEnd
Section titled “scrollToEnd”JS.scrollToEnd ()Moves the displayed text down to the bottom. This should happen automatically, but occasionally it is useful to be able to call it yourself from your game.
setBackground
Section titled “setBackground”JS.setBackground (string colour)Sets the background colour of the game area.
setCommands
Section titled “setCommands”JS.setCommands(string commands, string colour)Sets the commands to be displayed on the command pane (turn the command pane on on the Interface script of the game object). Commands should be sent as a string, separated by semi-colons. The colour of the text can be specified, but is optional.
JS.setCommands("Wait;Look")JS.setCommands("Wait;Look;Get apple", "red")setCompassDirections
Section titled “setCompassDirections”JS.setCompassDirections (string directions)Takes a semicolon-separated list of names for the twelve compass directions - northwest, north, northeast, west, east, southwest, south, southeast, up, down, in, out, in that order - and uses them as the tooltip text for the compass buttons. These names also then stop appearing as exits in the “Places and Objects” list.
JS.setCompassDirections("northwest;north;northeast;west;east;southwest;south;southeast;up;down;in;out")The compass directions must be specified in the same order and with the same number of elements as the default shown above. The exit in the compass rose is only active if the alias of the exit matches the text set here.
setCss
Section titled “setCss”JS.setCss (string element name, string css styling)Sets the CSS styling for the given element. If the element name is for an ID, this should be prefixed with a #. CSS styling should be given as a serious of name-value pairs, each pair separated by a semi-colon, with a colon between the name and the value.
This example sets the <body> element to have the “serif” font.
JS.setCss ("body", "font-family: serif")This example sets styling for the element with the ID “qv-status” (the strip across the top of the screen). It sets two properties, the background image and background colour.
JS.setCss ("#qv-status", "background-image:none; background-color: green;")setCustomStatus
Section titled “setCustomStatus”JS.setCustomStatus(string html)Sets the HTML text to be displayed on the custom status pane (turn the command pane on on the Interface script of the game object). This is an involved issue, rather than give an example, go see this page.
setGameName
Section titled “setGameName”JS.setGameName (string name)Sets the name of the game, shown in the browser tab title.
JS.setGameName("My Cool Game")setGamePadding
Section titled “setGamePadding”JS.setGamePadding (string top, string bottom, string left, string right)Sets the padding (CSS values, e.g. "10px") around the game text.
setGameWidth
Section titled “setGameWidth”JS.setGameWidth (int width)Sets the maximum width, in pixels, of the game area.
setInterfaceString
Section titled “setInterfaceString”JS.setInterfaceString(string name, string value)Use this to set the text of the various elements of the user interface. The values allowed for the name are:
InventoryLabel, StatusLabel, PlacesObjectsLabel, CompassLabel InButtonLabel, OutButtonLabel EmptyListLabel, NothingSelectedLabel, TypeHereLabel, ContinueLabel
For example, to change the name of the player inventory:
JS.setInterfaceString("InventoryLabel", "You are holding")SetMenuBackground
Section titled “SetMenuBackground”JS.SetMenuBackground (string colour)Sets the background colour of the popup menu shown when the player clicks a hyperlink in the text.
SetMenuFontName
Section titled “SetMenuFontName”JS.SetMenuFontName (string fontName)Sets the font used in the hyperlink popup menu.
SetMenuFontSize
Section titled “SetMenuFontSize”JS.SetMenuFontSize (string size)Sets the font size used in the hyperlink popup menu. The size must be given as a number followed by "pt", e.g. "14pt".
SetMenuForeground
Section titled “SetMenuForeground”JS.SetMenuForeground (string colour)Sets the text colour of the hyperlink popup menu.
SetMenuHoverBackground
Section titled “SetMenuHoverBackground”JS.SetMenuHoverBackground (string colour)Sets the background colour of a hyperlink popup menu item when hovered over.
SetMenuHoverForeground
Section titled “SetMenuHoverForeground”JS.SetMenuHoverForeground (string colour)Sets the text colour of a hyperlink popup menu item when hovered over.
setPanes
Section titled “setPanes”JS.setPanes (string text, string background)JS.setPanes (string text, string background, string text2, string background2)JS.setPanes (string text, string background, string text2, string background2, string highlight)Sets the colours for the panes on the right. You can use either two, four or five parameters.
The text will be in fore, whilst the background will be in back. When an object is selected, it will be in secFore on a secBack background, if given, otherwise it will be back on a fore background (i.e., reversed colours). When a player is clicking on an object, the background will be the highlight colour, or orange if not given.
JS.setPanes("black", "white")JS.setPanes("black", "white", "white", "#444")JS.setPanes("black", "white", "white", "#444", blue)ShowGrid
Section titled “ShowGrid”JS.ShowGrid (int height)Sets the height for the grid map. Setting this to zero turns the map off, setting it to any other values turns it on.
showPopup
Section titled “showPopup”JS.showPopup(title, text)Shows a pop up, with an okay button, which the player can click to close. This version has a fixed width (of 300 px when I checked), and the height will expand up to the full Quest windows size to accommodate the text.
JS.showPopup("Hi!", "This is where it all begins")showPopupCustomSize
Section titled “showPopupCustomSize”JS.showPopupCustomSize(title, text, int width, int height)As showPopup, but allows for custom width and height to be set; scrollbars will be added if the text is too long.
showPopupFullscreen
Section titled “showPopupFullscreen”JS.showPopupFullscreen(title, text)As showPopup, but will fill the Quest window (so the size will depend on how the player has it set up).
showStatusVisible
Section titled “showStatusVisible”JS.showStatusVisible (boolean visible)Shows or hides the status variables pane (see status attributes).
TurnOffHyperlinksUnderline
Section titled “TurnOffHyperlinksUnderline”JS.TurnOffHyperlinksUnderline ()Removes the underline from in-text command hyperlinks.
uiHide
Section titled “uiHide”JS.uiHide(string element)Hides the given element the same way (see uiShow for the available selectors). #gamePanes is special-cased to behave the same as panesVisible(false).
JS.uiHide("#compassLabel")JS.uiHide("#compassAccordion")uiShow
Section titled “uiShow”JS.uiShow(string element)Shows the given element - any CSS selector works. #gamePanes is special-cased to behave the same as panesVisible(true).
JS.uiShow("#gamePanes")JS.uiShow("#location")JS.uiShow("#txtCommandDiv")You can also selectively show or hide one pane (if game panes are shown). Each pane has two components, so to show/hide the compass: #compassLabel and #compassAccordion. For the inventory, use #inventoryLabel and #inventoryAccordion; for the places and objects pane, #placesObjectsLabel and #placesObjectsAccordion. For the custom status pane and the custom command pane, use #customStatusPane and #commandPane respectively (these have only one part).
updateLocation
Section titled “updateLocation”JS.updateLocation(string text)Changes the location in the location bar at the top.
JS.updateLocation("Dining Room")updateStatus
Section titled “updateStatus”JS.updateStatus(string text)Puts the given text into the status pane on the right. This should be formatted in HTML; for example, use
to indicate a new line.
JS.updateStatus("Money: $45<br/>Health: 23")