<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
xmlns:aaa="http://www.w3.org/2005/07/aaa">
<head>
<title>inline: Alert Dialog Example 1: Number Guessing Game</title>
<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 {
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 type="text/javascript">
//globals.js
/**
*
* The Globale Variables
*/
if (!window.Node) {
var Node = { // If there is no Node object, define one
ELEMENT_NODE: 1, // with the following properties and values.
ATTRIBUTE_NODE: 2, // Note that these are HTML node types only.
TEXT_NODE: 3, // For XML-specific nodes, you need to add
COMMENT_NODE: 8, // other constants here.
DOCUMENT_NODE: 9,
DOCUMENT_FRAGMENT_NODE: 11
}
}
var KEY_PAGEUP = 33;
var KEY_PAGEDOWN = 34;
var KEY_END = 35;
var KEY_HOME = 36;
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;
var KEY_SPACE = 32;
var KEY_TAB = 9;
var KEY_BACKSPACE = 8;
var KEY_DELETE = 46;
var KEY_ENTER = 13;
var KEY_INSERT = 45;
var KEY_ESCAPE = 27;
var KEY_F1 = 112;
var KEY_F2 = 113;
var KEY_F3 = 114;
var KEY_F4 = 115;
var KEY_F5 = 116;
var KEY_F6 = 117;
var KEY_F7 = 118;
var KEY_F8 = 119;
var KEY_F9 = 120;
var KEY_F10 = 121;
var KEY_M = 77;
var NS_XHTML = "http://www.w3.org/1999/xhtml"
var NS_STATE = "http://www.w3.org/2005/07/aaa";
// **********************************************
// *
// * Commonly used helper functions
// *
// **********************************************
/**
*
* nextSiblingElement
*
* @contructor
*/
function nextSiblingElement( node ) {
var next_node = node.nextSibling;
while( next_node
&& (next_node.nodeType != Node.ELEMENT_NODE) ) {
next_node = next_node.nextSibling;
} // endwhile
return next_node;
}
/**
*
* previousSiblingElement
*
* @param ( node ) node object for which you are looking for the next sibling element node
*
* @return ( node) next sibling or "null"
*/
function previousSiblingElement( node ) {
var next_node = node.previousSibling;
while( next_node
&& (next_node.nodeType != Node.ELEMENT_NODE) ) {
next_node = next_node.previousSibling;
} // endwhile
return next_node;
}
/**
*
* firstChildElement
*
* @param ( node ) node object for which you are looking for the first child element node
*
* @return ( node) next sibling or "null"
*/
function firstChildElement( node ) {
var next_node = node.firstChild;
while( next_node
&& (next_node.nodeType != Node.ELEMENT_NODE) ) {
next_node = next_node.nextSibling;
} // endwhile
return next_node;
}
/**
*
* getTextContentOfNode
*
* @contructor
*/
function getTextContentOfNode( node ) {
var next_node = node.firstChild;
var str = "";
while( next_node ) {
if( (next_node.nodeType == Node.TEXT_NODE ) &&
(next_node.length > 0 )
)
str += next_node.data;
next_node = next_node.nextSibling;
} // endwhile
return str;
}
/**
*
* setTextContentOfNode
*
* @contructor
*/
function setTextContentOfNode( node, text ) {
// Generate a new text node with the text value
var text_node = document.createTextNode(text);
// Remove child nodes to remove text
while (node.firstChild) {
node.removeChild(node.firstChild);
} // while
// Append new text to the container element
node.appendChild( text_node );
}
//widgets_inline.js
// JavaScript Document
if (!window.Node) {
var Node = { // If there is no Node object, define one
ELEMENT_NODE: 1, // with the following properties and values.
ATTRIBUTE_NODE: 2, // Note that these are HTML node types only.
TEXT_NODE: 3, // For XML-specific nodes, you need to add
COMMENT_NODE: 8, // other constants here.
DOCUMENT_NODE: 9,
DOCUMENT_FRAGMENT_NODE: 11
}
}
var ARIA_STATE = "aria-";
/**
* Widgets Object is used to initialize a set of controls
* and provide a conveinence fuction to cancel event propagration
* @construtor
*/
function Widgets() {
this.widgets = new Array();
}
/**
* add is member of the Widgets Object
* and used add a widget ot the list of widgets to be intitialized
* as part of the onload event
* The controls array is the list of controls to initialize
* @member Enable
* @return none
*/
Widgets.prototype.add = function(obj) {
this.widgets[this.widgets.length] = obj;
}
/**
* init is member of the Widgets Object
* and is called by the onload event to initialize widgets in the web resource
* The controls array is the list of controls to initialize
* @member Enable
* @return none
*/
Widgets.prototype.init = function() {
for(var i = 0; i < this.widgets.length; i++ )
this.widgets[i].init();
}
//
// convience function for getting the node based on id
function _$( id ) {
return document.getElementById( id );
}
//
// WebBrowser object to abstract accessibility API differences between web standards supporting browsers and Internet Explorer 7.0
//
// The state variable keeps track of current state of checkbox
function WebBrowser() {
}
//
// keyCode is a function to get the keycode from a keypress event
//
// @param ( event object) event is an event object
//
// @return ( keycode )
WebBrowser.prototype.keyCode = function( event ) {
var e = event || window.event;
return e.keyCode;
}
/**
* OnClick Event Simulator
*
* @param ( node ) DOM node object
* @return nothing
*/
if( document.createEvent ) {
// If a web standards based browser implement this function
WebBrowser.prototype.simulateOnClickEvent = function( node ) {
// W3C DOM Events way to trigger a "click" event
var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
node.dispatchEvent( e );
}
} else {
// If a Microsoft IE based browser implement this function
WebBrowser.prototype.simulateOnClickEvent = function( node ) {
var e = document.createEventObject();
node.fireEvent( "onclick", e );
} // endif
}
if ( document.addEventListener ) {
// If a web standards based browser implement this function
WebBrowser.prototype.setMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {
if( clickHandler )
document.addEventListener( "click", clickHandler, true );
if( downHandler )
document.addEventListener( "mousedown", downHandler, true );
if( moveHandler )
document.addEventListener( "mousemove", moveHandler, true );
if( upHandler)
document.addEventListener( "mouseup", upHandler, true );
}
WebBrowser.prototype.releaseMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {
if( upHandler)
document.removeEventListener( "mouseup", upHandler, true );
if( moveHandler )
document.removeEventListener( "mousemove", moveHandler, true );
if( downHandler )
document.removeEventListener( "mousedown", downHandler, true );
if( clickHandler )
document.removeEventListener( "click", clickHandler, true );
}
} else {
// If a Microsoft IE based browser implement this function
WebBrowser.prototype.setMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {
node.setCapture();
if( clickHandler)
node.attachEvent( "onclick", clickHandler );
if( downHandler)
node.attachEvent( "onmousedown", downHandler );
if( moveHandler )
node.attachEvent( "onmousemove", moveHandler );
if( upHandler )
node.attachEvent( "onmouseup", upHandler );
} // endif
WebBrowser.prototype.releaseMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {
if( upHandler )
node.detachEvent( "onmouseup", upHandler );
if( moveHandler )
node.detachEvent( "onmousemove", moveHandler );
if( downHandler)
node.detachEvent( "onmousedown", downHandler );
if( clickHandler)
node.detachEvent( "onclick", clickHandler );
node.releaseCapture();
} // endif
}
if (typeof document.documentElement.setAttributeNS != 'undefined') {
WebBrowser.prototype.stopPropagation = function( event ) {
event.stopPropagation();
event.preventDefault();
return false;
}
WebBrowser.prototype.target = function( event ) {
return event.target;
}
WebBrowser.prototype.attrName = function( event ) {
return event.attrName
}
WebBrowser.prototype.charCode = function(event) {
return event.charCode;
}
WebBrowser.prototype.calculateOffsetLeft = function( node ) {
return node.offsetLeft;
}
WebBrowser.prototype.calculateOffsetTop = function( node ) {
return node.offsetTop;
}
WebBrowser.prototype.pageX = function( e ) {
return e.pageX;
}
WebBrowser.prototype.pageY = function( e ) {
return e.pageY;
}
WebBrowser.prototype.setNodePosition = function(node,left,top) {
node.style.left = left+"px";
node.style.top = top+"px";
}
} else {
WebBrowser.prototype.stopPropagation = function( event ) {
event.cancelBubble = true;
event.returnValue = false;
return false;
}
WebBrowser.prototype.charCode = function(event) {
return window.browser.keyCode( event );
}
WebBrowser.prototype.target = function( event ) {
return event.srcElement;
}
WebBrowser.prototype.attrName = function( event ) {
return event.propertyName;
}
WebBrowser.prototype.calculateOffsetLeft = function(node) {
var offset = 0;
while( node ) {
offset += node.offsetLeft;
node = node.offsetParent;
}
return offset;
}
WebBrowser.prototype.calculateOffsetTop = function(node) {
var offset = 0;
while( node ) {
offset = offset + node.offsetTop;
node = node.offsetParent;
}
return offset;
}
WebBrowser.prototype.pageX = function( e ) {
return e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
}
WebBrowser.prototype.pageY = function( e ) {
return e.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
}
WebBrowser.prototype.setNodePosition = function(node,left,top) {
offsetx = 0;
offsety = 0;
nnode = node.offsetParent
while( nnode ) {
offsetx = offsetx + nnode.offsetLeft;
offsety = offsety + nnode.offsetTop;
nnode = nnode.offsetParent;
}
node.style.left = left-offsetx+"px";
node.style.top = top-offsety+"px";
}
};
if (document.addEventListener) {
// Functions for W3C Standards compliant implementation of adding event handlers
WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
elmTarget.addEventListener(sEventName, fCallback, false);
returnValue = true;
};
WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
elmTarget.removeEventListener(sEventName, fCallback, false);
returnValue = true;
};
WebBrowser.prototype.addChangeEvent = function(elmTarget, fCallback) {
elmTarget.addEventListener("DOMAttrModified", fCallback, false);
returnValue = true;
};
} else {
if(document.attachEvent) {
// IE Specific Event handler functions
WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
returnValue = elmTarget.attachEvent('on' + sEventName, fCallback);
};
WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
returnValue = elmTarget.detachEvent('on' + sEventName, fCallback);
};
WebBrowser.prototype.addChangeEvent = function(elmTarget, fCallback) {
returnValue = elmTarget.attachEvent("onpropertychange", fCallback);
};
} else {
// For browsers that do not support W3C or IE event functions
WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
return false;
};
WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
return false;
};
WebBrowser.prototype.addChangeEvent = function(elmTarget, fCallback) {
return false;
};
}
}
widgets_flag = true;
var widgets = new Widgets();
var browser = new WebBrowser();
function initApp() {
widgets.init();
}
//alertdialog1_class.js
/**
*
* The Alert function checks the value of text box for a value between 1 and 10
*
* @contructor
*/
function Alert( alert_id, message_id, close_id ) {
this.alert_id = alert_id;
this.message_id = message_id;
this.close_id = close_id;
this.guess = null;
}
/**
* init is a subclass of Guess
*
* @member Guess
*
* @return nothing
*/
Alert.prototype.init = function() {
this.node_alert = document.getElementById(this.alert_id);
this.node_message = document.getElementById(this.message_id);
this.node_close = document.getElementById(this.close_id);
var obj = this;
browser.addEvent(this.node_alert, "keydown", function(event) {handleAlertKeyDownEvent(event, obj ); }, true);
browser.addEvent(this.node_close, "click", function(event) {hideAlert( obj ); }, true);
}
/**
* hideAlert
*
* @param ( id ) id of alert box to hide
*
* @return nothing
*
*/
function hideAlert( alert_obj ) {
alert_obj.node_alert.style.display = "none";
alert_obj.node_alert.setAttribute("aria-hidden", "true");
browser.releaseMouseCapture( alert_obj.node_alert,
alert_obj.mouse_click_event,
alert_obj.mouse_down_event,
alert_obj.mouse_move_event,
alert_obj.mouse_up_event
);
alert_obj.guess.node_text.focus();
alert_obj.guess.node_text.select();
}
/**
* showAlert
*
* @param ( string ) message is the text string for the dialog
*
* @return nothing
*
*/
function showAlert( alert_obj, message ) {
alert_obj.node_message.innerHTML = message;
var obj = alert_obj;
alert_obj.mouse_click_event = function(event) {handleAlertMouseClickEvent(event, obj ); };
alert_obj.mouse_down_event = function(event) {handleAlertMouseDownEvent(event, obj ); };
alert_obj.mouse_move_event = function(event) {handleAlertMouseMoveEvent(event, obj ); };
alert_obj.mouse_up_event = function(event) {handleAlertMouseUpEvent(event, obj ); };
browser.setMouseCapture( alert_obj.node_alert,
alert_obj.mouse_click_event,
alert_obj.mouse_down_event,
alert_obj.mouse_move_event,
alert_obj.mouse_up_event
);
alert_obj.node_alert.style.display = "block";
alert_obj.node_alert.style.position = "absolute";
alert_obj.node_alert.style.top= ( (alert_obj.guess.node_box.offsetHeight - alert_obj.node_alert.offsetHeight ) / 2 ) + browser.calculateOffsetTop( alert_obj.guess.node_box ) + "px";
alert_obj.node_alert.style.left = ( (alert_obj.guess.node_box.offsetWidth - alert_obj.node_alert.offsetWidth ) / 2 ) + browser.calculateOffsetLeft( alert_obj.guess.node_box ) + "px";
alert_obj.node_alert.setAttribute("aria-hidden", "false");
alert_obj.node_alert.focus();
}
/**
* handleAlertKeyDownEvent
*
* @param ( event object ) event
*
* @return nothing
*
*/
function handleAlertKeyDownEvent( event, alert_obj ) {
var e = event || window.event;
if( (e.keyCode == KEY_SPACE ) ||
(e.keyCode == KEY_ESCAPE ) ||
(e.keyCode == KEY_ENTER ) ){
hideAlert( alert_obj );
} // endif
return browser.stopPropagation(e);
}
/**
* handleAlertMouseClickEvent
*
* @param ( event object ) event
*
* @return nothing
*
*/
function handleAlertMouseClickEvent( event, alert_obj ) {
var e = event || window.event;
if( alert_obj.node_close == browser.target( e ) ) {
hideAlert( alert_obj );
}
return browser.stopPropagation(e);
}
/**
* handleAlertMouseDownEvent
*
* @param ( event object ) event
*
* @return nothing
*
*/
function handleAlertMouseDownEvent( event, alert_obj ) {
var e = event || window.event;
return browser.stopPropagation(e);
}
/**
* handleAlertMouseMoveEvent
*
* @param ( event object ) event
*
* @return nothing
*
*/
function handleAlertMouseMoveEvent( event, alert_obj ) {
var e = event || window.event;
return browser.stopPropagation(e);
}
/**
* handleAlertMouseUpEvent
*
* @param ( event object ) event
*
* @return nothing
*
*/
function handleAlertMouseUpEvent( event, alert_obj ) {
var e = event || window.event;
return browser.stopPropagation(e);
}
/**
*
* The checkGuess function checks the value of text box for a value between 1 and 10
*
* @contructor
*/
var MAX_NUM = 10;
var MIN_NUM = 1;
function Guess( text_id, check_id, again_id, box_id, alert ) {
this.text_id = text_id;
this.check_id = check_id;
this.again_id = again_id;
this.box_id = box_id;
this.alert = alert;
this.max_num = MAX_NUM;
this.min_num = MIN_NUM;
this.value = 1;
}
/**
* init is a subclass of Guess
*
* @member Guess
*
* @return nothing
*/
Guess.prototype.init = function() {
this.node_text = document.getElementById(this.text_id);
this.node_check = document.getElementById(this.check_id);
this.node_again = document.getElementById(this.again_id);
this.node_box = document.getElementById(this.box_id);
var obj1 = this;
var obj2 = this.alert;
newGuessValue( this );
this.alert.guess = obj1;
browser.addEvent(this.node_text, "keydown", function(event) {handleGuessKeyDownEvent(event, obj1, obj2 ); }, false);
browser.addEvent(this.node_check, "click", function(event) {handleCheckGuessClickEvent(event, obj1, obj2); }, false);
browser.addEvent(this.node_again, "click", function(event) {handlePlayAgainClickEvent(event, obj1 ); }, false);
}
/**
* newGuessValue is a subclass of Guess
*
* @member Guess
*
* @return nothing
*/
function newGuessValue( guess ) {
guess.value = Math.floor(Math.random() * (guess.max_num.valueOf() - guess.min_num.valueOf() + 1) ) + guess.min_num.valueOf();
guess.count = 0;
guess.node_text.value = "";
guess.node_text.setAttribute("aria-invalid", "false");
}
/**
* handleGuessKeyDownEvent checks the guess and generates alert based on the guess
*
* @param ( event ) event is the event handler for the event
* @param ( Guess object ) guess is the guesss object that is the target of the keyboard event
*
* @return false to stop event propagation if mouse event was used by handler, else true
*/
function handleGuessKeyDownEvent( event, guess, alert ) {
var e = event || window.event;
// Check to see if the value is valid
if( isNaN( guess.node_text.value ) ||
(guess.node_text.value.valueOf() < guess.min_num.valueOf() ) ||
(guess.node_text.value.valueOf() > guess.max_num.valueOf() ) ) {
guess.node_text.setAttribute("aria-invalid", "true");
} else {
guess.node_text.setAttribute("aria-invalid", "false");
} // endif
if( e.keyCode == KEY_ENTER )
handleCheckGuessClickEvent( event, guess, alert );
}
/**
* handleCheckGuessOnClick checks the guess and generates alert based on the guess
*
* @param ( event ) event is the event handler for the event
* @param ( Guess object ) guess is the guesss object that is the target of the keyboard event
*
* @return false to stop event propagation if mouse event was used by handler, else true
*/
function handleCheckGuessClickEvent( event, guess, alert ) {
guess.count++;
var guess_value = new Number( guess.node_text.value );
var target_value = new Number( guess.value );
var guess_count = new Number( guess.count );
if( guess.node_text.value == "" ) {
showAlert( alert, "You need to enter a value!" );
return browser.stopPropagation( event );
}
if( isNaN( guess.node_text.value ) ) {
showAlert( alert, """ + guess.node_text.value + "" is not a number." );
return browser.stopPropagation( event );
}
if( (guess_value.valueOf() < guess.min_num.valueOf() ) || (guess_value.valueOf() > guess.max_num.valueOf() ) ) {
showAlert(alert, guess_value + " is not between " + guess.min_num + " and " + guess.max_num );
return browser.stopPropagation( event );
}
if( guess_value.valueOf() == target_value.valueOf() ) {
if( guess_count == 1 )
showAlert( alert, guess_value + " is right, you got it on your first try!" );
else
showAlert( alert, guess_value + " is right, it only took you " + guess_count + " tries!" );
} else {
if( guess, guess_value.valueOf() < target_value.valueOf() ) {
showAlert(alert, guess_value + " is to low, try a higher number." );
} else {
showAlert(alert, guess_value + " is to high, try a lower number." );
} // endif
} // endif
return browser.stopPropagation( event );
}
/**
* handlePlayAgainOnClick checks the guess and generates alert based on the guess
*
* @param ( event ) event is the event handler for the event
* @param ( Guess object ) guess is the guesss object that is the target of the keyboard event
*
* @return false to stop event propagation if mouse event was used by handler, else true
*/
handlePlayAgainClickEvent = function( event, guess ) {
newGuessValue( guess );
guess.node_text.focus();
}
</script>
</head>
<body onload="widgets.init()">
<div role="application">
<script type="text/javascript">
var alert1 = new Alert('alert1', 'alert1_message', 'alert1_close' );
widgets.add( alert1 );
var guess1 = new Guess('guess1_text', 'guess1_check', 'guess1_again', 'guess1', alert1);
widgets.add( guess1 );
</script>
<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.
A <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 for="guess1_text">Guess a number between 1 and 10</label>
<input type="text" id="guess1_text" size="3" 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 id="alert1" role="alertdialog" tabindex="-1" aria-hidden="true" aria-labelledby="alert1_title">
<p id="alert1_title" class="title">Number Guess Alert Box</p>
<p id="alert1_message">No Message</p>
<input id="alert1_close" type="button" value="Close" />
</div>
</div></body>
</html>