cthulhu/test/html/aria-alert-dialog.html

651 lines
17 KiB
HTML
Raw Permalink Normal View History

<html>
<head>
<style type="text/css">
div.guess {
border: thick double black;
padding: 1em;
width: 50%;
font-family: Arial, Helvetica, sans-serif;
}
div.guess h2 {
margin: 0;
padding: 0;
text-align: center;
margin-left: 1em;
margin-right: 1em;
}
div.guess input {
font-size: 100%;
}
div.guess p.input {
margin: 0;
padding: 0;
font-size: 150%;
margin-top: .5em;
margin-bottom: .5em;
text-align: center;
margin-left: 1em;
margin-right: 1em;
}
div.guess input.button {
margin: 0;
padding: 0;
display: inline;
padding-left: .5em;
padding-right: .5em;
padding-top: .25em;
padding-bottom: .25em;
}
div#alert1 {
position: absolute;
width: 25%;
border:medium solid black;
display: none;
background-color: white;
color: black;
text-align: center;
padding-bottom: 1em;
font-family: Arial, Helvetica, sans-serif;
}
div#alert1 p.title {
margin: 0;
padding: 0;
color: white;
background-color: black;
text-align: center;
font-weight: bold;
border-top: thin solid white;
border-left: thin solid white;
border-right: thin solid white;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var guess1 = new guess(1, 10, 'guess1', 'guess1_text', 'guess1_check', 'guess1_again', 'alert1');
});
//
// keyCodes is an object that defines keycodes for the key handlers
//
function keyCodes () {
// Define values for keycodes
this.tab = 9;
this.enter = 13;
this.esc = 27;
this.space = 32;
}
//
// alertDlg() is a class to implement a modal alert dialog
//
// @param (alert_id string) alert_id is the id of the dialog to create
//
// @param (game_id string) game_id is the id to attach the dialog to
// @return N/A
//
function alertDlg(alert_id, game_id) {
var dlg = '<div id="' + alert_id + '" role="alertdialog" tabindex="-1" aria-hidden="true" aria-labeledby="' +
alert_id + '_title"><p id="' + alert_id + '_title" class="title">Alert Box</p><p id="' +
alert_id + '_message">No Message</p><input id="' +
alert_id + '_close" type="button" value="Close" /></div>';
// append the dialog to the document
$('div#' + game_id).append(dlg);
// Define the object properties
this.$dlg = $('#' + alert_id); // the object pointer of the dialog
this.$game = $('#' + game_id); // the object pointer of the containing div for the game
this.$msg = $('#' + alert_id + '_message'); // the object pointer of the alert message area
this.$button = $('#' + alert_id + '_close'); // the object pointer of the alert close button
this.$focus; // the object pointer of a page element to give focus to on dialog dismissal
this.keys = new keyCodes();
// bind handlers
this.bindHandlers();
} // end alertDlg constructor
//
// showMsg() is a member function to set the message text of the alertDlg
//
// @param (msg string) msg is the message to display in the dialog box.
//
// @param (focusId string) focusId is the id of the element to give focus to when the dialog is dismissed.
//
// @return N/A
//
alertDlg.prototype.showMsg = function (msg, $focus) {
// Store the focus ID
this.$focus = $focus;
// Set the message text
this.$msg.html(msg);
// Show the dialog
this.showDlg();
} // end showMsg()
//
// bindHandlers() is a member function to bind event handlers to the modal alert dialog
//
// @return N/A
//
alertDlg.prototype.bindHandlers = function () {
var thisObj = this; // store the this pointer
// bind a keydown handler
this.$dlg.keydown(function(e) {
return thisObj.handleDlgKeyDown(e);
});
// bind a keypress handler
this.$dlg.keypress(function(e) {
return thisObj.handleDlgKeyPress(e);
});
// bind a click handler
this.$button.click(function(e) {
return thisObj.handleCloseClick(e);
});
} // end bindhandlers()
//
// handleDlgKeyDown() is a member function to process keydown events for the alert dialog
//
// @param (evt obj) evt is the event object associated with the keydown event
//
// @return (boolean) true if propagating; false if consuming event
//
alertDlg.prototype.handleDlgKeyDown = function(evt) {
if (evt.ctrlKey || evt.AltKey) {
// do nothing
return true;
}
switch (evt.keyCode) {
case this.keys.tab: {
// Consume the tab event and do nothing
evt.stopPropagation;
return false;
}
case this.keys.enter:
case this.keys.esc:
case this.keys.space: {
// hide the dialog
this.hideDlg();
evt.stopPropagation;
return false;
break;
}
} // end switch
return true;
} // end handleDlgKeyDown()
//
// handleDlgKeyPress() is a member function to consume keypress events for the alert dialog
//
// @param (evt obj) evt is the event object associated with the keydown event
//
// @return (boolean) true if propagating; false if consuming event
//
alertDlg.prototype.handleDlgKeyPress = function(evt) {
if (evt.ctrlKey || evt.AltKey) {
// do nothing
return true;
}
switch (evt.keyCode) {
case this.keys.tab:
case this.keys.enter:
case this.keys.esc:
case this.keys.space: {
evt.stopPropagation;
return false;
break;
}
} // end switch
return true;
} // end handleDlgKeyPress()
//
// handleCloseClick() is a member function to process click events for the alert dialog close button
//
// @param (evt obj) evt is the event object associated with the click event
//
// @return (boolean) true if propagating; false if consuming event
//
alertDlg.prototype.handleCloseClick = function(evt) {
if (evt.shiftKey || evt.ctrlKey || evt.AltKey) {
// do nothing
return true;
}
// Hide the dialog
this.hideDlg();
evt.stopPropagation;
return false;
} // end handleCloseClick()
//
// showDlg() is a member function to show the alert dialog and give it focus
//
// @return N/A
//
alertDlg.prototype.showDlg = function() {
var thisObj = this;
// Bind an event listener to the document to capture all mouse events to make dialog modal
$(document).bind('click mousedown mouseup mousemove mouseover', function(e) {
//ensure focus remains on the dialog
thisObj.$dlg.focus();
// Consume all mouse events and do nothing
e.stopPropagation;
return false;
});
// Position the dialog centered in the containing div
this.$dlg.css('left', (this.$game.width() - this.$dlg.width()) / 2 + this.$game.offset().left + 'px');
this.$dlg.css('top', (this.$game.height() - this.$dlg.height()) / 2 + this.$game.offset().top + 'px');
// Display the dialog
this.$dlg.show();
this.$dlg.attr('aria-hidden', 'false');
// Give the dialog focus
this.$dlg.attr('tabindex', '0');
this.$dlg.focus();
} // end showDlg()
//
// hideDlg() is a member function to hide the alert dialog and return focus to the page
//
// @return N/A
//
alertDlg.prototype.hideDlg = function() {
// set aria hidden attribute and remove dialog from tab order
this.$dlg.attr('aria-hidden', 'true');
this.$dlg.attr('tabindex', '-1');
// hide the dialog
this.$dlg.hide();
// Unbind the document mouse event listeners
$(document).unbind('click mousedown mouseup mousemove');
// return focus to the specified page element
if (this.$focus) {
this.$focus.focus();
}
} // end hideDlg()
///////////////////////////////////////////////////////////////////////////////////////////
//
// guess() is a class to implement a simple number guessing game
//
// @param (game_id) game_id is the id to attach the instance of the game to.
//
// @param (max integer) min is the maximum number to guess.
//
// @param (text_id string) text_id is the id of the text box where player enters a guess.
//
// @param (check_id string) check_id is the id of the check guess button.
//
// @param (again_id string) again_id is the id of the play again button.
//
// @param (alertObj) alertObj is the modal dialog object where game messages will be printed.
//
// @return N/A
//
function guess(min, max, game_id, text_id, check_id, again_id, alert_id) {
// define class properties
this.minGuess = min; // the minimum number to guess
this.maxGuess = max; // the maximum number to guess
this.$text = $('#' + text_id); // the jQuery object pointer to the text box
this.$check = $('#' + check_id); // the jQuery object pointer to the check guess button
this.$again = $('#' + again_id); // the jQuery object pointer to the play again button
this.alertDlg = new alertDlg('alert1', game_id); // the modal alert dialog to be displayed during the game
this.guessVal = -1; // the number for the player to guess
this.guessCount = 0; // the number of attempts the player has made
this.keys = new keyCodes();
// bind event handlers
this.bindHandlers();
// initialize the game
this.newGame();
} // end guess object constructor
//
// newGame() is a member function to set up a new game. The function chooses a number
// between 1 and the max number specified at instantiation, sets the guess count to 0, and
// show the user a message to make a guess.
//
// @return N/A
guess.prototype.newGame = function () {
// get a new random number for the player to guess
this.guessVal = Math.floor(Math.random()*(this.maxGuess - this.minGuess + 1)) + this.minGuess;
// reset the guess count
this.guessCount = 0;
// reset the guess text box
this.$text.val('');
this.$text.attr('aria-invalid', 'false');
// Re-enable the buttons
this.$text.removeAttr('disabled');
this.$check.removeAttr('disabled');
// Set focus on the guess text box
this.$text.focus();
} // end newGame
//
// bindHandlers() is a function to bind the event handlers for the game controls
//
// @return N/A
//
guess.prototype.bindHandlers = function () {
var thisObj = this; // Store the this pointer
// bind a focus handler for the guess text box
this.$text.focus(function (e) {
thisObj.handleTextFocus(e);
return true;
});
// bind a keydown handler for the guess text box
this.$text.keydown(function (e) {
return thisObj.handleTextKeyDown(e);
});
// bind a keypress handler for the guess text box
this.$text.keypress(function (e) {
return thisObj.handleTextKeyPress(e);
});
// bind a click handler for the check guess button
this.$check.click(function (e) {
return thisObj.handleCheckClick(e);
});
// bind a click handler for the play again button
this.$again.click(function (e) {
return thisObj.handleAgainClick(e);
});
} // end bindHandlers()
//
// handleTextFocus() is a member function to process focus events for the guess text box
//
// @input (evt obj) evt is the event object associated with the keydown event
//
// @return N/A
//
guess.prototype.handleTextFocus = function(evt) {
// Select any text in the text box
this.$text.select();
} // end handleTextFocus()
//
// handleTextKeyDown() is a member function to process keydown events for the guess text box
//
// @input (evt obj) evt is the event object associated with the keydown event
//
// @return (boolean) false if consuming event, true if propagating
//
guess.prototype.handleTextKeyDown = function(evt) {
// do nothing if shift, alt, or ctrl key pressed.
if (evt.shiftKey || evt.altKey || evt.ctrlKey) {
return true;
}
if (evt.keyCode == this.keys.enter) {
// validate the guess
if (this.validateGuess() == true) {
// increment the guess count
this.guessCount++;
// see if the player has won
if (this.checkGuess() == true) {
// disable the guess text box and the check guess button
this.$text.attr('disabled', 'true');
this.$check.attr('disabled', 'true');
}
}
evt.stopPropagation;
return false;
}
return true;
} // end handleTextKeyDown()
//
// handleTextKeyPress() is a member function to process keypress events for the guess text box. This function
// is included to handle browsers that perform window scrolling, etc. on keypress rather than keydown.
//
// @input (evt obj) evt is the event object associated with the keypress event
//
// @return (boolean) false if consuming event, true if propagating
//
guess.prototype.handleTextKeyPress = function(evt) {
// do nothing if shift, alt, or ctrl key pressed.
if (evt.shiftKey || evt.altKey || evt.ctrlKey) {
return true;
}
if (evt.keyCode == this.enterKey) {
// consume the event
evt.stopPropagation;
return false;
}
return true;
} // end handleTextKeyPress()
//
// handleCheckClick() is a member function to process click events for the check guess button
//
// @input (evt obj) evt is the event object associated with the click event
//
// @return (boolean) false if consuming event, true if propagating
//
guess.prototype.handleCheckClick = function(evt) {
// do nothing if shift, alt, or ctrl key pressed.
if (evt.shiftKey || evt.altKey || evt.ctrlKey) {
return true;
}
// validate the guess
if (this.validateGuess() == true) {
// increment the guess count
this.guessCount++;
// see if the player has won
if (this.checkGuess() == true) {
// disable the guess text box and the check guess button
this.$text.attr('disabled', 'true');
this.$check.attr('disabled', 'true');
}
}
evt.stopPropagation;
return false;
} // end handleCheckClick()
//
// handleAgainClick() is a member function to process click events for the play again button
//
// @input (evt obj) evt is the event object associated with the click event
//
// @return (boolean) false if consuming event, true if propagating
//
guess.prototype.handleAgainClick = function(evt) {
// do nothing if shift, alt, or ctrl key pressed.
if (evt.shiftKey || evt.altKey || evt.ctrlKey) {
return true;
}
// Setup a new game
this.newGame();
evt.stopPropagation;
return false;
} // end handleTextKeyDown()
//
// validateGuess() is a member function to validate a player's guess. If the guess is not a number, is less than
// the minimum allowed guess, or is greater than the maximum allowed guess, the user is warned that the guess is invalid
//
// @return (boolean) true if guess is valid; false if guess is invalid
//
guess.prototype.validateGuess = function() {
var val = this.$text.val();
if (this.$text.val() == '') {
// guess is empty
this.$text.attr('aria-invalid', 'true');
this.alertDlg.showMsg('You must enter a number!', this.$text);
return false;
}
else if (isNaN(val) == true) {
// guess is not a number
this.$text.attr('aria-invalid', 'true');
this.alertDlg.showMsg('\'' + this.$text.val() + '\' is not a number!', this.$text);
return false;
}
else if (val < this.minGuess || val > this.maxGuess) {
// guess is out of range
this.$text.attr('aria-invalid', 'true');
this.alertDlg.showMsg('You must choose a number between ' + this.minGuess + ' and ' + this.maxGuess + '!', this.$text);
return false;
}
this.$text.attr('aria-invalid', 'false');
return true;
} // end validateGuess()
//
// checkGuess() is a member function to check the player's guess to see if he or she has won the game
//
// @return (boolean) true if the player has won; false if not
guess.prototype.checkGuess = function() {
var guess = this.$text.val();
if (guess == this.guessVal) {
// The player has won. Tell the player how many tries it took
if (this.guessCount == 1) {
this.alertDlg.showMsg('\'' + guess + '\' is right. You got it on your first try!', this.$again);
}
else {
this.alertDlg.showMsg('\'' + guess + '\' is right. It only took you ' + this.guessCount + ' tries!', this.$again);
}
return true;
}
// Player did not guess the correct number. Tell the player if he or she is too high or too low
if (guess < this.guessVal) {
this.alertDlg.showMsg('\'' + guess + '\' is too low. Try a higher number.', this.$text);
}
else {
this.alertDlg.showMsg('\'' + guess + '\' is too high. Try a lower number.', this.$text);
}
return false;
} // end checkGuess()
</script>
</head>
<body>
<div role="application">
<div id="guess1" class="guess">
<h2>Number Guessing Game</h2>
<p><strong>Instructions:</strong> In this game you guess a number between 1 an 10 and then press the "Check My Guess" button to check your responses.
An <abbr title="Accessible Rich Internet Application">ARIA</abbr> dialog box will display the results of your guess. To start over again to press the "Play Again" button.</p>
<p class="input">
<label id="guess1_label" for="guess1_text">Guess a number between 1 and 10</label>
<input type="text" id="guess1_text" size="3" aria-labelledby="guess1_label" aria-invalid="false">
</p>
<p class="input">
<input class="button" id="guess1_check" type="button" value="Check My Guess"/>
<input class="button" id="guess1_again" type="button" value="Play Again"/>
</p>
</div>
</div>
</body>
</html>