<!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>
    th, td {
        border: 1px solid red;
        border-collapse: collapse;
        padding: 5px;
    }

    table {
        display: none;
        border-collapse: collapse;
    }

    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;
    }
    
    span.correct {
        display: none;
    }
    
    div.test_word {
          position: fixed;
  top: 100px;
  left: 30px;
  width: 500px;
  border: 3px solid #73AD21;

    }
    button.no_accents {
        font-size:2vw;
        color: teal;
        padding:0px 10px;
        margin: 0px 20px;
    }

</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 = -1

    // show next word with each character clickable and associated with function
    function next_word() {

        // if not first time, move previous word to results table 
        if (g_word_no > -1) {
            add_result()
        } else {
            // change button text to "Next" (from "Start")
            document.getElementById("btn_next_word").innerHTML = "Next"
        }

        // disable "next" button (gets reenabled when correct answer is given)
        //document.getElementById("btn_next_word").style.display = "none"
        document.getElementById("btn_next_word").disabled = true

        // advance to next word
        g_word_no++

        // if no more words, exit
        if (g_word_no >= g_word_list.words.length) {
            alert("all words tested... no more available")
            return
        }
        
        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)
        }
        // add button to say no accents
        var no_accents = document.createElement("button")
        no_accents.className = "no_accents"
        no_accents.innerHTML = "No Accents"
        if (count > 0) {
           no_accents.addEventListener("click", no_accents_incorrect)
        } else {
           no_accents.addEventListener("click", no_accents_correct)
        }
        result.appendChild(no_accents)
        
        // get meanings in to-language for display
        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)
        }

        // tick box (invisible to begin with)
        var span = document.createElement("span")
        span.className ="correct"
        span.id = "correct_tick"
        span.innerHTML = '<img width="32" height="32" src="https://img.icons8.com/color/48/checkmark--v1.png" alt="checkmark--v1"/>'
        result.appendChild(span)
        
        // add result to stress test area
        var div = document.getElementById("stress_test")
        while (div.hasChildNodes()) {
            div.removeChild(div.firstChild)
        }
        div.appendChild(result)
    }

    function char_clicked() {
        var clicked_id = event.target.id
        var prefix = clicked_id.substring(0,3)
        if (prefix == "imp") { // impossible
            alert("This character cannot have an accent: try again...")
        } else if (prefix == "inc") { // incorrect
            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)
            }
            // show tick 
            document.getElementById("correct_tick").style.display = "inline"
            // enable "next" button  
            //document.getElementById("btn_next_word").style.display = "block"
            document.getElementById("btn_next_word").disabled = false
        }
    }
    // sometimes a word has no accent...
    function no_accents_correct() {
        alert("That's right there are no accents for this one")
        // show tick
        document.getElementById("correct_tick").style.display = "inline"
        // show "next" button  
        //document.getElementById("btn_next_word").style.display = "block"
        document.getElementById("btn_next_word").disabled = false

    }
    
    // reaction to incorrect pressing of "no accents" button
    function no_accents_incorrect() {
        alert("There is at least one accent for this one...")
    }
    
    // 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();
    }
    
    // put word details into results table when correct letter clicked
    function add_result() {
        // construct row
        var row = document.createElement("tr")
        var cell = document.createElement("td")
        cell.innerHTML = g_word_list.words[g_word_no].word
        row.appendChild(cell)
        cell = document.createElement("td")
        var meaning_text = ""
        for(var i = 0; i < g_word_list.words[g_word_no].meanings.length; i++) {
            var meaning = g_word_list.words[g_word_no].meanings[i]
            meaning_text += "(" + meaning.part_of_speech_abbr + ") " + meaning.to_word + "; "
        }
        cell.innerHTML = meaning_text
        row.appendChild(cell)
        document.getElementById("results").appendChild(row)
        // add result to results table
        var table = document.getElementById("results")
        // if only header row, add after, else insert above previous row
        if (table.children.length == 1) {
            table.appendChild(row)
        } else {
            table.insertBefore(row, table.children[1])
        }
        table.style.display = "block"
    }

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

<h1>Tim's Language Helper</h1>
<h2>Stress Test</h2>
<p>When you press Start button a series of Greek words will be presented with the stress accent removed. <br/>Click the relevant letter to indicate which letter should have a stress accent. <br/>Or click the No Accents button if you think there should not be any accents.</p>
    <br/><button onclick="next_word()" id="btn_next_word">Start</button>

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

<table id="results">
    <tr><th>Word</th><th>Meaning</th></tr>
</table>

</body>
</html>