{% extends "global/Page.html" %}
{% load otree static %}
from tabulate import tabulate

{% block title %}
    Quiz
{% endblock %}

{% block content %}
<style>
input {
  width: 10%;
}
</style>
Before continuing on to the first part of the study, we ask that you successfully complete the following quiz (on this and next page).
<br>If you get an answer wrong, you will be told so, and you will have the opportunity to correct your answer.
<br>Your performance on this quiz does not affect your payoff in any way,
        but you will not be able to proceed to the first task until you have correctly answered all of the quiz questions.
    <br>
    <br>
    In answering these quiz questions, you may consult the table provided below.
<style type="text/css">
	table.tableizer-table {
		font-size: 12px;
		border: 1px solid #CCC;
		font-family: Arial, Helvetica, sans-serif;
	}
	.tableizer-table td {
		padding: 4px;
		margin: 3px;
		border: 1px solid #CCC;
	}
	.tableizer-table th {
		background-color: #104E8B;
		color: #FFF;
		font-weight: bold;
	}
</style>
<table class="tableizer-table">
<thead><tr class="tableizer-firstrow"><th>Claiming age </th><th>Claiming period</th><th>Annual Benefit after claiming</th><th>Lump Sum in claiming period</th><th> Total in claiming period</th></tr></thead><tbody>
 <tr><td>62</td><td>1</td><td>14887</td><td>0</td><td>14887</td></tr>
 <tr><td>63</td><td>2</td><td>14887</td><td>15447</td><td>30334</td></tr>
 <tr><td>64</td><td>3</td><td>14887</td><td>31506</td><td>46393</td></tr>
 <tr><td>65</td><td>4</td><td>14887</td><td>48219</td><td>63106</td></tr>
 <tr><td>66</td><td>5</td><td>14887</td><td>65637</td><td>80524</td></tr>
 <tr><td>67</td><td>6</td><td>14887</td><td>83838</td><td>98725</td></tr>
 <tr><td>68</td><td>7</td><td>14887</td><td>102893</td><td>117780</td></tr>
 <tr><td>69</td><td>8</td><td>14887</td><td>122915</td><td>137802</td></tr>
 <tr><td>70</td><td>9</td><td>14887</td><td>144014</td><td>158901</td></tr>
</tbody></table>
<br>
<br>
<ol>
<li>	In the first task I will make decisions in a sequence of <input type="number" name="quiz1"> periods. </li> {{ form.quiz1.errors }}
<li>	Suppose you claim Social Security benefits at age 64. The amount of social security payments you receive at age 62 is  <input type="number" name="quiz2">. {{ form.quiz2.errors }}
    The amount of social security payments you receive at age 64 <input type="number" name="quiz3">. {{ form.quiz3.errors }}
    The amount of social security payments you receive at age 80 is <input type="number" name="quiz4">. {{ form.quiz4.errors }}
</li>
</ol>

    <br>
    Move the consumption choice slider below to answer the following questions:
    <br>
<input type="range" min="14887" max="145350" value="50000" class="slider"
           id="id_consumption1" style="display:inline" step="1">
    <input type="number" min="14887" max="145350" value="50000"
           id="consumption_box1" step="1" style="width: 4em" onkeypress="return event.keyCode != 13;">
    <p>
        If you consume that much, you will get a current period payoff from consumption of: <strong>$<span id="id_payoff"></span></strong>.
    </p>
<ol>
    <li>	Suppose you consumed 15,000, you earnings for current period is $ <input type="number" name="quiz5" step="0.01"> {{ form.quiz5.errors }} </li>
    <li>	Suppose you consumed 20,000, you earnings for current period is $ <input type="number" name="quiz6" step="0.01"> {{ form.quiz6.errors }}</li>
	<li>    Suppose you consumed 25,000, you earnings for current period is $ <input type="number" name="quiz7" step="0.01"> {{ form.quiz7.errors }} </li>
</ol>


<style>
        .slider {
        -webkit-appearance: none;
        width: 100%;
        height: 15px;
        border-radius: 5px;
        background: #d3d3d3;
        outline: none;
        opacity: 1;
        -webkit-transition: .2s;
        transition: opacity .2s;
        }
</style>

<script>
var consBox = document.getElementById("consumption_box1");
var consumption = document.getElementById("id_consumption1");
var payoff = document.getElementById("id_payoff");



    function numberWithCommas(x) {
         return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }


consBox.oninput = function() {
consumption.value = this.value;
if(consBox.value >= 14887 && consBox.value <= 145350)
{document.getElementById('id_payoff').innerHTML = ((1 - Math.exp(-1 * (((this.value) - 14887)/20000)))*3).toFixed(2);
}
else
{document.getElementById('id_payoff').innerHTML = "";
}
}


consumption.oninput = function() {
consBox.value = this.value;
if(consBox.value >= 14887 && consBox.value <= 145350)
{document.getElementById('id_payoff').innerHTML = ((1 - Math.exp(-1 * (((this.value) - 14887)/20000)))*3).toFixed(2);
}
else
{document.getElementById('id_payoff').innerHTML = "";
}
}

</script>


<br>
   {% next_button %}

{% endblock %}