button and icon size and position

Buttons that require user interaction may be set in % or vh scale but all should have a minimum of 50-100px so users aren’t expected to notice and click on a tiny image.

Size and position for the following should be set in the game_style.css

  • #dialog-box – This holds the text telling the player if the answer is correct or incorrect and a button that says OK the user clicks to close the frame. Its color is red or green, set by the class applied a player gets an answer correct or incorrect
  • #dialog-frame – This contains the dialog box shown when a player gets an answer correct or incorrect
  • #hint – button for more info, should be in top right corner
  • .lang – button to switch from one language to another. Changes all text and audio.
  • #next – this is the next button on every game except for visual novels. The size and icon for this and the vn_next are the same, just the position varies
  • #play-audio – button to play audio – should be in top right corner next to hint
  • #play-video – button to start a video – same size as #play
  • #vn_next – this is the next button on the visual novel, since it is set within a caption div, not within the full screen

Size for the following should be set in the game_style.css

These should all have the size set in the global CSS style sheet, but the position will be set within the individual block style sheet

  • #play – this button starts a mini-game
  • #replay – this button starts a mini-game over if the player has lost – it is an icon with an arrow that looks kind of like a u-turn
  • #try_again – this button starts an activity or mini-game over if the player has lost – it is an icon with the words TRY AGAIN
  • #up_arrow – used as controls in games
  • #down_arrow – used as controls in games
  • #left_arrow – should be same as back arrow (?), used as controls in games
  • #right_arrow – should be same as next arrow (?), used as controls in games

Style for the following should be set in the game_style.css

  • .correct_box – this class for boxes will usually have a solid green or black border
  • .incorrect_box – this class for boxes will usually have an orange dotted border
  • .correct – this class has a light green background
  • .incorrect – this class has a light red background

Bilingual Games