Show the question bank as a table with a stable, right-aligned actions column
All checks were successful
CI/CD / build-test-deploy (pull_request) Successful in 1m39s
All checks were successful
CI/CD / build-test-deploy (pull_request) Successful in 1m39s
The old list showed type, text, and points inline via flexbox, with no correct-answer info at all, and unstyled buttons that shifted position depending on question text length. A table with a shrink-to-fit actions column (text/kind/answer/points first, buttons last) fixes both: correct answers are now visible, and button position no longer depends on text length.
This commit is contained in:
@@ -65,6 +65,25 @@ let private kindLabel (t: QuestionTypeView) =
|
||||
| ShortAnswerT _ -> "Короткий ответ"
|
||||
| NumericT _ -> "Числовой"
|
||||
|
||||
/// Read-only rendering of a question's correct answer(s) for the teacher's
|
||||
/// question-bank table — distinct from `formFromSummary` in Types.fs, which
|
||||
/// unpacks the same data to prefill the edit form instead of displaying it.
|
||||
let private correctAnswerText (t: QuestionTypeView) =
|
||||
match t with
|
||||
| SingleChoiceT d ->
|
||||
d.Options
|
||||
|> List.tryFind (fun o -> o.Id = d.CorrectOptionId)
|
||||
|> Option.map (fun o -> o.Text)
|
||||
|> Option.defaultValue "—"
|
||||
| MultipleChoiceT d ->
|
||||
d.Options
|
||||
|> List.filter (fun o -> List.contains o.Id d.CorrectOptionIds)
|
||||
|> List.map (fun o -> o.Text)
|
||||
|> String.concat ", "
|
||||
| TrueFalseT b -> if b then "Верно" else "Неверно"
|
||||
| ShortAnswerT d -> String.concat ", " d.AcceptedAnswers
|
||||
| NumericT d -> sprintf "%s ± %s" (Format.points d.CorrectValue) (Format.points d.Tolerance)
|
||||
|
||||
let private questionsListView (model: Model) dispatch =
|
||||
Html.div [
|
||||
prop.className "questions-list"
|
||||
@@ -78,30 +97,45 @@ let private questionsListView (model: Model) dispatch =
|
||||
elif model.Questions.IsEmpty then
|
||||
Html.p "В этой теме пока нет вопросов"
|
||||
else
|
||||
Html.ul [
|
||||
Html.table [
|
||||
prop.className "questions-table"
|
||||
prop.children [
|
||||
for q in model.Questions ->
|
||||
Html.li [
|
||||
prop.key (string q.Id)
|
||||
prop.children [
|
||||
Html.span [ prop.className "question-kind"; prop.text (kindLabel q.Type) ]
|
||||
Html.text (sprintf " %s " q.Text)
|
||||
Html.span [
|
||||
prop.className "tag-mono"
|
||||
prop.text (sprintf "%s б." (Format.points q.Points))
|
||||
]
|
||||
Html.button [
|
||||
prop.type'.button
|
||||
prop.onClick (fun _ -> dispatch (StartEditQuestion q.Id))
|
||||
prop.text "Изменить"
|
||||
]
|
||||
Html.button [
|
||||
prop.type'.button
|
||||
prop.onClick (fun _ -> dispatch (RequestDeleteQuestion q.Id))
|
||||
prop.text "Удалить"
|
||||
Html.thead [
|
||||
Html.tr [
|
||||
Html.th [ prop.text "Текст вопроса" ]
|
||||
Html.th [ prop.text "Тип" ]
|
||||
Html.th [ prop.text "Правильный ответ" ]
|
||||
Html.th [ prop.text "Баллы" ]
|
||||
Html.th []
|
||||
]
|
||||
]
|
||||
Html.tbody [
|
||||
for q in model.Questions ->
|
||||
Html.tr [
|
||||
prop.key (string q.Id)
|
||||
prop.children [
|
||||
Html.td [ prop.text q.Text ]
|
||||
Html.td [ prop.className "question-kind"; prop.text (kindLabel q.Type) ]
|
||||
Html.td [ prop.text (correctAnswerText q.Type) ]
|
||||
Html.td [ prop.className "tag-mono"; prop.text (Format.points q.Points) ]
|
||||
Html.td [
|
||||
prop.className "question-actions-cell"
|
||||
prop.children [
|
||||
Html.button [
|
||||
prop.type'.button
|
||||
prop.onClick (fun _ -> dispatch (StartEditQuestion q.Id))
|
||||
prop.text "Изменить"
|
||||
]
|
||||
Html.button [
|
||||
prop.type'.button
|
||||
prop.onClick (fun _ -> dispatch (RequestDeleteQuestion q.Id))
|
||||
prop.text "Удалить"
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user