Skip to content

Instantly share code, notes, and snippets.

@1nsp1r3rnzt
Last active April 8, 2021 02:56
Show Gist options
  • Save 1nsp1r3rnzt/8d8c3bfd9332c985fc13b01026daa892 to your computer and use it in GitHub Desktop.
Save 1nsp1r3rnzt/8d8c3bfd9332c985fc13b01026daa892 to your computer and use it in GitHub Desktop.
Anki Vocabulary Template for learning English Words along with Sentence
// 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}}
//////// 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment