learn.html 4.04 KB
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Learn</title>
    <link rel="icon" href="/static/favicon.ico">

<!-- MathJax -->
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
            tex2jax: {
                inlineMath: [["$$$","$$$"], ["$","$"], ["\\(","\\)"]]
            }
        });
    </script>
    <script type="text/javascript" src="/static/mathjax/MathJax.js?delayStartupUntil=onload&config=TeX-AMS_CHTML-full"></script>

<!-- Bootstrap -->
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap-theme.min.css"> <!-- optional -->

<!-- other -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/css/github.css">
    <!-- <link rel="stylesheet" href="/static/css/sticky-footer-navbar.css"> -->
    <!-- <link rel="stylesheet" href="/static/css/test.css"> -->
    <link rel="stylesheet" href="/static/css/learn.css">

    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/js/nunjucks.min.js"></script>

    <script src="/static/js/learn.js"></script>

</head>
<!-- ===================================================================== -->
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid drop-shadow">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                Jogo!
            </a>
        </div>


        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-user" aria-hidden="true"></i>
                        <span id="name"> {{ name }}</span>
                        (<span id="number">{{ uid }}</span>)
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="/logout"><i class="fa fa-sign-out" aria-hidden="true"></i> Sair</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- ===================================================================== -->
<div class="container">

<form action="/question" method="post" id="question_form" autocomplete="off">
    {% module xsrf_form_html() %}

    <div id="question_div">O jogo está prestes a começar. A bola está do teu lado.
    </div>
</form>

<button class="btn btn-primary" id="submit">Chuta!</button>

</div> <!-- container -->

<script>
$.fn.extend({
    animateCss: function (animationName) {
        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        this.addClass('animated ' + animationName).one(animationEnd, function() {
            $(this).removeClass('animated ' + animationName);
        });
    }
});


function getQuestion() {
    $.ajax({
        type: "POST",
        url: "/question",
        // headers: {"X-XSRFToken": token},
        data: $("#question_form").serialize(),//{'a':10,'b':20},
        dataType: "html", // expected from server
        success: function(response){
            $("#question_div").html(response);
            $('#question_div').animateCss('bounceInDown');
            MathJax.Hub.Queue(["Typeset",MathJax.Hub,"question"]);
        },
        error: function() {alert("Servidor não responde.");}
    });
}


$(document).ready(function() {
    // getQuestion();
    $("#submit").click(getQuestion);
});
</script>

</body>
</html>