input = string Fixed

by Alin Guta

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<div class="meter">
    <span style="width: 0%"></span>
</div>

<audio src="http://imagins.ro/snd/bubble.mp3" id="yes"></audio>
<audio src="http://imagins.ro/snd/wrong2.mp3" id="no"></audio>
<div data-role="popup" id="foo" data-history="false" data-overlay-theme="b" data-theme="b">
    <div class="ui-content">
        <p class="msg"></p> <a href="#" data-rel="back" class="ui-btn else"></a>
    </div>
</div>

<!--ENTRY PAGE-->
<div data-role="page" id="intro">
    <div data-role="main" class="ui-content">
        <a href="#pageone" data-transition="slide"><img src="http://www.clker.com/cliparts/V/K/J/Q/5/W/harta-albastra-romania-md.png" /></a>
    </div>
</div>
<!--FIRST PAGE-->
<div data-role="page" id="pageone">
    <div class="hide answer">dog</div>
    <div class="hide accepted">hound.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" class="ui-footer ui-bar-footer">
        <input type="text" class="" />
    </div>
</div>
<!--SECOND PAGE-->
<div data-role="page" id="pagetwo">
    <div class="hide answer">cat</div>
    <div class="hide accepted">kitten.kitty.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" class="ui-footer ui-bar-footer">
        <input type="text" class="" />
    </div>
</div>

CSS

.meter {
    height: 8px;
    width:100%;
    position:fixed;
    margin-top:0;
    background: #ebebeb;
    z-index:9000;
}
.meter > span {
    display: block;
    height:8px;
    position: relative;
    overflow: hidden;
    background-color: #076e8c;
    -webkit-transition: width 750ms ease-out;
    -moz-transition: width 750ms ease-out;
    -o-transition: width 750ms ease-out;
    transition: width 750ms ease-out;
}
.hide {
    display:none;
}
img {
    width:250px;
    height:auto;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}
.ui-popup {
    background-color:rgba(0, 0, 0, 0.7);
}
.ui-popup-screen {
    background-color: #000 !important;
    opacity: 0.5 !important;
}
div.ui-input-text {
    width: 90% !important;
    margin-left:auto;
    margin-right:auto;
    border:none;
}
.correct {
    background-color:#D7FFE7 !important;
}
.accepted {
    background-color:#FFE9C2 !important;
}
.wrong {
    background-color:#FFDED7 !important;
}
#footer {
    width:100%;
    height:auto;
    position:absolute;
    bottom:0;
}
.ui-footer.ui-bar-footer {
    border: 0 none;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #009999), color-stop(1, #076e8c));
}
#tips {
    position:absolute;
    right:10px;
    top:10px;
}

JavaScript

$(function () {
    $(".meter > span").each(function () {
        $(this)
            .data("origWidth", $(this).width())
            .width(0)
            .animate({
            width: $(this).data("origWidth")
        }, 1200);
    });
});

$(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(),
        tip = $('.tip', page).html();

    if (e.keyCode == 13) {

        if (input == answer) {

            $('.else').html('Next');

            $('input', page).removeClass('wrong').addClass('correct');

            $('.meter > span').css('width', function (i) {
                return $(this).width() + $(this).parent().width() * .1;
            });

            $('#yes').trigger("play"); //sound
            popup("You sure know your way with animals.", "open");
            $("#foo").bind({
                popupafterclose: function (event, ui) {
                    if (page.next("[data-role=page]").length !== 0) {
                        var next = page.next("[data-role=page]");
                        $.mobile.changePage(next, {
                            transition: 'slide'
                        });
                    }
                }
            });

        } else if (input == accepted.split(".")[0] || input == accepted.split(".")[1] || input == accepted.split(".")[2]) {

            $('.else').html('Phew...');

            $('input', page).removeClass('wrong').addClass('accepted');

            $('.meter > span').css('width', function (i) {
   ...