Add Submit button instead of onclick

Question

@inherits OptionCardBase

    <div class="option" @onclick="SelectOption">@Option</div>

Currently the options are captured with onclick ,can a submit button be added and option is captured when button is clicked?

Answer 1

Hi @Maui Learner

Currently the options are captured with onclick, can a submit button be added and option is captured when button is clicked?

You modify your code as below:

OptionCard.razor file: since you will use the button to submit the answer, in the option card, you can display the options with a radio button, then, you can use the radio button to keep the selected status. So, modify the code as below:

@inherits OptionCardBase
 
<input type="radio" id="@Option" name="options" @onclick="SelectOption">
<label for="@Option">@Option</label>

In the OptionCard.razor.css file, add style for the radio and label:

.option {
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    box-shadow: -0.3px 0.3px 3px rgba(0,0,0,0.3);
}

    .option:hover {
        background-color: #28a745;
        color: #fff;
        border-radius: 3px;
        padding: 10px;
    }
/* Hide the radio buttons */
input[type="radio"] {
    display: none;
}

/* Style for the labels (simulating dropdown options) */
label {
    display: block;
    padding: 8px;
    cursor: pointer;
    margin-bottom: 4px;
    box-shadow: -0.3px 0.3px 3px rgba(0,0,0,0.3);
}

/* Style for the selected label */
input[type="radio"]:checked + label {
    background-color: #28a745;
    color: #fff;
    border-radius: 3px;
    padding: 10px;
}

/* Optional: Style for the default label */
label:hover {
    background-color: #28a745;
    color: #fff;
}

In the QuizCard.razor file, add the submit button at the end of question title:

            <div class="quiz-header">
                @Questions[questionIndex].QuestionTitle   <button class="btn btn-primary" @onclick="AnswerSubmit">Submit</button>
            </div>
            <div class="quiz-body">
                @foreach (var option in Questions[questionIndex].Options)
                {
                    <OptionCard Option="@option" OnOptionSelected="OptionSelected"></OptionCard>
                }
            </div>

In the QuizCardBase.cs file:

        //using Microsoft.JSInterop;
        [Inject]
        protected IJSRuntime JS { get; set; }  //used to call javascript from .NET method.
        private string selectedanswer;         //used to store the selected answer.

        protected async void AnswerSubmit()
        {
            await JS.InvokeVoidAsync("ClearStatus");  //call the javascript function to clear the radio button status when question changes.

            var value = selectedanswer;
            if ((Questions[questionIndex].Options.ToList().IndexOf(selectedanswer.Trim()) + 1) == Questions[questionIndex].Correct)
            {
                score++;
            }
            else
            {
                failedQuestions[failedIndex] = Questions[questionIndex].QuestionTitle + "  Answer:  " + Questions[questionIndex].Answer;
                failedIndex++;


            }
            questionIndex++;
        }

        //after select the options, set the selected answer.
        protected void OptionSelected(string option)
        {
            selectedanswer = option.Trim();
            // Not working
            //if (option.Trim() == Questions[questionIndex].Options[Questions[questionIndex].Correct])

            //  if (option.Trim() == Questions[questionIndex].Answer.Trim())
            //if ((Questions[questionIndex].Options.ToList().IndexOf(option.Trim()) + 1) == Questions[questionIndex].Correct)
            //{
            //    score++;
            //}
            //else
            //{
            //    failedQuestions[failedIndex] = Questions[questionIndex].QuestionTitle + "  Answer:  " + Questions[questionIndex].Answer;
            //    failedIndex++; 
            //}
            //questionIndex++;
        }

In the Index.html page, add the JQuery reference and ClearStatus function.

    <script src="_framework/blazor.webview.js" autostart="false"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>

        function ClearStatus() {
            $('input[type="radio"]:checked').prop("checked", false); 
        }
    </script>
</body>

Then the result as below:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion