110 lines
3.6 KiB
Plaintext
110 lines
3.6 KiB
Plaintext
@model Church.Net.Entity.Vocabulary
|
|
|
|
<style>
|
|
|
|
.vocalInput {
|
|
border: none;
|
|
width: 10.5ch;
|
|
background: repeating-linear-gradient(90deg, dimgrey 0, dimgrey 1ch, transparent 0, transparent 1.5ch) 0 100%/100% 2px no-repeat;
|
|
color: dimgrey;
|
|
font: 5ch consolas, monospace;
|
|
letter-spacing: .5ch;
|
|
}
|
|
|
|
.vocalInput:focus {
|
|
outline: none;
|
|
color: dodgerblue;
|
|
}
|
|
</style>
|
|
|
|
<div id="divSpellingPractice" class="jumbotron m-auto text-center">
|
|
<span class="mb-1 badge badge-info">
|
|
@Model.PartOfSpeech.ToString()
|
|
|
|
</span>
|
|
<h1 class="display-3" id="MarskedAnswer">
|
|
@Model.MaskedWord
|
|
<button class="btn btn-success p-4" onclick="Speak('@Html.Raw(Model.Word)')"><i class="g-absolute-centered g-font-size-20 hs-admin-announcement"></i></button>
|
|
@if (Model.PartOfSpeech == Church.Net.Entity.Enumeration.PartsOfSpeech.VerbsUnRegular)
|
|
{
|
|
@Html.Raw("<br>" + Model.MaskedVerbPast + " ; " + Model.MaskedVerbParticiple)
|
|
}
|
|
</h1>
|
|
<p><img id="volImg" class="img-fluid img-thumbnail g-max-width-380" src="@Model.ImagesUrl" /></p>
|
|
<p class="lead" id="definition">
|
|
@Model.DefinitionEn
|
|
|
|
</p>
|
|
<hr class="my-4">
|
|
<div class="progress mb-2">
|
|
<div id="spellProgress" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
|
|
</div>
|
|
|
|
<input class="vocalInput" id="txSpell" onkeyup="checkAnswer(this.value)" style="width:@Html.Raw(Model.Word.Length*1.5)px" />
|
|
<br />
|
|
<br />
|
|
<p class="lead">
|
|
<button class="btn btn-primary btn-lg" role="button" onclick="ShowTheAnswer()">Check the answer</button>
|
|
</p>
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
|
var spellingAnswer, lenOfAnswer;
|
|
var successCount, successReq;
|
|
var nextBtnId;
|
|
function SetUpSpellingQuitze(answer, showingId) {
|
|
spellingAnswer = answer;
|
|
lenOfAnswer = answer.length;
|
|
nextBtnId = showingId;
|
|
successReq = @Model.PracticeTimes;
|
|
$("#txSpell").width(lenOfAnswer * 1.5 + 'ch');
|
|
successCount = 0
|
|
|
|
$("#spellProgress").width((successCount / successReq * 100) + "%");
|
|
$("#spellProgress").html(successCount + ' / ' + successReq);
|
|
$("#txSpell").focus();
|
|
}
|
|
|
|
function ShowTheAnswer() {
|
|
//al('@Model.Word');
|
|
|
|
|
|
Swal.fire({
|
|
title: '@Model.Word',
|
|
text:'@Html.Raw(Model.DefinitionCh.Replace(Environment.NewLine,""))',
|
|
imageUrl: '@Model.ImagesUrl',
|
|
imageHeight: 200,
|
|
imageAlt: 'Answer'
|
|
})
|
|
}
|
|
function checkAnswer(value) {
|
|
if (value.length == lenOfAnswer) {
|
|
if (value.toLowerCase() == spellingAnswer.toLowerCase()) {
|
|
successCount = successCount + 1;
|
|
} else {
|
|
successCount = 0;
|
|
}
|
|
$("#txSpell").val("");
|
|
if (successCount >= successReq) {
|
|
if (nextBtnId == 'divNextQuiz') {
|
|
$("#" + nextBtnId).show("divNextQuiz");
|
|
} else {
|
|
|
|
swal("Good job!", "", "success").then(function () {
|
|
window.location.href = nextBtnId;
|
|
});
|
|
}
|
|
//
|
|
}
|
|
}
|
|
$("#spellProgress").width((successCount / successReq * 100) + "%");
|
|
$("#spellProgress").html(successCount+' / '+successReq);
|
|
|
|
}
|
|
@*$(function () {
|
|
|
|
SetUpSpellingQuitze('@Model.Word', 5, "divNextQuiz");
|
|
})*@
|
|
</script> |