input = string FINAL (2)

by Alin Guta

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/base/jquery-ui.css">
<div data-role="page" id="pageone">
    <div class="hide answer">dog</div>
    <div class="hide accepted">input == 'hound' || input == 'canine'</div>
    <div data-role="main" class="ui-content">
        <img src="http://images.clipartpanda.com/clipart-dog-dog_silhouette_Clip_Art.png" />
    </div>
    <div data-role="footer" id="footer">
        <input type="text" />
    </div>
</div>
<!--SECOND PAGE-->
<div data-role="page" id="pagetwo">
    <div class="hide answer">cat</div>
    <div class="hide accepted">input == 'kitten' || input == 'kitty' || input == 'puss'</div>
    <div data-role="main" class="ui-content">
        <img src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=82506679" />
    </div>
    <div data-role="footer" id="footer">
        <input type="text" />
    </div>
</div>

CSS

.hide {
    display:none;
}
img {
    width:250px;
    height:auto;
    position:absolute;
    left:0;
    right:0;
    margin:auto;
}
.ui-dialog-titlebar-close {
    display: none
}
#footer {
    width:100%;
    height:auto;
    position:absolute;
    bottom:0;
}

JavaScript

$('input').bind('keypress', function (e) {
    var page = $.mobile.pageContainer.pagecontainer("getActivePage"),
        input = $('input', page).val().toLowerCase(),
        answer = $('.answer', page).html(),
        accepted = $('.accepted', page).html(),
        wrong = $('input', page).val().toUpperCase();

    if (e.keyCode == 13) {

        if (input == answer) {

            alert('You sure know your way with animals.');
            if (page.next("[data-role=page]").length !== 0) {
                var next = page.next("[data-role=page]");
                $.mobile.changePage(next, {
                    transition: 'slide'
                });
            } else {
                alert('There\'s no next page');
            }


        } else if (accepted) {
            alert('Well, the right answer was ' + answer + ' but ' + input + ' works too.');
            if (page.next("[data-role=page]").length !== 0) {
                var next = page.next("[data-role=page]");
                $.mobile.changePage(next, {
                    transition: 'slide'
                });
            } else {
                alert('There\'s no next page');
            }

        } else {
            alert(wrong + ' is not the right answer, try harder or click on Hint.');

        }
    }

});