The Perl Toolchain Summit needs more sponsors. If your company depends on Perl, please support this very important event.
CANID / Yote-0.2 / yote_root / html / yote / sample / secret_collect.html 
<html>
  <head>
    <title>Secret Collect</title>
    <script src="/yote/js/jquery-latest.js"></script>
    <script src="/yote/js/jquery.cookie.js"></script>
    <script src="/yote/js/jquery.base64.min.js"></script>
    <script src="/yote/js/json2.js"></script>
    <script src="/yote/js/yote.js"></script>
    <script src="/yote/js/yote.util.js"></script>
    <script>
    $().ready(function(){
        $.yote.init();
        $.yote.debug = false;
        $('#play_div').hide();
        $('#insert_questions_div').hide();
        $('#guess_div').hide();
    
        var secret_collect = $.yote.fetch_app('Yote::Sample::SecretCollect');

        var collectible_riddle;

        function on_login() {
            // set up controls
            $('#play_div').show();
            $('#insert_go').click( function() {
                secret_collect.add_riddle( {
                    question:$('#question_txt').val(),
                    answer:$('#answer_txt').val()
                } ); 
                $('#answer_txt').val('');
                $('#question_txt').val('');
                refresh();
            } );
            $('#guess_go').click( function() {
                var ans = secret_collect.guess_riddle({
                    riddle:collectible_riddle,
                    answer:$('#guess_txt').val()
                } );
                if( ans == true ) {
                    alert( "Correct, collecting" );
                } else {
                    alert( "Wrong answer" );
                }
                $('#guess_txt').val('');
                refresh();
            } );

            refresh();
        } //on_login

        function refresh() {
	    var account = secret_collect.account();
            $('#my_riddles_div').empty();
            $('#my_riddles_div').append( "My Riddles<UL id=my_riddles_ul></UL>" );
            
            $('#collected_span').empty();
            $('#collected_span').append( account.get_guesses() );

            var riddles = account.get_my_riddles();
            for( var i=0; i<riddles.length(); ++i ) {
                var riddle = riddles.get( i );
                $('#my_riddles_ul').append( "<LI>" + riddle.get_question() + "</LI>" );
            }
            if( secret_collect.can_start() == true ) {
                $('#guess_div').show();
                $('#insert_questions_div').hide();
                
                collectible_riddle = secret_collect.random_riddle();
                
                $('#question_span').empty();
                $('#question_span').append( '<b>' + collectible_riddle.get_question() + '</b>' );
                
            } else {
                $('#guess_div').hide();
                $('#insert_questions_div').show();                
            }
        } //refresh

        function on_logout() {
	    $('#play_div').hide();
        }

        if( $.yote.is_logged_in() ) {
            on_login();
        }

        // put account management controls in a div.
        $.yote.util.make_login_box({target:'#login_div',
                                    on_login:on_login,
                                    on_register:on_login,
                                    on_logout:on_logout
                                   });
    });
    </script>
</head>
<body>
<div id=login_div></div>

 <div id=play_div style=display:none>
    <div id=my_riddles_div></div>
    Collection Attempts <span id=collected_span></span>
    <div id=insert_questions_div>
     Question <input id=question_txt type=text size=100><br>
     Answer  <input id=answer_txt type=text size=100><br>
     <button type=button id=insert_go>Add</button>
    </div>
    <div id=guess_div>
     Question <span id=question_span></span><br>
     Answer <input id=guess_txt type=text size=100><br>
     <button type=button id=guess_go>Guess</button>
    </div>
</div>
</body></html>