Untitled

@model BreakOutBox.Models.SpelViewModels.SpelSpelenViewModel
@{
    var progressie = Model.ProgressieInPad;
    //var progressiePercentage = ((((decimal)progressie[1] + 1) / ((decimal)progressie[0])) * 100);
    //var progressiePercentageCompleted = (int)(System.Math.Round(progressiePercentage, 0) - ((decimal)100 / progressie[0]));
    ViewData["Title"] = "Opdracht " + (progressie[1] + 1).ToString();
}

@section Head {
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
}

<body>
    <form method="post" id="formAntwoord" name="formAntwoord">
        <div style="text-align:center;">
            <div style="float:left;">
                <h2 style="text-decoration:underline"> @Model.Opdracht.Oefening.Naam </h2>
                <h4 style="text-decoration: underline">@(Model.Opdracht.Oefening.Vak.Naam)</h4>
                <p>
                    <h5>Progressie: Opdracht @(progressie[1] + 1) van de @(progressie[0]).</h5>
                </p>
                <p>Stap1: Maak de oefening</p>
                <p>
                    Stap2: Voer deze groepsbewerking uit <br /> op het antwoord.  <br /> Groepsbewerking: @(Model.Opdracht.Oefening.Groepsbewerking.ToString()).
                </p>
                <p><label asp-for="Groepsantwoord"></label></p>
                <p>Foute pogingen @Model.Opdracht.foutePogingen</p>
                <p>State: @TempData["State"]</p>
                @if (Model.Opdracht.foutePogingen < 3)
                {
                    <p><input id="Toegangscode" asp-for="Groepsantwoord" type="text" class="form-control" autocomplete="off" value="" /></p>
                    <p><span asp-validation-for="Groepsantwoord" class="text-danger" id="foutTeksvakLeeg"></span></p>
                    <button type="submit" class="" id="GaVerder">Geef antwoord in</button>
                    <p style="color:red">@TempData["FouteCode"]</p>
                }
                else
                {
                    <button type="submit" style="font-size:22px" onClick="window.location.reload()"> <i class="fa">&#xf021;</i></button>
                    <button type="button" id="Feedback" onclick="hulp()">Feeback</button>
                    <button type="submit" style="font-size:22px" asp-controller="Spel" asp-action="Opnieuw" asp-route-sessiecode="@Model.SessieCode" asp-route-groepid="@Model.GroepId"> <i class="fa">&#xf021;</i></button>
                    @*<input type="image" src="" name="saveForm" class="fa fa-refresh btTxt submit" id="saveForm" value="Refresh Page" onClick="window.location.reload()" />*@
                }
            </div>
        </div>
        <div style="float:right;width: 55%">
            <object height="750" type="application/pdf" data="~/opdrachtenG1/@Model.Opdracht.Oefening.Opgave" id="pdf_content"></object>
        </div>
        <div style="clear:both"></div>
    </form>
</body>

@section Scripts {
    <script asp-src-include="lib/jquery-validation/dist/jquery.validate.js"></script>
    <script asp-src-include="lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>

    <script>
        console.log("Antwoord " + @(Model.Opdracht.Oefening.Antwoord.ToString()));
        console.log("Toegangscode " + @(Model.ToegangscodeVolgendeOefening.ToString()));
        console.log("Antwoord met toegangscode: " + @(Model.Opdracht.Oefening.AntwoordMetGroepsbewerking()));
        console.log("Teller " + @Model.Opdracht.foutePogingen);
        console.log("Progressie " + @progressie[0] + " " + @progressie[1]);
        console.log("State " + @TempData["State"]);
        //console.log("SessieCode " + @Model.SessieCode);
        console.log("GroepId " +@Model.GroepId);

        if ("@(Model.JuistGeantwoordOpgave)" == "True") {
            document.getElementById("Toegangscode").value = (@(Model.Opdracht.Oefening.AntwoordMetGroepsbewerking().ToString()));
            document.getElementById("JuistGeantwoordtoegangscodeStringId").value = "True";

            if (@TempData["State"] !=3 && @TempData["State"] !=2) {
                groepsantwoordJuist();
            }
            else {
                geblokkeerd();
            }
            console.log("bool " + '@(Model.JuistGeantwoordOpgave)');
            console.log("bool " + '@(Model.JuistGeantwoordtoegangscode)');
        }

        function groepsantwoordJuist() {
            if (@(progressie[1] + 1) == @(progressie[0])){
                swal({
                    title: 'Juist! Schatkist gevonden!',
                    text: '',
                    showCancelButton: false,
                    confirmButtonText: 'sluit het spel'
                },
                function () {
                    console.log("hier");
                    window.location.href = "/Sessie/Index";
                });
            } else {
                swal({ // de swal van alle oefeningen
                    title: "Toegangscode volgende oefening",
                    text: "@Model.Opdracht.Actie.Omschrijving.ToString()",
                    type: "input",
                    showCancelButton: true,
                    closeOnConfirm: false,
                    animation: "slide-from-top",
                    inputPlaceholder: "Toegangscode"
                },
                function (inputValue) {
                    var j = @(Model.ToegangscodeVolgendeOefening);
                    if (inputValue === false) return false;

                    if (inputValue === "") {
                        swal.showInputError("You need to write something!");
                        return false;
                    }
                    if (!(inputValue == j)) {
                        swal.showInputError("Dit is niet de juiste toegangscode");
                        console.log("inputvalue1 :" + inputValue);
                        console.log("inputvalue2 :" + j);
                        return false;
                    }

                    swal("Juist!", "Op naar de volgende oefening!", );
                        @(Model.JuistGeantwoordtoegangscode) = true;
                    setTimeout(delaySubmit, 1000);
                });
            }
        }

        function hulp() {
            swal({
                title: "Feedback",
                type: "info",
                showCancelButton: false,
                closeOnConfirm: true,
                confirmButtonText: "Theorie pdf",
                animation: "slide-from-top",
            },
            function () {
                window.location.href = "http://example.com/new_url";
            });
            console.log("Gelukt");
        }

        function geblokkeerd() {
            swal({
                title: "Geblokkeerd",
                type: "Warning",
                showCancelButton: false,
                closeOnConfirm: true,
                confirmButtonText: "Refresh",
                animation: "slide-from-top",
            },
            function () {
                window.location.reload();
            });
        }

        function delaySubmit() {
            document.getElementById("formAntwoord").submit();
        }
    </script>
}

<div hidden>
    <p><input asp-for="GroepId" type="text" class="form-control" autocomplete="off" value="@(Model.GroepId)" /></p>
    <p><input asp-for="JuistGeantwoordtoegangscodeString" type="text" class="form-control" autocomplete="off" value="" id="JuistGeantwoordtoegangscodeStringId" /></p>
    <p><input asp-for="JuistGeantwoordOpgaveString" type="text" class="form-control" autocomplete="off" value="" id="JuistGeantwoordOpgaveStringId" /></p>
</div>