added shorter syntax for multipel choice

This commit is contained in:
2023-12-12 12:09:39 -07:00
parent 95b913ec05
commit a4b260941f
11 changed files with 408 additions and 437 deletions

View File

@@ -138,7 +138,12 @@ short_answer
---
points: 4
the underscore is optional
short answer";
short answer
---
this is a matching question
^ left answer - right dropdown
^ other thing shown - another option
";
}
<div class="d-flex flex-column py-3" style="height: 100vh;">

View File

@@ -1,88 +0,0 @@
@code {
[Parameter, EditorRequired]
public LocalQuizQuestionAnswer Answer { get; set; } = default!;
[Parameter, EditorRequired]
public int AnswerIndex { get; set; } = default!;
[Parameter, EditorRequired]
public int QuestionIndex { get; set; } = default!;
[Parameter, EditorRequired]
public LocalQuizQuestion Question { get; set; } = default!;
[Parameter, EditorRequired]
public Action<LocalQuizQuestionAnswer, int> SaveAnswer { get; set; } = (_, _) => {};
private string label => "question_" + QuestionIndex + "_answer_" + AnswerIndex;
private string _text { get; set; } = string.Empty;
private string text
{
get => _text;
set
{
_text = value;
SaveAnswer(Answer with { Text = _text }, AnswerIndex);
}
}
protected override void OnParametersSet()
{
if(_text == string.Empty)
_text = Answer.Text;
base.OnParametersSet();
}
private void handleOneAnswerChange()
{
SaveAnswer(Answer with {Correct = !Answer.Correct}, AnswerIndex);
}
}
<div class="row">
<div class="col-auto my-auto">
@if(Question.QuestionType == QuestionType.MULTIPLE_ANSWERS)
{
<div class="form-check form-switch">
<input
class="form-check-input"
type="checkbox"
role="switch"
id="@label"
checked="@Answer.Correct"
@onchange="@(() => handleOneAnswerChange())"
>
<label
class="form-check-label" for="@label">
Is Correct
</label>
</div>
}
@if(Question.QuestionType == QuestionType.MULTIPLE_CHOICE)
{
<div class="form-check">
<input
class="form-check-input"
type="radio"
id="@label"
checked="@Answer.Correct"
@onchange="@(() => handleOneAnswerChange())"
>
<label
class="form-check-label" for="@label">
Is Correct
</label>
</div>
}
</div>
<div class="col">
<div class="m-1">
<textarea
class="form-control"
@bind="text"
@bind:event="oninput"
/>
</div>
</div>
</div>

View File

@@ -18,44 +18,65 @@
@((MarkupString)Question.HtmlText)
@foreach(var answer in Question.Answers)
@if(Question.QuestionType == QuestionType.MATCHING)
{
string answerPreview = answer.HtmlText.StartsWith("<p>")
? answer.HtmlText.Replace("<p>", "<p class='m-0'>")
: answer.HtmlText;
<div class="mx-3 mb-1 bg-dark px-2 rounded rounded-2 d-flex flex-row border">
@if(answer.Correct)
{
<svg
style="width: 1em;"
class="me-1 my-auto"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M4 12.6111L8.92308 17.5L20 6.5"
stroke="var(--bs-success)"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
}
else
{
<div
class="me-1 my-auto"
style="width: 1em;"
>
@if(Question.QuestionType == QuestionType.MULTIPLE_ANSWERS)
{
<span>[ ]</span>
}
</div>
}
<div class="markdownQuizAnswerPreview p-1">
@((MarkupString)answerPreview)
@foreach(var answer in Question.Answers)
{
<div class="mx-3 mb-1 bg-dark px-2 rounded rounded-2 border row">
<div
class="col text-end my-auto p-1"
>
@answer.Text
</div>
<div
class="col my-auto"
>
@answer.MatchedText
</div>
</div>
</div>
}
}
else
{
@foreach(var answer in Question.Answers)
{
string answerPreview = answer.HtmlText.StartsWith("<p>")
? answer.HtmlText.Replace("<p>", "<p class='m-0'>")
: answer.HtmlText;
<div class="mx-3 mb-1 bg-dark px-2 rounded rounded-2 d-flex flex-row border">
@if(answer.Correct)
{
<svg
style="width: 1em;"
class="me-1 my-auto"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M4 12.6111L8.92308 17.5L20 6.5"
stroke="var(--bs-success)"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
}
else
{
<div
class="me-1 my-auto"
style="width: 1em;"
>
@if(Question.QuestionType == QuestionType.MULTIPLE_ANSWERS)
{
<span>[ ]</span>
}
</div>
}
<div class="markdownQuizAnswerPreview p-1">
@((MarkupString)answerPreview)
</div>
</div>
}
}