<!--This doesn't appear on the card; we just want to steal its content later -->
<div id="image" style="display:none">{{{Sentence-Image}}}</div>
<div id="questionContainer">
<div id="sentenceClozed">{{{Sentence-Clozed}}}</div>
<div id="sentenceEnglish">{{{Sentence-English}}}</div>
</div>
<script>
// Get the image path. Assuming it's a .jpg.
var img = document.getElementById("image");
var start = img.innerHTML.indexOf("src=\"") +5;
var end = img.innerHTML.indexOf(".jpg\"");
var imgPath = img.innerHTML.substring(start, end) + ".jpg";
// And make it the background image
document.body.style.backgroundImage='url('+imgPath+')';
// Fill in the clozed portion with its English meaning
var eng = '{{{Vocabulary-English}}}'
var cloze = document.getElementById("sentenceClozed");
cloze.innerHTML = cloze.innerHTML.replace(/( )/, "「"+eng+"」");
</script>
<style type="text/css">
body
{
background-color:#000;
background-size:cover;
background-repeat:no-repeat;
background-position: 25% 25%;
margin:0px;
padding:0px;
height:100%;
}
/*Question card*/
#questionContainer
{
padding: 10px;
border-radius: 22;
background-color: rgba(0,0,0,0.7);
margin-left: 5%;
margin-right: 5%;
}
#sentenceClozed
{
color: #ed9;
font-size: 1.3em;
}
#sentenceClozed b, #sentenceClozed [style="font-weight: bold;"]
{
color: #f0b570;
background-color: rgba(0,0,0,0.2);
}
#sentenceEnglish
{
font-size: 1.1em;
color: #dfb;
margin-top: 10px;
}
/*Answer card*/
#answerContainer
{
border-radius: 22;
background-color: rgba(0,0,0,0.7);
padding: 10px;
margin-left: 5%;
margin-right: 5%;
}
#vocabFurigana
{
font-size: 1.5em;
color: #f90;
padding-bottom: 10px;
}
#reading
{
font-size: 1.5em;
color: #ed9;
}
#reading b, #reading [style="font-weight: bold;"]
{
color: #f0b570;
background-color: rgba(0,0,0,0.2);
}
#other
{
margin-top:1em;
}
#notes
{
font-size: .7em;
color: #fff;
margin-top: 1em;
}
/*Audio images for ankidroid*/
#sentenceAudio img
{
width: 50%;
margin-right:5px;
}
#vocabAudio img
{
width: 50%;
margin-left:5px;
}
</style>