templates/answer.html

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        // populate answer fields
        $(function() {
            var pathName = window.location.pathname;
            var username = pathName.substring(pathName.lastIndexOf('/')+1);
            $.get("get_questions", {name: username}, function(data) {
                console.log(data);
                $("#question1").text(data[0]);
                $("#question2").text(data[1]);
            })
        })
    </script>
    <script>
        // button click
        $(function() {
            $('#ansSubmit').click(function() {
                console.log("name");
                var ans1 = $("#answer1").val();
                var ans2 = $("#answer2").val();
                var pathName = window.location.pathname;
                var username = pathName.substring(pathName.lastIndexOf('/')+1);
                $.post('/submit', {name: username, answer1: ans1, answer2: ans2}, function(response) {
                        console.log("it worked");
                    });
                });
            });
    </script>
</head>
<body>
	
	<p>Answer these two prompts. Be creative! You can only submit once</p>
	<div id="q1">
		<label for="answer1" id="question1">PROMPT 1 HERE</label>
		<input type="text" id="answer1">
	</div>
	<div id="q2">
		<label for="answer2" id="question2">PROMPT 2 HERE</label>
		<input type="text" id="answer2">
	</div>

	<a id="ansSubmit" href="/vote">Submit</a>

</body>
</html>