widgets = ["demo", "answer", "choices", "target", "explanation"]

function hideWidgets(){
    for(var widget in widgets){
        var w = document.getElementById(widgets[widget]);
        if(w){
            w.style.display = "none";
        }
    }
}

function showAnimation(id, animImg){
    hideWidgets();
    var img = document.getElementById(id);
    if(img){
        img.style.display = "block";
        img.src = animImg;
        img.onclick="";
        setTimeout("showAnswerList('demo', 'choices');", 1750); 
    }
}
  
function showAnswerList(img, answers){
    hideWidgets();
    var answers = document.getElementById(answers);
    answers.style.display = "block";
}

function showAnswer(choice, mask){
    var ans = document.getElementById("answer");
    var correct = document.getElementById("correct");
    var incorrect = document.getElementById("incorrect");
    var mask_element = document.getElementById("mask");
    ans.style.display = "block";
    if (ans && choice && !mask){
        ans.style.visibility = "visible";
        incorrect.style.display = "none";
        if(mask_element){
            mask_element.style.display = "none";
        }
        correct.style.display = "block";
    }
    else if (ans && !choice && !mask){
        ans.style.visibility = "visible";
        correct.style.display = "none";        
        incorrect.style.display = "block";
        if(mask_element){
            mask_element.style.display = "none";
        }
    }
   else if(mask == true){
        ans.style.visibility = "visible";
        correct.style.display = "none";
        incorrect.style.display = "none";
        if(mask_element){
            mask_element.style.display = "block";
        }
    }else{
        return;
    }
}
  
function showTarget(){
    hideWidgets();
    var target = document.getElementById("target");
    target.style.display = "block";
}

function showExplanation(){
    hideWidgets();
    var exp = document.getElementById("explanation");
    exp.style.display = "block"
}