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

{% block title %}
    Home time
{% endblock %}

{% block content %}

<button type="button" id="solitaire_button"> Play solitaire </button>
<button type="button" id="chess_button"> Play chess </button>
<button type="button" id="rest_button"> Just rest </button>
<button type="button" id="study_button"> Study </button>

<br>


<!--<div id="solitaire">
    <iframe src='https://www.embed.com/app/solitaire/klondike.html' style='width: 1200px; height: 600px;' scrolling='no' frameBorder='0'></iframe>
</div>-->

<div id="solitaire">
    <iframe src='https://online-solitaire.com/?platform=embed&logo=null&card_color=null&background_color=null&show_spotlight=true' style='width: 1200px; height: 600px;' scrolling='no' frameBorder='0'></iframe>
</div>


<!--<div id="solitaire_embed" style="width:100%;">
  <div style="position:relative;padding-bottom:75%;border-radius:6px;overflow:hidden;">
     <iframe style="width:100%;height:100%;position:absolute;left:0px;top:0px;border:0px;" frameborder="0" width="100%" height="100%" allowfullscreen="false" src="https://online-solitaire.com/?platform=embed&logo=null&card_color=null&background_color=null&show_spotlight=true" title="Play Klondike (Turn Three) and many more Solitaire games at Online Solitaire"></iframe>
  </div>-->
<!--  <p style="color:#9A9A9A;font-size:16px;line-height:40px;width:100%;text-align:center;">
    Read the <a href="https://online-solitaire.com/#rules">Klondike (Turn Three) rules</a> if you’re new to playing <a href="https://online-solitaire.com/">Solitaire</a>
  </p>-->
<!--</div>-->
    

<div id="chess">

<iframe
 style="width: 100%; height: 550px; overflow: hidden;"
 src="https://playpager.com/embed/chess/index.html"
 scrolling="no">
</iframe>

</div>

<div id="rest">
    <p>You may use this time to rest. </p>
</div>

<div id="task"> 
	<p>   </p>
    <p><b id="instructions"> This task will help you with school time. Try hard to remember how the number and word go together. Type the word and the number associated with this word.</b></p>
    
    <p> Time remaining: <b id="timer">TEST</b></p>
    
    <!-- display list of words -->
    <ul id="practicelist"></ul>

    <!-- input box for answer; change to inputnum and add one for inputword -->
	<p>What is the word?</p>
    <input type="text" id="practice_inputword">
	<p>What is the number?</p>
    <input type="text" id="practice_inputnum">
	

    <!-- submit button -->
    <button type="button" id="practice_submit">Submit</button>

    <!-- give feedback -->
    <p id="practice_feedback"></p>

    <!-- next button to move to next set of words -->
    <button type="button" id="next_item">Next</button>
</div>

<br>

<div id="hidden_input" style="display: none">
    {% formfield player.homechoose_json %}
    {% formfield player.hometime_study_json %}
    
</div>



<script>

start_time=new Date().getTime()
non_task_segment_start=start_time

non_task_sum=0
is_on_task=false

solitaire=document.getElementById("solitaire")
rest=document.getElementById("rest")
task=document.getElementById("task")
chess=document.getElementById("chess")

time_off_task_box=document.getElementById("id_time_off_task")

solitaire.style.display="none";
rest.style.display="none";
task.style.display="none";
chess.style.display="none";

hiddeninput=document.getElementById("id_homechoose_json");
clicklist=[]

seen_words=[]

solitaire_button=document.getElementById("solitaire_button")
rest_button=document.getElementById("rest_button")
study_button=document.getElementById("study_button")
chess_button=document.getElementById("chess_button")

function picksolitaire(){
    console.log("picksolitaire");
    solitaire.style.display="initial";
    rest.style.display="none";
    task.style.display="none";
    chess.style.display="none";
    
    record_click("solitaire")
}

function pickrest(){
    console.log("pickrest");
    solitaire.style.display="none";
    rest.style.display="initial";
    task.style.display="none";
    chess.style.display="none";
    
    record_click("rest")
}

function picktask(){
    if(task.style.display=="none"){
        update_study_word()
    }

    console.log("picktask");
    solitaire.style.display="none";
    rest.style.display="none";
    task.style.display="initial";
    chess.style.display="none";

    record_click("task")
   
}

function pickchess(){
    console.log("pickchess");
    solitaire.style.display="none";
    rest.style.display="none";
    task.style.display="none";
    chess.style.display="initial";

    record_click("chess")
}

function record_click(button){
    
    clicktime=(new Date().getTime()-start_time)
    clicklist.push([button, clicktime])
    
    hiddeninput.value=JSON.stringify(clicklist)
    
    if(!is_on_task){
        non_task_sum+=(new Date().getTime() - non_task_segment_start)
        time_off_task_box.value=non_task_sum
    }
    non_task_segment_start=new Date().getTime()
    is_on_task=(button=="task")

}

solitaire_button.onclick = picksolitaire;
rest_button.onclick = pickrest;
study_button.onclick = picktask;
chess_button.onclick = pickchess;

<!-- study task code below -->



{% autoescape off %}
    words={{numwords}}
{% endautoescape %}

console.log(words)

word_n=0;

practice_list=document.getElementById("practicelist")

<!--change input to inputnum -->
practice_inputnum=document.getElementById("practice_inputnum")
<!-- add inputword -->
practice_inputword=document.getElementById("practice_inputword")

practice_submit=document.getElementById("practice_submit")
practice_feedback=document.getElementById("practice_feedback")
next_item=document.getElementById("next_item")
instructions=document.getElementById("instructions")
timer_el=document.getElementById("timer")

study_log=document.getElementById("id_hometime_study_json")
study_log_list=[]
 <!-- [action_type,question,correct_answer,subject_answer,timestamp] -->

<!-- update_practice_list() -->

<!-- practice_list.innerHTML=words[word_n][0] -->




practice_submit.onclick = function(){
	<!--change to inputword-->
    if(practice_inputword.value.length>0){
        <!-- set the feedback message -->
        if(practice_inputnum.value==words[word_new][1]){
            practice_feedback.innerHTML="Congratulations, you got it correct!"
        }
        else{
            practice_feedback.innerHTML="Sorry, that's incorrect."
        }
		<!--change feedback to reflect inputword and inputnum-->
        practice_feedback.innerHTML+="<br> You answered <b>" + practice_inputword.value + ":  " + practice_inputnum.value + 
			"</b> and the answer was <b>" + words[word_new][0] + ":  " + words[word_new][1] + "</b>"
        next_item.style.display="initial"
        
        <!-- log the action -->
        study_log_list.push([
            "submit_practice",
            words[word_new][0],
            words[word_new][1],
			practice_inputword.value,
            practice_inputnum.value,  <!--changes here too, for inputword and inputnum-->
            (new Date().getTime()-start_time)
        ])
        study_log.value=JSON.stringify(study_log_list)
    }
    else{
        practice_feedback.innerHTML="Type an answer into the input box."
        study_log_list.push([
            "attempt_submit_blank",
            words[word_new][0],
            words[word_new][1],
			practice_inputword.value, <!--changes here too, for inputword and inputnum-->
            practice_inputnum.value,
            (new Date().getTime()-start_time)
        ])   
        study_log.value=JSON.stringify(study_log_list)
    }
}


<!-- allow hitting enter to submit -->
<!--change to inputnum-->
practice_inputnum.onkeydown = function(){
    if (event.keyCode == 13){
        practice_submit.click()
    }
}

/*
function update_practice_list(){
    <!-- remove the previous list -->
    while (practice_list.firstChild) {
        practice_list.removeChild(practice_list.firstChild);
    }
    
    <!-- populate the list with the next words -->
    words[word_n][0].forEach(function(w){
        li=document.createElement("LI")
        li.appendChild(document.createTextNode(w))
        practice_list.appendChild(li)
    })
    
    next_item.style.display="none"
}
*/

timer=-1

function update_timer(){
    <!-- console.log(timer) -->
    if(task.style.display!="none"){
        if(timer==0){
            timer_el.style.display="none"
            timer=-1
            next_item.click()
        } else if(timer>0){
            timer_el.style.display="initial"
            timer_el.innerHTML=timer
            
            timer--;
        }
    }

}

function set_timer(t){
    timer=t
    timer_el.style.display="initial"
    timer_el.innerHTML=timer
}

<!-- display timer -->
setInterval(update_timer, 1000)




<!-- this whole system would be better off being redesigned from scratch -->
<!-- but its not worth the effort while feature requirements are still in flux -->




<!-- if we want to show them the correct values before they try to answer -->
<!-- we can check if the word is in study_log_list -->
<!-- and if so give them the answer instead of an input box -->

function update_study_word(){
    console.log(seen_words)
    console.log(words[word_n][0])
    console.log(seen_words.includes(words[word_n][0]))


    console.log(words[word_n][0])

	<!--change input to inputword and inputnum-->
    practice_inputword.value=""
	practice_inputnum.value=""
    practice_feedback.innerHTML=""   

    if(seen_words.includes(words[word_n][0])){ 
        
        word_new=word_n
        
        set_timer({{Constants.study_timer}})
        
        <!--change instructions for typing word and number-->
		instructions.innerHTML="This task will help you with school time. Remember the pair you just saw. Type the word in the first box. Then type the number associated with this word."
        
        practice_list.innerHTML=words[word_n][0] <!--take out the display of the word from the word-number pair by replacing words[word_n][0] with " "-->
		
		
    
        <!-- show everything we previously hid -->
		<!--change inputnum and inputword also-->
		practice_inputword.style.display="initial"
        practice_inputnum.style.display="initial"
        practice_submit.style.display="initial"
    
        <!-- update_practice_list() -->

        study_log_list.push([
            "next_practice_question",
            words[word_n][0],
            words[word_n][1],
            <!--change here -->
			practice_inputnum.value,
            (new Date().getTime()-start_time)
        ])
        study_log.value=JSON.stringify(study_log_list)
        
        next_item.style.display="none"
        
        word_n=(word_n+1)%words.length

    }
    else {
        seen_words.push(words[word_n][0])
    
        set_timer(10)
        
        instructions.innerHTML="This task will help you with school time. Remember this word and the number associated with it. Try hard to remember how the number and word go together."  
    
        practice_list.innerHTML=words[word_n][0]+": "+ words[word_n][1]
    
        <!--changes here for inputnum and inputword also -->
		practice_inputnum.style.display="none"
        practice_inputword.style.display="none"
        
		practice_submit.style.display="none"
        
        
        study_log_list.push([
            "next_practice_question",
            words[word_n][0],
            words[word_n][1],
            "initial_presentation",
            (new Date().getTime()-start_time)
        ])
        study_log.value=JSON.stringify(study_log_list)
        

    }
    

    if( (seen_words.includes(words[word_n][0])) ){
        
    }
    
}

next_item.onclick = update_study_word


</script>









{% endblock %}