input = string

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="popup" id="foo" data-history="false" data-theme="b">
    <div class="ui-content">
        <p class="msg"></p> <a href="#" data-rel="back" class="ui-btn">Got it</a>

    </div>
</div>
<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

$(function () {
    $("#foo").popup();
});

function popup(msg, status) {
    if (status == "open") {
        $("#foo").find(".msg").text(msg).end().popup("open", {
            transition: "pop"
        });
    } else {
        $("#foo").popup("close");
    }
}

$('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.');
            popup("You sure know your way with animals.", "open");
            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');
                popup("There\'s no next page.", "open");
            }
        } else if (accepted) {
            //alert('Well, the right answer was ' + answer + ' but ' + input + ' works too.');
            popup("Well, the right answer was " + answer + " but " + input + " works too..", "open");
            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');
                popup("There\'s no next page.", "open");
            }
        } else {
            // alert(wrong + ' is not the right answer, try harder or click on Hint.');
            popup(wrong + ' is not the right answer, try harder or click on Hint.', "open");

        }
    }

});