<!doctype html>
<html lang="en">
<head>
<title>Tim's Language Helper</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
    table.show, td.show {
        border: 1px solid red;
        border-collapse: collapse;
        padding:5px;
    }

    table.test_area {
        margin-left: 50px;
    }
    td.correct_answer {
        display: none;
    }
    td.wrong_answer {
        display: none;
        background-color: red;
        color: white;
        border: 1px solid red;
        border-radius: 5px;
        align-content: center;
    }

</style>
<script>

    function shuffle(array) {
      let currentIndex = array.length,  randomIndex;
    
      // While there remain elements to shuffle.
      while (currentIndex > 0) {
    
        // Pick a remaining element.
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex--;
    
        // And swap it with the current element.
        [array[currentIndex], array[randomIndex]] = [
          array[randomIndex], array[currentIndex]];
      }
    
      return array;
    }
    
    function addAnswer(answer) {
        //alert(answer.word + ": " + answer.type)
        table = document.getElementById("test_area")
        var row = document.createElement("tr")
        var cell = document.createElement("td")
        var btn = document.createElement("button")
        btn.innerHTML = "?"
        btn.id = "btn_" + answer.type + "_" + answer.meaning_id
        btn.addEventListener("click", answer_clicked)
        cell.appendChild(btn)
        row.appendChild(cell)
        
        cell = document.createElement("td")
        cell.className = "answer_word"
        cell.innerHTML = answer.word
        row.appendChild(cell)
        
        cell = document.createElement("td")
        cell.id = "result_" + answer.type + "_" + answer.meaning_id
        if (answer.type == "correct") {
            cell.className = "correct_answer"
            cell.innerHTML = "&#x2705;" // tick
        } else {
            cell.className = "wrong_answer"
            cell.innerHTML = "&nbsp;&#215;"
        }
        row.appendChild(cell)

        table.appendChild(row)
    }

    function answer_clicked(event) {
        var btn = event.target.id
        var x = btn.indexOf("_")
        var result_id = "result" + btn.substr(x)
        document.getElementById(result_id).style.display = "block"
        // record error or success on database
        var bits = btn.split("_")
        document.getElementById(btn).style.display = "none"
        if (bits[1] == "correct") {
            add_word_test_stat(bits[2])
        } else {
            add_word_test_error(bits[2], g_words[g_word_no].word_id)
        }

    }
    // AJAX request to add a word test error to database
    function add_word_test_error(meaning_id, wrong_word_id) {
        user_id = 1
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function() {
            //document.getElementById("result").innerHTML = this.responseText;
        }
        request = "add_word_test_error.php?user_id=" + user_id + "&meaning_id=" + meaning_id + "&wrong_word_id=" + wrong_word_id
        xhttp.open("GET", request, true);
        xhttp.send();
    }
    
    // AJAX request to add a successful word test statistic to database
    function add_word_test_stat(meaning_id) {
        user_id = 1
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function() {
            //document.getElementById("result").innerHTML = this.responseText;
        }
        request = "add_word_test_stat.php?user_id=" + user_id + "&meaning_id=" + meaning_id
        xhttp.open("GET", request, true);
        xhttp.send();
    }

    // AJAX request to get a word test
    function get_word_test(word_no) {
        word = g_words[word_no]
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function() {
            //alert("this.responseText:=" + this.responseText)
            document.getElementById("word").innerHTML = word.word;
            var test_json = JSON.parse(this.responseText)
            //alert("test_json: " + test_json)
            var correct_answers = test_json.correct_meanings
            var incorrect_answers = test_json.incorrect_meanings
            var random_answers = test_json.random_meanings
            var total = random_answers.length + incorrect_answers.length + correct_answers.length
            //alert ("total answers:=" + total)
            // create array of all answers
            answers = new Array()
            for (var i = 0; i < correct_answers.length; i++) {
                answers.push(correct_answers[i])
            }
            for (var i = 0; i < incorrect_answers.length; i++) {
                answers.push(incorrect_answers[i])
            }
            for (var i = 0; i < random_answers.length; i++) {
                answers.push(random_answers[i])
            }
            //clear display table and load answers in random order
            document.getElementById("test_area").innerHTML = ""
            shuffle(answers)
            answers.forEach(addAnswer)
        }
        request = "get_word_test.php?word_id=" + word.word_id
        xhttp.open("GET", request, true);
        xhttp.send();
    }
    

    // AJAX request to get a word test
    let g_words = null
    let g_word_no = 0
    function get_words_for_test() {
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function() {
            var test_json = JSON.parse(this.responseText)
            //alert("test_json.words: " + test_json.words.length)
            g_words = test_json.words
            get_word_test(0)
        }
        request = "get_words_for_test.php"
        xhttp.open("GET", request, true);
        xhttp.send();
    }

</script>
</head>
<body>

<h1>Tim's Language Helper</h1>
<h2>Get Word Test</h2>

    <br/><button onclick="get_words_for_test()">Get Words to Test</button>

<div id="word" class="word_area"></div>
<table id="test_area" class="test_area"></table>
<div id="result" class="result_area"></div>

</body>
</html>