{% extends "global/Page.html" %}
{{ block title }}
    <h4><b>
        <center>TASK {{ tn }}</center>
    </b></h4>
{{ endblock }}
{% block content %}
<style>
    .powered-by-otree {
    display: none !important;
}
</style>
<p>
    <center style="font-size:24px;">Letters: <b>S, A, R, I, T, E, N</b></center>
</p>

<center><input type="text" id="word_input"></center>
<br>
<center><button type="button" onclick="submitWord()">Submit</button></center>

<br>
<center>
    <p>
        Submissions: <span id="list">{{ words_submitted }}</span>
    </p>
</center>
{% endblock %}

{% block scripts %}
<script>
var word;

function submitWord() {
    word = document.getElementById("word_input").value;
    if (word === "") return;
    liveSend({ type: 'submit', "word": word });
}
function liveRecv(data) {
    // const innerData = Object.values(data)[1]; // use this for local
    const innerData = data; // use this for deployment
    document.getElementById("list").innerText = innerData.words_submitted;
    document.getElementById("word_input").value = "";
}

document.addEventListener('keydown', function (e) {
    if (e.key === 'Enter') {
        {submitWord();}
    }
  });

history.pushState(null, null, location.href);
window.onpopstate = function () {
    history.go(1);
};
</script>
{% endblock %}