Misc · Asking and learning: a poll, a survey, a quiz and flashcards
misc::Poll turns to results once the owner holds the vote, with Change vote on Vote's stop. misc::Survey asks on one page and sends when each question is answered, thanking in Submit's place and focus. misc::Quiz checks, goes on, scores and starts again on one button. misc::Flashcards turn on a press and go round the deck, each face fading in.
This commit is contained in:
ZacharyZhang-NY committed
1 parent
a213248910
commit
86c9de7d0a
11 files changed
+1345
-3
No files matched your search
@@ -0,0 +1,315 @@
|
||||
use std::rc::Rc;
|
||||
|
||||
use gpui::{
|
||||
App, ElementId, FontWeight, InteractiveElement, IntoElement, ParentElement, RenderOnce,
|
||||
SharedString, Styled, Window, div, prelude::*,
|
||||
};
|
||||
|
||||
use crate::{
|
||||
buttons::{Button, ButtonVariant},
|
||||
forms::{Choice, RadioGroup},
|
||||
primitives::{Icon, IconName, tab_stop},
|
||||
theme::{ActiveTheme, IconSize, TextSize},
|
||||
typography::format,
|
||||
};
|
||||
|
||||
type OnScore = Rc<dyn Fn(usize, usize, &mut Window, &mut App)>;
|
||||
|
||||
/// A question, its options, and the right one.
|
||||
#[derive(Clone)]
|
||||
pub struct QuizQuestion {
|
||||
prompt: SharedString,
|
||||
options: Vec<SharedString>,
|
||||
right: usize,
|
||||
}
|
||||
|
||||
impl QuizQuestion {
|
||||
pub fn new(
|
||||
prompt: impl Into<SharedString>,
|
||||
options: impl IntoIterator<Item = impl Into<SharedString>>,
|
||||
right: usize,
|
||||
) -> Self {
|
||||
let options: Vec<SharedString> = options.into_iter().map(Into::into).collect();
|
||||
assert!(
|
||||
options.len() >= 2,
|
||||
"a quiz question needs two options or more"
|
||||
);
|
||||
assert!(
|
||||
right < options.len(),
|
||||
"right answer {right} of {} options",
|
||||
options.len()
|
||||
);
|
||||
Self {
|
||||
prompt: prompt.into(),
|
||||
options,
|
||||
right,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Where a quiz stands: the question, its pick, whether it was checked, the right answers so far, and whether Check came with no pick.
|
||||
#[derive(Default)]
|
||||
struct Sitting {
|
||||
at: usize,
|
||||
pick: Option<usize>,
|
||||
checked: bool,
|
||||
right: usize,
|
||||
done: bool,
|
||||
nudged: bool,
|
||||
}
|
||||
|
||||
impl Sitting {
|
||||
/// What the one button does next, and says.
|
||||
fn next(&self, count: usize) -> &'static str {
|
||||
match (self.done, self.checked, self.at + 1 == count) {
|
||||
(true, _, _) => "Try again",
|
||||
(false, false, _) => "Check",
|
||||
(false, true, false) => "Next",
|
||||
(false, true, true) => "See score",
|
||||
}
|
||||
}
|
||||
|
||||
/// Runs the button's step for question `right` of `count`.
|
||||
fn advance(&mut self, right: usize, count: usize) {
|
||||
match (self.done, self.checked) {
|
||||
(true, _) => *self = Sitting::default(),
|
||||
(false, false) => match self.pick {
|
||||
None => self.nudged = true,
|
||||
Some(pick) => {
|
||||
self.checked = true;
|
||||
self.right += usize::from(pick == right);
|
||||
}
|
||||
},
|
||||
(false, true) if self.at + 1 == count => self.done = true,
|
||||
(false, true) => {
|
||||
self.at += 1;
|
||||
self.pick = None;
|
||||
self.checked = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Questions one at a time: pick an option and Check shows the right one, then Next; the last gives the score, with Try again. Check, Next, See score and Try again are one button on one focus handle; Check with no pick asks for one.
|
||||
#[derive(IntoElement)]
|
||||
pub struct Quiz {
|
||||
id: ElementId,
|
||||
questions: Vec<QuizQuestion>,
|
||||
on_score: Option<OnScore>,
|
||||
}
|
||||
|
||||
impl Quiz {
|
||||
pub fn new(
|
||||
id: impl Into<ElementId>,
|
||||
questions: impl IntoIterator<Item = QuizQuestion>,
|
||||
) -> Self {
|
||||
Self {
|
||||
id: id.into(),
|
||||
questions: questions.into_iter().collect(),
|
||||
on_score: None,
|
||||
}
|
||||
}
|
||||
|
||||
/// Runs with the right answers and the question count when the score shows.
|
||||
pub fn on_score(
|
||||
mut self,
|
||||
handler: impl Fn(usize, usize, &mut Window, &mut App) + 'static,
|
||||
) -> Self {
|
||||
self.on_score = Some(Rc::new(handler));
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for Quiz {
|
||||
fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let id = self.id;
|
||||
let count = self.questions.len();
|
||||
assert!(count > 0, "quiz {id:?} has no questions");
|
||||
let sitting =
|
||||
window.use_keyed_state((id.clone(), "sitting"), cx, |_, _| Sitting::default());
|
||||
let action = tab_stop((id.clone(), "action").into(), true, window, cx);
|
||||
let theme = cx.theme();
|
||||
let colors = &theme.colors;
|
||||
let (at, pick, checked, right, done, nudged) = {
|
||||
let sitting = sitting.read(cx);
|
||||
(
|
||||
sitting.at,
|
||||
sitting.pick,
|
||||
sitting.checked,
|
||||
sitting.right,
|
||||
sitting.done,
|
||||
sitting.nudged,
|
||||
)
|
||||
};
|
||||
let question = self.questions[at].clone();
|
||||
let label = sitting.read(cx).next(count);
|
||||
let body = match (done, checked) {
|
||||
(true, _) => div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_1()
|
||||
.child(
|
||||
div()
|
||||
.debug_selector(|| format!("quiz-score-{right}-{count}"))
|
||||
.text_size(theme.text_size(TextSize::Xxl))
|
||||
.text_color(colors.fg)
|
||||
.child(format!("{right} of {count}")),
|
||||
)
|
||||
.child(div().text_color(colors.fg_muted).child(format::percent(
|
||||
right as f64 / count as f64,
|
||||
0,
|
||||
false,
|
||||
)))
|
||||
.into_any_element(),
|
||||
(false, false) => {
|
||||
let choices = question
|
||||
.options
|
||||
.iter()
|
||||
.enumerate()
|
||||
.map(|(ix, label)| Choice::new(ix.to_string(), label.clone()));
|
||||
let chose = sitting.clone();
|
||||
let group = RadioGroup::new((id.clone(), format!("options-{at}")), choices)
|
||||
.on_change(move |value, _, cx| {
|
||||
let ix = value.parse().expect("an option's place");
|
||||
chose.update(cx, |sitting, cx| {
|
||||
sitting.pick = Some(ix);
|
||||
sitting.nudged = false;
|
||||
cx.notify();
|
||||
})
|
||||
});
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_2()
|
||||
.child(match pick {
|
||||
Some(ix) => group.selected(ix.to_string()),
|
||||
None => group,
|
||||
})
|
||||
.when(nudged, |body| {
|
||||
body.child(
|
||||
div()
|
||||
.debug_selector(|| "quiz-pick-first".into())
|
||||
.text_size(theme.text_size(TextSize::Sm))
|
||||
.text_color(colors.danger)
|
||||
.child("Pick an answer first."),
|
||||
)
|
||||
})
|
||||
.into_any_element()
|
||||
}
|
||||
(false, true) => {
|
||||
let rows = question.options.iter().enumerate().map(|(ix, label)| {
|
||||
let (icon, tone) = match (ix == question.right, Some(ix) == pick) {
|
||||
(true, _) => (Some(IconName::CircleCheck), colors.success),
|
||||
(false, true) => (Some(IconName::CircleX), colors.danger),
|
||||
(false, false) => (None, colors.fg_muted),
|
||||
};
|
||||
div()
|
||||
.debug_selector(|| format!("quiz-row-{label}-{}", ix == question.right))
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_2()
|
||||
.text_color(tone)
|
||||
.child(
|
||||
div()
|
||||
.flex_none()
|
||||
.size(theme.icon_size(IconSize::Sm))
|
||||
.children(
|
||||
icon.map(|icon| Icon::new(icon).size(IconSize::Sm).color(tone)),
|
||||
),
|
||||
)
|
||||
.child(div().flex_1().min_w_0().child(label.clone()))
|
||||
});
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_2()
|
||||
.children(rows)
|
||||
.into_any_element()
|
||||
}
|
||||
};
|
||||
let on_score = self.on_score;
|
||||
let (advanced, focus) = (sitting.clone(), action.clone());
|
||||
let right_answer = question.right;
|
||||
let finishing = !done && checked && at + 1 == count;
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_3()
|
||||
.child(
|
||||
div()
|
||||
.text_size(theme.text_size(TextSize::Sm))
|
||||
.text_color(colors.fg_muted)
|
||||
.child(match done {
|
||||
true => "Score".to_string(),
|
||||
false => format!("Question {} of {count}", at + 1),
|
||||
}),
|
||||
)
|
||||
.when(!done, |quiz| {
|
||||
quiz.child(
|
||||
div().flex().child(
|
||||
div()
|
||||
.flex_1()
|
||||
.min_w_0()
|
||||
.text_color(colors.fg)
|
||||
.font_weight(FontWeight::SEMIBOLD)
|
||||
.child(question.prompt.clone()),
|
||||
),
|
||||
)
|
||||
})
|
||||
.child(body)
|
||||
.child(
|
||||
div().debug_selector(|| "quiz-action".into()).flex().child(
|
||||
Button::new((id.clone(), "action"), label)
|
||||
.variant(ButtonVariant::Primary)
|
||||
.focus_handle(&action)
|
||||
.on_click(move |_, window, cx| {
|
||||
let score = advanced.update(cx, |sitting, cx| {
|
||||
sitting.advance(right_answer, count);
|
||||
cx.notify();
|
||||
sitting.right
|
||||
});
|
||||
log::info!("quiz: {label}");
|
||||
if let (true, Some(on_score)) = (finishing, &on_score) {
|
||||
on_score(score, count, window, cx);
|
||||
}
|
||||
window.focus(&focus);
|
||||
}),
|
||||
),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
#[cfg(test)]
|
||||
mod tests {
|
||||
use super::Sitting;
|
||||
|
||||
#[test]
|
||||
fn one_button_checks_goes_on_scores_and_starts_again() {
|
||||
let mut sitting = Sitting::default();
|
||||
assert_eq!(sitting.next(2), "Check");
|
||||
sitting.advance(1, 2);
|
||||
assert!(sitting.nudged, "Check with no pick asks for one");
|
||||
sitting.pick = Some(1);
|
||||
sitting.advance(1, 2);
|
||||
assert_eq!(
|
||||
(sitting.checked, sitting.right, sitting.next(2)),
|
||||
(true, 1, "Next")
|
||||
);
|
||||
sitting.advance(1, 2);
|
||||
assert_eq!(
|
||||
(sitting.at, sitting.pick, sitting.checked),
|
||||
(1, None, false)
|
||||
);
|
||||
sitting.pick = Some(0);
|
||||
sitting.advance(2, 2);
|
||||
assert_eq!(
|
||||
(sitting.right, sitting.next(2)),
|
||||
(1, "See score"),
|
||||
"a wrong pick scores nothing"
|
||||
);
|
||||
sitting.advance(2, 2);
|
||||
assert_eq!((sitting.done, sitting.next(2)), (true, "Try again"));
|
||||
sitting.advance(2, 2);
|
||||
assert_eq!((sitting.at, sitting.right, sitting.done), (0, 0, false));
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user