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

    span.clickable {
        font-size:3vw;
        color: blue;
    }

    span.part_of_speech {
        font-size:2vw;
        color: orange;
        padding:0px 10px;
    }

    span.meaning {
        font-size:2vw;
        color: black;
    }
</style>
<script>

// Greek letters
const all_greek_lc = "αβγδεζηθικλμνοξπρσςτυφχψω"
const all_greek_uc = "ΑΒΓΔΕΖΗΘΙΚΛΜΝΟΞΠΡΣΤΥΦΧΨΩ"
const accented_chars   = "άέήίόύώ"
const unaccented_chars = "αεηιουω"

let g_word_list = null
let g_word_no = 0

    function display_charcodes(original_text) {
        
        var result = ""
        for (var i = 0; i < original_text.length; i++) {
            result += '<tr><td class="original">' + original_text.charAt(i) + '</td><td>' + original_text.charCodeAt(i) + '</td></tr>'
        }
        return result
    }
    function display_clickable_chars() {
        
        var original_text = g_word_list.words[g_word_no].word
        var result = document.createElement("div")
        var count = 0 // number of accented characters
        for (var i = 0; i < original_text.length; i++) {
            var span = document.createElement("span")
            span.className ="clickable"
            
            // if not an accented character, output as is
            var accented = false
            var pos = accented_chars.indexOf(original_text.charAt(i))
            if (pos < 0) {
                span.innerHTML = original_text.charAt(i)
                pos = unaccented_chars.indexOf(original_text.charAt(i))
                if (pos < 0) {
                    // id signifies impossible to have been correct
                    span.id = "imp_" + i 
                } else {
                    // id signifies incorrect (but could have been correct)
                    span.id = "inc_" + i
                }
            } else {
                // accented character changed for unaccented, id prefix is cor_ correct
                span.innerHTML = unaccented_chars.charAt(pos)
                span.id = "cor_" + count++
            }
            span.addEventListener("click", char_clicked)
            result.appendChild(span)
        }
        for (var i = 0; i < g_word_list.words[g_word_no].meanings.length; i++) {
            var span = document.createElement("span")
            span.className ="part_of_speech"
            span.innerHTML = "(" + g_word_list.words[g_word_no].meanings[i].part_of_speech_abbr + ")"
            result.appendChild(span)
            span = document.createElement("span")
            span.className ="meaning"
            span.innerHTML = g_word_list.words[g_word_no].meanings[i].to_word + ";"
            result.appendChild(span)
        }
        var span = document.createElement("span")
        span.className ="correct"
        span.innerHTML = '<img width="48" height="48" src="https://img.icons8.com/color/48/checkmark--v1.png" alt="checkmark--v1"/>'
        result.appendChild(span)
        result.id = "test_" + count
        var div = document.getElementById("stress_test")
        if (div.children.length == 0) {
            div.appendChild(result)
        } else {
            div.insertBefore(result, div.children[0])
        }
        g_word_no++
    }

    function char_clicked() {
        var clicked_id = event.target.id
        var prefix = clicked_id.substring(0,3)
        if (prefix == "imp") {
            alert("This character cannot have an accent: try again...")
        } else if (prefix == "inc") {
            alert("Wrong character selected: try again...")
        } else {
            var unaccented = document.getElementById(clicked_id).innerHTML
            var pos = unaccented_chars.indexOf(unaccented)
            if (pos >= 0) {
                document.getElementById(clicked_id).innerHTML = accented_chars.charAt(pos)
            }
            //alert("Correct! Well done!")
        }
        var container = document.getElementById("stress_test")
    }

    // show character codes of characters 
    function show_chars() {
        document.getElementById("chars").innerHTML = display_charcodes(all_greek_lc)
    }
    
    // AJAX request to get word list
    function get_words(from_language, to_language) {
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function() {
            //alert("this.responseText:=" + this.responseText)
            g_word_list = JSON.parse(this.responseText)
        }
        request = "get_words.php?from_language=2&to_language=1&randomise=1"
        xhttp.open("GET", request, true);
        xhttp.send();
    }

</script>
</head>
<body onload="get_words()">

<h1>Tim's Language Helper</h1>
<h2>Stress Check</h2>
    <br/><button onclick="show_chars()">Show Characters</button>
    <br/><button onclick="display_clickable_chars()">Next</button>

<table id="chars">
</table>

<div id="stress_test"></div>

</body>
</html>