hanzi
hanziNormalised
traditional
traditionalNormalized
pinyin
pinyinSyllabe
translation
topic
topicNumber
level
sound
origin


******************




<div class=tags> GrammarWiki -- Niveau {{level}}  --  Topic: {{topic}}{{#Tags}} -- {{/Tags}}{{Tags}}</div>

<div class="question">

	<div class="instructions">Reconnaissez le caractère qui s'affiche.</div>

	<div class="hanzi">{{hanzi}}</div>

</div>

****************

.body {height: 100%;}

.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: bisque;
 word-wrap: break-word; 
}

.question {
 margin: 10px;
 padding: 10px;
 border: 1px solid red;
 border-shadow: 5px 10px;
 border-radius: 15px;
 background-color: lightgrey;
}

.reponse {
 margin: 10px;
 padding: 10px;
 background-color:lightgrey; 
 border-radius: 15px;;
 border:1px solid red;
 flex-basis: 70%;
}

.reponse1 {
 margin: 10px;
 padding: 10px;
 background-color:lightgrey; 
 /*border-radius: 15px;*/
 border:1px solid blue;
 flex-basis: 30%;
}

.reponseRecto {
 font-size: 25px;
 color: blue;
 margin: 10px;
 padding: 10px;
}

.monverso {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.comment {font-size: 15px; color:grey;}
.tags {color:gray;text-align:right;font-size:12pt;padding:15px;}
.note {color:gray;font-size:12pt;margin-top:20pt;}
.hint {font-size:12pt;}

.hanzi {
 font-size: 30px;
 font-family: "Noto Sans";
 color: blue;
}

.pinyin {
 font-size: 30px;
 font-family: "Noto Sans";
 color: red;
}

.français {
 font-size: 30px;
 font-family: "Noto Sans";
 color: darkgreen;
}

.anglais {
 font-size: 30px;
 font-family: "Noto Sans";
 color: green;
}

.instructions {
 margin: 35px;
 padding: 20px;
 font-size: 18px;
 color: purple;
 background-color: bisque;
 border: 1px solid black;
 /* background: bisque;*/
}

#typeans {
 font-family: "Noto Sans";
  font-size: 40px; 
}

.tone1 {color: red;}
.tone2 {color: orange;}
.tone3 {color: green;}
.tone4 {color: blue;}
.tone5 {color: gray;}


******************

<div class="reponse1">
 		Hanzi: <span class="reponseRecto">{{hanzi}}</span>
	</div>

	<hr id=answer>

	<div class="reponse">
		<div class="pinyin">{{pinyin}}</div>
		<hr id=answer>
		<div class="anglais">{{translation}}</div>
		{{sound}}
	</div>