javascript/index.js

var language = "spanish"
function translatePage() {
    var data
    var links
    if (language === "spanish") {
        data = english_data
        links = english_links

        document.getElementById("translate").innerHTML = "<img id=\"flag-translate\" src=\"images/spain.png\" alt=\"\"> Español"
        language = "english"
    } else {
        data = spanish_data
        links = spanish_links

        document.getElementById("translate").innerHTML = "<img id=\"flag-translate\" src=\"images/united-states.png\" alt=\"\"> English"
        language = "spanish"
    }

    displayElements(language)
    

    // Head
    document.getElementById("subname").innerHTML = data['toolSubname']
    document.getElementById("intro_1").innerHTML = data['introduction_1']
    document.getElementById("intro_2").innerHTML = data['introduction_2']

    // Main buttons
    document.getElementById("hf").innerHTML = data['hf_btn']
    document.getElementById("ccad").innerHTML = data['ccad_btn']
    document.getElementById("tutorial").innerHTML = data['tutorial_btn']

    // Cards

        // Word bias

            // Labels
    document.getElementById("word-bias-title").innerHTML = data['wordBias']['title']
    document.getElementById("word-bias-description").innerHTML = data['wordBias']['description']
    document.getElementById("word-bias-tutorial").innerHTML = data['wordBias']['tutorial']
    document.getElementById("word-bias-manual-1").innerHTML = data['wordBias']['manual-1']
    document.getElementById("word-bias-manual-2").innerHTML = data['wordBias']['manual-2']
    
            // Buttons href
    document.getElementById('word-bias-demo').href = links['wordBias']['demo']
    document.getElementById("word-bias-tutorial").href = links['wordBias']['tutorial']
    document.getElementById("word-bias-manual-1").href = links['wordBias']['manual-1']
    document.getElementById("word-bias-manual-2").href = links['wordBias']['manual-2']

        // Phrase bias

            // Labels
    document.getElementById("phrase-bias-title").innerHTML = data['phraseBias']['title']
    document.getElementById("phrase-bias-description").innerHTML = data['phraseBias']['description']
    document.getElementById("phrase-bias-tutorial-1").innerHTML = data['phraseBias']['tutorial-1']
    document.getElementById("phrase-bias-tutorial-2").innerHTML = data['phraseBias']['tutorial-2']
    document.getElementById("phrase-bias-manual-1").innerHTML = data['phraseBias']['manual-1']
    document.getElementById("phrase-bias-manual-2").innerHTML = data['phraseBias']['manual-2']

            // Buttons href
    document.getElementById('phrase-bias-demo').href = links['phraseBias']['demo']       
    document.getElementById("phrase-bias-tutorial-1").href = links['phraseBias']['tutorial-1']
    document.getElementById("phrase-bias-tutorial-2").href = links['phraseBias']['tutorial-2']
    document.getElementById("phrase-bias-manual-1").href = links['phraseBias']['manual-1']
    document.getElementById("phrase-bias-manual-2").href = links['phraseBias']['manual-2']

        // Data bias

            //Labels
    document.getElementById("data-bias-title").innerHTML = data['dataBias']['title']
    document.getElementById("data-bias-description").innerHTML = data['dataBias']['description']
    document.getElementById("data-bias-tutorial").innerHTML = data['dataBias']['tutorial']
    document.getElementById("data-bias-manual").innerHTML = data['dataBias']['manual']

    document.getElementById("data-bias-demo").href = links['dataBias']['demo']
    document.getElementById("data-bias-tutorial").href = links['dataBias']['tutorial']
    document.getElementById("data-bias-manual").href = links['dataBias']['manual']

    // Footer
    document.getElementById("footer-description").innerHTML = data['footer']
}

function displayElements(language) {
    // Hide elements when in English version
    if (language === "english") {

        // HugginfFace button
        document.getElementById("hf").style.display = 'none'

        // Word bias manuals
        document.getElementById("word-bias-manual-1").style.visibility = 'hidden'
        document.getElementById("word-bias-manual-2").style.visibility = 'hidden'

        // Phrase bias manuals
        document.getElementById("phrase-bias-manual-1").style.visibility = 'hidden'
        document.getElementById("phrase-bias-manual-2").style.visibility = 'hidden'

        // Data bias card
        document.getElementById("data-bias-card").style.display = 'none'
    } else {

        // HugginfFace button
        document.getElementById("hf").style.display = 'block'

        // Word bias manuals
        document.getElementById("word-bias-manual-1").style.visibility = 'visible'
        document.getElementById("word-bias-manual-2").style.visibility = 'visible'

        // Phrase bias manuals
        document.getElementById("phrase-bias-manual-1").style.visibility = 'visible'
        document.getElementById("phrase-bias-manual-2").style.visibility = 'visible'

        // Data bias card
        document.getElementById("data-bias-card").style.display = 'block'
    }
}