rgardner · January 31, 2016 06:10
diff --git a/ajax.html b/ajax.html
 {% extends "layout.html" %}
 {% block title %}Period #{{ period.period_num }}{% endblock %}
 {% block head %}
    {{ super() }}
    <style type="text/css">
        .hidden {
            display: none;
        }
    </style>
 {% endblock %}
 {% block content %}
    <p>Total Score: {{ subject.score }}</p>
    <h1>Period #{{ period.period_num }}</h1>

    <p>You are Player A</p>
    {{ player_table }}

    <ul id="earlier-announcements">
    {% for player, announcement in announcements %}
        <li>Player {{ player }} votes {{ announcement }}</li>
    {% else %}
        <li>You are going first.</li>
    {% endfor %}
    </ul>

    <p>Your private signal is: {{ period.subject_signal }}</p>
    {% from "_formhelpers.html" import render_field %}

    <form>
        <dl>
            <dt>What color is the jar? Please enter red, blue, or abstain</dt>
            <dd><input id="vote" name="vote" type="text" value="{{ subject_vote }}" required></dd>
        </dl>
        <p><input id="submitBtn" type="submit" value="Submit">
    </form>

    <div id="results" class={{ "hidden" if period.score == 0 }}>
        <h2>Results</h2>
        <p id="resultsMessage">{{ period.message }}</p>
        <ul id="allAnnouncements">
        {% for player, announcement in announcements %}
            <li>Player {{ player }} voted {{ announcement }}</li>
        {% endfor %}
        </ul>

        {{ next_link }}
    </div>

    <script>
    $(function() {
        var COMPLETED = {{ completed|safe }};

        // override form submit to use AJAX
        if (COMPLETED) {
            disableForm();
        } else {
            $('form').bind('submit', function (e) {
                e.preventDefault();

                // Validate form.
                var form = $('form');
                form.validate();
                if (!form.valid()) return;

                disableForm();
                var vote = $('#vote').val();
                $('#vote').prop('disabled', true);
                var params = {subject: {{ subject.id }}, period: {{ period.period_num }}, vote: vote};
                $.getJSON($SCRIPT_ROOT + '_vote', params, function(data) {
                    $('#resultsMessage').text(data.message);
                    $('#allAnnouncements').empty();
                    for (var i = 0; i < data.announcements.length; i++) {
                        var li = document.createElement('li');
                        li.textContent = data.announcements[i];
                        $('#allAnnouncements').append(li);
                    }
                    $('#results').show();
                });
            });
        }
    });

    function disableForm () {
        $('#vote').prop('disabled', true);
        $('#submitBtn').prop('disabled', true);
    }
    </script>
 {% endblock %}
diff --git a/layout.html b/layout.html
 <!doctype HTML>
 <html lang="en">
 <head>
    {% block head %}
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <title>{% block title %}{% endblock %} - MTurk Experiment</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
    <script type="text/javascript">
        var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
    </script>
    {% endblock %}
 </head>
 <body>
    <div id="content">{% block content %}{% endblock %}</div>
 </body>
 </html>
	{% extends "layout.html" %}
	{% block title %}Period #{{ period.period_num }}{% endblock %}
	{% block head %}
	{{ super() }}
	<style type="text/css">
	.hidden {
	display: none;
	}
	</style>
	{% endblock %}
	{% block content %}
	<p>Total Score: {{ subject.score }}</p>
	<h1>Period #{{ period.period_num }}</h1>

	<p>You are Player A</p>
	{{ player_table }}

	<ul id="earlier-announcements">
	{% for player, announcement in announcements %}
	<li>Player {{ player }} votes {{ announcement }}</li>
	{% else %}
	<li>You are going first.</li>
	{% endfor %}
	</ul>

	<p>Your private signal is: {{ period.subject_signal }}</p>
	{% from "_formhelpers.html" import render_field %}

	<form>
	<dl>
	<dt>What color is the jar? Please enter red, blue, or abstain</dt>
	<dd><input id="vote" name="vote" type="text" value="{{ subject_vote }}" required></dd>
	</dl>
	<p><input id="submitBtn" type="submit" value="Submit">
	</form>

	<div id="results" class={{ "hidden" if period.score == 0 }}>
	<h2>Results</h2>
	<p id="resultsMessage">{{ period.message }}</p>
	<ul id="allAnnouncements">
	{% for player, announcement in announcements %}
	<li>Player {{ player }} voted {{ announcement }}</li>
	{% endfor %}
	</ul>

	{{ next_link }}
	</div>

	<script>
	$(function() {
	var COMPLETED = {{ completed\|safe }};

	// override form submit to use AJAX
	if (COMPLETED) {
	disableForm();
	} else {
	$('form').bind('submit', function (e) {
	e.preventDefault();

	// Validate form.
	var form = $('form');
	form.validate();
	if (!form.valid()) return;

	disableForm();
	var vote = $('#vote').val();
	$('#vote').prop('disabled', true);
	var params = {subject: {{ subject.id }}, period: {{ period.period_num }}, vote: vote};
	$.getJSON($SCRIPT_ROOT + '_vote', params, function(data) {
	$('#resultsMessage').text(data.message);
	$('#allAnnouncements').empty();
	for (var i = 0; i < data.announcements.length; i++) {
	var li = document.createElement('li');
	li.textContent = data.announcements[i];
	$('#allAnnouncements').append(li);
	}
	$('#results').show();
	});
	});
	}
	});

	function disableForm () {
	$('#vote').prop('disabled', true);
	$('#submitBtn').prop('disabled', true);
	}
	</script>
	{% endblock %}
	<!doctype HTML>
	<html lang="en">
	<head>
	{% block head %}
	<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
	<title>{% block title %}{% endblock %} - MTurk Experiment</title>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
	<script type="text/javascript">
	var $SCRIPT_ROOT = {{ request.script_root\|tojson\|safe }};
	</script>
	{% endblock %}
	</head>
	<body>
	<div id="content">{% block content %}{% endblock %}</div>
	</body>
	</html>