@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>