@page "/takeblazorquiz"
@using BlazorQuiz.Common.Models
@inject HttpClient Http
 
<div class="d-flex justify-content-center">
    <!--<img src="../Images/COVID_banner.jpg" alt="Image" style="width:80%; height:300px" />-->
</div>
<br />
 
<h1>Take your Blazor quiz!</h1>
<p>Your current score is @currentScore</p>
<div class="d-flex justify-content-center">
</div>
<hr />
 
@if (quiz == null)
{
    <p><em>Loading...</em></p>
}
else
{
    int quizIndex = 0;
    @foreach (var quizItem in quiz)
    {
        <section>
            <h3>@quizItem.Question</h3>
            <div class="form-check">
                @{
                    int choiceIndex = 0;
                    quizScores.Add(0);
                }
                @foreach (var choice in quizItem.Options)
                {
                    int currentQuizIndex = quizIndex;
                    <input class="form-check-input" type="radio" name="@quizIndex" value="@choiceIndex" @onchange="@((eventArgs) => UpdateScore(Convert.ToInt32(eventArgs.Value), currentQuizIndex))" />
                    @choice
                    <br>
                    choiceIndex++;
                }
            </div>
        </section>
 
        quizIndex++;
        <br />
    }
}
 
@code {
 
    private Quiz[] quiz;
    List<int> quizScores = new List<int>();
    int currentScore = 0;
    private bool _loaded = false;
 
    protected override async Task OnInitializedAsync()
    {
        await LoadQuiz();
        _loaded = true;
    }
 
    private async Task LoadQuiz(){
        quiz = await Http.GetFromJsonAsync<Quiz[]>("https://blazorquizfunctionapp20221013002852.azurewebsites.net/api/BlazorQuiz");
    }
 
    void UpdateScore(int chosenAnswerIndex, int quizIndex)
    {
        var quizItem = quiz[quizIndex];
 
        if (chosenAnswerIndex == quizItem.IndexCorrectAnswer)
        {
            quizScores[quizIndex] = quizItem.Score;
        }
        else
        {
            quizScores[quizIndex] = 0;
        }
        currentScore = quizScores.Sum();
    }
}