<%# Code for a snapshot of the daily question %>

<% try { %>

    <% let questionSnippet = question; %>
    
    <script>

        $(document).ready(function () {

            // declare useful helper method
            function arraysEqual(a, b) {

                if (a === b) return true;
                if (a == null || b == null) return false;
                if (a.length !== b.length) return false;

                for (let i = 0; i < a.length; ++i) {
                    if (a[i] !== b[i]) return false;
                }
                return true;
            }

            // decheck all checkboxes/radio buttons
            $('.form-check-input').prop('checked', false);

            // hide all flashes and answer explanation upon loading
            $("#correct").hide(0);
            $("#wrong").hide(0);

            // configure check answer button
            $("#submit").click(() => {
                let correct = false;
                const type = $("#hiddenType").val();

                let correctAnswer = $("#hiddenAnswer").val().split('@');
                let numOfChoices = parseInt($("#numOfChoices").val());
                if(type == 'mc') {
                    
                    let userAnswer = 0;
                    for(i = 1; i <= numOfChoices; i++) {
                        if($("#"+i).is(':checked')) {
                            userAnswer = i;
                        }
                    }
                    
                    if(correctAnswer[0] == userAnswer) {
                        correct = true;
                    }
                } else if(type == 'sa') {

                    let userAnswer = [];
                    for(i = 1; i <= numOfChoices; i++) {
                        if($("#"+i).is(':checked')) {
                            userAnswer.push(""+i);
                        }
                    }
                
                    if(arraysEqual(userAnswer, correctAnswer)) {
                        correct = true;
                    }
                } else if(type == 'fr') {
                    let userAnswer = $("#fr-answer").val();
                    if(userAnswer.trim().toLowerCase() == correctAnswer[0].toLowerCase()) {
                        correct = true;
                    }
                }

                if(correct) {
                    $("#wrong").hide(0);
                    $("#correct").show(500);
                } else {
                    $("#wrong").show(500);
                    $("#correct").hide(0);
                }
            });

        });

    </script>

    <div class="card">

        <h5 class="card-header text-center"><%= new Date().toISOString().split('T')[0] %> Daily Question</h5>

        <div class="card-body">

            <p class="card-text"><%- questionSnippet.question %></p>

            <% if(question.type == "mc") { %>
                
                <div class="mt-4" id="mc-choices">
                    <% var choiceIndex = 1; %>
                    <% questionSnippet.choices.forEach((choice) => { %>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="answerChoice" id="<%= choiceIndex %>">
                            <label class="form-check-label" for="<%= choiceIndex %>"><%= String.fromCharCode(64+choiceIndex) %>. <%= choice %></label>
                            <% choiceIndex++; %>
                        </div>
                    <% }) %>
                </div>
                
            <% } else if(questionSnippet.type == "sa") { %>
                
                <div class="mt-4" id="sa-choices">
                    <% var choiceIndex = 1; %>
                    <% questionSnippet.choices.forEach((choice) => { %>
                        <div class="form-check my-1 me-sm-2">
                            <input type="checkbox" name="saChoice" class="form-check-input" id="<%= choiceIndex %>">
                            <label class="form-check-label" for="<%= choiceIndex %>"><%= String.fromCharCode(64+choiceIndex) %>. <%= choice %></label>
                        </div>
                        <% choiceIndex++; %>
                    <% }) %>
                </div>
            <% } else if(question.type == "fr") { %>
                    
                <div class="mt-4">
                    <div class="form-group">
                        <input type="text" class="form-control" id="fr-answer" placeholder="Enter your answer here" name="freeAnswer" value="">
                    </div>
                </div>
            <% } %>

            <input class="btn btn-primary my-2" type="button" value="Check Answer" id="submit">

            <input type="hidden" id="hiddenType" value="<%= questionSnippet.type %>">
            <input type="hidden" id="hiddenAnswer" value="<%= questionSnippet.answer.join('@') %>">
            <input type="hidden" id="numOfChoices" value="<%= questionSnippet.choices.length %>">

            <div class="alert alert-success" id="correct">Your answer is correct!</div>
            <div class="alert alert-danger" id="wrong">Your answer is incorrect!</div>

            <h6 class="card-title mt-4 text-center">Go to the daily question page to view the answer explanation!</h6>

        </div>
    </div>

<% } catch(err) { %>
    <p class="text-center"><font color="red">[Site component can not be displayed due to an internal error]</font></p>
<% } %>