test.html 12 KB
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Teste</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?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="/static/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/css/github.css">  <!-- syntax highlight -->
    <link rel="stylesheet" href="/static/css/sticky-footer-navbar.css">
    <link rel="stylesheet" href="/static/css/test.css">

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

<!-- My javascripts -->
    <script src="/static/js/question_disabler.js"></script>
    <script src="/static/js/prevent_enter_submit.js"></script>
    <script src="/static/js/tabkey_in_textarea.js"></script>
    <script src="/static/js/detect_unfocus.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="#">
        ${t['title']}
      </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">${t['student']['name']}</span>
                (<span id="number">${t['student']['number']}</span>)
                <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li class="active"><a href="/test">Teste</a></li>
            <li><a data-toggle="modal" data-target="#sair" id="form-button-submit"><i class="fa fa-sign-out" aria-hidden="true"></i> Sair</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- ===================================================================== -->
<div class="container">
    <div class="row">

        <form action="/correct/" method="post" id="test" autocomplete="off">
            <%!
                import yaml
                from tools import md_to_html
            %>
            <%
                total_points = sum(q['points'] for q in t['questions'])
            %>
            % if t['debug']:
                <pre>
                    ${yaml.dump({k:v for k,v in t.items() if k!='questions'})}
                </pre>
            % endif

            % for i,q in enumerate(t['questions']):
                <div class="ui-corner-all custom-corners">
                    % if q['type'] == 'information':
                        <div class="panel panel-info drop-shadow">
                            <div class="panel-heading clearfix">
                                <h4 class="panel-title pull-left">
                                    <i class="fa fa-info-circle" aria-hidden="true"></i>
                                    ${q['title']}
                                </h4>
                            </div>
                            <div class="panel-body">
                                ${md_to_html(q['text'], q['ref'], q['files'])}
                            </div>
                        </div>
                    % elif q['type'] == 'warning':
                        <div class="alert alert-warning drop-shadow" role="alert">
                            <h4>
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                ${q['title']}
                            </h4>
                            <p>
                                ${md_to_html(q['text'], q['ref'], q['files'])}
                            </p>
                        </div>
                    % elif q['type'] == 'alert':
                        <div class="alert alert-danger drop-shadow" role="alert">
                            <h4>
                                <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                                ${q['title']}
                            </h4>
                            <p>
                                ${md_to_html(q['text'], q['ref'], q['files'])}
                            </p>
                        </div>

                    % else:
                    <div class="panel panel-primary drop-shadow">
                        <div class="panel-heading clearfix">
                            <h4 class="panel-title pull-left">
                                ${q['title']}
                            </h4>
                            <div class="pull-right">
                                Classificar&nbsp;
                                <input type="checkbox" class="question_disabler" data-size="mini" name="answered-${i}" id="answered-${i}" checked="">
                            </div>
                        </div>
                        <div class="panel-body" id="example${i}">
                            <div class="question">
                                ${md_to_html(q['text'], q['ref'], q['files'])}
                            </div>

                            <fieldset data-role="controlgroup">
                                % if q['type'] == 'radio':
                                    <div class="list-group">
                                    % for opt in q['options']:
                                        <a class="list-group-item">
                                            ${md_to_html('<input type="radio" name="{0}" id="{0}:{1}" value="{1}" {2}/> '.format(i, loop.index, 'checked' if q['answer'] is not None and str(loop.index) == q['answer'] else '') + opt, q['ref'], q['files'])}
                                        </a>
                                    % endfor
                                    </div>

                                % elif q['type'] == 'checkbox':
                                    <div class="list-group">
                                    % for opt in q['options']:
                                        <a class="list-group-item">
                                            ${md_to_html('<input type="checkbox" name="{0}" id="{0}:{1}" value="{1}" {2}/> '.format(i, loop.index, 'checked' if q['answer'] is not None and str(loop.index) in q['answer'] else '') + opt, q['ref'], q['files'])}
                                        </a>
                                    % endfor
                                    </div>
                                % elif q['type'] in ('text', 'text_regex', 'text_numeric'):
                                    <input type="text" name="${i}" class="form-control" value="${q['answer'] if q['answer'] is not None else ''}">
                                % elif q['type'] == 'textarea':
                                    <textarea class="form-control" rows="${q['lines']}" name="${i}">${q['answer'] if q['answer'] is not None else ''}</textarea><br />
                                % endif
                            </fieldset>

                            % if t['show_hints']:
                                % if 'hint' in q:
                                    <p>
                                    <button class="btn btn-sm btn-warning" type="button" data-toggle="collapse" data-target="#hint-${i}" aria-expanded="false" aria-controls="hint-${i}">
                                        Ajuda
                                    </button>
                                    </p>
                                    <div class="collapse" id="hint-${i}">
                                        <div class="well">
                                            ${md_to_html(q['hint'], q['ref'], q['files'])}
                                        </div>
                                    </div>
                                % endif  # hint
                            % endif  # show_hints

                            % if t['show_points']:
                                <p class="text-right">
                                <small>(Cotação: ${round(q['points'] / total_points * 20.0, 1)} pontos)</small>
                                <p>
                            % endif

                        </div> <!-- panel-body -->


                        % if t['debug'] or t['show_ref']:
                            <div class="panel-footer">

                            % if t['debug']:
                                <pre><code>
                                    ${yaml.dump(q)}
                                </code></pre>
                            % endif

                            % if t['show_ref']:
                                <dl class="dl-horizontal">
                                <dt>filename:</dt>
                                <dd>${q['filename']}</dd>
                                <dt>ref:</dt>
                                <dd>${q['ref']}</dd>
                                </dl>
                            % endif

                            </div>
                        % endif
                    </div> <!-- panel -->
                    % endif
                </div> <!-- ui-corner-all custom-corners -->
            % endfor
            <hr>
            <button type="button" class="btn btn-danger drop-shadow" data-toggle="modal" data-target="#confirmar" id="form-button-submit">
              Submeter teste
            </button>
        </form>
    </div>

    <!-- Modal de confirmacao submissao -->
    <div class="modal fade" id="confirmar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Deseja submeter o teste?</h4>
          </div>
          <div class="modal-body">
            Se submeter, o teste será enviado para classificação e já não poderá voltar atrás.
            Veja se respondeu a todas as questões e desactive as que não pretende classificar.
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-success btn-lg" data-dismiss="modal">Não!</button>
            <button form="test" type="submit" class="btn btn-danger btn-lg">Sim, submeter</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal de confirmacao sair -->
    <div class="modal fade" id="sair" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Deseja sair?</h4>
          </div>
          <div class="modal-body">
            Se sair, será considerada desistência da prova e terá uma classificação de 0 valores.
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-success btn-lg" data-dismiss="modal">Não!</button>
            <a href="/giveup" class="btn btn-danger btn-lg" role="button">Sim, desistir do teste</a>
          </div>
        </div>
      </div>
    </div>
</div>
</body>
</html>