Quorum Kitchen Sink Page

How to Interact With the Game Using a Screen Reader

To interact with the game in the IDE, press Enter or Space on the 'Enter' button for that game. This will trap focus within the game, so you can use Tab and Shift+Tab to move focus between controls within the game. While in this mode, focus can't be moved away from the game because all of the keyboard input is going to the Quorum program. To move focus away from the game, press Escape; this will stop the focus trap. For example, to use the Checkbox example, run the example, tab back to the button called 'Enter Checkbox Example', press Enter or Space on that button to trap focus, then press Space to toggle the checkbox (Space is the default in Quorum). To leave the example, press Escape.

Quorum games allow the use of controls that have focus within the game itself and the default key to move between controls is Tab and Shift + Tab. Online this conflicts with the keys for moving between focus on the page. For example, without focus trapping, pressing tab on a button in the game would both move focus in the game and move you away from the game in the IDE, making interacting with the game much more difficult.

Button

Button IDE

1

Checkbox

Checkbox IDE

1

Radio Buttons

Radio IDE

1

List

List IDE

1

Tree

Tree IDE

1

use Libraries.Game.Game
use Libraries.Interface.Controls.Tree
use Libraries.Interface.Controls.TreeItem
use Libraries.Interface.Controls.Icon
use Libraries.Game.Graphics.Color
class Main is Game
    action Main
        StartGame()
    end
    action CreateGame
        Color color
        Icon iconA
        Icon iconA_1
        Icon iconB
        Icon iconB_1
        Icon iconB_2
        Icon iconB_2_1
        Icon iconB_2_2
        Icon iconC

iconA:LoadFilledRectangle(10, 10, color:Red())
        iconA_1:LoadFilledCircle(10, color:CustomColor(1, 0.75, 0.75, 1))
        iconB:LoadFilledRectangle(10, 10, color:Blue())
        iconB_1:LoadFilledCircle(10, color:CustomColor(0, 1, 1, 1))
        iconB_2:LoadFilledCircle(10, color:CustomColor(0.5, 0, 0.5, 1))
        iconB_2_1:LoadFilledCircle(10, color:CustomColor(0.25, 0, 0.25, 1))
        iconB_2_2:LoadFilledCircle(10, color:CustomColor(0.75, 0, 0.75, 1))
        iconC:LoadFilledRectangle(10, 10, color:Green())

Tree tree
        tree:SetName("Colors")

TreeItem itemA
        TreeItem itemA_1
        TreeItem itemB
        TreeItem itemB_1
        TreeItem itemB_2
        TreeItem itemB_2_1
        TreeItem itemB_2_2
        TreeItem itemC

itemA:SetName("Red")
        itemA_1:SetName("Pink")
        itemB:SetName("Blue")
        itemB_1:SetName("Cyan")
        itemB_2:SetName("Purple")
        itemB_2_1:SetName("Dark Purple")
        itemB_2_2:SetName("Light Purple")
        itemC:SetName("Green")

itemA:SetIcon(iconA)
        itemA_1:SetIcon(iconA_1)
        itemB:SetIcon(iconB)
        itemB_1:SetIcon(iconB_1)
        itemB_2:SetIcon(iconB_2)
        itemB_2_1:SetIcon(iconB_2_1)
        itemB_2_2:SetIcon(iconB_2_2)
        itemC:SetIcon(iconC)

tree:Add(itemA)
        tree:Add(itemB)
        tree:Add(itemC)

itemA:Add(itemA_1)
        itemB:Add(itemB_1)
        itemB:Add(itemB_2)
        itemB_2:Add(itemB_2_1)
        itemB_2:Add(itemB_2_2)

tree:SetPosition(150, 150)
        tree:Resize()
        Add(tree)
        SetFocus(tree)
    end

action Update(number seconds)
    end
end

Tab Pane

Tab Pane IDE

1

use Libraries.Game.Game
use Libraries.Interface.Controls.TabPane
use Libraries.Interface.Controls.Tab
use Libraries.Interface.Controls.Icon
use Libraries.Game.Graphics.Drawable
use Libraries.Game.Graphics.Color
use Libraries.Containers.Array

class Main is Game
    action Main
        StartGame()
    end

action CreateGame
        TabPane pane
        Tab tab1
        Tab tab2
        Tab tab3
        Color color
        
        pane:SetSize(450, 450)
        pane:SetPosition(50, 100)
        Add(pane)
        
        Drawable outline
        outline:LoadRectangle(450, 425, color:Black())
        outline:SetPosition(50, 100)
        Add(outline)
        
        Drawable box
        Drawable circle
        Drawable triangle
        
        box:LoadFilledRectangle(300, 300, color:Red())
        circle:LoadFilledCircle(150, color:Blue())
        triangle:LoadFilledTriangle(0, 0, 300, 0, 150, 300, color:Green())
        
        Icon icon1
        Icon icon2
        Icon icon3
        
        icon1:LoadFilledRectangle(50, 50)
        icon2:LoadFilledCircle(25)
        icon3:LoadFilledTriangle(0, 0, 50, 0, 25, 50)
        
        tab1:SetName("Square")
        tab1:SetRelatedItem(box)
        tab1:SetIcon(icon1)
        
        tab2:SetName("Circle")
        tab2:SetRelatedItem(circle)
        tab2:SetIcon(icon2)
        
        tab3:SetName("Triangle")
        tab3:SetRelatedItem(triangle)
        tab3:SetIcon(icon3)
        
        Array<Tab> tabs
        tabs:Add(tab1)
        tabs:Add(tab2)
        tabs:Add(tab3)
        pane:Add(tabs)
        
        SetFocus(pane)
    end
end

MenuItem header1        //size
        MenuItem header1_1          //increase size
        MenuItem header1_1_1            //horizontal
        MenuItem header1_1_2            //vertical
        MenuItem header1_1_3            //both
        MenuItem header1_2          //decrease size
        MenuItem header1_2_1            //horizontal
        MenuItem header1_2_2            //vertical
        MenuItem header1_2_3            //both
        
        Array <MenuItem> head1
        Array <MenuItem> head1_1
        Array <MenuItem> head1_2

head1:Add(header1_1)
        head1:Add(header1_2)
        head1_1:Add(header1_1_1)
        head1_1:Add(header1_1_2)
        head1_1:Add(header1_1_3)
        head1_2:Add(header1_2_1)
        head1_2:Add(header1_2_2)
        head1_2:Add(header1_2_3)
        
        header1:Add(head1)
        header1_1:Add(head1_1)
        header1_2:Add(head1_2)
        headers:Add(header1)
        
        header1:SetName("Size")
        header1_1:SetName("Increase Size")
        header1_1_1:SetName("Horizontal Scale")
        header1_1_2:SetName("Vertical Scale")
        header1_1_3:SetName("Full Scale")
        header1_2:SetName("Decrease Size")
        header1_2_1:SetName("Horizontal Shrink")
        header1_2_2:SetName("Vertical Shrink")
        header1_2_3:SetName("Full Shrink")
        
        MenuItem header2        //rotation
        MenuItem header2_1          //clockwise rotation
        MenuItem header2_1_1            //30 degrees
        MenuItem header2_1_2            //45 degrees
        MenuItem header2_2          //counter-clockwise rotation
        MenuItem header2_2_1            //30 degrees
        MenuItem header2_2_2            //45 degrees
        
        headers:Add(header2)
        header2:Add(header2_1)
        header2:Add(header2_2)
        header2_1:Add(header2_1_1)
        header2_1:Add(header2_1_2)
        header2_2:Add(header2_2_1)
        header2_2:Add(header2_2_2)
        
        header2:SetName("Rotation")
        header2_1:SetName("Clockwise")
        header2_1_1:SetName("30 Degrees")
        header2_1_2:SetName("45 Degrees")
        header2_2:SetName("Counter-Clockwise")
        header2_2_1:SetName("30 Degrees")
        header2_2_2:SetName("45 Degrees")
        
        MenuItem header3        //color
        MenuItem header3_1          //red
        MenuItem header3_2          //green
        MenuItem header3_3          //blue
        
        header3:SetName("Color")
        header3_1:SetName("Red")
        header3_1:SetName("Green")
        header3_2:SetName("Blue")
        
        header3:Add(header3_1)
        header3:Add(header3_2)
        header3:Add(header3_3)
        headers:Add(header3)
        
        MenuItem header4        //reset
        MenuItem header4_1          //reset all
        
        header4:SetName("Reset")
        header4_1:SetName("Reset All")
        
        header4:Add(header4_1)
        headers:Add(header4)
        
        menu:Add(headers)
        Add(menu)
    end
end

Dialog

Dialog IDE

1

use Libraries.Game.Game
use Libraries.Interface.Controls.Button
use Libraries.Interface.Behaviors.Behavior
use Libraries.Interface.Events.BehaviorEvent
use Libraries.Interface.Controls.Dialog
use Libraries.Interface.Controls.Control
use Libraries.Game.Graphics.Color
use Libraries.Interface.Controls.Icon
use Libraries.Interface.Behaviors.Controls.DialogHideBehavior

class Main is Game, Behavior

Dialog dialog
    action Main
        StartGame()
    end

action CreateGame

// setup dialog
        Dialog dialog        
        Button close
        
        dialog:SetName("My Dialog")
        dialog:SetPixelWidth(300)
        dialog:SetModal(true)

Color c
        Icon diaIcon
        diaIcon:LoadFilledRectangle(300, 300, c:LightGray())

Control panel
        panel:SetPercentageWidth(1)
        panel:SetPixelHeight(300)
        panel:Add(diaIcon)
        panel:Add(close)
        dialog:Add(panel)

DialogHideBehavior behave
        behave:SetDialog(dialog)
        close:SetBehavior(behave)

close:SetName("Close")
        close:SetPosition(130, 140)

me:dialog = dialog

//make button to open dialog
        Button open
        open:SetName("Open Dialog")
        open:SetBehavior(me)
        open:SetPosition(100, 100)

SetFocus(open)
        Add(open)
    end

action Run(BehaviorEvent event)
        dialog:Show()
    end

action Update(number seconds)
    end
end

Spreadsheet

Spreadsheet IDE

1

Progress Bar

Progress Bar IDE

1

Quorum Kitchen Sink page

How to Interact With the Game Using a Screen Reader

Button

Code Area

Output Area

Checkbox

Code Area

Output Area

Radio Buttons

Code Area

Output Area

List

Code Area

Output Area

Tree

Code Area

Output Area

Tab Pane

Code Area

Output Area

Menu

Code Area

Output Area

Dialog

Code Area

Output Area

Spreadsheet

Code Area

Output Area

Progress Bar

Code Area

Output Area