Anki Vocabulary Template for learning English Words along with Sentence

Card1

// Front Template
{{Word}}
<br>
<span id="image"> {{Image}} </span>

<br>
<button type="button" onClick="clickeme()" >Hint</button>

<br>
<a href="http://www.shabdkosh.com/pa/translate?e={{text:Word}}&l=pa">Punjabi</a>
<br>
<a href="http://flashcardmonkey.com/{{text:Word}}">Picture</a>
<br>
<a href="https://www.startpage.com/search?tbm=isch&q={{text:Word}}&oq={{text:Word}}&safe=on">Startpage Image</a><br>
<a href="http://getwords.com/results?searchString={{text:Word}}">Get Words Image</a>

<script>
var rand = Math.floor(Math.random()+Math.random())

if(rand == 1){
document.getElementById("image").style.visibility = "visible";

}
else{
document.getElementById("image").style.visibility = "hidden";

}

function clickeme(){
document.getElementById("image").style.visibility = "visible";

}

</script>

<br>
Tags::{{Tags}}

///// Styling
.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
}


#word{
display:none
}

////////Back Template////////////////////////////////////////////////////////

<hr id=answer>
{{Word}}
<br>
{{Image}}
<br>
{{meaning}}
<br>
{{sentence}}

Card2

//////// Front Template////////////////////////////////////////////////////////

<span id = "word"> {{Word}} </span>
<br>
<span id = "sentence"> {{sentence}}</span>
<br>
<span id ="hiddenSentence"></span>
<br>
<button type="button" onClick="clickeme()" >Hint</button>
<span id = "hint"></span>


<br>
<a href="http://www.shabdkosh.com/pa/translate?e={{text:Word}}&l=pa">Punjabi</a>
<br>
<a href="http://flashcardmonkey.com/{{text:Word}}">Picture</a>
<br>
<a href="https://www.startpage.com/search?tbm=isch&q={{text:Word}}&oq={{text:Word}}&safe=on">Startpage Image</a><br>
<a href="http://getwords.com/results?searchString={{text:Word}}">Get Words Image</a>
<br>
Tags::{{Tags}}

<script>
var low = 1;
var high = -1;
replace()
function replace(){
document.getElementById("sentence").style.visibility = "hidden";
document.getElementById("word").style.visibility = "hidden";

var sentence = document.getElementById("sentence").innerHTML;
var word = document.getElementById("word").textContent.trim().toLowerCase();
var regex = new RegExp(word, "g");
var startingWord = "";
var lastLetter = "";
if (low < word.length - 1)
{
 startingWord = " "+ word.trim().substring(0,low)+ repeated("_", word.length - low) ;
 lastLetter =  word.trim().slice(high)+" ";
}
else{
startingWord = word;
}


sentence = sentence.replace(regex, startingWord+lastLetter);
document.getElementById("hiddenSentence").innerHTML = sentence
}
function repeated(str, times){

repeatedString = ""
for(i = 0; i< times; i++){
repeatedString += str

}
return repeatedString

}
function clickeme(){
low += 1;
/* high -= 1 */;

replace()

}
</script>

///////Styling
.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
}


#word{
display:none
}

////////////// Back Template//////////////////////////////////////////////////////////
<hr id=answer>

<br>
{{Word}}
<br>
{{Image}}
<br>{{meaning}}
<br>
{{sentence}}

<script>
document.getElementById("sentence").style.visibility = "visible";
document.getElementById("hiddenSentence").style.visibility = "hidden";
</script>