{% extends "global/Page.html" %}

{% block title %}
{% if player.round_number == 1 %}
Word Unscrambling Practice
{% else %}
Word Unscrambling Task
{% endif %}
{% endblock %}

{% block content %}

<p>Unscramble the word below. Type your answer and click "Submit".</p>
<p><em>Tip: If you are stuck on a word, you can type any incorrect answer and click "Submit" to skip to a new word.</em></p>

{% if player.round_number > 1 %}
<p>Your goal is to unscramble <strong><u>at least 1</u></strong> word correctly.</p>
{% endif %}
<br>

<p>Scrambled Word: <strong><span style="color: blue; font-size: 24px;" id="scrambled">{{ player.scramble_word }}</span></strong></p>

<br>

<input type="text" id="inputbox" value="" style="font-size: 18px; padding: 5px; width: 200px;" autocomplete="off"><br><br>

<button onclick="submitWord()" type="button" id="my_submit" class="btn btn-primary">Submit</button><br><br>

Correct: <span id="correct">{{ player.num_correct }}</span>

{% endblock %}

{% block script %}
<script>

    function liveRecv(data) {
        console.log(data);
        $('#scrambled').text(data['scrambled']);
        $('#correct').text(data['correct']);
    }

    function submitWord() {
        var response = document.getElementById("inputbox").value;
        document.getElementById('inputbox').value = "";
        liveSend(response);
    }

    // Allow Enter key to submit
    document.getElementById('inputbox').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            submitWord();
        }
    });

</script>
{% endblock %}