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

{% block title %}
    Schooltime Final Answer Page
{% endblock %}

{% block content %}

<b>Words:</b>
<ul>
{% for word in player.get_split_words %}
    <li>{{word}}</li>
{% endfor %}
</ul>


<ul>
<p>Mouse over the field to see the answers. Click to choose an answer. Remember, the correct answer is different than the three words in the problem.</p>
    <li>
    <!-- list player first choice and guesses -->
        <div id="playerchoice">
            <p class="choice" data-player="{{player.id_in_group}}" data-choicetype="first_choice" data-ans="{{player.pair_choice}}" data-conf="{{player.confidence_first_answer}}">
                Player {{player.id_in_group}} chose <b>{{player.pair_choice}}</b> with a confidence of {{player.confidence_first_answer}}%
            </p>
        </div>
        <ul style="margin-right: 1em">
            {% if player.guess1 != None %}
            <div id="playerchoice">
                <li>
                    <p class="choice" data-player="{{player.id_in_group}}" data-choicetype="guess1" data-ans="{{player.guess1}}" data-conf="{{player.confidence1}}">
                        Player {{player.id_in_group}} guessed <b>{{player.guess1}}</b> with a confidence of {{player.confidence1}}%
                    </p>
                </li>
            </div>
            {% endif %}
            {% if player.guess2 != None %}
            <div id="playerchoice">
                <li>
                    <p class="choice" data-player="{{player.id_in_group}}" data-choicetype="guess2" data-ans="{{player.guess2}}" data-conf="{{player.confidence2}}">
                        Player {{player.id_in_group}} guessed <b>{{player.guess2}}</b> with a confidence of {{player.confidence2}}%
                    </p>
                </li>
            </div>
            {% endif %}                    
            {% if player.guess3 != None %}
            <div id="playerchoice">
                <li>
                    <p class="choice" data-player="{{player.id_in_group}}" data-choicetype="guess3" data-ans="{{player.guess3}}" data-conf="{{player.confidence3}}">
                        Player {{player.id_in_group}} guessed <b>{{player.guess3}}</b> with a confidence of {{player.confidence3}}%
                    </p>
                </li>
            </div>
            {% endif %}
        </ul>
    </li>
</ul>

<!-- convert all of the following values into just a json format -->
<!-- e.g. [[mouse_over,player1,guess1,1000]] -->
<!-- format: [[action(mouse_on,mouse_off,click), player, guess, timestamp]] -->



<div id="hidden_input">

    {% formfield player.player_choice_json %}
    {% formfield player.player_choice_final %}
    {% formfield player.player_choice_final_conf %}

</div>


<style>
        .choice{
            opacity:0; 
            display: block;
            margin-bottom: 0px;
            padding: 10px;
        }
    
        .choice:hover{
            opacity:1 !important;
        }

		#hidden_input{
			display:none;
		}

#playerchoice{
    display: inline-block;
    background: #EEEEEE;
    margin: 10px;
    width: 80%;
    cursor: pointer;
}
</style>

<p>Your final choice:</p>
<div id="player_choice_display" style="font-weight: bold"> [None chosen yet] </div>


<script>
page_start=new Date().getTime();

choice_input=document.getElementById("id_player_choice_final")
choice_display=document.getElementById("player_choice_display")
choice_conf=document.getElementById("id_player_choice_final_conf")

clicklist=[]

<!-- e.g. [[mouse_over,player1,guess1,1000]] -->
<!-- format: [[action(mouse_on,mouse_off,click), player, guess, timestamp]] -->

json_log=document.getElementById("id_player_choice_json")

activity_list=[]

choices=document.getElementsByClassName("choice");

for (let item of choices) {
    
    item.onmouseover = function(){
        activity_list.push(
            [
                "mouse_on",
                "player_"+item.getAttribute("data-player"),
                item.getAttribute("data-choicetype"),
                new Date().getTime()-page_start,
                item.getAttribute("data-ans"),
                item.getAttribute("data-conf")
            ]
        )
        json_log.value=JSON.stringify(activity_list);
    };
    
    item.onmouseleave = function(){
        activity_list.push(
            [
                "mouse_off",
                "player_"+item.getAttribute("data-player"),
                item.getAttribute("data-choicetype"),
                new Date().getTime()-page_start,
                item.getAttribute("data-ans"),
                item.getAttribute("data-conf")
            ]
        )
        json_log.value=JSON.stringify(activity_list);
    };

    item.onclick = function(){
        activity_list.push(
            [
                "mouse_off",
                "player_"+item.getAttribute("data-player"),
                item.getAttribute("data-choicetype"),
                new Date().getTime()-page_start,
                item.getAttribute("data-ans"),
                item.getAttribute("data-conf")
            ]
        )
        json_log.value=JSON.stringify(activity_list);
        choice_input.value=item.getAttribute("data-ans")
        choice_conf.value=item.getAttribute("data-conf")
        choice_display.innerHTML=item.getAttribute("data-ans")
    };
}


</script>



<br>

    {% next_button %}
{% endblock %}